티스토리 뷰

반응형

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

반응형

'Previous Platforms > Samples' 카테고리의 다른 글

Using MVVM Pattern  (0) 2012.04.23
WebAPI using in Portable Library  (1) 2012.04.20
SkyDriveSample - Windows 8 CP - Part 1  (0) 2012.04.08
Using MVVM Pattern in Portable Library  (0) 2012.04.04
Using MEF in Windows 8 CP Metro style app  (2) 2012.04.02
댓글