1. データバインディング徹底攻略
森 博之 （極東IT-Engineers 代表 / RIAアーキテクチャ研究会)

2. 自己紹介
• 森 博之（もり ひろゆき）
• MS開発技術を専門としたフリーランスエンジニア
• Microsoft MVP for Visual C#
• 極東IT-Engineers 代表
• ブログ：もり ひろゆきの日々是勉強
• http://moriblog.kit-eng.com
• Twitter
• Windows8対応[基本＋実用]
Windowsストアアプリ開発入門 好評発売中！
#1めとべや東京

3. Agenda
• データバインディング概要
• データバインディングに用いられる技術
• Bindingクラス
#1めとべや東京

4. データバインディング概要

5. データバインディングとは
• データバインディング（データバインド、あるいはData Bindingの
訳からデータ結合とも呼ばれる。）とは、XMLなどのデータソース
とアプリケーションやウェブページ（ウェブアプリケーション）の
ユーザインタフェースを静的または動的に結合する技術である。
Wikipediaより
#1めとべや東京

6. XAML系フレームワークにおける
データバインディングとは
データバインディングとは
２つのデータポイントの同期を保つための技術
エッセンシャルＷＰＦより
同期＝常に同じ値となるように保つ
⇒主にFrameworkElementクラスとBindingクラスで実現
#1めとべや東京

7. 基本的なBindingのイメージ
• BindingTarget （バインディングターゲット）
• FrameworkElementの派生クラス
• BindingSource (バインディングソース)
• 任意オブジェクト
BindingTarget BindingSourceBinding
#1めとべや東京

8. データバインディングの２つの課題
• XAMLではプロパティでUI要素の見た目を設定する
• 同期するには変化の検知する仕組みや変化を通知する仕組みが
必要となる！
• つまり、プロパティだけでは実現できない！
⇒同期を実現する仕組みが必要
• プロパティ指定によるデータバインディングの指定
• 同期を実現しつつ、複雑なオブジェクトへの依存関係を表現する
• XAMLはXML要素の階層構造や属性でオブジェクトを表現
⇒簡単にデータバインディングの指定を行うための仕組みが必要
#1めとべや東京

9. データバインディングに用いられる技術
• 同期を実現する仕組み
• 依存関係プロパティ
• INotifyPropertyChanged
• INotifyCollectionChanged
• 簡単にデータバインディングの指定を行うための仕組み
• マークアップ拡張(MarkupExtension)
• TypeConverter
• FrameworkElement/DataContext
#1めとべや東京

10. 同期を実現する仕組み

11. 依存関係プロパティ
• プロパティ値の変化を検知・通知するためのアプリケーション内
のインフラ
• DependencyObjectクラス・DependencyPropertyクラスによって実現
• つまり、言語仕様ではなくクラスライブラリにより実現されている
• 実装例で確認してみよう
#1めとべや東京

12. 依存関係プロパティの実装例
public class MyText : DependencyObject
{
public static readonly DependencyProeprty TextProperty =
DependencyProperty.Register(“Text”, typeof(string),
typeof(MyText));
public string Text
{
get { return (string) this.GetValue(TextProperty); }
set { this.SetValue(TextProperty, value); }
}
}
<MyText Text=“テキスト” />
#1めとべや東京

13. 基本的なBindingのイメージ
• BindingTarget （バインディングターゲット）
• FrameworkElementの派生クラス
• 上記オブジェクトの依存関係プロパティ
• BindingSource (バインディングソース)
• 任意オブジェクト
BindingTarget BindingSourceBinding
#1めとべや東京

