SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

速習 Windowsストアアプリケーション

Windows 8.1対応のストアアプリを作成する

速習 Windowsストアアプリケーション 第11回

グリッドアプリケーション

 続いて、「グリッドアプリケーション」を作成してみましょう。

 最初に作成した「新しいアプリケーション」と比べ、かなり初期ファイル数が増えているのが確認できます。

「グリッドアプリケーション」の初期ファイル構成
「グリッドアプリケーション」の初期ファイル構成

 まずは、グリッドアプリケーションのページ構成からテンプレートの概要を掴みましょう。

ページ構成

 グリッドアプリケーションは、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として以下のように利用されています。

ObservableDictionaryクラスの利用
private ObservableDictionary defaultViewModel = new ObservableDictionary();

 個人的には、ViewModelは汎用的なObservableDictionaryを参考にしつつ、適切な型を指定したクラスに置き換えるべきだと考えています。ViewModelについても、後日ページを割いて紹介出来ればと思います。

 RelayCommand.csは、XAMLからのコマンド呼び出しをサポートします。例えばItemDetailPage.xamlではボタンイベントを以下のように記述しています。

ObservableDictionaryクラスの利用
<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が用意されています。

次のページ
開発の進め方

この記事は参考になりましたか?

速習 Windowsストアアプリケーション連載記事一覧

もっと読む

この記事の著者

西村 誠(ニシムラ マコト)

 Microsoft MVP Windows Platform Development。 Flash、PHPの開発経験もあり国産ECサイト構築フレームワーク「EC-CUBE」の公式エバンジェリストでもある。 ブログ:眠るシーラカンスと水底のプログラマー 著書:基礎から学ぶ Windowsストアアプリ開発

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/7777 2014/06/02 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー