Frame Windows8.1の設定のような、左側にリスト化された項目があり、項目をクリックすると右側のPageが切り替わるようなUIは、Page内にさらにFrameを置くことで実現できます。 ストアアプリは、ルートフレームとよばれるFrameインスタンスが一番下のレイヤにあり、そこにPageをNavigateすることでページ遷移をすることができます。 だからFrame.Navigate(typeof(Page))でページ遷移が可能となっています。 そこで、RootFrameでNavigateされているPageの中に、さらにFrameを置いて、そのFrameに別のページを遷移することで内部で複数のページを切り替えているようなUIを作ることができます。 MainPageはこのようにします。

左側にListView、そして右側にFrameタグを置きます。 コードビハインドでは内部に入れたFrameから、各pageにNavigateを行います。

あとは複数の遷移したいページを作ります。 今回はInlinePage1,InlinePage2,InlinePage3を作りました。 これで、左側のリストビューの項目をクリックすると、各ページへ遷移することができるようなUIを作ることができました。

Windows Phone8.1の追加 VisualStudio Update2をインストールした状態で、プロジェクト名を右クリック→[WindowsPhone8.1の追加]を押します。 このようなダイアログが出るのでOKを押すと ソリューション内にWindowsPhoneのプロジェクトとSharedプロジェクトが作成されます。 Windows8.1の追加 逆に、WindowsPhoneのプロジェクトにWindowsストアアプリを入れてユニバーサルアプリにすることもできます。 プロジェクト名を右クリック→[Windows8.1の追加]を押すと このようなダイアログがでるのOKを押します。 ソリューション内にWindowsストアアプリのプロジェクトと共有プロジェクトが作成されました。

VisualStudio Update2 ユニバーサルアプリをつくるには2014年4月16日時点でVisualStudio2013 Update2 RC版をインストールしておく必要があります。 新規プロジェクト VisualStudioのメニューバー→[ファイル]→[新規作成]→[プロジェクト]を選択します。 左側のテンプレートは[ユニバーサルアプリ]を選択し、空のアプリケーション(ユニバーサルアプリ)を選択します。 新規作成し、ソリューションエクスプローラーを見ると、 [アプリ名].Windows [アプリ名].WindowsPhone [アプリ名].Shared の3つのプロジェクトがあります。 [アプリ名].Windowsはストアアプリのプロジェクトで、[アプリ名].WindowsPhoneはWindowsPhoneのプロジェクトです。 [アプリ名].SharedはストアアプリプロジェクトとPhoneプロジェクトをまたぐ、PCL(Portable Class Library)より少し自由度の高い共有プロジェクトとなります。 つまり共通化したい情報(Resourceなど)は共有プロジェクトに入れ、ストアとPhoneの両方から参照するという形になります。

ユニバーサルアプリとは ユニバーサルアプリとは、WindowsストアアプリとWindowsPhoneのアプリ間で(ほぼ)互換性を保ったアプリです。 WindowsストアアプリのプロジェクトとWindowsPhoneアプリのプロジェクトが一つのソリューションファイル内に入り、ストアアプリとPhoneアプリ間で共通される共有プロジェクトが存在します。 主な利点としては、 ・アプリ購入の共通化 ・アプリ内課金の共通化 ・共有プロジェクトによるリソースの共通化 ・ライブタイルなどのプッシュ通知チャネルの共通化 ・コードの互換性の向上 ・ローミングデータの共通化 などがあります。 つまり、Windowsストアアプリで購入したアプリがユニバーサルアプリであるならば、WindowsPhoneでも購入情報が共通化され、Phone版もダウンロードできます。 ユニバーサルアプリの概要についての詳細は@ITさんの記事を参考にしてください。 [ユニバーサルWindowsアプリ開発の勧め via @IT]

CollectionViewSource GridViewはグループ化された項目を表示することができます。 WindowsストアアプリのGridVewテンプレートなどはグループ化された項目が表示できるようになっています。 しかし通常のコレクションをItemsSourceに入れてもグループ化は表現できません。 そこでCollectionViewSourceというものを使います。 CollectionViewSourceはグループ化されたコレクションのバインドをサポートし、グループ化されたコンテンツを表示するときによく使われます。 グループ化されたコレクションを作る 今回はSampleItemというアイテムをSmapleGroupクラスでグループ化し、そのグループのコレクションをMainViewModelが持つという形のサンプルデータを作ります。 データの最小単位のアイテムです。 タイトルとテキストのメンバを所持します。

SmapleItemのコレクションを持つグループです。 グループタイトルというメンバを持ちます。

MainVeiwModelです。SmapleItemGroupのコレクションをもち、コンストラクタでサンプルデータを入れています。 このmainViewModelが直接PageのDataContextに入ります。

Viewを作る 続いてXAMLです。 PageのリソースにCollectionViewSource型のリソースを作ります。 SourceプロパティにはMainViewModelのGroupsコレクションとバインドをし、 ItemsPathプロパティにはSampleItemGroup内にあるItemsコレクションの名前を指定します。 ItemsPathはBindingでは無いので注意しましょう。 IsSourceGroupedをTrueにしないとグループ化されません。

続いてGridViewです。 ItemsSourceには先ほど作成したCollectionViewSourceとのバインドを行います。 ItemTemplateでは実際のアイテム1つのテンプレートを指定します。 SmapleItemがDataContextに入るのでTitleとTextをバインドさせます。 GroupStyleではHeaderTemplateを編集し、 グループタイトルがButtonに表示されるようにします。 SampleItemGroupがDataContextに入るのでGroupTitleとバインドをおこないます。

最後にPageのDataContextにMainViewModelを入れたら完成です。

グループ化されたコレクションがGridViewにグループ化されて表示されています。