[応用編]RSSリーダーWindows Phoneアプリの作り方：Silverlightベースで作るWP7アプリ開発入門（6）（2/5 ページ）

[泉本優輝，WP Arch]

簡単にデータセットを作成できるSampleDataSetを使う

　Expression Blendでは、SampleDataSetを使うことで、ローカルやインターネット上にあるXMLファイルから、簡単にデータセットを作成し表示できます。SampleDataSetはアプリ内にデータを作成するので、最新のデータを取得できませんが、実データを使ったアプリデザインができます。

　では、＠ITのSmart＆Socialフォーラムと＠IT全体のRSSを取得しましょう。Smart ＆SocialのRSSは以下のURLです。

http://rss.rssad.jp/rss/itmatmarkit/fsmart/rss.xml

　

　Expression Blendのデータパネルから、XMLからサンプルデータのインポートを選択します。

XMLを使ったサンプルデータの作成

　XMLからサンプルデータのインポートというウィンドウが表示されます。データソース名には分かりやすいデータの名前を、XMLファイルパスには、「http://rss.rssad.jp/rss/itmatmarkit/fsmart/rss.xml」と入力します。

XMLデータのインポート

　サンプルデータを作成すると、データパネルのなかにrss.xmlを基にしたSomartSocialRSSDataSourceが確認できます。

XMLを基に作られたデータセット

　SmartSocialRSSDataSourceの中にあるitemCollectionを、2番目のPanoramaItem「Smart＆Social」の中にあるLIstBoxにドラッグ＆ドロップします。すると、ListBoxにitemCollectionのデータが表示されます。

データセットから自動生成したListBox

　同様に＠IT COREのRSSもデータを取得し、ListBoxにドラッグ＆ドロップします。RSSのURLは以下です。

http://rss.rssad.jp/rss/itmatmarkit/rss.xml

　以上で、データの取得と表示が完了しました。

テンプレートを編集してデータをレイアウトする

　しかし、このままではデータがテキストで表示されているだけです。データを整形してレイアウトしましょう。

　 デザイナ上でListBoxを右クリックし、［追加テンプレートの編集］→［生成されたアイテムの編集］→［現在のテンプレートを編集］を選択します。

ItemTemplateの編集方法

　すると、データ1件を表示するためのテンプレートがオブジェクトパネルに表示されます。ここからレイアウトを変更していきます。

ListBoxのItemTemplate

　今回はtitleを以下のようにボタン化してみましょう。

作成したいボタン

　普通にButtonコントロールにテキストを表示した場合、テキストが横に広がってしまい、画面からはみ出てしまいます。

テキストが表示されない標準のButtonコントロール

　そこで、Buttonコントロールの中にTextBlockを配置します。まずは、ボタンコントロールを作成します。

Buttonコントロールの作成

　Buttonコントロールの中にTextBlockをドラッグ＆ドロップします。

Buttonコントロールの中に配置したTextBlock

　中に配置したTextBlockのTextWrappingプロパティをWrapに変更します。

TextBlockの長さによって高さの変わるボタン

　うまくButtonのテキストが表示されました。他のTextBlockはいったん削除してしまいましょう。

　Buttonの幅はStackPanelと同じ431pxと固定値でいいでしょう。以下のように表示されました。

幅431pxのボタン

　「core」のPanoramaItemにあるListBoxにも同様にレイアウトしますが、上で作成したItemTemplateを適用するだけでレイアウトを適用できます。また同じItemTemplateを適用するので、1つを編集すれば同様に適用されます。

作成したリソースの適用

　次ページからは、さらなる“おさらい”として、Silverlight Toolkit for Windows Phone（以下、WPToolkit）を使いましょう。