WPF の概要

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです。 WPF を使用することにより、スタンドアロン アプリケーションやブラウザーによってホストされるアプリケーションを広範囲にわたって作成できます。このようなアプリケーションの例として、次の図に示す Contoso Healthcare サンプル アプリケーションがあります。

WPF のコアとなるのが、最新のグラフィックス ハードウェアを利用するように構築された、解像度に依存しないベクター ベースのレンダリング エンジンです。このコアは、Extensible Application Markup Language (XAML)、コントロール、データ バインディング、レイアウト、2-D グラフィックスおよび 3-D グラフィックス、アニメーション、スタイル、テンプレート、ドキュメント、メディア、テキスト、タイポグラフィなど、WPF が備えているアプリケーション開発機能の包括的なセットによって拡張されます。WPF は Microsoft .NET Framework に含まれているため、.NET Framework クラス ライブラリの他の要素を取り込んだアプリケーションを作成できます。

この概要では、初めての方を対象に、WPF の主要な機能と概念について説明します。 経験のある WPF 開発者にとっても、この概要は WPF を再確認するために役立ちます。

このトピックは、次のセクションで構成されています。

• WPF によるプログラミング
• マークアップと分離コード
• アプリケーション
• コントロール
• 入力およびコマンド実行
• レイアウト
• データ バインディング
• グラフィックス
• アニメーション
• メディア
• テキストとタイポグラフィ
• ドキュメント
• WPF アプリケーションのカスタマイズ
• WPF ベスト プラクティス
• 概要
• 推奨される概要とサンプル
• 関連トピック

WPF によるプログラミング

