第十四工房

WindowsストアアプリのMainPageにListViewを用いて、時刻情報を表示する。表示項目をGridで並べてもよいが、表示項目を増やすことを考えると、ListViewがよさそう。

参考にするサンプルは、デベロッパーセンターの「初めてのアプリの作成」のパート5。ListViewを用い、RSSフィードを表示するもの。

ListViewの部分のみを切り出したところ。説明の便宜のために着色。薄い灰色の背景の部分がListView。中の薄い緑色の部分が、ListViewのそれぞれの項目。項目の中は2列1行のGridで、TextBlockを2つ並べる。TextBlockには時刻情報を設定。時刻情報は、自前のクラスを用意して供給。

サンプルもあるので、一見簡単というところだが、なかなか奥深い。以下について、一定の理解が求められる。サンプルの解説だけでは少し足りない。

・XAMLとC#のコードの関係

・Applicationと各Page（この場合はMainPage）の関係

・リソースの扱い

・データのバインディング

・コレクションを備えたクラス設計

自分なりに解説を試みてみる。

１）ListViewにあわせたクラスを用意（図の左上）。データの供給元になる。

・ListViewの項目に相当するもの。ここでは、文字列を2つ備える。

・項目のコレクション。

２）App.xaml

Applicationのリソースとして、用意したクラスのオブジェクトを指し示すリソースを定義。アプリの初期化時に自動で実体が作成される。コードの中で明示的にnewしない。

※MSのサンプル解説では、クラスのインスタンス化について説明がない。

３）App.xaml.cs

OnLaunched（アプリ起動時に実行される処理）で、リソースが指示するオブジェクトを初期化。ここでは、システムの時刻情報を3つ設定。項目を3回newして、コレクションに追加。

※コードの置き場所は、MSのサンプル解説に従う。

４－１）MainPage.xaml

ページで使用するリソースを2つ定義。一つは、CollectionViewSourceで、コレクションに相当。もう一つは、DataTemplateで、コレクションの各項目に相当。ここでは、Gridとその列要素である2つのTextBlockを定義。

※MSのサンプル解説では、CollectionViewSourceの役割の説明が欠けている。

※解説本文ではなく、コード一式の方をよく見る。

４－２）MainPage.xaml

ListViewも定義。ItemSourceにリソース定義したCollectionViewSourceを設定。ItemTemplateに同じくリソース定義したDataTemplateを設定。

５）MainPage.xaml.cs

navigationHelper_LoadState（ページ作成時に実行される処理）で、今いるコンテキストのDefaultViewModeに、コレクションの項目一覧を指すプロパティ（ここではItems、クラス設計による）を設定。ここで画面の部品と、データの供給元を結びつける。

※コードの置き場所は、MSのサンプル解説に従う。

以上。なんとか、無事に表示にたどりつく。やはり、設定箇所が散らばり、それぞれが連携し合う、バインディングが一番の難関。

さて、MSのコンテンツには、ストアアプリの開発は簡単にできる、と言うものが多いが、VB6の初心者が書くようなもの（画面に部品を貼り付けて、イベント処理ルーチンを書き散らす）はともかく、それなりのものを目指すと結構苦労する。変に経験があるから、かえってはまるのかもしれないけど。途中での挫折を減らすには、設計思想にまで踏み込んだ、もっと本質に迫る記事が欲しい。まあ、日本のMSはマーケティングが中心なので、どうしても見栄えのするものばかりに注力してしまうのだが。