14. INotifyPropertyChanged
INotifyCollectionChanged
• INotifyPropertyChanged
public class Person : INotifyPropertyChanged {
public event PropertyChangedEventHandler PropertyChanged;
private string name;
public string PersonName {
get { return name; }
set {
name = value;
OnPropertyChanged("PersonName");
}
}
protected void OnPropertyChanged(string propertyName) {
if (PropertyChanged != null) {
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
#1めとべや東京

15. 簡単に
データバインディングを
行うための仕組み

16. マークアップ拡張
• 属性構文で一部のオブジェクトを指定できるようにするための
仕組み
<TextBlock>
<TextBlock.Text>
<Binding ElementName=“MyTextBox” Path=“Text” />
</TextBlock.Text>
</TextBlock>
<TextBlock Text=“{Binding ElementName=MyTextBox,Path=Text}” />
#1めとべや東京

17. マークアップ拡張の作成
<TextBlock Text=“{demo:Hello}” />
using System;
using System.Windows.Markup;
namespace BindingDemo
{
public class HelloExtension : MarkupExtension
{
public override object ProvideValue(IServiceProvider serviceProvider)
{
return "Hello";
}
}
}
#1
今回は仕組みを理解してもらうために作
成方法を説明しましたが、マークアップ
拡張の自作は可読性を落とす原因となり
えるため注意が必要です。
だいたいの場合、データバインディング
で解決できるはずですので、まずはデー
タバインディングで解決できないか検討
しましょう。
めとべや東京

18. XAMLのプロパティ設定
• XAML=XMLベース・・・つまり、設定値はテキスト(string)
• 文字列型以外のプロパティへの設定の型変換
1. プリミティブ型 ・・・ 直接変換を試みる
2. 型列挙型 ・・・ メンバ名とマッチング
3. 型コンバーター ・・・ 型コンバーターによる変換
• XAMLで指定できるUI要素や関連クラスは
「TypeConverterAttribute」 が指定されている
#1めとべや東京

19. TypeConverter
• TypeConverterのメンバー
• 変換可能か判断する(戻り値はbool型)
• CanConvertFrom
• CanConvertTo
• 変換ロジック(戻り値はobject型)
• ConvertFrom
• ConvertTo
#1めとべや東京

20. これらの仕組みで実現されている
• 同期を実現する仕組み
• 依存関係プロパティ
• INotifyPropertyChanged
• INotifyCollectionChanged
• 簡単にデータバインディングの指定を行うための仕組み
• マークアップ拡張(MarkupExtension)
• TypeConverter
• FrameworkElement/DataContext
#1めとべや東京

21. Bindingクラスについて

22. データバインディング
• FrameworkElementクラス
• すべてのUI要素はFrameworkElementまたはそれに類するクラス
の派生クラスとなっている
• Bindingターゲットの指定が行える（SetBindingメソッド)
• Bindingクラス
• バインディングソースとバインディングターゲットの紐づけを行う
ためのクラス
#1めとべや東京

23. Bindingクラス
• バインディングソースのオブジェクト指定
• Sourceプロパティ
• ElementNameプロパティ
• RelativeSourceプロパティ
※ただし、指定は必須ではない
• バインディングソースのプロパティへのパス指定
• Pathプロパティ(コンストラクタによる指定も可能）
• XMLのバインディングソースのXPathクエリ指定(WPF)
• XPathプロパティ
#1めとべや東京

24. Bindingの挙動
• 基本的にはバインディングソースに指定されたオブジェクトま
たはオブジェクトのプロパティへの関連付け
• バインディングソースに指定がない場合はバインディングター
ゲットのDataContextプロパティをバインディングソースとする
※DataContextプロパティはFrameworkElementのメンバ
#1めとべや東京

25. バインディングソース
public class Person {
public string PersonName { get; set; }
public string Address { get; set; }
}
<TextBlock Text=“{Binding PersonName}” />
<TextBlock Text=“{Binding Address}” />
#1めとべや東京

26. DataContextの指定
<Grid>
<Grid.DataContext>
<demo:Person>
<demo:Person.PersonName>ざむるたろう</demo:Person.PersonName>
<demo:Person.Address>東京都港区</demo:Person.Address>
</demo:Person>
</Grid.DataContext>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding PersonName}" />
<TextBlock Grid.Row="1" Text="{Binding Address}" />
</Grid>
#1めとべや東京

27. データフローの方向

28. データバインディングの同期は
常に双方向ではない
• ２つのデータポイントの同期を保つための技術
エッセンシャルＷＰＦより
同期＝常に同じ値となるように保つ
#1めとべや東京

29. データフローの指定
• Modeプロパティで設定する
OneWay
TwoWay
OneWayToSource(WPF)
OneTime
#1めとべや東京

30. オブジェクト型の
ミスマッチ

31. データ型のミスマッチ
• データ型が合致する場合は問題ないが・・・。
⇒Type Safeですから、ミスマッチは当然エラー！
• あえてミスマッチさせることで新しい表現を行うシナリオも・・・
• データテンプレート
• コレクションオブジェクトの表現などに活用
• データ変換（本日はこちら！）
• バインディングの機能を活用！
#1めとべや東京

32. データ変換
• Bindingによる値の同期を行う際、指定された値を変換ロジック
に渡してから同期先へ値を設定する
BindingTarget BindingSourceBinding
Converter
#1めとべや東京

33. Bindingによるデータ変換用プロパティ
• データ変換用のプロパティ
• TargetNullValue (WPF)
• Bindingソースの値がNullの場合に設定するオブジェクトを指定
• StringFormat (WPF/Silverlight)
• Bindingソースに対してFormatProviderによる書式設定を行う
• Converter
• 変換用のオブジェクトを指定
#1めとべや東京

34. IValueConverter
• 変換用オブジェクトのインターフェース
• メンバ
• Convert
• ConvertBack
#1めとべや東京

35. まとめ
• バインディング
• ２つのデータポイントの同期を行う仕組み
• メカニズム
• 依存関係プロパティ/INotify***/FrameworkElementなどなど
• データフロー
• 必要に応じた同期方向の指定を行える
⇒INotify**を忘れずに！
• 値変換
• IValueConverter
#1めとべや東京

36. Thank you!
よろしくねっ！