WPF は .NET Framework の型のサブセットとして存在し、ほとんどの部分は System.Windows 名前空間にあります。ASP.NET や Windows Formsのようなマネージ テクノロジを使用して .NET Framework でアプリケーションを作成したことのある方には、WPF の基本的なプログラミング作業はなじみのあるものです。クラスのインスタンス化、プロパティの設定、メソッドの呼び出し、イベントの処理などの操作はすべて、自分の好みの .NET Framework プログラミング言語 (C# または Visual Basic) で行うことができます。

WPF の強力な機能の一部をサポートするため、およびプログラミング作業を簡単にするために、WPF には、プロパティとイベントを拡張する追加プログラミング構成要素 (依存関係プロパティとルーティング イベント) が含まれています。依存関係プロパティの詳細については、「依存関係プロパティの概要」を参照してください。 ルーティング イベントの詳細については、「ルーティング イベントの概要」を参照してください。

マークアップと分離コード

WPF には、Windows クライアント アプリケーション開発のための追加のプログラミング拡張機能が用意されています。 わかりやすい機能拡張の 1 つに、マークアップと分離コードの両方を使用してアプリケーションを開発できるということがあります。これは、ASP.NET 開発者にとってはなじみのある作業です。 通常は、Extensible Application Markup Language (XAML) マークアップを使用してアプリケーションの外観を実装しながら、マネージ プログラミング言語 (分離コード) を使用してアプリケーションの動作を実装します。 このように外観と動作を分離すると、次の利点があります。

• 外観固有のマークアップが動作固有のコードと密に結合されないので、開発コストと保守コストが下がる。

• 開発者がアプリケーションの動作を実装するのと同時に、デザイナーがアプリケーションの外観を実装できるので、開発効率が向上する。

• XAML マークアップを実装および共有するときに、アプリケーション開発の貢献者が必要とするものに的を絞った複数のデザイン ツールを使用できる。Microsoft Expression Blend は、デザイナーに適したエクスペリエンスを実現します。一方、Visual Studio 2005 は開発者を対象としています。

• WPF アプリケーションのグローバリゼーションとローカリゼーションが大幅に簡単になる (「WPF のグローバリゼーションおよびローカリゼーションの概要」を参照)。

以下では、WPF のマークアップと分離コードについて簡単に紹介します。 このプログラミング モデルの詳細については、「XAML の概要 (WPF)」および「WPF における分離コードと XAML」を参照してください。

マークアップ

XAML は XML ベースのマークアップ言語であり、アプリケーションの外観を宣言によって実装するために使用されます。これは一般に、ウィンドウ、ダイアログ ボックス、ページ、およびユーザー コントロールを作成したり、それらをコントロール、図形、およびグラフィックスで埋めたりする目的で使用されます。

XAML を使用して、ボタンが 1 つあるウィンドウの外観を実装する例を次に示します。

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    Title="Window with Button"
    Width="250" Height="100">

  <!-- Add button to window -->
  <Button Name="button">Click Me!</Button>

</Window>

具体的に、この XAML では、Window 要素と Button 要素を使用してウィンドウとボタンをそれぞれ定義しています。 各要素を構成するには、属性を使用します。たとえば、ウィンドウのタイトル バーのテキストは、Window 要素の Title 属性で指定されます。マークアップで定義された要素と属性は、実行時に WPF によって WPF の各クラスのインスタンスに変換されます。 たとえば、Window 要素は Window クラスのインスタンスに変換され、その Title プロパティには Title 属性の値が使用されます。

次の図は、前の例の XAML によって定義されたuser interface (UI) を示しています。

詳細については、「XAML の概要 (WPF)」を参照してください。

XAML は XML をベースにしているので、これを使用して構成する UI は、入れ子になった要素の階層構造 (要素ツリー) にアセンブルされます。 要素ツリーは、UIs を作成および管理するうえで、論理的で直感的にわかりやすい方法です。 詳細については、「WPF のツリー」を参照してください。

分離コード

アプリケーションの主な動作は、ユーザーの操作に対応した機能を実行することです。これには、イベント (たとえば、メニュー、ツール バー、またはボタンのクリック) を処理し、それに応答してビジネス ロジックやデータ アクセス ロジックを呼び出す動作などがあります。 WPF では、この動作は通常、マークアップに関連付けられたコードで実装されます。 このような種類のコードを分離コードと呼びます。 次の例は、分離コードと、前の例から更新したマークアップを示しています。

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.AWindow"
    Title="Window with Button"
    Width="250" Height="100">

  <!-- Add button to window -->
  <Button Name="button" Click="button_Click">Click Me!</Button>

</Window>

Namespace SDKSample

    Partial Public Class AWindow
        Inherits System.Windows.Window

        Public Sub New()

            ' InitializeComponent call is required to merge the UI
            ' that is defined in markup with this class, including 
            ' setting properties and registering event handlers
            InitializeComponent()

        End Sub

        Private Sub button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

            ' Show message box when button is clicked
            MessageBox.Show("Hello, Windows Presentation Foundation!")

        End Sub

    End Class

End Namespace

using System.Windows; // Window, RoutedEventArgs, MessageBox

namespace SDKSample
{
    public partial class AWindow : Window
    {
        public AWindow()
        {
            // InitializeComponent call is required to merge the UI
            // that is defined in markup with this class, including 
            // setting properties and registering event handlers
            InitializeComponent();
        }

        void button_Click(object sender, RoutedEventArgs e)
        {
            // Show message box when button is clicked
            MessageBox.Show("Hello, Windows Presentation Foundation!");
        }
    }
}

この例では、Window クラスから派生したクラスを分離コードが実装します。 マークアップと分離コード クラスを関連付けるために、x:Class 属性が使用されます。 分離コード クラスのコンストラクターから InitializeComponent が呼び出され、マークアップで定義された UI と分離コード クラスがマージされます (InitializeComponent はアプリケーションのビルド時に生成されるため、手動で実装する必要はありません)。 x:Class と InitializeComponent が組み合わされることで、作成された実装は常に正しく初期化されます。 分離コード クラスは、ボタンの Click イベントのイベント ハンドラーも実装します。 ボタンがクリックされると、イベント ハンドラーが MessageBox.Show メソッドを呼び出してメッセージ ボックスを表示します。

次の図は、ボタンがクリックされたときの結果を示しています。

詳細については、「WPF における分離コードと XAML」を参照してください。

アプリケーション

.NET Framework、System.Windows、およびマークアップと分離コードは、WPF アプリケーションの開発作業の基礎となるものです。 さらに、WPF には、表現豊かなコンテンツを使用してユーザー エクスペリエンスを作成するための包括的な機能があります。 このようなコンテンツをパッケージ化してユーザーに "アプリケーション" として提供するために、WPF には型とサービスが用意されており、まとめてアプリケーション モデルと呼ばれています。 アプリケーション モデルは、スタンドアロン アプリケーションとブラウザー ホスト アプリケーションの両方の開発をサポートします。

スタンドアロン アプリケーション

スタンドアロン アプリケーションでは、Window クラスを使用して、メニュー バーやツール バーからアクセスされるウィンドウやダイアログ ボックスを作成できます。 次の図は、メイン ウィンドウとダイアログ ボックスのあるスタンドアロン アプリケーションを示しています。

また、使用できる WPF のダイアログ ボックスとして、MessageBox、OpenFileDialog、SaveFileDialog、および PrintDialog もあります。

詳細については、「WPF ウィンドウの概要」を参照してください。

ブラウザー ホスト アプリケーション

XAML browser applications (XBAPs) と呼ばれるブラウザー ホスト アプリケーションでは、ハイパーリンク (Hyperlink クラス) を使用して互いに移動できる、ページ (Page) とページ関数 (PageFunction<T>) を作成できます。 次の図は、Internet Explorer 7 でホストされる XBAP のページを示しています。

WPF アプリケーションは、Microsoft Internet Explorer 6 と Internet Explorer 7 の両方でホストされます。 WPF では、ナビゲーション ホストとして、次の 2 つのオプションのどちらかを選択できます。

• Frame。ナビゲーション可能なコンテンツのアイランドをページまたはウィンドウ内でホストします。

• NavigationWindow。ナビゲーション可能なコンテンツをウィンドウ全体でホストします。

詳細については、「ナビゲーションの概要」を参照してください。

Application クラス

XBAPs もスタンドアロン アプリケーションも、追加のアプリケーション スコープのサービスが必要なほど複雑になる場合がよくあります。このようなサービスには、スタートアップと有効期間の管理、共有プロパティ、共有リソースなどがあります。Application クラスは、その他のサービスも含めてこれらのサービスをカプセル化します。このクラスは、次の例に示すように、XAML を使用するだけで実装できます。

<Application
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    StartupUri="MainWindow.xaml" />

このマークアップは、スタンドアロン アプリケーションのアプリケーション定義です。ここでは、アプリケーションの起動時に自動的に MainWindow を開く Application オブジェクトを作成するように WPF に指示しています。

Application を理解するうえで重要な概念は、このクラスは、スタンドアロン アプリケーションとブラウザー ホスト アプリケーションの両方をサポートする共通プラットフォームになるという点です。 たとえば、次の例に示すように、上の XAML をブラウザー ホスト アプリケーションで使用して、XBAP の起動時に自動的に特定のページに移動することもできます。

<Application
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    StartupUri="HomePage.xaml" />

詳細については、「アプリケーション管理の概要」を参照してください。

セキュリティ

XBAPs はブラウザーでホストされるので、セキュリティが重要です。 特に、XBAPs では部分信頼セキュリティ サンドボックスが使用され、HTML ベースのアプリケーションに課せられる制限と同じか、それより緩い制限が適用されます。 また、XBAPs から部分信頼で安全に実行できる各 HTML 機能は、広範囲なセキュリティ プロセスを使用してテストされています。詳細については、「WPF のセキュリティ方針 - セキュリティ エンジニアリング」を参照してください。

さらに、WPF のほとんどの機能は、XBAPs から安全に実行できます。これについては、「WPF 部分信頼セキュリティ」で説明しています。

コントロール

アプリケーション モデルによって提供されるユーザー エクスペリエンスは、構築済みのコントロールです。 WPF では、"コントロール" は包括的な用語であり、WPF のクラスのうち、ウィンドウまたはページでホストされるカテゴリに適用されます。コントロールはuser interface (UI) を持ち、なんらかの動作を実装しています。

詳細については、「コントロール」を参照してください。

WPF コントロールの機能別一覧

WPF の組み込みコントロールを以下に示します。

• ボタン : Button および RepeatButton。

• データ表示: DataGrid、ListView、および TreeView。

• 日付表示および選択: Calendar および DatePicker。

• ダイアログ ボックス : OpenFileDialog、PrintDialog、および SaveFileDialog。

• デジタル インク : InkCanvas および InkPresenter。

• ドキュメント : DocumentViewer、FlowDocumentPageViewer、FlowDocumentReader、FlowDocumentScrollViewer、および StickyNoteControl。

• 入力 : TextBox、RichTextBox、および PasswordBox。

• レイアウト : Border、BulletDecorator、Canvas、DockPanel、Expander、Grid、GridView、GridSplitter、GroupBox、Panel、ResizeGrip、Separator、ScrollBar、ScrollViewer、StackPanel、Thumb、Viewbox、VirtualizingStackPanel、Window、および WrapPanel。

• メディア : Image、MediaElement、および SoundPlayerAction。

• メニュー : ContextMenu、Menu、および ToolBar。

• ナビゲーション : Frame、Hyperlink、Page、NavigationWindow、および TabControl。

• 選択: CheckBox、ComboBox、ListBox、RadioButton、および Slider。

• ユーザー情報 : AccessText、Label、Popup、ProgressBar、StatusBar、TextBlock、および ToolTip。

入力およびコマンド実行

コントロールは、ユーザー入力を検出して応答するという処理を頻繁に行います。 WPF 入力システムは、直接イベントとルーティング イベントの両方を使用して、テキスト入力、フォーカス管理、マウス配置をサポートします。 詳細については、「入力の概要」を参照してください。

アプリケーションの入力要件は、複雑になることがよくあります。 WPF には、ユーザー入力操作とそれに応答するコードを分離するコマンド システムが用意されています。 詳細については、「コマンド実行の概要」を参照してください。

レイアウト

UI を作成するときは、コントロールの位置とサイズを決めて配置することでレイアウトを構築します。 どのようなレイアウトでも、ウィンドウ サイズと画面設定の変更に適応できることが重要な要件になります。 WPF では、このような状況にレイアウトを適応させるためのコードを記述する必要はありません。代わりに、拡張性のある優れたレイアウト システムが用意されています。

レイアウト システムの基礎となるのは、ウィンドウや画面の状態の変化に対応する機能を高める相対配置です。 さらに、レイアウト システムは、コントロール間のネゴシエーションを管理してレイアウトを決定します。 ネゴシエーションは 2 ステップのプロセスです。まず、コントロールから親へ、そのコントロールで必要となる位置とサイズが通知されます。次に、親から子へ、使用可能なスペースが通知されます。

レイアウト システムは、WPF 基本クラスを介して子コントロールに公開されます。WPF には、グリッド、スタック、ドッキングなどの一般的なレイアウトのために、次のようなレイアウト コントロールが含まれています。

• Canvas : 子コントロールが自身のレイアウトを指定します。

• DockPanel : 子コントロールがパネルの端に並べられます。

• Grid : 子コントロールは、行と列で配置されます。

• StackPanel : 子コントロールは、垂直方向または水平方向にスタックされます。

• VirtualizingStackPanel : 子コントロールは仮想化され、水平方向または垂直方向の 1 行に配置されます。

• WrapPanel : 子コントロールは、左から右の順に配置されます。スペースに収まらないコントロールは、次の行に折り返されます。

DockPanel を使用していくつかの TextBox コントロールを配置する例を次に示します。

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.LayoutWindow"
    Title="Layout with the DockPanel" Height="143" Width="319">

  <!--DockPanel to layout four text boxes--> 
  <DockPanel>
    <TextBox DockPanel.Dock="Top">Dock = "Top"</TextBox>
    <TextBox DockPanel.Dock="Bottom">Dock = "Bottom"</TextBox>
    <TextBox DockPanel.Dock="Left">Dock = "Left"</TextBox>
    <TextBox Background="White">This TextBox "fills" the remaining space.</TextBox>
  </DockPanel>

</Window>

DockPanel は、子である TextBox コントロールから配置方法の指示を受け取ることができます。 そのために、DockPanel は Dock プロパティを実装しています。このプロパティは子コントロールに公開され、子コントロールのそれぞれがドッキング スタイルを指定できるようになっています。

次の図は、前の例の XAML マークアップの結果を示しています。

詳細については、「レイアウト システム」を参照してください。 入門用のサンプルについては、WPF レイアウト ギャラリーのサンプルを参照してください。

データ バインディング

ほとんどのアプリケーションは、データを表示および編集する手段をユーザーに提供するために作成されます。 WPF アプリケーションの場合、データの格納およびデータへのアクセスのしくみは、Microsoft SQL Server や ADO.NET などのテクノロジによって既に用意されています。 データにアクセスし、アプリケーションのマネージ オブジェクトにデータが読み込まれた後で、WPF アプリケーションの処理が始まります。 基本的に、これには次の 2 つの処理が伴います。

1. データの表示や編集ができるコントロールに、マネージ オブジェクトからデータをコピーする。

2. コントロールを使用してデータに加えた変更が、マネージ オブジェクトにコピーされるようにする。

アプリケーション開発を簡単にするために、WPF には、これらの手順を自動的に実行するデータ バインディング エンジンが用意されています。データ バインディング エンジンのコア ユニットは Binding クラスで、コントロール (バインディング ターゲット) をデータ オブジェクト (バインディング ソース) にバインドする役割を果たします。 この関係を次の図に示します。

次の例では、TextBox を Person というカスタム オブジェクトのインスタンスにバインドする方法を示します。 Person の実装は以下のコードに示されています。

Namespace SDKSample

    Class Person

        Private _name As String = "No Name"

        Public Property Name() As String
            Get
                Return _name
            End Get
            Set(ByVal value As String)
                _name = value
            End Set
        End Property

    End Class

End Namespace

namespace SDKSample
{
    class Person
    {
        string name = "No Name";

        public string Name
        {
            get { return name; }
            set { name = value; }
        }
    }
}

次のマークアップは、TextBox を Person カスタム オブジェクトのインスタンスにバインドします。

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.DataBindingWindow">


...


<!-- Bind the TextBox to the data source (TextBox.Text to Person.Name) -->
<TextBox Name="personNameTextBox" Text="{Binding Path=Name}" />


...


</Window>

Imports System.Windows ' Window

Namespace SDKSample

    Partial Public Class DataBindingWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()

            ' Create Person data source
            Dim person As Person = New Person()

            ' Make data source available for binding
            Me.DataContext = person

        End Sub

    End Class

End Namespace

using System.Windows; // Window

namespace SDKSample
{
    public partial class DataBindingWindow : Window
    {
        public DataBindingWindow()
        {
            InitializeComponent();

            // Create Person data source
            Person person = new Person();

            // Make data source available for binding
            this.DataContext = person;
        }
    }
}

この例では、Person クラスが分離コードでインスタンス化され、DataBindingWindow のデータ コンテキストとして設定されます。 マークアップでは、TextBox の Text プロパティが Person.Name プロパティにバインドされます ("{Binding ... }" XAML 構文を使用)。 この XAML は、TextBox コントロールを、ウィンドウの DataContext プロパティに格納されている Person オブジェクトにバインドするように WPF に指示しています。

WPF のデータ バインディング エンジンには、検証、並べ替え、フィルター処理、グループ化などの追加サポートが用意されています。 さらに、データ バインディングでは、WPF の標準コントロールによって表示される UI が適切でない場合に、バインドされたデータ用のカスタム UI をデータ テンプレートを使用して作成する機能がサポートされています。

詳細については、「データ バインディングの概要」を参照してください。 入門用のサンプルについては、データ バインディングのデモを参照してください。

グラフィックス

WPF には、スケーラブルで柔軟性のある広範囲のグラフィックス機能セットが導入されています。これらの機能には、次のような利点があります。

• 解像度およびデバイスに依存しないグラフィックス。 WPF のグラフィックス システムにおける基本単位は、デバイス非依存ピクセルです。これは、実際の画面解像度に関係なく 1/96 インチであり、解像度およびデバイスに依存しないレンダリングの基礎となります。 デバイスに依存しない各ピクセルは、レンダリング先のシステムの dpi (1 インチあたりのドット数) 設定に合わせて自動的にスケーリングされます。

• 精度の向上。 WPF の座標系は、単精度ではなく倍精度浮動小数点数で測定されます。 変形と不透明度の値も、倍精度で表されます。 WPF は広色域 (scRGB) もサポートし、異なるカラー領域からの入力の管理を統合的にサポートします。

• グラフィックスとアニメーションの高度なサポート。 WPF では、アニメーション シーンの管理が自動的に行われるため、グラフィックス プログラミングが簡単になります。シーン処理やレンダリング ループ、バイリニア補間に煩わされることはありません。 さらに、WPF はヒット テストをサポートし、アルファ合成を完全にサポートします。

• ハードウェア アクセラレータ。 WPF のグラフィックス システムは、グラフィックス ハードウェアを利用することで CPU 使用率を最小限に抑えます。

2-D 図形

WPF には、次の図に示す四角形や楕円など、一般的なベクター描画 2-D 図形のライブラリが用意されています。

図形の機能で興味深いのは、図形が単に表示のためのものではないという点です。図形には、キーボード入力やマウス入力など、コントロールに期待する機能の多くが実装されています。 次の例は、Ellipse の MouseUp イベントの処理を示しています。

<Window 
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.EllipseEventHandlingWindow"
    Title="Click the Ellipse">
    <Ellipse Name="clickableEllipse" Fill="Blue" MouseUp="clickableEllipse_MouseUp" />
</Window>

Imports System.Windows ' Window, MessageBox
Imports System.Windows.Input ' MouseButtonEventArgs

Namespace SDKSample

    Public Class EllipseEventHandlingWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub clickableEllipse_MouseUp(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
            MessageBox.Show("You clicked the ellipse!")
        End Sub

    End Class

End Namespace

using System.Windows; // Window, MessageBox
using System.Windows.Input; // MouseButtonEventHandler

namespace SDKSample
{
    public partial class EllipseEventHandlingWindow : Window
    {
        public EllipseEventHandlingWindow()
        {
            InitializeComponent();
        }

        void clickableEllipse_MouseUp(object sender, MouseButtonEventArgs e)
        {
            // Display a message
            MessageBox.Show("You clicked the ellipse!");
        }
    }
}

次の図は、前のコードによる処理の結果を示しています。

詳細については、「WPF での図形と基本描画の概要」を参照してください。 入門用のサンプルについては、Shape 要素のサンプルを参照してください。

2-D ジオメトリ

WPF に用意されている 2-D 図形は、各種の標準的な基本図形をカバーしています。 しかし、カスタマイズされた UI をデザインするために、カスタム図形の作成が必要になる場合もあります。 この目的で、WPF にはジオメトリが用意されています。 次の図は、ジオメトリを使用したカスタム図形の作成を示しています。この図形は直接描画できるほか、ブラシとして使用したり、他の図形やコントロールをクリップするのに使用したりできます。

Path オブジェクトを使用すると、閉じた図形または開いた図形、複数の図形、および曲線のある図形を描画できます。

Geometry オブジェクトは、2-D グラフィックス データのクリッピング、ヒット テスト、およびレンダリングに使用できます。

詳細については、「ジオメトリの概要」を参照してください。 入門用のサンプルについては、ジオメトリのサンプルを参照してください。

2-D 効果

WPF の 2-D 機能のサブセットには、グラデーション、ビットマップ、描画、ビデオによる塗りつぶし、回転、拡大と縮小、傾斜などの視覚効果が含まれます。 これらはすべてブラシによって実現されます。いくつかの例を次の図に示します。

詳細については、「WPF のブラシの概要」を参照してください。 入門用のサンプルについては、ブラシのサンプルを参照してください。

3-D レンダリング

WPF には、2-D グラフィックスと統合された 3-D レンダリング機能も含まれており、より人目を引く魅力的な UIs を作成できます。 たとえば、次の図は、3-D 図形にレンダリングされた 2-D イメージを示しています。

詳細については、「3-D グラフィックスの概要」を参照してください。 入門用のサンプルについては、3-D ソリッドのサンプルを参照してください。

アニメーション

WPF のアニメーション サポートでは、コントロールに拡大、振動、回転、フェードなどの効果を適用して、おもしろいページ切り替えを作成したり、その他の動作を実現したりできます。 カスタム クラスも含めて、WPF のほとんどのクラスをアニメーション表示できます。 次の図は、動作中の単純なアニメーションを示しています。

詳細については、「アニメーションの概要」を参照してください。 その他の入門用のサンプルについては、アニメーション サンプル ギャラリーを参照してください。

メディア

リッチ コンテンツを伝達する 1 つの方法は、オーディオビジュアル メディアを使用することです。 WPF には、イメージ、ビデオ、およびオーディオのための特別なサポートが用意されています。

イメージ

イメージは、ほとんどのアプリケーションに共通するメディアです。WPF では、イメージをさまざまな方法で使用できます。 次の図は、サムネイル イメージが表示されるリスト ボックスのある UI を示しています。 サムネイルを選択すると、そのイメージが元のサイズで表示されます。

詳細については、「イメージングの概要」を参照してください。

ビデオとオーディオ

MediaElement コントロールは、ビデオとオーディオの両方を再生でき、カスタム メディア プレーヤーの土台として使用できる柔軟性を備えています。 次の XAML マークアップは、メディア プレーヤーを実装します。

<MediaElement 
  Name="myMediaElement" 
  Source="media/wpf.wmv" 
  LoadedBehavior="Manual" 
  Width="350" Height="250" />

次の図のウィンドウは、動作中の MediaElement コントロールを示しています。

詳細については、「グラフィックスとマルチメディア」を参照してください。

テキストとタイポグラフィ

高品質のテキスト レンダリングを容易にするために、WPF には次の機能が用意されています。

• OpenType フォントのサポート。

• ClearType の機能拡張。

• ハードウェア アクセラレータの利用による高パフォーマンスの実現。

• メディア、グラフィックス、およびアニメーションとテキストの統合。

• 各国対応フォントのサポートとフォールバック機構。

グラフィックスとテキストの統合の例として、文字修飾の適用を次の図に示します。

詳細については、「WPF のタイポグラフィ」を参照してください。

ドキュメント

WPF では、フロー ドキュメント、固定ドキュメント、および XML Paper Specification (XPS) ドキュメントの 3 種類のドキュメントの操作がネイティブにサポートされています。 WPF には、ドキュメントの作成、表示、管理、注釈付け、パッケージ化、および印刷のためのサービスも用意されています。

フロー ドキュメント

フロー ドキュメントは、ウィンドウ サイズや画面設定の変更時にコンテンツが動的に調整および再配置され、表示と読みやすさが最適化されるようにデザインされています。 次の XAML マークアップは、FlowDocument の定義を示しています。

<FlowDocument xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation">

  <Paragraph FontSize="18" FontWeight="Bold">Flow Document</Paragraph>

  <Paragraph>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
    enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
    nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.
  </Paragraph>


...


</FlowDocument>

次の例は、表示、検索、および印刷のためにフロー ドキュメントを FlowDocumentReader に読み込む方法を示しています。

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.FlowDocumentReaderWindow"
    Title="Flow Document Reader">
  <FlowDocumentReader Name="flowDocumentReader" />
</Window>

Imports System.Windows 'Window
Imports System.Windows.Documents 'FlowDocument
Imports System.IO 'FileStream, FileMode
Imports System.Windows.Markup 'XamlReader

Namespace SDKSample

    Public Class FlowDocumentReaderWindow
        Inherits Window

        Public Sub New()
            Me.InitializeComponent()
            Using stream1 As FileStream = New FileStream("AFlowDocument.xaml", _
                FileMode.Open, FileAccess.Read)
                Dim document1 As FlowDocument = _
                    TryCast(XamlReader.Load(stream1), FlowDocument)
                Me.flowDocumentReader.Document = document1
            End Using
        End Sub

    End Class

End Namespace

using System.Windows; // Window
using System.Windows.Documents; // FlowDocument
using System.IO; // FileStream, FileMode
using System.Windows.Markup; // XamlReader

namespace SDKSample
{
    public partial class FlowDocumentReaderWindow : System.Windows.Window
    {
        public FlowDocumentReaderWindow()
        {
            InitializeComponent();

            // Open the file that contains the FlowDocument
            using (FileStream xamlFile = new FileStream("AFlowDocument.xaml", 
                FileMode.Open, FileAccess.Read))
            {
                // Parse the file with the XamlReader.Load method
                FlowDocument content = XamlReader.Load(xamlFile) as FlowDocument;

                // Set the Document property to the parsed FlowDocument object
                this.flowDocumentReader.Document = content;
            }
        }
    }
}

結果を次の例に示します。

詳細については、「フロー ドキュメントの概要」を参照してください。

固定ドキュメント

固定ドキュメントは、特に印刷に関して厳密な "WYSIWYG" 表示を必要とするアプリケーションのために用意されています。 固定ドキュメントの一般的な用途には、元のページ デザインに対する準拠が重要になるデスクトップ パブリッシング、ワード プロセッシング、およびフォーム レイアウトが含まれます。

固定ドキュメントでは、コンテンツの正確な配置がデバイスに依存しない方法で維持されます。 たとえば、96 dpi のディスプレイに表示された固定ドキュメントは、600 dpi のレーザー プリンターや 4800 dpi の写真植字機に出力された場合と同じように表示されます。 ドキュメントの品質は各デバイスの性能によって異なりますが、レイアウトはどの場合も同じになります。

詳細については、「WPF のドキュメント」を参照してください。

XPS ドキュメント

XML Paper Specification (XPS) ドキュメントは、WPF の固定ドキュメントに基づいています。 XPS ドキュメントは XML ベースのスキーマで記述され、本質的には電子文書をページ番号付きで表したものです。 XPS は、ページ番号付きドキュメントの作成、共有、印刷、およびアーカイブを容易にする目的でデザインされた、複数のプラットフォームで使用できるオープンなドキュメント形式です。 XPS テクノロジの重要な機能には、次のようなものがあります。

• Open Packaging Conventions (OPC) に準拠した ZipPackage ファイルとしての XPS ドキュメントのパッケージ化。

• スタンドアロン アプリケーションとブラウザー ベース アプリケーションの両方でのホスティング。

• WPF アプリケーションからの手動による XPS ドキュメントの生成と操作。

• 出力デバイスの最高品質を対象にした忠実なレンダリング。

• Windows Vista 印刷スプール。

• XPS 互換プリンターへのドキュメントの直接ルーティング。

• DocumentViewer との UI の統合。

次の図は、DocumentViewer によって表示された XPS ドキュメントを示しています。

DocumentViewer では、ユーザーによるビューの変更、XPS ドキュメントの検索および印刷も可能です。

詳細については、「WPF のドキュメント」を参照してください。

注釈

注釈とは、後で参照できるように、情報に目印を付けたり、関心のある項目を強調したりする目的でドキュメントに追加するメモやコメントです。 印刷されたドキュメントにメモを書き込むことは簡単ですが、電子ドキュメントにメモを "書き込む" ことには制限がある場合が多く、まったくできない場合もあります。 しかし、WPF には、付箋と強調をサポートする注釈システムが用意されています。 さらに、これらの注釈は、次の図に示すように、DocumentViewer コントロールでホストされるドキュメントにも適用できます。

詳細については、「注釈の概要」を参照してください。

パッケージ化

アプリケーションで WPF の System.IO.Packaging APIs を使用すると、データ、コンテンツ、およびリソースを、汎用性があって配布とアクセスが容易な単一の ZIP ドキュメントにまとめることができます。 パッケージに収録されているアイテムを認証したり、署名されたアイテムが改ざんまたは変更されていないことを検証したりするために、デジタル署名を含めることができます。 そのほか、保護された情報へのアクセスを制限するために、権限管理を使用してパッケージを暗号化することもできます。

詳細については、「WPF のドキュメント」を参照してください。

印刷

WPF は、印刷システムの制御の拡張をサポートすることで、.NET Framework の印刷サブシステムを強化します。 印刷の機能拡張には、次のようなものがあります。

• リモート印刷サーバーとリモート印刷キューのリアルタイム インストール。

• プリンターの機能の動的検出。

• プリンター オプションの動的設定。

• 印刷ジョブの再ルーティングと再優先度付け。

また、XPS ドキュメントには、パフォーマンスの向上につながる重要な特長もあります。 Microsoft Windows Graphics Device Interface (GDI) の既存の印刷パスでは、通常、次の 2 つの変換が必要となります。

• Enhanced Metafile (EMF) などの印刷プロセッサ形式への最初のドキュメント変換。

• プリンター制御言語 (PCL) や PostScript など、プリンターのページ記述言語への 2 番目の変換。

しかし、XPS ドキュメントではこのような変換が不要になっています。これは、XPS ファイル形式の 1 つのコンポーネントが、プリント プロセッサ言語でありページ記述言語であるためです。 このサポートにより、スプール ファイルのサイズとネットワーク プリンターの負荷の両方が軽減されます。

詳細については、「印刷の概要」を参照してください。

WPF アプリケーションのカスタマイズ

ここまでは、アプリケーションを開発するための WPF のコア ビルド ブロックを見てきました。 主にコントロールから成るアプリケーション コンテンツをホストして提供するには、アプリケーション モデルを使用します。 UI のコントロールの配置を簡単にし、ウィンドウ サイズや画面設定が変わっても配置が維持されるようにするには、WPF レイアウト システムを使用します。 ほとんどのアプリケーションでは、ユーザーが対話形式でデータを操作できることが求められますが、データ バインディングを使用すると、UI とデータを統合する作業を軽減できます。アプリケーションの外観をさらに充実させるには、WPF に用意されているグラフィックス、アニメーション、およびメディアの広範囲のサポートを使用します。 最後に、アプリケーションでテキストとドキュメントを操作する場合は、WPF のテキスト、タイポグラフィ、ドキュメント、注釈、パッケージ化、および印刷の各機能を使用できます。

ただし、多くの場合、このような基本機能だけでは、本当に個性的で魅力的な外観のユーザー エクスペリエンスを作成して管理するには十分ではありません。 WPF の標準コントロールは、アプリケーションの目的の外観には適さない場合があります。 データが最も効果的に表示されるとは限らない場合もあります。 また、アプリケーションのユーザー エクスペリエンス全体が、Windows のテーマの既定の外観に合わない場合もあります。 さまざまな状況において、プレゼンテーション テクノロジには、視覚的な機能拡張が他の種類の機能拡張と同様に必要となります。

この理由から、WPF には、ユニークなユーザー エクスペリエンスを作成するためのさまざまな手段が用意されています。これには、コントロール用のリッチ コンテンツ モデル、トリガー、コントロール テンプレートとデータ テンプレート、スタイル、UI リソース、およびテーマとスキンが含まれます。

コンテンツ モデル

ほとんどの WPF コントロールの主な目的は、コンテンツを表示することです。 WPF では、コントロールのコンテンツの構成要素になり得るアイテムの種類や数のことを、コントロールのコンテンツ モデルと呼びます。 一部のコントロールには、単一のアイテムと種類のコンテンツしか含めることができません。たとえば、TextBox のコンテンツは、Text プロパティに割り当てられた文字列値です。 TextBox のコンテンツを設定する例を次に示します。

<Window 
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.TextBoxContentWindow"
    Title="TextBox Content">


...


<TextBox Text="This is the content of a TextBox." />


...


</Window>

結果を次の図に示します。

一方、他のコントロールには、コンテンツの種類が異なる複数のアイテムを含めることができます。たとえば、Content プロパティで指定される Button のコンテンツには、レイアウト コントロール、テキスト、イメージ、図形など、さまざまなアイテムを含めることができます。 コンテンツに DockPanel、Label、Border、および MediaElement が含まれる Button の例を次に示します。

<Window 
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.ButtonContentWindow"
    Title="Button Content">


...


<Button Margin="20">
  <!-- Button Content -->
  <DockPanel Width="200" Height="180">
    <Label DockPanel.Dock="Top" HorizontalAlignment="Center">Click Me!</Label>
    <Border Background="Black" BorderBrush="Yellow" BorderThickness="2" 
      CornerRadius="2" Margin="5">
      <MediaElement Source="media/wpf.wmv" Stretch="Fill" />
    </Border>
  </DockPanel>
</Button>


...


</Window>

次の図は、このボタンのコンテンツを示しています。

さまざまなコントロールでサポートされるコンテンツの種類の詳細については、「WPF のコンテンツ モデル」を参照してください。

トリガー

XAML マークアップの主な目的はアプリケーションの外観を実装することですが、XAML を使用して、アプリケーションの動作の一部を実装することもできます。 たとえば、トリガーを使用することで、ユーザーとのやり取りに基づいてアプリケーションの外観を変更できます。 詳細については、「スタイルとテンプレート」の「トリガー」を参照してください。

コントロール テンプレート

通常、WPF のコントロールの既定の UIs は、他のコントロールや図形から構築されます。 たとえば、Button は ButtonChrome コントロールと ContentPresenter コントロールの両方で構成されます。 ButtonChrome はボタンの標準の外観を提供し、ContentPresenter は Content プロパティで指定されたボタンのコンテンツを表示します。

コントロールの既定の外観がアプリケーションの外観全体と調和しない場合もあります。 この場合、ControlTemplate を使用すると、コントロールのコンテンツや動作を変更せずにコントロールの UI の外観を変更できます。

たとえば、ControlTemplate を使用して Button の外観を変更する方法を次の例に示します。

<Window 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.ControlTemplateButtonWindow"
  Title="Button with Control Template" Height="158" Width="290">

  <!-- Button using an ellipse -->
  <Button Content="Click Me!" Click="button_Click">
    <Button.Template>
      <ControlTemplate TargetType="{x:Type Button}">
        <Grid Margin="5">
          <Ellipse Stroke="DarkBlue" StrokeThickness="2">
            <Ellipse.Fill>
              <RadialGradientBrush Center="0.3,0.2" RadiusX="0.5" RadiusY="0.5">
                <GradientStop Color="Azure" Offset="0.1" />
                <GradientStop Color="CornflowerBlue" Offset="1.1" />
              </RadialGradientBrush>
            </Ellipse.Fill>
          </Ellipse>
          <ContentPresenter Name="content" HorizontalAlignment="Center" 
            VerticalAlignment="Center"/>
        </Grid>
      </ControlTemplate>
    </Button.Template>

  </Button>

</Window>

Imports System.Windows ' Window, RoutedEventArgs, MessageBox

Namespace SDKSample

    Public Class ControlTemplateButtonWindow
        Inherits Window

        Public Sub New()

            InitializeComponent()

        End Sub

        Private Sub button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            MessageBox.Show("Hello, Windows Presentation Foundation!")
        End Sub

    End Class

End Namespace

using System.Windows; // Window, RoutedEventArgs, MessageBox

namespace SDKSample
{
    public partial class ControlTemplateButtonWindow : Window
    {
        public ControlTemplateButtonWindow()
        {
            InitializeComponent();
        }

        void button_Click(object sender, RoutedEventArgs e)
        {
            // Show message box when button is clicked
            MessageBox.Show("Hello, Windows Presentation Foundation!");
        }
    }
}

この例では、既定のボタン UI が濃い青の境界線を持つ Ellipse に置き換えられ、RadialGradientBrush を使用して塗りつぶされます。 ContentPresenter コントロールは、Button のコンテンツとして "Click Me!" を表示します。 Button をクリックすると、Button コントロールの既定の動作の一部として Click イベントが発生します。 結果は次の図のようになります。

詳細については、ControlTemplate を参照してください。 入門用のサンプルについては、ControlTemplate を使用したスタイル設定のサンプルを参照してください。

データ テンプレート

コントロール テンプレートではコントロールの外観を指定できるのに対し、データ テンプレートでは、コントロールのコンテンツの外観を指定できます。 データ テンプレートは、バインドされたデータの表示方法を拡張するためによく使用されます。 次の図は、Task オブジェクトのコレクションにバインドされた ListBox の既定の外観を示しています。各タスクには、名前、説明、および優先順位が設定されています。

既定の外観は、ListBox から予想されるとおりのものです。 ただし、各タスクの既定の外観にはタスクの名前しか含まれていません。 タスクの名前、説明、および優先順位を表示するには、DataTemplate を使用して、ListBox コントロールがバインドされたリスト項目の既定の外観を変更する必要があります。 次の XAML は、このような DataTemplate を定義し、ItemTemplate 属性を使用して各タスクに適用しています。

<Window
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.DataTemplateWindow"
  Title="With a Data Template">


...


<Window.Resources>
  <!-- Data Template (applied to each bound task item in the task collection) -->
  <DataTemplate x:Key="myTaskTemplate">
    <Border Name="border" BorderBrush="DarkSlateBlue" BorderThickness="2" 
      CornerRadius="2" Padding="5" Margin="5">
      <Grid>
        <Grid.RowDefinitions>
          <RowDefinition/>
          <RowDefinition/>
          <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="Auto" />
          <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" Padding="0,0,5,0" Text="Task Name:"/>
        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=TaskName}"/>
        <TextBlock Grid.Row="1" Grid.Column="0" Padding="0,0,5,0" Text="Description:"/>
        <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}"/>
        <TextBlock Grid.Row="2" Grid.Column="0" Padding="0,0,5,0" Text="Priority:"/>
        <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Priority}"/>
      </Grid>
    </Border>  
  </DataTemplate>
