わんくま名古屋#27(20130518) データバインディングを極める

わんくま同盟 名古屋勉強会 #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

ご清聴ありがとうございました