ListBoxとデータバインディングしてDiggの記事を表示

以前DataGridコントロールを使用してDiggの記事を表示しました。これは、列形式でコンテンツを表示する時には上手くいきます。しかし、今回のDiggアプリケーションに対しては、少し表示をもう少しひとひねりして、記事のDataGridではなく、一覧形式にしたいと思います。いいことに、これは簡単です。これを行うのにアプリケーションコードを変更する必要はありません。

まず、DataGridコントロールを<ListBox>コントロールに入れ替えます。コントロール名は前の ("StoriesList")と同じにします。:

再度アプリケーションを起動して記事を検索すると、ListBoxは以下の結果を表示します。 :

何で、各項目が"DiggSample.DiggStory"なのか不思議に思うかもしれません。これは、DiggStoryオブジェクトをListBox（デフォルトの動作がToString()の呼び出しになっています。）にバインディングしているからです。もしDiggStoryオブジェクトの"Title"プロパティを代わりに表示したい場合は、ListBoxの"DisplayMemberPath" プロパティを設定します。 :

これを行った場合、ListBoxにはTitleが表示されます。 :

一度に1つ以上の値を表示したい場合、また各項目をもっとカスタマイズしたい場合は、ListBoxコントロールのItemTemplateをオーバーライドしてカスタムのDataTemplateを提供します。このDataTemplateがあれば、各DiggStoryオブジェクトの表示方法をカスタマイズすることができます。

例えば、DiggStoryのタイトルとNumDiggsの値をDataTemplateを使用して以下の様に両方を表示することができます。

DataTemplateの中のDiggStoryオブジェクトから公開されている全てのプロパティにデータバインドすることができます。上記をご覧頂ければ、 {Binding <EM>PropertyName</EM>} シンタックスを使用して2つのTextBlockコントロールでこれが行える様子をご確認頂けると思います。

DataTemplateがあれば、ListBoxはその項目を以下の様に表示します。 :

もう一段階進んで、DataTemplateを以下のように変更してみましょう。このDataTemplateは2つのStackPanelを使っています。1つは横に行項目を並べ、もう1つはいくつかのTextBlockを縦に積み上げます。 :

上記のDataTemplateはListBoxが以下のスクリーンショットの様に項目を表示します。 :

以下のスタイル規則をApp.xaml（LinearGradientBrush がDiggPanel上できれいな黄色のグラデーションにするのに使用されているのがご確認頂けると思います。）で定義する場合 :

ListBoxに関して注意すべき重要なことは、項目の表示をカスタマイズしたとしても、マウスオーバーや項目を選択するセマンティックスに対してのサポートはやはり自動的に提供されます。これはマウスを使った場合でも、キーボード（矢印キー、homeやendキーなど）を使用した時も同じです。 :

ListBoxは配置およびサイズ調整も完全にサポートされており、必要に応じてカスタマイズされたコンテンツの自動スクロールを提供します。（Windowが小さくなった時に横スクロールが表示されます。） :

次の手順

Listをベースにしてデータの表示を変更し、そのコンテンツの一覧をきれいにしました。

今度はアプリケーションの最後の機能を完成させて、マスター・詳細のワークフローを実装し、エンドユーザが一覧から記事を選択した時にその詳細までみれるようにしましょう。 これは次のチュートリアルで行いましょう。: ユーザコントロールを使用してマスター・詳細のシナリオを実装