</Window.Resources>


...


<!-- UI -->
<DockPanel>
  <!-- Title -->
  <Label DockPanel.Dock="Top" FontSize="18" Margin="5" Content="My Task List:"/>

  <!-- Data template is specified by the ItemTemplate attribute -->
  <ListBox 
    ItemsSource="{Binding}" 
    ItemTemplate="{StaticResource myTaskTemplate}" 
    HorizontalContentAlignment="Stretch" 
    IsSynchronizedWithCurrentItem="True" 
    Margin="5,0,5,5" />

</DockPanel>


...


</Window>

このコードの効果を次の図に示します。

ListBox の動作と全体的な外観はそのままで、リスト ボックスに表示されるコンテンツの外観だけが変更されています。

詳細については、「データ テンプレートの概要」を参照してください。 入門用のサンプルについては、データ テンプレート サンプルの概要を参照してください。

スタイル

スタイルを使用すると、開発者とデザイナーは、製品を特定の外観で標準化できます。 WPF には、Style 要素を基盤とする強力なスタイル モデルが用意されています。 次の例では、ウィンドウ内のすべての Button の背景色を Orange に設定するスタイルを作成します。

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.StyleWindow"
    Title="Styles">


...


<!-- Style that will be applied to all buttons -->
<Style TargetType="{x:Type Button}">
  <Setter Property="Background" Value="Orange" />
  <Setter Property="BorderBrush" Value="Crimson" />
  <Setter Property="FontSize" Value="20" />
  <Setter Property="FontWeight" Value="Bold" />
  <Setter Property="Margin" Value="5" />
