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