”今からはじめる XAML プログラミング セミナー" において製品担当の池原 (@Neri78) が講演させていただいた際の資料です。

1. 1
これからはじめる
XAML – WPF
プログラミング

2. 2
自己紹介
 池原 大然
 Microsoft MVP for Windows Platform Development
 XAML スキー
 Twitter ID: @Neri 78
 インフラジスティックス・ジャパン株式会社
 製品担当
 Web: http://jp.infragistics.com
 Email: dikehara@infragistics.com

3. 3
セッション ゴール
XAML という言語に慣れる
データ コンテキストを利用した
データ バインディングの基礎を理解する
WPF をベースに XAML プラットフォームで
提供されているデータと UI の連携方法を
理解する

4. 4
本日の内容 – WPF トレーニングからの抜粋
XAML を利用した UI 構築
データ コンテキストを利用したデータ バインディングの利用
データと UI の連携
まとめ:学習を進めるにあたって

5. XAML を利用した
UI 構築

6. 6
XAML とは？
 XAML = Extensible Application Markup Language
 XML を拡張したアプリケーション マークアップ言語
 HTML に近く WPF では「宣言的」に UI を記述する言語として利用される
MSDN – 新井省三のBlog - XAML とは何か？
http://blogs.msdn.com/b/shozoa/archive/2014/07/23/what-s-xaml.aspx
<Button VerticalAlignment="Center"
FontSize="72"
FontWeight="Bold"
Content="ぽちっとな" />

7. 7
XAML 構文 – 属性構文(プロパティ値)
 属性名=“属性値” で指定
 属性名: プロパティの CLR メンバ名
 属性値: 引用符(“) で囲まれた [文字列 ]
<Button VerticalAlignment="Center"
FontSize="72"
FontWeight="Bold"
Content="ぽちっとな" />

8. 8
コンテンツ プロパティ属性
 XAML では [ContentProperty] 属性に設定されている
プロパティへの値を直接定義できる
 多くの場合 [Object 型] = コンテンツとして「なんでも」指定可能
<Button VerticalAlignment="Center"
FontSize="72"
FontWeight="Bold">
ぽちっとな
</Button>

9. 9
XAML 構文 – プロパティ要素構文
 属性構文では表現できない場合に有用
 <属性名>属性値</属性名>
 先ほどの例と同じ意味を持つ
<Button VerticalAlignment="Center"
FontSize="72"
FontWeight="Bold">
<Button.Content>
ぽちっとな
</Button.Content>
</Button>

10. 10
複雑な要素の指定
 コンテンツ プロパティ + プロパティ要素構文を利用することで複雑な UI を定義
<Button VerticalAlignment="Center“
FontSize="72“
FontWeight="Bold">
<StackPanel Orientation="Horizontal">
<Image Width="128" Height="128“
Source="Images/MedicalBag128.png" />
<TextBlock Text="ぽちっとな“
VerticalAlignment="Center" />
</StackPanel>
</Button>

11. 11
DEMO
XAML におけるプロパティの設定と複雑な UI の構築

12. Q.
複数の
UI コントロールに
データを
渡すには？

13. 13
画面仕様
1. 従業員の情報を出したい
2. 従業員が受け持っている顧客を
リストで表示したい
3. リストで選択された顧客に
紐づく受注情報を
テーブルで表示したい

14. 14
A.
データ コンテキスト
と
データ バインディング

15. データコンテキストを
利用した
データ バインディング

16. 16
データ コンテキストとは？
 FrameworkElement クラスで実装されているプロパティ
 上位階層の DataContext から子階層の DataContext へ値を継承することができる
• 画面、あるいは領域に共通したデータを格納できる
（複数データも格納できる)
Window.DataContext
=
“ぽちっとな”
上位階層の
DataContext が
継承されている

17. 17
DEMO
DataContext の値の継承

18. 18
値は継承できるが…
 単純に値を変更しただけでは反映されない
• DataContext の値を変更
• TextBlock.Text に再度反映
データ バインディングという仕組み
で解決

19. 19
データ バインディングの概念
 データ バインディング
 あるオブジェクトのプロパティ値 (ターゲット)と、
他のオブジェクト (ソース) を結びつける仕組み
 一方が更新されたとき、
他方に更新された値を反映できる
（単方向、双方向）
 XAML により宣言的なデータバインディングが可能
 依存関係プロパティ システムを活用
TextBlock
TextProperty
Slider
DataContextBinding Object
ターゲット ソース

20. 20
依存関係プロパティ
 標準のプロパティを拡張した仕組み
• データバインディング（値の遅延評価と更新）
• スタイル（他者による値の変更）
• アニメーション（他者による値の継続的変化）
• 値の変更通知（コールバック機能）
• 既定値の適用
<Slider x:Name="slider1" />
<TextBox x:Name="textBox1"
Text=“依存関係プロパティです” />

21. 21
基本バインディング構文
 例） スライダーで選択した値をテキストボックスに表示する
<Slider x:Name="slider1" />
<TextBox x:Name="textBox1"
Text="{Binding ElementName=slider1, Path=Value}" />
TextBox.Text をターゲットとして、
Slider1 という名前のオブジェクトを
ソースとしその
Value プロパティを バインディング

