グリッドアプリケーション
続いて、「グリッドアプリケーション」を作成してみましょう。
最初に作成した「新しいアプリケーション」と比べ、かなり初期ファイル数が増えているのが確認できます。
まずは、グリッドアプリケーションのページ構成からテンプレートの概要を掴みましょう。
ページ構成
グリッドアプリケーションは、8.0の頃のストアアプリにも存在しました。ページ構成はほぼ同じです。
グループアイテムページ(GroupedItemsPage.xaml)
グループ分けされた項目を表示するページです。
画面上の「Group Title:1 >」という表記部分がグループ名です。グループ名はクリックすることが可能で、クリックによってグループに所属するアイテムの一覧ページ(GroupDetailPage.xaml)へと遷移します。
グループ名の下部にある四角いタイルがアイテムです。アイテムはクリックすることで、アイテムの詳細(ItemDetailPage.xaml)に遷移します。
グループ詳細ページ(GroupDetailPage.xaml)
グループに所属するアイテムの一覧が表示されるページです。GroupDetailPageという名前のとおり、グループの詳細ページとも言えます。
アイテム詳細ページ(ItemDetailPage.xaml)
最後にアイテムの詳細ページです。グリッドアプリケーションを利用するシナリオとしては、以下のようなものが考えられます。
都道府県で「中国地方」というグループがあり、そこに岡山、広島といった中国地方に所属する県を表示。広島をクリックすると広島県の詳細情報が表示されるというような構成の場合に有効なテンプレートです。
ファイル構成
続いて、ファイル構成を見てみましょう。
グリッドアプリケーションは8.0のストアアプリでも存在しましたが、ファイルの中身は8.1でかなり変更が加えられています。
Commonフォルダ
Commonフォルダには、便利なユーティリティクラスが用意されています。
NavigationHelper.csにはページ遷移などの処理が記述されています。8.0の頃はLayoutAwarePageクラスが担っていた機能です。NavigationHelper.csにはコメントが詳細に記載されているのでそれを一読してみるだけで利用可能になっています。
ObservableDictionary.csはクラス名から推測できる通り、Observable(通知可能な)Dictionaryクラスです。テンプレートの初期ViewModelとして以下のように利用されています。
private ObservableDictionary defaultViewModel = new ObservableDictionary();
個人的には、ViewModelは汎用的なObservableDictionaryを参考にしつつ、適切な型を指定したクラスに置き換えるべきだと考えています。ViewModelについても、後日ページを割いて紹介出来ればと思います。
RelayCommand.csは、XAMLからのコマンド呼び出しをサポートします。例えばItemDetailPage.xamlではボタンイベントを以下のように記述しています。
<Button x:Name="backButton" ~略~ Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
XAMLの利用経験があれば、Buttonをクリックした際のイベントはClickイベントハンドラーを用いて記述できることをご存知だと思いますが、上記のようにCommandを利用して記述することも可能です。先ほどのObservableDictionaryのViewModel指定もそうですが、WindowsストアアプリではMVVMの設計が用いられています。MVVMが広く知られて、テンプレートにも利用されるようになったことが伺えます。
<Button x:Name="backButton" Click="backButton_Click" />
SuspensionManager.csには、ストアアプリのライフサイクルを管理するためのコードが記載されています。
DataModelフォルダ
サンプルデータをJSON形式で記載したSampleData.jsonファイルと、それを読み取り表示するためのSampleDataSource.csが用意されています。



