티스토리 뷰

반응형

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
댓글
  • 프로필사진 정근우 샘플실행해보니 3군데에서 에러가 납니다.

    오류 1 'Windows.UI.ViewManagement.ApplicationView'에 'GetForCurrentView'에 대한 정의가 없습니다. C:\Users\근우\Documents\SkyDriveSample_2\SkyDriveSample\Common\LayoutAwarePage.cs 132 33 SkyDriveSample

    오류 2 'ApplicationViewStateChangedEventArgs' 형식 또는 네임스페이스 이름을 찾을 수 없습니다. using 지시문 또는 어셈블리 참조가 있는지 확인하십시오. C:\Users\근우\Documents\SkyDriveSample_2\SkyDriveSample\Common\LayoutAwarePage.cs 142 63 SkyDriveSample


    오류 3 'Windows.UI.ViewManagement.ApplicationView'에 'GetForCurrentView'에 대한 정의가 없습니다. C:\Users\근우\Documents\SkyDriveSample_2\SkyDriveSample\Common\LayoutAwarePage.cs 172 33 SkyDriveSample


    이런에러 보셨나요
    2012.06.20 10:08
  • 프로필사진 Connor Park 위의 에러는 Relase Preview 버전에서 뷰스테이트 관련 부분이 변경되어서 나는 오류 입니다.
    기존 셈플은 Consumer Preview때 만들어진 것입니다.
    뷰 스테이트 관련 부분을 모두 막고 실행하시면 실행 가능하시리라 생각됩니다.
    2012.06.20 13:36 신고
댓글쓰기 폼
반응형
Total
712,874
Today
7
Yesterday
311
«   2022/10   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          
10-07 02:42
글 보관함