連載
» 2011年10月28日 00時00分 公開

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

XMLデータのインポート XMLデータのインポート

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

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

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

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

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

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

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

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

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

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

ItemTemplateの編集方法 ItemTemplateの編集方法

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

ListBoxのItemTemplate ListBoxのItemTemplate

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

作成したいボタン 作成したいボタン

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

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

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

Buttonコントロールの作成 Buttonコントロールの作成

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

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

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

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

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

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

幅431pxのボタン 幅431pxのボタン

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

作成したリソースの適用 作成したリソースの適用

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

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。