</Style>


...


<!-- This button will have the style applied to it -->
<Button>Click Me!</Button>

<!-- This label will not have the style applied to it -->
<Label>Don't Click Me!</Label>

<!-- This button will have the style applied to it -->
<Button>Click Me!</Button>


...


</Window>

このスタイルはすべての Button コントロールを対象とするため、次の図に示すように、ウィンドウ内のすべてのボタンに自動的にスタイルが適用されます。

詳細については、「スタイルとテンプレート」を参照してください。 入門用のサンプルについては、スタイルとテンプレート サンプルの概要を参照してください。

リソース

アプリケーション内の各コントロールは、同じ外観を共有する必要があります。これには、フォントや背景色から、コントロール テンプレート、データ テンプレート、スタイルに至るまで、あらゆるものが含まれます。 WPF のuser interface (UI) リソースのサポートを使用すると、これらのリソースを単一の場所にカプセル化して再利用できます。

Button と Label で共有される共通の背景色を定義する例を次に示します。

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.ResourcesWindow"
    Title="Resources Window">

  <!-- Define window-scoped background color resource -->
  <Window.Resources>
    <SolidColorBrush x:Key="defaultBackground" Color="Red" />
  </Window.Resources>


...


<!-- Button background is defined by window-scoped resource -->
<Button Background="{StaticResource defaultBackground}">One Button</Button>

