Silverlight 4 におけるデータバインディングの強化 – DependencyObject

皆様、こんにちは！昨日に引き続いての投稿です。やはりBlendがらみですｗ。今回は、弊社イベントのBlendのテクニカルセッションで良くお見せするネタです。しかもコーディングなしでできます。理解も進みますので、ちょっとやってみてください。

WPFでもSilverlightでも非常に重要なのが、データバインディング機能です。データバインディングとは、データと UI 要素 (コントロール) を接続する機能です。Silverlight では、視覚的な要素だけでなく、見えない要素もデータバインドの対象とすることができるため、より開発における柔軟性と生産性が向上します。 実例で学ぶアプリケーション開発 ver.2(Silverlight 4によるショッピングサイト作成) ※の解説に並行して、このデータバインディングに関わるTopicもいくつかご紹介しておきましょう。

※これ自体、続編を準備中ですので、お楽しみに！

まず最初は、DependencyObjectです。DependencyObjectはWPF・Silverlight の特徴の一つである強力なプロパティ システムを提供します。依存プロパティはその代表です。依存プロパティを使うと、例えば、スライダーコントロールの値(valueプロパティ)とテキストボックスコントロールに表示されているテキストを関連付けるなど、別々のWPF・Silverlight要素のプロパティ間を依存関係で結び付ける（バインディングする）ことができます。バインディングを行うと、一方のプロパティの値が変更された場合、即座に、他方にその値が反映されます。

DependencyObjectは、INotifyPropertyChangedインターフェイスを利用してプロパティの変更を通知することで、そのプロパティに結び付けられた依存プロパティの値を自動的に更新します。

Silverlightでの実装方法について、実際にアプリケーションを作ってみましょう。このあたりを実際にやってみるには、Expression Blendの方が分かり易いです。

そこで、Expression Blend 4 + SkechFlowを起動し、新しいプロジェクトでSilverlightアプリケーション＋Webサイトを選びます。

Expression Blend 4で新しいSilverlightアプリケーション＋Webサイトプロジェクトを作成

新しいプロジェクトを作成したら、アセットボタンから、スライダーを選択し適当に配置します。

アセットボタンからのスライダーの選択

スライダーの配置

次いで、この上にRectangleを配置し適当な色にします。そして、プロパティウィンドウの検索ボックスに、“transform”と入力し、RenderTransformプロパティを見つけたら、“回転”タブに切り替え、Angleを右クリックして出てくるRotationコンテキストメニューで、“データバインド”を選択します。

Rectangleの配置とプロパティ編集

そうすると、データバインドの作成ダイアログが出てきますので、この中から“要素プロパティ”タブを選択し、 ”シーン要素”で [Slider] を選び、右側のプロパティで“Value”を選んで、OKボタンを押します。これでSliderとRectangleの各々のプロパティが結び付きました。

SliderとRectangle間でのデータバインドの適用

そして、Silderのプロパティウィンドウで、共通プロパティのMaximumを探します。デフォルトではこの値が10になっていますので、これを360に変更します。

Sliderプロパティの編集

これで、F5を押して実行してみてください。下記のような実行結果が得られるでしょう。Sliderの動きに応じてRectangleが360度回転するはずです。

Dependency Object Demo実行結果

TwoWay（双方向）バインディングでももちろん使えますので、色々なオブジェクトで試してみてくださいね。

鈴木 章太郎