SkyDriveSample - Windows 8 CP - Part 2

MVVM 패턴을 적용해서 Sample을 완성했다. 프로젝트를 전체적으로 수정을 했기 때문에, 중요한 부분에 대해서만 설명을 하고, 세부적인 사항은 소스를 참조하기 바란다.

 

1. 완성 화면

 

 

 

2. App.xaml.cs

 

protected override void OnLaunched(LaunchActivatedEventArgs args)
{
    if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
    {
        //TODO: Load state from previously suspended application
    }

    // Create a Frame to act navigation context and navigate to the first page
    var rootFrame = new Frame();

    //뷰모델 인스턴스

    var viewModel = new BlankPageViewModel();
    rootFrame.Navigate(typeof(BlankPage), viewModel);

    // Place the frame in the current Window and ensure that it is active
    Window.Current.Content = rootFrame;
    Window.Current.Activate();
}

 

3. BlankPage.xaml

 

전체적인 화면 구성은 PhotoSkyCSharp 프로젝트의 GroupedItemsPage.xaml의 내용을 사용했다.

 

<GridView
    x:Name="itemGridView" Margin="116,0,40,46"
    AutomationProperties.AutomationId="ItemGridView"
    AutomationProperties.Name="Grouped Items"
    ItemsSource="{Binding GroupedItemsViewSource.View}"
    ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
    SelectionMode="None"
    IsItemClickEnabled="True">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>

    <GridView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    <Grid Margin="1,0,0,6">
                        <Button
                            AutomationProperties.Name="Group Title"
                            Content="{Binding Title}"
                            Style="{StaticResource TextButtonStyle}"/>
                    </Grid>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
            <GroupStyle.Panel>
                <ItemsPanelTemplate>
                    <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
                </ItemsPanelTemplate>
            </GroupStyle.Panel>
        </GroupStyle>
    </GridView.GroupStyle>

</GridView>

 

4. BlankPage.xaml.cs

 

public sealed partial class BlankPage : Page
{
    public BlankPageViewModel ViewModel
    {
        get { return this.DataContext as BlankPageViewModel; }
        set
        {
            this.DataContext = value;
            btnSignIn.SessionChanged += value.SessionChanged;
            itemGridView.ItemClick += value.ItemClick;
        }
    }

    public BlankPage()
    {
        this.InitializeComponent();
    }

 

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {

        //뷰 모델 연결
        ViewModel = e.Parameter as BlankPageViewModel;
    }
}

 

5. BlankPageViewModel.cs

 

namespace SkyDriveSample.ViewModels
{
    public class BlankPageViewModel : BindableBase
    {
        private string userName;
        /// <summary>
        /// 사용자 이름
        /// </summary>
        public string UserName
        {
            get { return userName; }
            set
            {
                userName = value;
                OnPropertyChanged();
            }
        }

        private BitmapImage userPicture;
        /// <summary>
        /// 사용자 이미지
        /// </summary>
        public BitmapImage UserPicture
        {
            get { return userPicture; }
            set
            {
                userPicture = value;
                OnPropertyChanged();
            }
        }

        private CollectionViewSource groupedItemsViewSource;
        /// <summary>
        /// 그룹 아이템 뷰 소스
        /// </summary>
        public CollectionViewSource GroupedItemsViewSource
        {
            get { return groupedItemsViewSource; }
            set
            {
                groupedItemsViewSource = value;
                OnPropertyChanged();
            }
        }

        private ObservableCollection<SkyDriveAlbum> itemGroups;
        /// <summary>
        /// 아이템 그룹 컬렉션
        /// </summary>
        public ObservableCollection<SkyDriveAlbum> ItemGroups
        {
            get { return this.itemGroups; }
            set
            {
                itemGroups = value;
                OnPropertyChanged();
            }
        }

        private SkyDriveAlbum selectedItemGroup;
        /// <summary>
        /// 선택된 앨범
        /// </summary>
        public SkyDriveAlbum SelectedItemGroup
        {
            get { return selectedItemGroup; }
            set
            {
                selectedItemGroup = value;
                OnPropertyChanged();
            }
        }

        private SkyDriveFileItem selectedFileItem;
        /// <summary>
        /// 선택된 파일
        /// </summary>
        public SkyDriveFileItem SelectedFileItem
        {
            get { return selectedFileItem; }
            set
            {
                selectedFileItem = value;
                OnPropertyChanged();
            }
        }