<!-- Label background is defined by window-scoped resource -->
<Label Background="{StaticResource defaultBackground}">One Label</Label>


...


</Window>

この例では、Window.Resources プロパティ要素を使用して背景色リソースを実装しています。 このリソースは、Window のすべての子で使用できます。 リソース スコープにはさまざまな種類がありますが、その一部を解決される順に次に示します。

1. 個々のコントロール (継承された FrameworkElement.Resources プロパティを使用)。

2. Window または Page (同じく、継承された FrameworkElement.Resources プロパティを使用)。

3. Application (Application.Resources プロパティを使用)。

スコープが多様なので、リソースの定義と共有を柔軟に行うことができます。

リソースを特定のスコープに直接関連付ける代わりに、アプリケーションの他の部分で参照できる別個の ResourceDictionary を使用して、1 つ以上のリソースをパッケージ化することもできます。 たとえば、リソース ディクショナリで既定の背景色を定義する例を次に示します。

<ResourceDictionary 
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">

  <!-- Define background color resource -->
  <SolidColorBrush x:Key="defaultBackground" Color="Red" />

  <!-- Define other resources -->


...


</ResourceDictionary>

次の例では、前の例で定義したリソース ディクショナリを参照して、アプリケーション全体で共有されるようにします。

<Application
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.App">

  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="BackgroundColorResources.xaml"/>
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>


