WPF RSS READER

2008/03/02 13:38 posted to [ WPF ] C#, Expression, XAML

前回のカラースライダーに続き、WPFのテストプログラムです。
Blendのヘルプにも載っているし既に色々なサンプルがあるんですが、今回は「RSS Reader」です。Blend（XAML）でのXMLの扱いやデータバインディング辺りがテーマになっています。
RSS Feedを読み込んで表示するだけならXAMLだけで完結できるんですが、今回はコンバータを使っているので、ソコだけC#も使っています。

Blend上ではこんな感じになっています。

: プロジェクトパネル

: オブジェクトパネル

rootのGridにはタイトルとディスクリプションを表示するTextBlockを配置します。さらにGridを配置していますが、ココがポイント。理由は後述するとして、そのGridにはタイトルを一覧表示するListBox、本文用のScrollViewer、エントリーURL用のTextBlockが配置してあります。（おまけでListBoxとScrollViewerのサイズを変更するGridSplitterも配置してあります。）
UIデザインはとりあえず度外視の方向で・・・

まずはRSSを読み込みます。BlendでXMLを読み込む場合、ウィザードにURIを入力するだけなので簡単ですね。
データパネルの+XMLボタン押下で表示されるダイアログにURL（ローカルの場合はファイルパス）を入力します。今回は、本ブログのRSS Feed（http://www.nloc-web.com/lab/rss.xml）を利用しました。
読み込みが成功すると、左図のようにデータパネルにノードがツリー上に表示されます。

次は読み込んだXMLの値を各要素に割り当てていきます。ここで利用するのがデータバインディングです。
BlendではXMLの値をバインドする際、二種類の方法があります。ひとつはデータパネルのツリーからバインドしたい要素にドラッグ＆ドロップする方法で、もうひとつはプロパティパネルの詳細プロパティオプションボタンから設定する方法。このあたりはヘルプを見ればすぐ分かりますね。

どちらの方法でも構いませんが、まずはtitleに/rss/channel/titleを、subtitleに/rss/channel/descriptionをバインドします。

さらに、[Grid]のDateContextに対して/rss/channel/itemをバインドします。親要素にDataContextを設定すると、複数の子要素でデータの同じスナップショットが使用できるようになります。（ヘルプ「データコンテキストを使用した同じデータへの複数コントロールのバインド」参照）
この機能を利用することで、コードを意識せずに一覧 - 詳細の連携ができます。

子要素のバインディングは詳細プロパティオプションボタンから設定します。
詳細プロパティオプションボタンのコンテキストメニューからデータバインドを選択すると、データのバインドの作成ダイアログが表示されます。
明示的なデータコンテキストタブからデータソースを選択することで、複数の子要素でデータの同じスナップショットを使用できます。

この要領でentry_listのItemSourceプロパティ、descriptionのContentプロパティ、urlのTextプロパティにバインド設定を行うと左図のようなRSS Readerが完成します。

このままでも機能は満たしているのですが、HTMLタグがそのまま表示されてしまい、なんだか気持ちが悪い。そこでデータコンバータを利用して、HTMLタグを取り除きます。

新規にremoveHTMLTags.csを作成し、プロジェクトに追加。このファイルにC#でコンバータクラスを作成していきます。
Convertメソッドでは渡されたオブジェクト（XmlElement）の値をStringとして取り出し、正規表現を使用してHTMLタグ部分をカラ文字で置換します。今回のコンバータでは一方向のみの変換で事足りるので、ConvertBackメソッドはnullを返却します。