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
© Copyright 2025 ExpyDoc