...


</Application>

リソースとリソース ディクショナリは、WPF におけるテーマとスキンのサポートの基盤となるものです。

詳細については、「リソースの概要」を参照してください。

テーマとスキン

テーマとは、Windows とそこで実行されるアプリケーションのグローバルな外観を、視覚的な観点から定義するものです。 Windows には、さまざまなテーマが用意されています。 たとえば、Microsoft Windows XP には Windows XP と Windows クラシックのテーマが付属し、Windows Vista には Windows Vista と Windows クラシックのテーマが付属しています。 テーマで定義された外観によって、WPF アプリケーションの既定の外観が定義されます。 ただし、WPF が Windows のテーマと直接統合されるわけではありません。WPF の外観はテンプレートで定義されるので、WPF には、Windows の既知のテーマごとに 1 つのテンプレートが用意されています。このようなテーマとして、Aero (Windows Vista)、Classic (Microsoft Windows 2000)、Luna (Microsoft Windows XP)、Royale (Microsoft Windows XP Media Center Edition 2005) などがあります。これらのテーマは、リソース ディクショナリとしてパッケージ化され、アプリケーション内にリソースが見つからない場合に解決されます。多くのアプリケーションは、これらのテーマを基にそれぞれの外観を定義します。Windows の外観との一貫性を保つようにすると、ユーザーはより多くのアプリケーションにより簡単に慣れることができます。

