【12-d-2】　wpf アプリケーション開発

高橋高橋忍忍

マイクロソフト株式会社マイクロソフト株式会社

デベロッパーデベロッパー&&プラットフォーム統括本部プラットフォーム統括本部

エバンジェリストエバンジェリスト

12-D-2

WPFWPF アプリケーション開発アプリケーション開発

AgendaAgenda

What is WPFWhat is WPF ??

WinForm WinForm からから WPFWPFへへ

WPFWPFアプリケーション開発ポイントアプリケーション開発ポイント

WPFWPFアプリケーション開発プロジェクトアプリケーション開発プロジェクト

まとめまとめ

WHAT IS WPFWHAT IS WPF ??

WPFWPF

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

DesignDesign

UserExperienceUserExperience

EnvironmentEnvironment

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

高速・高品質高速・高品質な描画な描画

GPUを使ったUI処理

ベクタベースの描画

メディアの統合

テキスト,2D,3D,ビデオ,オーディオ

UIとロジックの分離

XAML + CodeBehind(VB,C#)

高い開発生産性11

What is WPFWhat is WPF ?? WPF now and FutureWPF now and Future

対応環境対応環境

Windows Windows XPXP,,VistaVista,,77 (ClientOS(ClientOSのみ列挙のみ列挙))

Visual Studio 2008Visual Studio 2008 // Expression Studio2Expression Studio2

クライアントはクライアントは WinForm WinForm からから WPFWPFへへ

WPF ToolkitWPF Toolkit でコントロールの拡張でコントロールの拡張

Windows 7Windows 7 新機能への対応新機能への対応 (3.5SP(3.5SP oror 4.0)4.0)

WinFormWinFormは基本的にメンテナンスモードへは基本的にメンテナンスモードへ

Now!Now!

Future!Future!

22

WINFORM WINFORM からから WPFWPFへへ

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

FormForm

ControlControl

DialogWindowDialogWindow

TechniqueTechnique

WinForm WinForm からから

WPFWPFへへ

WPFWPFに対応したコントロールに対応したコントロール

WPFWPFでもほぼ同等のコントロールでもほぼ同等のコントロールForm, UserControlForm, UserControl

Button, CheckBox, RadioButtonButton, CheckBox, RadioButton

TextBox, Label, RichTextBoxTextBox, Label, RichTextBoxMultiLine MultiLine →→ AcceptsReturnAcceptsReturn

ListBox, ComboBoxListBox, ComboBox

ProgressBar, TrackBarProgressBar, TrackBar

TabControlTabControl

PictureBoxPictureBox

33


WPFWPFへへ

コントロールに対応するコントロールに対応する

WPFWPFでも対応可能なコントロールでも対応可能なコントロールListView, TreeViewListView, TreeView

ToolStrip, StatusStripToolStrip, StatusStrip →→ Toolbar, StatusBarToolbar, StatusBar

HScrollBar, VScrollBar HScrollBar, VScrollBar →→ ScrollBarScrollBar

形を変えて再現可能なコントロール形を変えて再現可能なコントロールCheckedListbox CheckedListbox →→ ListBox TemplateListBox Template

ToolTips ToolTips →→ 各コントロールの各コントロールのToolTipToolTipプロパティプロパティ

LinkLabelLinkLabel →→ <TextBlock><HyperLink><TextBlock><HyperLink>

UpDown UpDown →→ TextBox + RepeatButton TextBox + RepeatButton


WPFWPFへへ

ダイアログダイアログ

WPFWPFにはダイアログコントロールはないにはダイアログコントロールはない

OpenFileDialog, SaveFileDialogOpenFileDialog, SaveFileDialog

PresentationFrameworkPresentationFrameworkに実装に実装

Microsoft.Win32.OpenFileDilogMicrosoft.Win32.OpenFileDilog

Microsoft.Win32.SaveFileDilogMicrosoft.Win32.SaveFileDilog

必要に合わせて実装必要に合わせて実装 ((必要ならば必要ならば))

ColorDialogColorDialog：： Windows.Media.ColorWindows.Media.Color

FontDialogFontDialog：フォントの取扱いが異なる：フォントの取扱いが異なる

33


WPFWPFへへ

イベントハンドリングイベントハンドリング

必要に応じてプログラム側で管理必要に応じてプログラム側で管理

例）例）Listbox SelectionChanged Listbox SelectionChanged

ロード時のエラーを回避するため、ロード時のエラーを回避するため、プログラム側でロード時にアタッチプログラム側でロード時にアタッチ

イベントバブリングイベントバブリング

複数のコントロールのイベントをまとめる複数のコントロールのイベントをまとめる

むやみに使わない（管理が複雑に）むやみに使わない（管理が複雑に）

Event Rising !

44


WPFWPFへへ

スレッディングスレッディング

UIUI要素へのアクセスは要素へのアクセスはUIUIスレッドからスレッドからUI UI スレッド以外から、スレッド以外から、UIUI要素にアクセスすると要素にアクセスすると

例外が発生例外が発生

UIUIスレッドをブロックしないスレッドをブロックしない

コントロールからのイベントハンドラはコントロールからのイベントハンドラはUIUIスレッドで処理されるスレッドで処理される

重い処理は重い処理はUIUI処理処理((アニメーションアニメーション))を阻害を阻害BackgroundWorker.DoWorkBackgroundWorker.DoWorkで別スレッドで別スレッド55


WPFWPFへへ

データバインドとデザインデータバインドとデザイン

データはバインドでデータはバインドで

データバインドにあったデータを作るデータバインドにあったデータを作る

データソースは使いまわしやすい構造にデータソースは使いまわしやすい構造に

複数のコントロールから扱うために複数のコントロールから扱うためにDataContextDataContextを利用するを利用する

デザイナーのために先に用意デザイナーのために先に用意

コンバータコンバータ

ダミーデータダミーデータPanelPanel

Control1Control1 Control2Control2

DataSourceDataSource

DataContextDataContext

66

WPFWPFアプリケーションデザインアプリケーションデザイン

WPFWPFアプリケーションデザインのためのポイントアプリケーションデザインのためのポイント

StatuStatu

Main WindowMain Window

Sky & Cloud Sky & Cloud

DesignedTower

DesignedTower


レイアウトデザインレイアウトデザイン

適したパネルを使う適したパネルを使う

コンテンツの扱い方に合わせてコンテンツの扱い方に合わせて

相対位置での座標指定相対位置での座標指定

ウィンドウサイズの変更に対応ウィンドウサイズの変更に対応

パネルの利用用途パネルの利用用途

画面レイアウト画面レイアウト

グループ化グループ化

レイヤーレイヤー

GridGrid

CanvasCanvas

StackStackDockDock

ItemItem ItemItem ItemItem

ItemItemItemItem

ItemItem

77


スタイルとテンプレートスタイルとテンプレート

スタイルスタイルコントロールのプロパティ値を一括管理コントロールのプロパティ値を一括管理リソース内に配置リソース内に配置コントロールに適用されるコントロールに適用される

テンプレートテンプレートコントロールの構造コントロールの構造を定義するを定義するリソース内に配置リソース内に配置コントロールに適応コントロールに適応

StyleForeColor：whiteOuterGlowBitmapEffectFont Name ：ArialFont Size: 16Font Align:Center

ForeColor : GreenBorderColor : DarkGreen

Template Grid Panel+ Stack Panel (Vertical)

+ TextBlock+ Path

OKOK


スタイルのスコープスタイルのスコープ

ApplicationApplication

GridGrid

CanvasCanvas

StackStack

DockDock

Button Button StyleStyle

AA


BB


CC

ButtonButton ButtonButton ButtonButton

ButtonButtonButtonButton

ButtonButton



ButtonButton



ButtonButton



ButtonButton

ButtonButtonButton ButtonButtonButton ButtonButtonButton

ButtonButtonButton

ButtonButtonButton

ButtonButtonButton


スタイルのスコープスタイルのスコープ

スタイルは上位で適応された設定が継承される

コントロール個別に適応されたものは有効


スタイルの継承スタイルの継承

優れたデザインは統一されたデザイン優れたデザインは統一されたデザイン

同じ設定同じ設定==スタイルを使うスタイルを使う

共通スタイルとして定義共通スタイルとして定義

コントロール毎に異なるものは個別に定義コントロール毎に異なるものは個別に定義

Text Style

TextBox Style Text Style

Grid Panel Style Text Style

Button Style Text Style

GridPanel Style 2 Text Style

88


スタイルとテンプレートスタイルとテンプレート

スタイルの方が管理しやすいスタイルの方が管理しやすいテンプレートをスタイルに組み込むテンプレートをスタイルに組み込む

スタイルで管理スタイルで管理リーソースに保存リーソースに保存




+ TextBlock+ Path




+ TextBlock+ Path

Resource Dictionary OKOK

Style

99


ユーザーコントロールユーザーコントロール

WPFWPFではユーザーコントロールを積極的にではユーザーコントロールを積極的に使うべき使うべき

オブジェクトのカプセル化オブジェクトのカプセル化

どんな条件で作るべきかどんな条件で作るべきか

特定の機能を持ったオブジェクト特定の機能を持ったオブジェクト

数が不特定もしくは多数数が不特定もしくは多数

動的な処理を必要とする動的な処理を必要とする

デザインとデザインとUIUIは分離して設計は分離して設計


アプリケーションの構造アプリケーションの構造

イベント

WPFWPFアプリケーション開発モデルアプリケーション開発モデル

WPFWPFアプリケーション開発プロジェクトを考えるアプリケーション開発プロジェクトを考える

DesignerDesigner

DeveloperDeveloper

ProjectManagerProjectManager

InteractiveDesigner

InteractiveDesigner


WPFWPF開発プロジェクト構成開発プロジェクト構成

デベロッパーデベロッパーテスターテスター

ビジネスロジックビジネスロジック

共通コンポーネント共通コンポーネント

データアクセスデータアクセス

ページレイアウトページレイアウト


WPFWPF開発プロジェクト構成開発プロジェクト構成

デベロッパーデベロッパーデザイナーデザイナー

デザイン部門デザイン部門テスターテスター

ビジネスロジックビジネスロジック

共通コンポーネント共通コンポーネント

データアクセスデータアクセス

ページレイアウトページレイアウト

コンバータコンバータ

スタイルスタイル

インタラクションインタラクション


WPFWPF開発ワークフローモデル開発ワークフローモデル

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

結合テスト・検証（ロジック・アニメーション）結合テスト・検証（ロジック・アニメーション）

UIUIイメージ・画面設計（ラフ画面イメージ）イメージ・画面設計（ラフ画面イメージ）

作業見積もり・開発環境整備作業見積もり・開発環境整備

データバインドデータデータバインドデータコンバータの開発コンバータの開発

アプリケーション開発アプリケーション開発••ビジネスロジック開発ビジネスロジック開発••コンポーネント開発コンポーネント開発

機能の詳細化機能の詳細化・操作→応答動作の詳細仕様・操作→応答動作の詳細仕様

レイアウト・スタイルレイアウト・スタイルアニメーション開発アニメーション開発

UIUIプロトタイプ作成プロトタイプ作成

絵コンテ絵コンテ


プロジェクトファイル構成例プロジェクトファイル構成例

ソリューションソリューション

WPFWPFプロジェクトプロジェクト

画像等画像等

ディクショナリディクショナリ

リソースディクショナリリソースディクショナリ.xaml.xaml

ユーザーコントロールユーザーコントロール

ユーザーコントロールユーザーコントロール.xaml (.cs/.vb).xaml (.cs/.vb)

ページ・ページ・WindowWindowファイルファイル.xaml (.cs/.vb).xaml (.cs/.vb)

共通クラス共通クラス.xaml (.cs/.vb).xaml (.cs/.vb)

まとめまとめ

Windows Windows アプリケーションはアプリケーションはWPFWPFアプリケーションへアプリケーションへ

TaskbarTaskbar

Ribbon InterfaceRibbon Interface

WPF supportWindows7

WPF supportWindows7

Multi TouchInterface

Multi TouchInterface

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

できる限りデザイナと分離するできる限りデザイナと分離する

デベロッパーによる支援デベロッパーによる支援

静的な定義と動的な処理による区分静的な定義と動的な処理による区分

データによる連携データによる連携

WinFormWinFormの延長での延長でOKOK

コードビハインドのみでも構成可能コードビハインドのみでも構成可能

XMLXMLを意識しないコーディングを意識しないコーディング

オブジェクトとカプセル化を強調オブジェクトとカプセル化を強調

© 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.

【12-d-2】 wpf アプリケーション開発

Documents

【12-d-2】　wpf アプリケーション開発