More Related Content Similar to 【12-D-2】 WPF アプリケーション開発 Similar to 【12-D-2】 WPF アプリケーション開発 (20) More from devsumi2009 (20) 【12-D-2】 WPF アプリケーション開発2. Agenda
What is WPF ?
WinForm から WPFへ
WPFアプリケーション開発ポイント
WPFアプリケーション開発プロジェクト
まとめ
3. Design
User
Experience
WPF の特徴と取り巻く環境について Environment
WHAT IS WPF ?
4. What is WPF ?
Windows Presentation Foundation そのメリット
高速・高品質な描画
GPUを使ったUI処理
ベクタベースの描画
メディアの統合
テキスト,2D,3D,ビデオ,オーディオ
UIとロジックの分離
XAML + CodeBehind(VB,C#)
高い開発生産性
1
5. What is WPF ?
WPF now and Future
対応環境
!
No w Windows XP,Vista,7 (ClientOSのみ列挙)
Visual Studio 2008 / Expression Studio2
クライアントは WinForm から WPFへ
!
ture WPF Toolkit でコントロールの拡張
Fu
Windows 7 新機能への対応 (3.5SP or 4.0)
WinFormは基本的にメンテナンスモードへ
2
6. Control
Technique
Form
Dialog
Window
WPFアプリケーション開発のためのポイント
WINFORM から WPFへ
7. WinForm から WPFへ
WPFに対応したコントロール
WPFでもほぼ同等のコントロール
Form, UserControl
Button, CheckBox, RadioButton
TextBox, Label, RichTextBox
MultiLine → AcceptsReturn
ListBox, ComboBox
ProgressBar, TrackBar
TabControl
PictureBox
3
8. WinForm から WPFへ
コントロールに対応する
WPFでも対応可能なコントロール
ListView, TreeView
ToolStrip, StatusStrip → Toolbar, StatusBar
HScrollBar, VScrollBar → ScrollBar
形を変えて再現可能なコントロール
CheckedListbox → ListBox Template
ToolTips → 各コントロールのToolTipプロパティ
LinkLabel → <TextBlock><HyperLink>
UpDown → TextBox + RepeatButton
9. WinForm から WPFへ
ダイアログ
WPFにはダイアログコントロールはない
OpenFileDialog, SaveFileDialog
PresentationFrameworkに実装
Microsoft.Win32.OpenFileDilog
Microsoft.Win32.SaveFileDilog
必要に合わせて実装 (必要ならば)
ColorDialog: Windows.Media.Color
FontDialog:フォントの取扱いが異なる
3
10. WinForm から WPFへ
イベントハンドリング
必要に応じてプログラム側で管理
例)Listbox SelectionChanged
ロード時のエラーを回避するため、
プログラム側でロード時にアタッチ
Event Rising !
イベントバブリング
複数のコントロールのイベントをまとめる
むやみに使わない(管理が複雑に)
4
11. WinForm から WPFへ
スレッディング
UI要素へのアクセスはUIスレッドから
UI スレッド以外から、UI要素にアクセスすると
例外が発生
UIスレッドをブロックしない
コントロールからのイベントハンドラは
UIスレッドで処理される
重い処理はUI処理(アニメーション)を阻害
BackgroundWorker.DoWorkで別スレッド
5
12. WinForm から WPFへ
データバインドとデザイン
データはバインドで
データバインドにあったデータを作る
データソースは使いまわしやすい構造に
複数のコントロールから扱うために
DataContextを利用する
DataSource
デザイナーのために先に用意
コンバータ Panel
DataContext
ダミーデータ
6 Control1 Control2
13. Designed
Tower
Main Window
Statu
Sky &
Cloud
WPFアプリケーションデザインのためのポイント
WPFアプリケーションデザイン
14. WPFアプリケーションデザイン
レイアウトデザイン
適したパネルを使う
コンテンツの扱い方に合わせて
相対位置での座標指定
ウィンドウサイズの変更に対応
パネルの利用用途 Grid
Item Item Item
画面レイアウト Canvas
Item
Item
グループ化 Item
レイヤー
7 Stack
Dock
15. WPFアプリケーションデザイン
スタイルとテンプレート
スタイル
コントロールのプロパティ値を一括管理
リソース内に配置 Style
コントロールに適用される ForeColor:white
OuterGlowBitmapEffect
Font Name :Arial
OK Font Size: 16
Font Align:Center
テンプレート ForeColor : Green
BorderColor : DarkGreen
コントロールの構造
を定義する
Template
リソース内に配置 Grid Panel
+ Stack Panel (Vertical)
コントロールに適応 + TextBlock
+ Path
16. WPFアプリケーションデザイン
スタイルのスコープ
Button
Style
Application
A
Grid Dock Button
Button
Canvas Style
B
Button Button Button
n
Butto
n
Butto
Stack Button
Style
C
18. WPFアプリケーションデザイン
スタイルの継承
優れたデザインは統一されたデザイン
同じ設定=スタイルを使う
共通スタイルとして定義
コントロール毎に異なるものは個別に定義
Button
Text Style
Style
8 TextBox
Text Style
Style
Text Style
GridPanel Grid Panel
Text Style Text Style
Style 2 Style
19. WPFアプリケーションデザイン
スタイルとテンプレート
スタイルの方が管理しやすい
テンプレートをスタイルに組み込む
スタイルで管理 Resource
リーソースに保存 Dictionary
OK
Style
Style ForeColor:white
Style
OuterGlowBitmapEffect
ForeColor:white
Font Name :Arial
OuterGlowBitmapEffect
Font Size: 16
Font Name :Arial
Font Align:Center
Font Size: 16
Font Align:Center
Template
ForeColor : Green
BorderColor : DarkGreen Grid Panel
+ Stack Panel (Vertical)
+ TextBlock
+ Path
Template
ForeColor : Green
Grid Panel
9 BorderColor : DarkGreen
+ Stack Panel (Vertical)
+ TextBlock
+ Path
22. Developer
Interactive
Designer Designer
Project
Manager
WPFアプリケーション開発プロジェクトを考える
WPFアプリケーション開発モデル
25. WPFアプリケーション開発モデル
WPF開発ワークフローモデル
作業見積もり・開発環境整備
UIイメージ・画面設計(ラフ画面イメージ)
データ構造・構成の検討・設計
機能の詳細化
データバインドデータ
・操作→応答動作の詳細仕様
コンバータの開発
絵コンテ
アプリケーション開発
•ビジネスロジック開発 UIプロトタイプ作成
•コンポーネント開発
レイアウト・スタイル
アニメーション開発
結合テスト・検証(ロジック・アニメーション)
26. WPFアプリケーション開発モデル
プロジェクトファイル構成例
ソリューション
WPFプロジェクト
画像等
ディクショナリ
リソースディクショナリ.xaml
ユーザーコントロール
ユーザーコントロール.xaml (.cs/.vb)
ページ・Windowファイル.xaml (.cs/.vb)
共通クラス.xaml (.cs/.vb)
27. Ribbon Interface
Multi Touch
Interface
Taskbar
WPF support
Windows7
Windows アプリケーションはWPFアプリケーションへ
まとめ
29. © 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market
conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.