反対に、必ずしも標準テーマを基にしていないユーザー エクスペリエンスを提供するアプリケーションもあります。 たとえば、オーディオ データとビデオ データを操作する Microsoft Windows Media Player は、異なるスタイルのユーザー エクスペリエンスを活かしています。 このような UIs には、アプリケーション固有のカスタマイズされたテーマが適用されることがよくあります。 これはスキンと呼ばれ、スキンを使用するアプリケーションには、多くの場合、ユーザーがスキンをさまざまにカスタマイズするためのフックが用意されています。Microsoft Windows Media Player では、いくつかの作成済みのスキンが付属しているほか、サードパーティのスキンもホストします。

WPF では、テーマとスキンの両方とも、リソース ディクショナリを使用してごく簡単に定義できます。 スキン定義のサンプルを次の例に示します。

<!-- Blue Skin -->
<ResourceDictionary
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SDKSample">
  <Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Blue" />
  </Style>


...


</ResourceDictionary>

<!-- Yellow Skin -->
<ResourceDictionary
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:SDKSample">
  <Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Yellow" />
  </Style>


...


</ResourceDictionary>

詳細については、「スタイルとテンプレート」の「共有リソースとテーマ」を参照してください。

カスタム コントロール

WPF には多くのカスタマイズ サポートが用意されていますが、WPF の既存のコントロールが、アプリケーションまたはそのユーザーのニーズを満たさない状況もあります。 次の原因が考えられます。

