ListViewに自前のクラスの内容をGridで表示2015年02月01日 11:18

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

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

ListView

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

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

・XAMLとC#のコードの関係
・Applicationと各Page(この場合はMainPage)の関係
・リソースの扱い
・データのバインディング
・コレクションを備えたクラス設計

ListViewに自前のクラスの内容をGridで表示

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

1)ListViewにあわせたクラスを用意(図の左上)。データの供給元になる。
・ListViewの項目に相当するもの。ここでは、文字列を2つ備える。
・項目のコレクション。

2)App.xaml
Applicationのリソースとして、用意したクラスのオブジェクトを指し示すリソースを定義。アプリの初期化時に自動で実体が作成される。コードの中で明示的にnewしない。
※MSのサンプル解説では、クラスのインスタンス化について説明がない。

3)App.xaml.cs
OnLaunched(アプリ起動時に実行される処理)で、リソースが指示するオブジェクトを初期化。ここでは、システムの時刻情報を3つ設定。項目を3回newして、コレクションに追加。
※コードの置き場所は、MSのサンプル解説に従う。

4-1)MainPage.xaml
ページで使用するリソースを2つ定義。一つは、CollectionViewSourceで、コレクションに相当。もう一つは、DataTemplateで、コレクションの各項目に相当。ここでは、Gridとその列要素である2つのTextBlockを定義。
※MSのサンプル解説では、CollectionViewSourceの役割の説明が欠けている。
※解説本文ではなく、コード一式の方をよく見る。

4-2)MainPage.xaml
ListViewも定義。ItemSourceにリソース定義したCollectionViewSourceを設定。ItemTemplateに同じくリソース定義したDataTemplateを設定。

5)MainPage.xaml.cs
navigationHelper_LoadState(ページ作成時に実行される処理)で、今いるコンテキストのDefaultViewModeに、コレクションの項目一覧を指すプロパティ(ここではItems、クラス設計による)を設定。ここで画面の部品と、データの供給元を結びつける。
※コードの置き場所は、MSのサンプル解説に従う。

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

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