22. 22
バインディングのソース
4 種類の指定方法
TextBlock
TextProperty
TextBlock
DataContext
Binding Object
Target Source
ソース 概要
ElementName ソース オブジェクト名が判明している場合に使用
Source ソース オブジェクトそのものを指定
リソースとして宣言されているオブジェクトなどの指定に使用
RelativeSource ターゲットの位置に対して相対的な位置を指定
自分自身や親要素、他の要素指定が可能
DataContext ターゲット自身の DataContext の値をソースに指定

23. 23
データ コンテキスト バインディング
Window.DataContext
=
“ぽちっとな”
上位階層の
DataContext が
継承されている
<TextBlock Name="tb1“
Text="{Binding}" />
自身の DataContext の値を
Text プロパティに
バインディング
Window.DataContext の値が
かわると即時に反映される

24. 24
DEMO
DataContext バインディングを利用した UI へのデータ表示

25. 25
データの割り当てとバインディング
SimpleDataClass
インスタンス
• StrValue = “ぽちっとな”
DataContext
+
DataBinding
画面に必要なデータ
エンドユーザーが変更したデータ
ロジックで変更したデータ
これらを一元的に管理できる
+
UI を変更してもロジックに
影響が出ない

26. 26
参考:
 複雑なコントロールであっても基本的な考え方は同じ
 DataGrid にコレクションをバインドする
 DataGridRow.DataContext に 1 行分のデータが割り当てられる
 DataGridCell ではセルが属する列 に指定された Key 値に基づいて
1 行分のデータから列に対応する値がバインディングされる
OrderID OrderDate Sales
00114 6/2/2015 3:11: 28 AM 33445
00106 6/17/2015 3:11:28 AM 77289
…
…
…
…

27. データと UI の連携

28. 28
画面仕様
1. 従業員の情報を出したい
2. 従業員が受け持っている顧客を
リストで表示したい
3. リストで選択された顧客に
紐づく受注情報を
テーブルで表示したい

29. 29
それぞれの UI にデータを表示させる
1. TextBlock に従業員の情報
2. ListBox に従業員が
受け持っている顧客
3. DataGrid に ListBox で選択
された顧客に紐づく受注情報
TextBlock
TextBlock
ListBox DataGrid

30. 30
画面に渡すデータ
Employee
• EmployeeID
• EmployeeName
• Customers
(Customerの
コレクション
List<Customer>)
Customer
• CustomerID
• CustomerName
• Orders
(Order のコレクション
List<Order>)
Order
• OrderID
• OrderDate
• Sales

31. 31
データ コンテキストを利用したデータの連携
Employee
Customer
の
コレクション
Order
の
コレクショ
ン
DataContext
の
み
で
結
合

32. 32
DEMO
データ コンテキスト バインディングを利用した
データと UI の連携

33. 33
データと UI の連携
 保存すべきデータは全て データ コンテキスト プロパティに集約
 データ コンテキスト バインディングを介して UI にデータを表示
 目的に合わせて UI コントロールを変更
 目的に合わせてテンプレート、スタイルをカスタマイズ
 データ バインディングを利用することでユーザーの入力結果が
ダイレクトにデータに反映できる
 ビジネスロジック部では入出力されたデータの管理や保存を行う

34. まとめ:学習を
進めるにあたって

35. 35
まずはここから:リソース
 MSDN – WPF
https://msdn.microsoft.com/ja-jp/library/aa970268%28v=vs.110%29.aspx
 荒井さんの Blog
http://blogs.msdn.com/b/shozoa/archive/2014/07/23/what-s-xaml.aspx
 @IT – WPF入門
http://www.atmarkit.co.jp/ait/subtop/features/dotnet/app/introwpf_index.html
 Infragistics WPF コントロール
http://jp.infragistics.com/WPF

36. 36
新しい言語パラダイム = 新要素
 スタイル
 テンプレート
 データ テンプレート
 ビヘイビアー
 アクション
 添付プロパティ
 変更通知
 テーマ
データ駆動、データ中心
渡された「データ」を「どう表現するか」
を常に意識する

37. 37
実開発で頻出の FAQ
 ユーザー起点ではなく、ロジック起点でデータを更新し画面に反映するには？
 バインディングにおいてデータを直接やりとりするのではなく、変換するには?
(0: 男性, 1:女性)
 バインディングを利用した際にユーザーの入力を検証するには?
 データと UI を分離したアプリケーションを構築する方法は?
 画面の遷移方法は?その際の画面情報の受け渡しは？
 Web サービスとの連携方法は?
 コントロールの外観をカスタマイズする方法は?
 役立つツール、ライブラリーは?

38. 38
インフラジスティックスのサービス・製品
 XAML トレーニング
 一般的な XAML の知識から実践的なアプリケーション構築方法まで、
「これから」XAML を活用したアプリケーションを構築するための
ノウハウを共有
 WPF をはじめとした UI コントロール
 「どう表現するか」を予めデザインした UI を利用することで
「カスタマイズ」という手間を省く
 Windows Forms ライクな開発手法にも対応

39. 39