.png "このページは WPF プロジェクトにのみ適用されます。")
新しいニュース フィードやポッドキャストなどの Web フィードは、多くの場合、コンテンツに XML 形式のファイルを使用します。リーダーやアグリゲータと呼ばれるプログラムで Web フィードにサブスクライブして、読むことができます。また、リーダーをコンピュータで開いたままにしておき、Web フィードの更新に合わせて新しいコンテンツでリーダーを自動更新することも多く行われます。Web フィードの最も一般的な配信機構は、RSS (Really Simple Syndication) と呼ばれます。
次の手順では、Microsoft Expression Blend と RSS フィードを使用して単純な RSS リーダーを作成する方法について説明します。RSS リーダーは、ローカル ファイルや自分の Web サイトの XML ファイルであっても、任意の XML データ ソースを読むときに使用できます。
.gif "メモ") メモ : |
|---|
次の手順では、インターネットへの有効な接続があることを前提としています。 |
| メモ : |
|---|
Silverlight 2 は XML データ ソースをサポートしていません。ただし、XML データの操作に関する情報は、MSDN ライブラリの Silverlight での XML データの解析についてのページ (英語の可能性あり) に記載されています。 |
データ ソースの作成
データ ソースを作成するには
Expression Blend で、[ファイル] メニューの [新しいプロジェクト] をクリックし、[WPF アプリケーション (.exe)] をクリックします。
新しいプロジェクトが作成されます。
[プロジェクト] パネルの [データ] の下にある [+XML] をクリックします。
[XML データ ソースの追加] ウィンドウが表示されます。
[接続名] フィールドには「rssDS」と入力し、[XML データの URL] フィールドには RSS フィードの URL を入力します。たとえば、MSNBC の天気情報フィードへの XML データ ソースを作成するには、「http://rss.msnbc.msn.com/id/3032127/device/rss/rss.xml」と入力します。[OK] をクリックします。
.gif "ヒント")
ヒント :[XML データの URL] フィールドには、XML ファイルへの URL またはローカル パスを使用できます。異なる RSS フィードを使用する場合は、Web ブラウザでプロバイダの Web サイト (http://www.msnbc.com など) を開いて、RSS フィードへのリンクを見つけることによって URL を特定できます。通常、Web サイトには使用できるフィードだけでなく、フィードをサブスクライブできるボタンも表示されます。使用するフィードの XML ファイルへのリンクを検索します。
rssDS というデータ ソースが、[プロジェクト] パネルの [データ] の下に追加されます。ノードを展開し、データ ソースの異なるフィールドを確認します。データは表示されません。データを含むフィールド名とデータ構造のみが表示されます。
これで、アプリケーションのコントロールをデータにバインドできます。
XML データ ソースの後に追加された [データ] パネル
.png "Cc294852.14b54f1f-7d84-4604-ba0a-35b50460b6cf(ja-jp,Expression.10).png")
.gif "Cc294852.7e183f1f-37d8-4dcb-980c-19a5d61ca087(ja-jp,Expression.10).gif")
先頭に戻る
[プロジェクト] パネルからのドラッグによるデータ フィールドへのバインド
コントロールをデータ ソースのアイテムにバインドするには複数の方法があります。次の手順では、[プロジェクト] パネルからアートボードにデータ ソース フィールドをドラッグして新しいコントロールを 2 つ作成する方法を示します。あるいは、データ ソース フィールドを既存のコントロールにドラッグして、コントロールのプロパティにデータをバインドすることもできます。
[プロジェクト] パネルからのドラッグによってデータ フィールドにバインドするには
[プロジェクト] パネルの [データ] で、rss、channel、および image の各ノードを展開します。[url : (文字列)] ノードをアートボードの左上角にドラッグします。表示されるドロップダウン リストの Image コントロールをクリックします。
Image オブジェクトがアートボードに作成され、[データ バインドの作成] ダイアログ ボックスが表示されます。
[フィールドの選択] に、URL データ アイテムをバインドする Image オブジェクトのプロパティを指定します。既定の選択 ([ソース]) が正しいので、そのまま [OK] をクリックします。
アートボードの Image オブジェクトは、データ アイテムの URL にある画像を反映します。[選択内容] ツール
.png "Cc294852.2ff91340-477e-4efa-a0f7-af20851e4daa(ja-jp,Expression.10).png")
を使用して、Image オブジェクトをアートボードの左上角にドラッグし、サイズを縮小します。Image オブジェクトを追加し、URL データ アイテムにバインドした後のアートボード (実際の画像は異なる場合があります)
.png "Cc294852.eb3b12e1-64d7-4a49-b2a8-fc433a34ca2f(ja-jp,Expression.10).png")
[プロジェクト] パネルの [データ] で、rssDS、rss、および channel の各ノードを展開します。[title : (文字列)] ノードをアートボードの Image オブジェクトの右側にドラッグします。表示されるドロップダウン リストで、Label コントロールをクリックします。[データ バインドの作成] ダイアログ ボックスの [フィールドの選択] の横に表示される既定のプロパティ ([コンテンツ]) が正しいので、そのまま [OK] をクリックします。
[データ テンプレートの作成] ダイアログ ボックスが表示されます。
[新しいデータ テンプレートと表示フィールド] をオンにし、TextBlock コントロールにタイトル データ アイテムを表示するデータ テンプレートを設定して作成します。[OK] をクリックします。
ニュース フィードのタイトルがアートボードの新しい Label コントロールに表示されます。Label オブジェクトの移動と拡大縮小には [選択内容] ツールを使用します。また、テキストの表示方法を変更するには、Text のプロパティと、[プロパティ] パネルの [ブラシ] カテゴリを使用します。
メモ :[オブジェクトとタイムライン] の下には TextBlock コントロールが表示されません。これは、TextBlock コントロールが、データへのバインド時にコントロールの外観をデザインするときに使用される [生成されたコンテンツ] データ テンプレートのパーツであるためです。テンプレートの詳細については、「コントロール テンプレートの作成または編集」を参照してください。
Label オブジェクトを追加し、タイトル データ アイテムにバインドした後のアートボード (実際のアートボードは異なる場合があります)
.png "Cc294852.f5b9f7c7-e622-4f62-a151-1e449c6d4588(ja-jp,Expression.10).png")
先頭に戻る
データ コンテキストを使用した同じデータへの複数コントロールのバインド
データ コンテキストを親オブジェクトに割り当てると、複数の子オブジェクトでデータの同じスナップショットを使用できます。この機能は、マスタ詳細デザインを作成する場合に便利です。このデザインでは、リストのアイテム (マスタ ウィンドウ) をクリックすると、そのアイテムに関する情報が別のオブジェクト (詳細ウィンドウ) に表示されます。
データ コンテキストを使用して同じデータを複数コントロールにバインドするには
画像とタイトルの下の領域を対象とする [グリッド] パネル
.png "Cc294852.a87ee957-7fbf-4135-a6ab-6de7e63160aa(ja-jp,Expression.10).png")
を作成します。Grid オブジェクトは、データ コンテキストを設定した親オブジェクトになります。[オブジェクトとタイムライン] の下にある新しい Grid オブジェクトをクリックして選択し、[プロパティ] パネルの [共通プロパティ] で DataContext プロパティを探します。
DataContext プロパティと関連付けられた [詳細プロパティ オプション]
.png "Cc294852.d6ba8f4a-b8a2-445a-af0b-a267dfade6e1(ja-jp,Expression.10).png")
ボタンをクリックし、[データ バインド] をクリックします。[データ バインドの作成] ダイアログ ボックスが表示されます。
[データ フィールド] タブ (既定) の [データ ソース] で、rssDS をクリックします。[フィールド] の [rss] ノードと [チャネル] ノードを展開し、[item (配列)] をクリックし、[完了] をクリックします。
これで、データ ソースのアイテム コレクションが新しいグリッド オブジェクトに割り当てられました。グリッド オブジェクトの任意の子で、アイテム コレクションの同じスナップショットを操作できるようになりました。
[選択] ツールで新しいグリッド オブジェクトをダブルクリックしてアクティブにすると、子オブジェクトを追加できるようになります。
ツールボックスの ListBox コントロール
.png "Cc294852.ffd7a7c3-6bcd-4ed3-a59e-1f28d06ec4ae(ja-jp,Expression.10).png")
をクリックし、グリッドの左半分を占める ListBox を描画します。[選択内容] ツールを使用して ListBox を選択し、[プロパティ] パネルの [共通プロパティ] で ItemsSource プロパティを探します。
メモ :ItemsSource プロパティは、アイテムのコレクションに設定できます。ItemsSource プロパティと Items プロパティは同時に使用できません。通常、ItemsSource プロパティは、生成されたアイテムのコレクションをバインドするときに使用されます。Items プロパティは、[このコレクション内のアイテムを編集] ボタンを使用して個々のアイテムを手動で追加するときに使用します。
ItemsSource プロパティと関連付けられた [詳細プロパティ オプション]
ボタンをクリックし、[データ バインド] をクリックします。[データ バインドの作成] ダイアログ ボックスが表示されます。
[明示的なデータ コンテキスト] タブをクリックします。[フィールド] の下にある rss ノードと channel ノードを展開し、item(Array) をクリックします。[DataTemplate の定義] ボタンをクリックします。
[データ テンプレートの作成] ダイアログ ボックスが表示されます。
3 番目のオプション [新しいデータ テンプレートと表示フィールド] (既定) を選択します。item の横にあるチェック ボックスをオフにすると、すべてのチェック ボックスを簡単にオフにすることができます。title の横にあるチェック ボックスをオンにし、[OK] をクリックします。
これで ListBox オブジェクトが [item (配列)] データにバインドされ、ニュース アイテム一覧が表示されるようになります。
ListBox オブジェクトを追加し、item (配列) データ コレクションにバインドした後のアートボード (実際のアートボードは異なる場合があります)
.png "Cc294852.6e02aab9-751f-49ee-ac12-65d92eb432ef(ja-jp,Expression.10).png")
ツールボックスの TextBlock コントロール
.png "Cc294852.42165963-00f7-4a33-abcd-b0849edebada(ja-jp,Expression.10).png")
をクリックし、グリッドの右半分を占める TextBlock を描画します。[選択内容] ツールを使用して TextBlock を選択し、[プロパティ] パネルの [共通プロパティ] で Text プロパティを探します。Text プロパティと関連付けられた [詳細プロパティ オプション]
ボタンをクリックし、[データ バインド] をクリックします。メモ :テキスト コントロールをアートボードに追加すると、Expression Blend はコントロールの編集モードに移行します。そのため、コントロールにコンテンツをすぐに入力できますが、コントロールのすべてのプロパティを操作することはできません。コントロールの編集モードを終了するには、Esc キーを押すか、[選択] ツールをクリックします。
[データ バインドの作成] ダイアログ ボックスが表示されます。
[明示的なデータ コンテキスト] タブをクリックします。[フィールド] の [rss] ノードと [チャネル] ノードを展開し、[item (配列)] をクリックし、[説明 : (文字列)] をクリックします。[完了] をクリックします。
TextBlock オブジェクトは、ListBox で選択されているアイテムの説明にデータがバインドされています。これは、どちらのコントロールも同じデータ コンテキストを共有しているためです。また、TextBlock オブジェクトには説明が表示されます。
TextBlock オブジェクトを追加し、[説明] データ アイテムにバインドした後のアートボード (実際のアートボードは異なる場合があります)
.png "Cc294852.7e00a38f-ea59-47a3-84cd-3caf57c6d805(ja-jp,Expression.10).png")
F5 キーを押してアプリケーションを実行します。別のニュースの説明を読むには、アプリケーションの ListBox 内をクリックして選択を変更します。
メモ :アイテムによっては HTML テキストを含めることができます。[説明] 文字列から HTML 要素を削除する値コンバータを作成し、その値コンバータを [データ バインドの作成] ダイアログ ボックスに適用できます。値コンバータの作成の詳細については、「試してみよう : 値コンバータの作成と適用」を参照してください。
先頭に戻る