データバインディング

Windows ストアアプリの肝
～データバインディングを極める!
2013/5/18
BluewaterSoft biac
わんくま同盟名古屋勉強会 #27
Windows ストアアプリ
を作るのに必要なこと
• 昔Metroと言っていたUI
• Windows Runtime
• ガチガチのサンドボック
スへの対処
• async / await
……
• たくさん必要!
データバインディング
その中のひとつで、
けっこう難解なのが…
わんくま同盟名古屋勉強会 #27
スピーカー紹介
わんくま同盟名古屋勉強会 #27
スピーカー紹介
• 1957: スプートニク以前
に誕生 (宇宙世紀未満)
biac (山本康彦)
• 1983: 名古屋大学工学部(修
士)卒
• HONDA R&Dで自動車設計
• 1994～ソフトウェア業界
http://www.bluewatersoft.jp
• 2012～ BluewaterSoft
わんくま同盟名古屋勉強会 #27
スピーカー紹介
• 本を書いたり
速攻入門 C# プログラミング
biac (山本康彦)
http://www.bluewatersoft.jp
技術評論社、共著
2012/3
Windows 8
業務アプリ開発読本
技術評論社、共著
2013/3
C#でマルチスレッド
プログラミング (仮題)
【近刊予定】
わんくま同盟名古屋勉強会 #27
スピーカー紹介
biac (山本康彦)
http://www.bluewatersoft.jp
• 記事を書いたり
WinRT/Metro TIPS
@IT ～連載中
http://www.atmarkit.co.jp/ait/subtop/features/da/ap_winrttips_index.html
今日の話は、
この連載の中から!
C#で始めるテスト駆動開発入門
CodeZine
http://codezine.jp/article/corner/446
Metro スタイル・アプリの
開発者が知るべき3つのこと
@IT 2012/3
http://www.atmarkit.co.jp/fdotnet/chushin/readyforwin8app_01/readyforwin8app_01_02.
html
わんくま同盟名古屋勉強会 #27
スピーカー紹介
• アプリを作ったり
biac (山本康彦)
http://www.bluewatersoft.jp
わんくま同盟名古屋勉強会 #27
スピーカー紹介
• スピーカーやったり
biac (山本康彦)
http://www.bluewatersoft.jp
2013/5/11 COD 2013
わんくま同盟名古屋勉強会 #27
スピーカー紹介
• 講師やったりしてます
biac (山本康彦)
http://www.bluewatersoft.jp
C# / VB.NET による
Windows 8 アプリ開発入門
2013/7/11～12
名古屋ソフトウェアセンター
http://www.nagoya-sc.co.jp/ap/seminar?m=1&key=10734
わんくま同盟名古屋勉強会 #27
まだまだ前振り
データバインディングって
どこで使うの?
わんくま同盟名古屋勉強会 #27
データバインディング
の使いどころ
赤枠で囲った表示部分は、
データバインディングを
使ってます。
画面表示 ≒
データバイン
ディング
わんくま同盟名古屋勉強会 #27
データバインディング
良いところ
• データを変更すれば、
自動的に画面も更新され
る
すなわち、
* 非同期でのデータ更新
* バックグラウンドタスク
での画面更新が簡単♪
悪いところ
• 最初がめんどくさい
• なんといっても、
難しい!!
わんくま同盟名古屋勉強会 #27
データバインディング
による画面更新
データの中身を非同期で書
き換えてやるだけで、画面
表示も変わる。
※注: 正確には、データの取得処理
を非同期で行い、データの書き換
えはUIスレッドに戻してから行う。
わんくま同盟名古屋勉強会 #27
そろそろ本題
データバインディングの
原理的なお話
わんくま同盟名古屋勉強会 #27
バインディングの
ソースとターゲット、
そしてBindingクラス
画面
ロジック
注意: バインディングエンジンから見えないといけないので、
どちらも public にしておく必要がある
http://msdn.microsoft.com/ja-jp/library/cc278072.aspx
わんくま同盟名古屋勉強会 #27
バインディングソース
• 表示したいデータをプロパティとして公開
• 動的に表示を変えたいなら、
INotifyPropertyChanged を実装すること
わんくま同盟名古屋勉強会 #27
バインディングターゲット
• バインドしてもらいたいプロパティを
DependencyProperty (依存プロパティ)
として実装
わんくま同盟名古屋勉強会 #27
バインディングする
• Bindingオブジェクトを生成し、
バインディングソースを教える
• BindingOperationsクラスに頼んで、
上で作ったBindingオブジェクトを、
ターゲットにバインドしてもらう
Binding オブジェクト
ソース
わんくま同盟名古屋勉強会 #27
ターゲット
原理は以上!!
• バリエーションがいっぱい!
だから、ややこしくなる (汗;
わんくま同盟名古屋勉強会 #27
基本をしっかり!
単純なバリューオブジェクトの
データバインディング
わんくま同盟名古屋勉強会 #27
MetroTips #31
文字列をコントロールに
バインドするには？
• XAML側でバインドする例
http://www.atmarkit.co.jp/ait/arti
cles/1304/04/news055.html
※ INotifyPropertyChangedの実装
は、必須
方法その1:
INotifyPropertyChangedのイベン
トをそのまま使う(バインドしない)
方法その2:
コードだけでバインドする
(前述)
方法その3:
コードからは、データソースを
DataContextに与え、
XAMLでバインドする
(右のコード→)
わんくま同盟名古屋勉強会 #27
MetroTips #32
文字列以外の値をコント
ロールにバインドするに
は？
• バリューコンバーターの例
*バリューコンバーターを作り、
http://www.atmarkit.co.jp/ait/arti
cles/1304/11/news027.html
・ToString()
文字列以外の値をそのままバイン
ドすると、ToString() が呼び出さ
れる
・バリューコンバーター
バインド時に文字列フォーマット
を変更するには、バリューコン
バーターを使う
(右のコード→)
*XAMLでバリューコンバーターのインスタンス
を
定義して、
・ターゲットが文字列でない場合
バインドするターゲットのプロパ
ティが文字列でない場合も、バ
リューコンバーターを使う
*バインド時にコンバーターも設定する
わんくま同盟名古屋勉強会 #27
MetroTips #33
バインドするデータの
PropertyChangedを楽に
実装するには？
• リファクタリングの例
*リファクタリング前
http://www.atmarkit.co.jp/ait/arti
cles/1304/18/news079.html
・ PropertyChangedイベント
INotifyPropertyChangedを実装す
るクラスでは、バインドに使うプ
ロパティの全てのsetterで、
PropertyChangedイベントを発火
させるコードを書かねばならない
(すげーめんどう)
・リファクタリング
リファクタリングすると、ずいぶ
ん楽になる
•
*リファクタリング後
・BindableBaseクラス
じつは、Commonフォルダに
BindableBaseクラスが用意されて
いる♪
わんくま同盟名古屋勉強会 #27
MetroTips #34
デザイン画面でデータを
バインドするには？
• 2a.の例
* 1. XAMLでバインディングソースを定義
http://www.atmarkit.co.jp/ait/arti
cles/1304/25/news064.html
1. XAMLでソースを生成
XAMLのコードだけでバインディン
グソースのインスタンスを生成
2a. コントロールのDataContext
XAMLで、コントロールの
DataContextにセットする
* 2a.-3 コントロールのDataContextにソースを
セットし、バインドも設定する
または
2b. ページのDataContext
XAMLで、ページのDataContextに
セットする。ページ内のコント
ロールには、ページのDataContext
が伝播する
3. コントロールでバインド
わんくま同盟名古屋勉強会 #27
MetroTips #35
コントロール同士をデー
タ・バインドするには？
• 他のコントロールにバインドする例
スライダーコントロールのValueプロパティを
テキストブロックの前景色と文字列にバインド
http://www.atmarkit.co.jp/ait/arti
cles/1305/09/news030.html
・自分自身とバインド
自分自身の他のプロパティにバイ
ンドできる
※ ということは、コントロールのプロパ
ティは、依存プロパティであるだけでな
く、INotifyPropertyChangedも実装して
いることになる。
・他のコントロールにバインド
他のコントロールのプロパティに
バインドするには、コントロール
を名前で指定する
※ テキストブロックの前景色とのバインドには、
バリューコンバーターも適用している
・定義時に見えないコントロール
例えば、別の場所に定義するテン
プレートなどでも、コントロール
を名前で指定してバインド可能
わんくま同盟名古屋勉強会 #27
基本が出来ていれば…
複雑なオブジェクトの
データバインディング
わんくま同盟名古屋勉強会 #27
MetroTips #36
データ・コレクションを
バインドするには？
• コレクションをコントロールにバインド
するイメージ
http://www.atmarkit.co.jp/ait/arti
cles/1305/16/news060.html
・List<T>などのコレクション
そのままでもバインド可能。
だが、デザイン時にサンプルデー
タを表示できないので、自前のク
ラスを作ったほうが良い
・ItemsSourceプロパティ
コレクションは、コントロールの
ItemsSourceプロパティにセットす
る
コレクション内の個々のアイテム
を、コントロールが必要に応じて
自動的にバインドしてくれる
① コレクションをコントロールのItemsSourceにセット
② コントロールはListViewItemオブジェクトを必要なだけ生
成し、ItemsSourceにセットされたコレクションの各アイテ
ムをListViewItemオブジェクトのData Contextに割り当て
③ これで、コレクションの各アイテムが、個々の
ListViewItemのData Contextにセットされた
わんくま同盟名古屋勉強会 #27
MetroTips #37
? ? ?
乞うご期待!!
バインディングをネタにした連載は
もうちっとだけ続くんじゃ♪
※ コレクションと来たら、次はコ
レクションも値も持っている複合
オブジェクト …かな? f(^^;
わんくま同盟名古屋勉強会 #27
ご清聴ありがとうございました
わんくま同盟名古屋勉強会 #27

Download Report