Embed Size (px)
Citation preview
1
これからはじめるXAML – WPFプログラミング
2
自己紹介 池原 大然
Microsoft MVP for Windows Platform Development
XAML スキー
Twitter ID: @Neri 78
インフラジスティックス・ジャパン株式会社
製品担当
Web: http://jp.infragistics.com
Email: [email protected]
3
セッション ゴール
XAML という言語に慣れる
データ コンテキストを利用した
データ バインディングの基礎を理解する
WPF をベースに XAML プラットフォームで
提供されているデータと UI の連携方法を
理解する
4
本日の内容 – WPF トレーニングからの抜粋
XAML を利用した UI 構築
データ コンテキストを利用したデータ バインディングの利用
データと UI の連携
まとめ:学習を進めるにあたって
XAML を利用したUI 構築
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
XAML 構文 – 属性構文(プロパティ値)
属性名=“属性値” で指定
属性名: プロパティの CLR メンバ名
属性値: 引用符(“) で囲まれた [文字列 ]
<Button VerticalAlignment="Center"FontSize="72"FontWeight="Bold"Content="ぽちっとな" />
8
コンテンツ プロパティ属性
XAML では [ContentProperty] 属性に設定されている
プロパティへの値を直接定義できる
多くの場合 [Object 型] = コンテンツとして「なんでも」指定可能
<Button VerticalAlignment="Center"FontSize="72"FontWeight="Bold">
ぽちっとな</Button>
9
XAML 構文 – プロパティ要素構文 属性構文では表現できない場合に有用
<属性名>属性値</属性名>
先ほどの例と同じ意味を持つ
<Button VerticalAlignment="Center"FontSize="72"FontWeight="Bold">
<Button.Content>ぽちっとな
</Button.Content></Button>
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
DEMOXAML におけるプロパティの設定と複雑な UI の構築
Q. 複数の
UI コントロールにデータを
渡すには？
13
画面仕様
1. 従業員の情報を出したい
2. 従業員が受け持っている顧客を
リストで表示したい
3. リストで選択された顧客に
紐づく受注情報を
テーブルで表示したい
14
A. データ コンテキスト
とデータ バインディング
データコンテキストを利用した
データ バインディング
16
データ コンテキストとは？ FrameworkElement クラスで実装されているプロパティ
上位階層の DataContext から子階層の DataContext へ値を継承することができる
• 画面、あるいは領域に共通したデータを格納できる
（複数データも格納できる)
Window.DataContext=
“ぽちっとな”
上位階層のDataContext が継承されている
17
DEMODataContext の値の継承
18
値は継承できるが…
単純に値を変更しただけでは反映されない
• DataContext の値を変更• TextBlock.Text に再度反映
データ バインディングという仕組みで解決
19
データ バインディングの概念 データ バインディング
あるオブジェクトのプロパティ値 (ターゲット)と、
他のオブジェクト (ソース) を結びつける仕組み
一方が更新されたとき、
他方に更新された値を反映できる
（単方向、双方向）
XAML により宣言的なデータバインディングが可能
依存関係プロパティ システムを活用
TextBlock
TextProperty
Slider
DataContextBinding Object
ターゲット ソース
20
依存関係プロパティ 標準のプロパティを拡張した仕組み
• データバインディング（値の遅延評価と更新）
• スタイル（他者による値の変更）
• アニメーション（他者による値の継続的変化）
• 値の変更通知（コールバック機能）
• 既定値の適用
<Slider x:Name="slider1" /><TextBox x:Name="textBox1"
Text=“依存関係プロパティです” />
21
基本バインディング構文
例） スライダーで選択した値をテキストボックスに表示する
<Slider x:Name="slider1" /><TextBox x:Name="textBox1"
Text="{Binding ElementName=slider1, Path=Value}" />
TextBox.Text をターゲットとして、Slider1 という名前のオブジェクトを
ソースとしそのValue プロパティを バインディング
22
バインディングのソース
4 種類の指定方法TextBlock
TextProperty
TextBlock
DataContextBinding Object
Target Source
ソース 概要
ElementName ソース オブジェクト名が判明している場合に使用
Source ソース オブジェクトそのものを指定リソースとして宣言されているオブジェクトなどの指定に使用
RelativeSource ターゲットの位置に対して相対的な位置を指定自分自身や親要素、他の要素指定が可能
DataContext ターゲット自身の DataContext の値をソースに指定
23
データ コンテキスト バインディング
Window.DataContext=
“ぽちっとな”
上位階層のDataContext が継承されている
<TextBlock Name="tb1“Text="{Binding}" />
自身の DataContext の値をText プロパティに
バインディングWindow.DataContext の値が
かわると即時に反映される
24
DEMODataContext バインディングを利用した UI へのデータ表示
25
データの割り当てとバインディングSimpleDataClass
インスタンス
• StrValue = “ぽちっとな”
DataContext+
DataBinding画面に必要なデータ
エンドユーザーが変更したデータロジックで変更したデータ
これらを一元的に管理できる
+
UI を変更してもロジックに影響が出ない
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
…
…
…
…
データと UI の連携
28
画面仕様
1. 従業員の情報を出したい
2. 従業員が受け持っている顧客を
リストで表示したい
3. リストで選択された顧客に
紐づく受注情報を
テーブルで表示したい
29
それぞれの UI にデータを表示させる
1. TextBlock に従業員の情報
2. ListBox に従業員が
受け持っている顧客
3. DataGrid に ListBox で選択
された顧客に紐づく受注情報
TextBlock
TextBlock
ListBox DataGrid
30
画面に渡すデータ
Employee• EmployeeID• EmployeeName• Customers
(CustomerのコレクションList<Customer>)
Customer• CustomerID• CustomerName• Orders
(Order のコレクションList<Order>)
Order• OrderID• OrderDate• Sales
31
データ コンテキストを利用したデータの連携
Employee
Customerの
コレクション
Orderの
コレクション
Data
Conte
xt
のみで結合
32
DEMOデータ コンテキスト バインディングを利用したデータと UI の連携
33
データと UI の連携
保存すべきデータは全て データ コンテキスト プロパティに集約
データ コンテキスト バインディングを介して UI にデータを表示
目的に合わせて UI コントロールを変更
目的に合わせてテンプレート、スタイルをカスタマイズ
データ バインディングを利用することでユーザーの入力結果が
ダイレクトにデータに反映できる
ビジネスロジック部では入出力されたデータの管理や保存を行う
まとめ:学習を進めるにあたって
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
新しい言語パラダイム = 新要素
スタイル
テンプレート
データ テンプレート
ビヘイビアー
アクション
添付プロパティ
変更通知
テーマ
データ駆動、データ中心渡された「データ」を「どう表現するか」
を常に意識する
37
実開発で頻出の FAQ
ユーザー起点ではなく、ロジック起点でデータを更新し画面に反映するには？
バインディングにおいてデータを直接やりとりするのではなく、変換するには?
(0: 男性, 1:女性)
バインディングを利用した際にユーザーの入力を検証するには?
データと UI を分離したアプリケーションを構築する方法は?
画面の遷移方法は?その際の画面情報の受け渡しは？
Web サービスとの連携方法は?
コントロールの外観をカスタマイズする方法は?
役立つツール、ライブラリーは?
38
インフラジスティックスのサービス・製品
XAML トレーニング
一般的な XAML の知識から実践的なアプリケーション構築方法まで、
「これから」XAML を活用したアプリケーションを構築するための
ノウハウを共有
WPF をはじめとした UI コントロール
「どう表現するか」を予めデザインした UI を利用することで
「カスタマイズ」という手間を省く
Windows Forms ライクな開発手法にも対応
39
