Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie 【12-D-2】 WPF アプリケーション開発
Ähnlich wie 【12-D-2】 WPF アプリケーション開発 (20)
Mehr von devsumi2009
Mehr von devsumi2009 (20)
【12-D-2】 WPF アプリケーション開発
- 1. WPF アプリケーション開発 12-D-2 高橋 忍 マイクロソフト株式会社 デベロッパー&プラットフォーム統括本部 エバンジェリスト
- 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
- 20. WPFアプリケーションデザイン ユーザーコントロール WPFではユーザーコントロールを積極的に 使うべき オブジェクトのカプセル化 どんな条件で作るべきか 特定の機能を持ったオブジェクト 数が不特定もしくは多数 動的な処理を必要とする デザインとUIは分離して設計
- 22. Developer Interactive Designer Designer Project Manager WPFアプリケーション開発プロジェクトを考える WPFアプリケーション開発モデル
- 23. WPFアプリケーション開発モデル WPF開発プロジェクト構成 デベロッパー テスター ビジネスロジック 共通コンポーネント データアクセス ページレイアウト
- 24. 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アプリケーションへ まとめ
- 28. まとめ コラボレーションかシンプルスタイル できる限りデザイナと分離する デベロッパーによる支援 静的な定義と動的な処理による区分 データによる連携 WinFormの延長でOK コードビハインドのみでも構成可能 XMLを意識しないコーディング オブジェクトとカプセル化を強調
- 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.