• WPF の既存の実装の外観をカスタマイズする方法では、必要とする UI を作成できない。

• WPF の既存の実装では、必要とする動作がサポートされない (または簡単にはサポートされない)。

ただし、この時点で、WPF の 3 つのモデルの 1 つを利用すると、新しいコントロールを作成できます。 各モデルは特定のシナリオを対象にしており、どのモデルでも WPF の特定の基本クラスからカスタム コントロールを派生させる必要があります。 3 つのモデルを次に示します。

• ユーザー コントロール モデル。 カスタム コントロールは UserControl から派生し、他の 1 つ以上のコントロールから成ります。

• コントロール モデル。 カスタム コントロールは Control から派生します。WPF のほとんどのコントロールと同じように、テンプレートを使用して動作と外観を分離する実装を構築するために使用されます。 Control から派生するため、ユーザー コントロールよりも自由にカスタム UI を作成できますが、多くの工数を必要とする場合があります。

• フレームワーク要素モデル。 カスタム コントロールは FrameworkElement から派生し、その外観はテンプレートではなくカスタム レンダリング ロジックで定義されます。

UserControl から派生した数値アップダウン カスタム コントロールの例を次に示します。

<UserControl
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.NumericUpDown">

  <Grid>

    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <!-- Value text box -->
    <Border BorderThickness="1" BorderBrush="Gray" Margin="2" Grid.RowSpan="2" 
      VerticalAlignment="Center" HorizontalAlignment="Stretch">
      <TextBlock Name="valueText" Width="60" TextAlignment="Right" Padding="5"/>
    </Border>

    <!-- Up/Down buttons -->
    <RepeatButton Name="upButton" Click="upButton_Click" Grid.Column="1" 
      Grid.Row="0">Up</RepeatButton>
    <RepeatButton Name="downButton" Click="downButton_Click" Grid.Column="1" 
      Grid.Row="1">Down</RepeatButton>

  </Grid>

</UserControl>

imports System 'EventArgs
imports System.Windows 'DependencyObject, DependencyPropertyChangedEventArgs, 
                       ' FrameworkPropertyMetadata, PropertyChangedCallback, 
                       ' RoutedPropertyChangedEventArgs
imports System.Windows.Controls 'UserControl

Namespace SDKSample

    ' Interaction logic for NumericUpDown.xaml
    Partial Public Class NumericUpDown
        Inherits System.Windows.Controls.UserControl

        'NumericUpDown user control implementation


...



    End Class

End Namespace

using System; // EventArgs
using System.Windows; // DependencyObject, DependencyPropertyChangedEventArgs,
                      // FrameworkPropertyMetadata, PropertyChangedCallback, 
                      // RoutedPropertyChangedEventArgs
using System.Windows.Controls; // UserControl

namespace SDKSample
{
    public partial class NumericUpDown : UserControl
    {
        // NumericUpDown user control implementation


...


    }
}

ユーザー コントロールを Window に取り込むために必要な XAML の例を次に示します。

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.UserControlWindow"
    xmlns:local="clr-namespace:SDKSample" 
    Title="User Control Window">


...


<!-- Numeric Up/Down user control -->
<local:NumericUpDown />


...


</Window>

次の図は、Window でホストされる NumericUpDown コントロールを示しています。

カスタム コントロールの詳細については、「コントロールの作成の概要」を参照してください。

WPF ベスト プラクティス

他の開発プラットフォームと同様に、WPF は、目的の結果を達成するためにさまざまに使用できます。 必要なユーザー エクスペリエンスを提供し、一般的な対象ユーザーの要求に応える WPF アプリケーションを作成する方法として、アクセシビリティ、グローバリゼーションとローカリゼーション、およびパフォーマンスに関して推奨されるベスト プラクティスがあります。 詳細については、以下のトピックを参照してください。

• ユーザー補助のベスト プラクティス

• WPF のグローバリゼーションおよびローカリゼーションの概要

• WPF アプリケーションのパフォーマンスの最適化

• セキュリティ (WPF)

概要

WPF は、魅力的な外観を持つさまざまなクライアント アプリケーションを作成するための包括的プレゼンテーション テクノロジです。 ここでは、WPF の主要な機能について紹介してきました。

次のステップは、WPF アプリケーションを作成することです。

アプリケーションの作成中にここに戻って、主要な機能を再確認したり、ここで取り上げた機能を詳細に説明している参照先を見つけたりできます。

推奨される概要とサンプル

ここで紹介した概要とサンプルを以下に示します。

概要

ユーザー補助のベスト プラクティス アプリケーション管理の概要 コマンド実行の概要 コントロール データ バインディングの概要 依存関係プロパティの概要 WPF のドキュメント

入力の概要 レイアウト システム ナビゲーションの概要 印刷の概要 リソースの概要 ルーティング イベントの概要 スタイルとテンプレート WPF のタイポグラフィ セキュリティ (WPF) WPF ウィンドウの概要 WPF のコンテンツ モデル WPF のグローバリゼーションおよびローカリゼーションの概要 グラフィックスとマルチメディア

サンプル

3-D ソリッドのサンプル アニメーション サンプル ギャラリー ブラシのサンプル データ バインディングのデモ ジオメトリのサンプル

データ テンプレート サンプルの概要 スタイルとテンプレート サンプルの概要 図形要素のサンプル ControlTemplate を使用したスタイル設定のサンプル WPF レイアウト ギャラリーのサンプル

参照

概念

チュートリアル: WPF の概要

WPF コミュニティのフィードバック