WPF アプリケーション開発



12-D-2   高橋 忍
         マイクロソフト株式会社
         デベロッパー&プラットフォーム統括本部
         エバンジェリスト
Agenda

  What is WPF ?
  WinForm から WPFへ
  WPFアプリケーション開発ポイント
  WPFアプリケーション開発プロジェクト
  まとめ
Design


                 User
                 Experience


WPF の特徴と取り巻く環境について            Environment

WHAT IS WPF ?
What is WPF ?
Windows Presentation Foundation そのメリット


    高速・高品質な描画
       GPUを使ったUI処理
       ベクタベースの描画
    メディアの統合
     ...
What is WPF ?
 WPF now and Future

         対応環境
     !
No w      Windows XP,Vista,7 (ClientOSのみ列挙)
          Visual Studi...
Control
                        Technique
     Form
             Dialog
             Window



WPFアプリケーション開発のためのポイント

WINF...
WinForm から WPFへ
WPFに対応したコントロール
    WPFでもほぼ同等のコントロール
     Form, UserControl
     Button, CheckBox, RadioButton
     TextBox...
WinForm から WPFへ
コントロールに対応する
   WPFでも対応可能なコントロール
     ListView, TreeView
     ToolStrip, StatusStrip → Toolbar, StatusBar
 ...
WinForm から WPFへ
ダイアログ
    WPFにはダイアログコントロールはない
     OpenFileDialog, SaveFileDialog
       PresentationFrameworkに実装
        ...
WinForm から WPFへ
イベントハンドリング
    必要に応じてプログラム側で管理
     例)Listbox SelectionChanged
     ロード時のエラーを回避するため、
     プログラム側でロード時にアタッチ...
WinForm から WPFへ
スレッディング
    UI要素へのアクセスはUIスレッドから
     UI スレッド以外から、UI要素にアクセスすると
     例外が発生

    UIスレッドをブロックしない
     コントロールから...
WinForm から WPFへ
データバインドとデザイン
    データはバインドで
     データバインドにあったデータを作る
     データソースは使いまわしやすい構造に
     複数のコントロールから扱うために
     DataC...
Designed
                            Tower
 Main Window


   Statu

                 Sky &
                 Cloud

WPFアプリケ...
WPFアプリケーションデザイン
レイアウトデザイン
    適したパネルを使う
     コンテンツの扱い方に合わせて
    相対位置での座標指定
     ウィンドウサイズの変更に対応
    パネルの利用用途      Grid
    ...
WPFアプリケーションデザイン
スタイルとテンプレート
  スタイル
   コントロールのプロパティ値を一括管理
   リソース内に配置          Style
   コントロールに適用される         ForeColor:whit...
WPFアプリケーションデザイン
スタイルのスコープ
                                                 Button
                                        ...
WPFアプリケーションデザイン
スタイルのスコープ
スタイルは
上位で適応された
設定が継承される

コントロール個別に
適応されたものは有効
WPFアプリケーションデザイン
スタイルの継承
       優れたデザインは統一されたデザイン
       同じ設定=スタイルを使う
           共通スタイルとして定義
           コントロール毎に異なるものは個別に定義...
WPFアプリケーションデザイン
スタイルとテンプレート
    スタイルの方が管理しやすい
    テンプレートをスタイルに組み込む
     スタイルで管理                      Resource
     リーソースに保...
WPFアプリケーションデザイン
ユーザーコントロール
  WPFではユーザーコントロールを積極的に
  使うべき
   オブジェクトのカプセル化
   どんな条件で作るべきか
     特定の機能を持ったオブジェクト
     数が不特定もしく...
WPFアプリケーションデザイン
 アプリケーションの構造




イベント
Developer
                          Interactive
   Designer                 Designer
               Project
              ...
WPFアプリケーション開発モデル
WPF開発プロジェクト構成
            デベロッパー   テスター

ビジネスロジック

共通コンポーネント

データアクセス

ページレイアウト
WPFアプリケーション開発モデル
WPF開発プロジェクト構成
                     デザイナー
            デベロッパー            テスター
                     デザイン部門
ビ...
WPFアプリケーション開発モデル
WPF開発ワークフローモデル
              作業見積もり・開発環境整備

        UIイメージ・画面設計(ラフ画面イメージ)

           データ構造・構成の検討・設計

   ...
WPFアプリケーション開発モデル
プロジェクトファイル構成例
   ソリューション
     WPFプロジェクト
      画像等
      ディクショナリ
        リソースディクショナリ.xaml
      ユーザーコントロール...
Ribbon Interface
                            Multi Touch
                              Interface

    Taskbar
            ...
まとめ
コラボレーションかシンプルスタイル

  できる限りデザイナと分離する
      デベロッパーによる支援
      静的な定義と動的な処理による区分
      データによる連携
  WinFormの延長でOK
      コードビ...
© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
Upcoming SlideShare
Loading in …5
×

【12-D-2】 WPF アプリケーション開発

10,668 views

Published on

  • Be the first to comment