        private LiveConnectSession session;
        /// <summary>
        /// 라이브 컨넥션 세션 - app에 있는 세션을 뷰모델로 이동
        /// </summary>
        public LiveConnectSession Session
        {
            get
            {
                return session;
            }
            set
            {
                session = value;
                OnPropertyChanged();
            }
        }

        /// <summary>
        /// 생성자
        /// </summary>
        public BlankPageViewModel()
        {
            ItemGroups = new ObservableCollection<SkyDriveAlbum>();
            GroupedItemsViewSource = new CollectionViewSource();
            GroupedItemsViewSource.IsSourceGrouped = true;
            GroupedItemsViewSource.Source = ItemGroups;
            GroupedItemsViewSource.ItemsPath = new Windows.UI.Xaml.PropertyPath("Items");

 

            if (DesignMode.DesignModeEnabled == true)
            {
                //디자인 모드 실행 코드
            }
            else
            {
                //런타임 모드 실행 코드
            }

        }

 

        public void ItemClick(object sender, ItemClickEventArgs e)
        {
            var item = e.ClickedItem as SkyDriveFileItem;
            if (item != null)
            {
                SelectedFileItem = item;
                foreach (var group in ItemGroups)
                {
                    if (group.Items.Count(p => p.UniqueId == SelectedFileItem.UniqueId) > 0)
                    {
                        SelectedItemGroup = group;
                    }
                }

                //페이지 네비게이션
                var mainFrame = Window.Current.Content as Frame;
                mainFrame.Navigate(typeof(ItemDetailPage), this);
            }
        }

        /// <summary>
        /// 세션이 변경되면..
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        public void SessionChanged(object sender, Microsoft.Live.Controls.LiveConnectSessionChangedEventArgs e)
        {
            System.Diagnostics.Debug.WriteLine(e.Session.ToString());

            if (e.Status == LiveConnectSessionStatus.Connected && Session == null)
            {
                Session = e.Session;
                LoadProfile();
                LoadData();
            }
        }

        private async void LoadProfile()
        {
            //컨넥션 만들고
            LiveConnectClient client = new LiveConnectClient(Session);
            //내정보 가지고 오고
            LiveOperationResult liveOpResult = await client.Get("me");
            //결과를 런타임에서 만들고
            dynamic dynResult = liveOpResult.Result;
            UserName = dynResult.name;
            //내 사진을 가지고 오고
            liveOpResult = await client.Get("me/picture");
            //결과도 거시기하고
            dynResult = liveOpResult.Result;
            //로케이션 정보를 가지고 이미지 만들어서 사진에 바인딩
            UserPicture = new BitmapImage(new Uri(dynResult.location));
        }

        /// <summary>
        /// 스카이드라이브 데이터 소스
        /// </summary>
        private async void LoadData()
        {
            //세션을 새로 만들고
            LiveConnectClient client = new LiveConnectClient(Session);
            //앨범을 가지고 오고
            LiveOperationResult albumOperationResult = await client.Get("me/albums");
            //앨범 목록
            dynamic albumResult = albumOperationResult.Result;
            //앨범결과의 데이터에서
            foreach (dynamic album in albumResult.data)
            {
                //스카이드라이브 앨범생성
                var group = new SkyDriveAlbum(album.id, album.name, album.name, "../Assets/LightGray.png", album.description);
                //앨범아이디에 해당하는 파일들을 다시 조회
                LiveOperationResult pictureOperationResult = await client.Get(album.id + "/files");
                //사진결과
                dynamic pictureResult = pictureOperationResult.Result;
                //사진결과 데이터에서..
                foreach (dynamic picture in pictureResult.data)
                {
                    //스카이드라이브 파일생성
                    var pictureItem = new SkyDriveFileItem(picture.id, "", picture.name, picture.source, picture.description, picture.description, group);
                    //앨범에 파일 추가
                    group.Items.Add(pictureItem);
                }
                //앨범을 앨범그룹에 추가
                if(group.Items.Count > 0)
                    this.ItemGroups.Add(group);
            }
        }
    }
}

6. ItemDetailPage.xaml

Items Page를 추가한 후 PhotoSkyCSharp 프로젝트의 GroupDetailPage.xaml을 참고로 수정

 

7. ItemDetailPage.xaml.cs

BlankPage.xaml.cs과 거의 유사

 

8. 일단 기본적인 셈플은

완성이 되었다. 추가 적으로 작업을 한다면, Rx를 이용해서 좀더 빠른 반응속도를 올리는 정도가 남은 것 같다.

 

9. 소스

 

SkyDriveSample_2.zip