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