【12-D-2】 WPF アプリケーション開発

  1. 1. WPF アプリケーション開発 12-D-2 高橋 忍 マイクロソフト株式会社 デベロッパー&プラットフォーム統括本部 エバンジェリスト
  2. 2. Agenda What is WPF ? WinForm から WPFへ WPFアプリケーション開発ポイント WPFアプリケーション開発プロジェクト まとめ
  3. 3. Design User Experience WPF の特徴と取り巻く環境について Environment WHAT IS WPF ?
  4. 4. What is WPF ? Windows Presentation Foundation そのメリット 高速・高品質な描画 GPUを使ったUI処理 ベクタベースの描画 メディアの統合 テキスト,2D,3D,ビデオ,オーディオ UIとロジックの分離 XAML + CodeBehind(VB,C#) 高い開発生産性 1
  5. 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. 6. Control Technique Form Dialog Window WPFアプリケーション開発のためのポイント WINFORM から WPFへ
  7. 7. WinForm から WPFへ WPFに対応したコントロール WPFでもほぼ同等のコントロール Form, UserControl Button, CheckBox, RadioButton TextBox, Label, RichTextBox MultiLine → AcceptsReturn ListBox, ComboBox ProgressBar, TrackBar TabControl PictureBox 3
  8. 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. 9. WinForm から WPFへ ダイアログ WPFにはダイアログコントロールはない OpenFileDialog, SaveFileDialog PresentationFrameworkに実装 Microsoft.Win32.OpenFileDilog Microsoft.Win32.SaveFileDilog 必要に合わせて実装 (必要ならば) ColorDialog: Windows.Media.Color FontDialog:フォントの取扱いが異なる 3
  10. 10. WinForm から WPFへ イベントハンドリング 必要に応じてプログラム側で管理 例)Listbox SelectionChanged ロード時のエラーを回避するため、 プログラム側でロード時にアタッチ Event Rising ! イベントバブリング 複数のコントロールのイベントをまとめる むやみに使わない(管理が複雑に) 4
  11. 11. WinForm から WPFへ スレッディング UI要素へのアクセスはUIスレッドから UI スレッド以外から、UI要素にアクセスすると 例外が発生 UIスレッドをブロックしない コントロールからのイベントハンドラは UIスレッドで処理される 重い処理はUI処理(アニメーション)を阻害 BackgroundWorker.DoWorkで別スレッド 5
  12. 12. WinForm から WPFへ データバインドとデザイン データはバインドで データバインドにあったデータを作る データソースは使いまわしやすい構造に 複数のコントロールから扱うために DataContextを利用する DataSource デザイナーのために先に用意 コンバータ Panel DataContext ダミーデータ 6 Control1 Control2
  13. 13. Designed Tower Main Window Statu Sky & Cloud WPFアプリケーションデザインのためのポイント WPFアプリケーションデザイン
  14. 14. WPFアプリケーションデザイン レイアウトデザイン 適したパネルを使う コンテンツの扱い方に合わせて 相対位置での座標指定 ウィンドウサイズの変更に対応 パネルの利用用途 Grid Item Item Item 画面レイアウト Canvas Item Item グループ化 Item レイヤー 7 Stack Dock
  15. 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. 16. WPFアプリケーションデザイン スタイルのスコープ Button Style Application A Grid Dock Button Button Canvas Style B Button Button Button n Butto n Butto Stack Button Style C
  17. 17. WPFアプリケーションデザイン スタイルのスコープ スタイルは 上位で適応された 設定が継承される コントロール個別に 適応されたものは有効
  18. 18. WPFアプリケーションデザイン スタイルの継承 優れたデザインは統一されたデザイン 同じ設定=スタイルを使う 共通スタイルとして定義 コントロール毎に異なるものは個別に定義 Button Text Style Style 8 TextBox Text Style Style Text Style GridPanel Grid Panel Text Style Text Style Style 2 Style
  19. 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. 20. WPFアプリケーションデザイン ユーザーコントロール WPFではユーザーコントロールを積極的に 使うべき オブジェクトのカプセル化 どんな条件で作るべきか 特定の機能を持ったオブジェクト 数が不特定もしくは多数 動的な処理を必要とする デザインとUIは分離して設計
  21. 21. WPFアプリケーションデザイン アプリケーションの構造 イベント
  22. 22. Developer Interactive Designer Designer Project Manager WPFアプリケーション開発プロジェクトを考える WPFアプリケーション開発モデル
  23. 23. WPFアプリケーション開発モデル WPF開発プロジェクト構成 デベロッパー テスター ビジネスロジック 共通コンポーネント データアクセス ページレイアウト
  24. 24. WPFアプリケーション開発モデル WPF開発プロジェクト構成 デザイナー デベロッパー テスター デザイン部門 ビジネスロジック 共通コンポーネント データアクセス ページレイアウト コンバータ スタイル インタラクション
  25. 25. WPFアプリケーション開発モデル WPF開発ワークフローモデル 作業見積もり・開発環境整備 UIイメージ・画面設計(ラフ画面イメージ) データ構造・構成の検討・設計 機能の詳細化 データバインドデータ ・操作→応答動作の詳細仕様 コンバータの開発 絵コンテ アプリケーション開発 •ビジネスロジック開発 UIプロトタイプ作成 •コンポーネント開発 レイアウト・スタイル アニメーション開発 結合テスト・検証(ロジック・アニメーション)
  26. 26. WPFアプリケーション開発モデル プロジェクトファイル構成例 ソリューション WPFプロジェクト 画像等 ディクショナリ リソースディクショナリ.xaml ユーザーコントロール ユーザーコントロール.xaml (.cs/.vb) ページ・Windowファイル.xaml (.cs/.vb) 共通クラス.xaml (.cs/.vb)
  27. 27. Ribbon Interface Multi Touch Interface Taskbar WPF support Windows7 Windows アプリケーションはWPFアプリケーションへ まとめ
  28. 28. まとめ コラボレーションかシンプルスタイル できる限りデザイナと分離する デベロッパーによる支援 静的な定義と動的な処理による区分 データによる連携 WinFormの延長でOK コードビハインドのみでも構成可能 XMLを意識しないコーディング オブジェクトとカプセル化を強調
  29. 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.

×