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

わんくま同盟名古屋勉強会 #27

Windows ストアアプリの肝～データバインディングを極める !

2013/5/18

BluewaterSoft biac


Windows ストアアプリを作るのに必要なこと

• 昔 Metro と言っていたUI

• Windows Runtime• ガチガチのサンドボック

スへの対処• async / await

• たくさん必要 !その中のひとつで、けっこう難解なのが…

……

データバインディング


スピーカー紹介


スピーカー紹介 • 1957: スプートニク以前に誕生 ( 宇宙世紀未満 )

• 1983: 名古屋大学工学部( 修士 ) 卒

• HONDA R&D で自動車設計• 1994 ～ソフトウェア業界• 2012 ～

BluewaterSoft

biac ( 山本康彦 )http://www.bluewatersoft.jp


スピーカー紹介 • 本を書いたり


速攻入門 C# プログラミング

技術評論社、共著2012/3

Windows 8 業務アプリ開発読本

技術評論社、共著2013/3

C# でマルチスレッドプログラミング ( 仮題 )

【近刊予定】

NOW

PRINTIN

G


スピーカー紹介 • 記事を書いたり


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

今日の話は、この連載の中から !


スピーカー紹介 • アプリを作ったり



スピーカー紹介 • スピーカーやったり

2013/5/11 COD 2013



スピーカー紹介 • 講師やったりしてます


C# / VB.NET によるWindows 8 アプリ開発入門

2013/7/11 ～ 12名古屋ソフトウェアセンター

http://www.nagoya-sc.co.jp/ap/seminar?m=1&key=10734


データバインディングってどこで使うの ?

まだまだ前振り


データバインディングの使いどころ

赤枠で囲った表示部分は、データバインディングを使ってます。

画面表示 ≒データバインディング


データバインディング

良いところ• データを変更すれば、

自動的に画面も更新される

すなわち、* 非同期でのデータ更新* バックグラウンドタスクでの画面更新が簡単♪

悪いところ• 最初がめんどくさい

• なんといっても、難しい !!


データバインディングによる画面更新

データの中身を非同期で書き換えてやるだけで、画面表示も変わる。

※注 : 正確には、データの取得処理を非同期で行い、データの書き換えは UI スレッドに戻してから行う。


データバインディングの原理的なお話

そろそろ本題


バインディングのソースとターゲット、そして Binding クラス

http://msdn.microsoft.com/ja-jp/library/cc278072.aspx

画面ロジック

注意 : バインディングエンジンから見えないといけないので、どちらも public にしておく必要がある


バインディングソース

• 表示したいデータをプロパティとして公開

• 動的に表示を変えたいなら、INotifyPropertyChanged を実装すること


バインディングターゲット

• バインドしてもらいたいプロパティをDependencyProperty ( 依存プロパティ )として実装


バインディングする

• Binding オブジェクトを生成し、バインディングソースを教える

• BindingOperations クラスに頼んで、上で作った Binding オブジェクトを、ターゲットにバインドしてもらう

ソースターゲットBinding オブジェクト


原理は以上 !!

• バリエーションがいっぱい !だから、ややこしくなる ( 汗 ;


単純なバリューオブジェクトのデータバインディング

基本をしっかり !


MetroTips #31 文字列をコントロールにバインドするには？

• XAML 側でバインドする例

http://www.atmarkit.co.jp/ait/articles/1304/04/news055.html

※ INotifyPropertyChanged の実装は、必須

方法その 1:INotifyPropertyChanged のイベントをそのまま使う ( バインドしない )

方法その 2:コードだけでバインドする( 前述 )

方法その 3:コードからは、データソースをDataContext に与え、XAML でバインドする ( 右のコード→ )


MetroTips #32 文字列以外の値をコントロールにバインドするには？

• バリューコンバーターの例* バリューコンバーターを作り、

*XAML でバリューコンバーターのインスタンスを定義して、

* バインド時にコンバーターも設定する


・ ToString() 文字列以外の値をそのままバインドすると、 ToString() が呼び出される

・バリューコンバーターバインド時に文字列フォーマットを変更するには、バリューコンバーターを使う( 右のコード→ )

・ターゲットが文字列でない場合バインドするターゲットのプロパティが文字列でない場合も、バリューコンバーターを使う


MetroTips #33 バインドするデータのPropertyChanged を楽に実装するには？

• リファクタリングの例* リファクタリング前

•

* リファクタリング後


・ PropertyChanged イベント

INotifyPropertyChanged を実装するクラスでは、バインドに使うプロパティの全ての setterで、 PropertyChanged イベントを発火させるコードを書かねばならない ( すげーめんどう )

・リファクタリングリファクタリングすると、ずいぶん楽になる

・ BindableBase クラスじつは、 Common フォルダにBindableBase クラスが用意されている♪


MetroTips #34 デザイン画面でデータをバインドするには？

• 2a. の例* 1. XAML でバインディングソースを定義

* 2a.-3 コントロールの DataContext にソースをセットし、バインドも設定する


1. XAML でソースを生成XAML のコードだけでバインディングソースのインスタンスを生成

2a. コントロールのDataContextXAML で、コントロールのDataContext にセットする

または

2b. ページの DataContextXAML で、ページの DataContextにセットする。ページ内のコントロールには、ページのDataContext が伝播する

3. コントロールでバインド


MetroTips #35 コントロール同士をデータ・バインドするには？

• 他のコントロールにバインドする例

スライダーコントロールの Value プロパティをテキストブロックの前景色と文字列にバインド

※ テキストブロックの前景色とのバインドには、バリューコンバーターも適用している


・自分自身とバインド自分自身の他のプロパティにバインドできる※ ということは、コントロールのプロパティは、依存プロパティであるだけでなく、 INotifyPropertyChanged も実装していることになる。

・他のコントロールにバインド他のコントロールのプロパティにバインドするには、コントロールを名前で指定する

・定義時に見えないコントロール例えば、別の場所に定義するテンプレートなどでも、コントロールを名前で指定してバインド可能


複雑なオブジェクトのデータバインディング

基本が出来ていれば…


MetroTips #36 データ・コレクションをバインドするには？

• コレクションをコントロールにバインドするイメージ

① コレクションをコントロールの ItemsSource にセット② コントロールは ListViewItem オブジェクトを必要なだけ生成し、 ItemsSource にセットされたコレクションの各アイテムを ListViewItem オブジェクトの Data Context に割り当て③ これで、コレクションの各アイテムが、個々のListViewItem の Data Context にセットされた


・ List<T> などのコレクションそのままでもバインド可能。だが、デザイン時にサンプルデータを表示できないので、自前のクラスを作ったほうが良い

・ ItemsSource プロパティコレクションは、コントロールのItemsSource プロパティにセットする

コレクション内の個々のアイテムを、コントロールが必要に応じて自動的にバインドしてくれる


MetroTips #37

? ? ?

※ コレクションと来たら、次はコレクションも値も持っている複合オブジェクト …かな ? f(^^;

乞うご期待 !!

バインディングをネタにした連載はもうちっとだけ続くんじゃ♪


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

Technology

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