WPF の概要

Windows Presentation Foundation (WPF) を使用して、視覚的に美しいユーザー エクスペリエンスを持つ Windows 用のデスクトップ クライアント アプリケーションを作成できます。

Contoso Healthcare UI のサンプル

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

この概要は初めての方を対象としており、WPF の主要な機能と概念を説明します。

WPF によるプログラミング

WPF は、ほとんどの部分が System.Windows 名前空間に格納されている .NET Framework 型のサブセットとして存在します。 ASP.NET や Windows フォームのようなマネージ テクノロジを使用して .NET Framework で以前にアプリケーションを構築したことがあるユーザーは、基本的な WPF のプログラミングの経験には慣れているはずです。クラスのインスタンス化、プロパティの設定、メソッドの呼び出し、イベントの処理など、すべての操作は C# または Visual Basic などの使い慣れた .NET プログラミング言語を使用して行うことができます。

WPF には、プロパティとイベントを拡張する追加のプログラミング構成要素である、 依存関係プロパティルーティング イベントが含まれています。

マークアップおよび分離コード

WPF では マークアップ分離コードの両方を使用したアプリケーションを開発できます。これは ASP.NET 開発者にとってなじみ深いエクスペリエンスに違いありません。 一般に、アプリケーションの外観を実装するには XAML マークアップを使用し、一方、その動作を実装するには、マネージ プログラミング言語 (分離コード) を使用します。 外観と動作の実装を別々に行うことには、次の利点があります。

  • 外観固有のマークアップが動作固有のコードと密接に結び付いていないので、開発と保守のコストが削減されます。

  • デザイナーがアプリケーションの外観を実装しているとき同時に、開発者はアプリケーションの動作を実装できるため、開発がより効率的に進みます。

  • WPF アプリケーションのグローバリゼーションとローカリゼーション が簡略化します。

    WPF のマークアップおよび分離コードの簡単な概要を次に示します。

マークアップ

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

次の例では XAML を使用して、1 つのボタンが入っているウィンドウの外観を実装しています。

<Window  
    xmlns="http://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 で定義されたユーザー インターフェイス (UI) を示しています。

ボタンを含むウィンドウ

XAML は XML ベースなので、XAML を使用して作成する UI は 要素ツリーと呼ばれるネストされた要素の階層で組み立てられます。 要素ツリーは UI を作成し、管理するための論理的かつ直感的な方法を提供します。

分離コード

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

<Window  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://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>  
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!");  
        }  
    }  
}  
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  

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

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

MessageBox

コントロール

アプリケーション モデルにより提供されるユーザー エクスペリエンスは、構築済みのコントロールです。 WPF において、「コントロール」とはウィンドウまたはページによりホストされ、ユーザー インターフェイスを持ち、何らかの動作を実装する WPF クラスのカテゴリに適用される総称です。

詳しくは、「 コントロール」をご覧ください。

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

組み込まれた WPF コントロールを次に挙げます。

入力とコマンド実行

コントロールはほとんどの場合、ユーザー入力の検出と応答に使用されます。 WPF 入力システム では直接イベントとルーティング イベントの両方を使用して、テキスト入力、フォーカス管理、マウス位置指定をサポートしています。

アプリケーションにはたいてい、複雑な入力要件があります。 WPF には、ユーザー入力動作と、それらの動作に応答するコードを分離する コマンド システム があります。

レイアウト

ユーザー インターフェイスを作成すると、場所とサイズによりコントロール類を配置して、レイアウトを決めます。 すべてのレイアウトの重要な要件は、ウィンドウ サイズと表示設定の変更に適応させることです。 こうした状況でレイアウトを適応させるために開発者にコードを作成させるのではなく、WPF では最上級の拡張可能なレイアウト システムを提供します。

レイアウト システムの要となるのは、相対的な位置指定です。これにより、ウィンドウや表示条件の変化への適応性が高まります。 さらに、レイアウト システムは各コントロール間のネゴシエーションを管理して、レイアウトを決定します。 このネゴシエーションは 2 段階のプロセスで行われます。まず、コントロールがその親に対して、必要な場所とサイズを伝えます。次に、親コントロールはどれぐらいの空間を持てるかを子コントロールに伝えます。

レイアウト システムは基本の WPF クラスを介して子コントロールに公開されます。 グリッド、スタック、ドックなどの一般的なレイアウトについて、WPF には複数のレイアウト コントロールが組み込まれています。

  • Canvas: 子コントロールは独自のレイアウトを提供します。

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

  • Grid: 子コントロールは行ごと、列ごとに位置指定されます。

  • StackPanel: 子コントロールは垂直方向または水平方向に積み上げられます。

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

  • WrapPanel: 子コントロールは左から右への順序に配置され、現在の行に納まらない場合は、次の行に折り返されます。

    次の例では DockPanel を使用して複数の TextBox コントロールを配置しています。

    <Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://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 コントロールはどのように配置するかを伝えることができます。 このために、 DockPanelDock プロパティを実装しています。このプロパティが子コントロールに公開されて、それぞれのコントロールがドック スタイルを指定できるようになります。

注意

子コントロールが使うために、親コントロールにより実装されるプロパティは、 添付プロパティと呼ばれる WPF 構成要素です。

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

DockPanel ページ

データ バインディング

ほとんどのアプリケーションは、データの表示と編集の手段をユーザーに提供するために作成されます。 WPF アプリケーションの場合、データ格納とアクセスの機能は、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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://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のデータ コンテキストとして設定されます。 マークアップでは、 TextTextBox プロパティが、 Person.Name プロパティにバインドされます ("{Binding ... }" XAML 構文を使用)。 この XAML は WPF に対して、ウィンドウの TextBox プロパティに格納されている Person オブジェクトに、 DataContext コントロールをバインドするよう、指示します。

    WPF データ バインディング エンジンは、検証、並べ替え、フィルター処理、グループ化などのその他のサポートを提供します。 さらにデータ バインディングでは、標準の WPF コントロールによって表示されたユーザー インターフェイスが適切ではない場合に、バインドされたデータを操作するためのカスタム ユーザー インターフェイスをデータ テンプレートで作成することをサポートしています。

    詳しくは、「 データ バインディングの概要」をご覧ください。

グラフィックス

WPF では次の利点を備えた、広範囲にわたるスケーラブルで柔軟なグラフィックス機能セットが導入されています。

  • 解像度にもデバイスにも依存しないグラフィックス。 WPF グラフィックス システムでの測定値の基本単位は、デバイスに依存しないピクセル、すなわち 1 インチの 1/96 であり、実際の画面解像度には関係ありません。このため、解像度にもデバイスにも依存しないレンダリングの基盤が提供されます。 デバイスに依存しない各ピクセルは、レンダリングを行うシステムのドット/インチ (dpi) 設定に合うように、自動的にスケーリングされます。

  • 精度の向上。 WPF の座標系は、単精度ではなく、倍精度浮動小数点数で測定されます。 変換および不透明度の値も倍精度で表現されます。 また、WPF は、広色域 (scRGB) に対応しており、異なる色空間からの入力を管理する統合サポートを提供します。

  • 高度なグラフィックスおよびアニメーションのサポート。 WPF はアニメーションのシーンを管理してグラフィックスのプログラミングを簡略化します。シーンの処理、レンダリング ループ、バイリニア補間について心配する必要はありません。 WPF はさらに、ヒット テストのサポートとアルファ合成の完全なサポートを提供しています。

  • ハードウェアの高速化 WPF グラフィックス システムでは、CPU 使用率を最小限に抑えるためにグラフィックス ハードウェアを利用します。

2-D 図形

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

楕円と四角形

図形の興味深い機能は、単に表示するだけのものではないところです。図形はコントロールに期待される多くの機能 (キーボード入力とマウス入力を含む) を実装します。 次の例は、EllipseMouseUp イベント処理を示しています。

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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!");
        }
    }
}

次の図では、前のコードによって生成される内容を示しています。

"you clicked the ellipse!" というテキストを含むウィンドウ

詳しくは、「 WPF での図形と基本描画の概要」をご覧ください。

2-D ジオメトリ

WPF で提供される 2-D 図形では、基本的な図形の標準セットが網羅されています。 ただし、カスタマイズされたユーザー インターフェイスを容易に設計するには、カスタム図形を作成しなければならない場合があります。 このため、WPF ではジオメトリが用意されています。 次の図では、直接描画、ブラシとして使用、または他の図形やコントロールをクリップするために使用できるカスタム図形を作成するジオメトリの使用法を示します。

Path オブジェクトは、閉じているまたは開いている図形、複数の図形、さらに曲線図形の描画に使用できます。

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

パスのさまざまな使用方法

詳しくは、「 ジオメトリの概要」をご覧ください。

2-D 効果

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

さまざまなブラシの図

詳しくは、「 WPF のブラシの概要」をご覧ください。

3-D レンダリング

WPF には 2-D グラフィックスと統合し、より魅力的で興味深いユーザー インターフェイスを作成できる 3-D レンダリング機能も含まれています。 たとえば、次の図では 3-D 図形上にレンダリングされる 2-D イメージを示しています。

Visual3D サンプルのスクリーンショット

詳しくは、「 3-D グラフィックスの概要」をご覧ください。

アニメーション

WPF のアニメーション サポートを使用すると、コントロールを拡大、振動、スピン、フェードさせることができ、魅力的なページ遷移などを作成できです。 カスタム クラスも含めて、ほとんどの WPF クラスをアニメーション表示できます。 次の図に、実行中の単純なアニメーションを示します。

アニメーション キューブのイメージ

詳しくは、「 アニメーションの概要」をご覧ください。

メディア

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

イメージ

イメージは、ほとんどのアプリケーションに共通していますが、WPF にはイメージを使用するための、いくつかの方法が用意されています。 次の図に、サムネイル イメージが含まれているリスト ボックスがある、ユーザー インターフェイスを示します。 サムネイルを選ぶと、そのイメージがフル サイズで表示されます。

サムネイル イメージとフルサイズ イメージ

詳しくは、「 イメージングの概要」をご覧ください。

ビデオとオーディオ

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

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

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

オーディオおよびビデオを含む MediaElement コントロール

詳しくは、「 WPF のグラフィックス、アニメーション、およびメディアの概要」をご覧ください。

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

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

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

  • ClearType 機能拡張。

  • ハードウェアの高速化を利用する高パフォーマンス。

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

  • 国際対応フォントのサポートとフォールバック メカニズム。

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

    さまざまなテキスト装飾を含むテキスト

    詳しくは、「 Windows Presentation Foundation のタイポグラフィ」をご覧ください。

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

ここまで、アプリケーションを開発するための中核となる WPF 構成要素を説明してきました。 主にコントロールから成るアプリケーション コンテンツをホストして提供するには、アプリケーション モデルを使用します。 ユーザー インターフェイスでのコントロールの配置を簡素化して、ウィンドウ サイズや表示設定に変更が発生した場合にも配置を維持するには、WPF レイアウト システムを使用します。 ほとんどのアプリケーションでは、ユーザーがデータと対話できるようになっているため、データ バインディングを使用すればユーザー インターフェイスとデータの統合作業を削減できます。 アプリケーションの外観を向上させるには、WPF が提供する幅広いグラフィックス、アニメーション、メディアのサポートを使用します。

ただし多くの場合、基本要素だけでは、真に個性的で視覚的に美しいユーザー エクスペリエンスを作成し、管理するには不十分です。 標準の WPF コントロールでは、アプリケーションの目的の外観にはそぐわない場合があります。 最も効果的な方法でデータを表示できない可能性があります。 アプリケーションの全体的なユーザー エクスペリエンスが、Windows のテーマの既定のルック アンド フィールに適合しない場合があります。 多くの点で、プレゼンテーション技術には他の機能拡張と同様、視覚的な機能拡張性が必要です。

このため、WPF には独自のユーザー エクスペリエンスを作成するためのさまざまなメカニズムが用意されています。コントロール、トリガー、コントロールとデータのテンプレート、スタイル、ユーザー インターフェイスのリソース、テーマとスキン用の豊富なコンテンツ モデルがあります。

コンテンツ モデル

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

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.TextBoxContentWindow"
    Title="TextBox Content">
<TextBox Text="This is the content of a TextBox." />
</Window>

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

テキストを含む TextBox コントロール

しかし、さまざまな種類の複数のアイテムのコンテンツを含めることができるコントロールもあります。Content プロパティで指定された Button のコンテンツには、レイアウト コントロール、テキスト、画像、図形などのさまざまなアイテムを含めることができます。 次の例に、DockPanelLabelBorderMediaElement を含むコンテンツを備えた Button を示します。

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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 コントロールの既定のユーザー インターフェイスは、通常、他のコントロールと図形で構成されます。 たとえば、 ButtonButtonChrome コントロールと ContentPresenter コントロールの両方で構成されます。 ButtonChrome は標準的なボタンの外観を提供するのに対し、 ContentPresenterContent プロパティで指定したボタンのコンテンツを表示します。

コントロールの既定の外観が、アプリケーションの全体的な外観と調和しない場合もあります。 そのような場合は、 ControlTemplate を使用すれば、コンテンツと動作を変更することなく、コントロールのユーザー インターフェイスの外観を変更できます。

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

<Window 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>
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!");
        }
    }
}
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

この例では、既定のボタン ユーザー インターフェイスが、濃い青の枠線を持ち、RadialGradientBrush で塗りつぶされた Ellipse に置き換えられています。 ContentPresenter コントロールは Buttonのコンテンツである "Click Me!" を表示します。 Button がクリックされると、 Click コントロールの既定の動作の一部として Button イベントが発生します。 結果を次の例に示します。

省略記号ボタンと 2 番目のウィンドウ

データ テンプレート

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

既定の外観を使用したリスト ボックス

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

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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 コントロールを対象としているため、次の図に示すように、スタイルがウィンドウのすべてのボタンに自動的に適用されます。

2 つのオレンジ色のボタン

詳しくは、「 スタイルとテンプレート」をご覧ください。

リソース

アプリケーションのコントロール類は、同じ外観を持つ必要があります。こうした外観はフォントや背景色からコントロール テンプレート、データ テンプレート、スタイルまで、多岐にわたります。 ユーザー インターフェイスのリソースに対する WPF のサポートを使用すれば、こうした各種リソースを 1 つの場所でカプセル化して、再利用することができます。

次の例は ButtonLabel で共有される共通の背景色を定義しています。

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
      <!-- Define background color resource -->
      <SolidColorBrush x:Key="defaultBackground" Color="Red" />
    
      <!-- Define other resources -->
    
    </ResourceDictionary>
    

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

    <Application
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://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 サポートの基礎です。

    詳しくは、「 リソースの概要」をご覧ください。

カスタム コントロール

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

  • WPF の既存の実装のルックアンドフィールをカスタマイズしても、必要とするユーザー インターフェイスを作成できない。

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

    ただし現時点では、3 つの WPF モデルのいずれかを利用して、新しいコントロールを作成できます。 各モデルは固有のシナリオを対象としており、カスタム コントロールは特定の WPF 基底クラスから派生するものでなければなりません。 この 3 つのモデルは次のとおりです。

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

  • コントロール モデル カスタム コントロールは Control から派生し、大半の WPF コントロール同様、テンプレートを使用して、動作を外観から分離する実装を構築するために使用されます。 Control から派生することにより、ユーザー コントロールよりも自由度の高いカスタム ユーザー インターフェイスを作成できますが、これにはより多くの労力が必要です。

  • フレームワーク要素モデル カスタム コントロールは、カスタム レンダリング ロジック (テンプレートではなく) によって外観が定義されるときに、 FrameworkElement から派生します。

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

    <UserControl
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://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>
    
    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
        }
    }
    
    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
    

    次の例は、ユーザー コントロールを Window に組み込むために必要な XAML を示しています。

    <Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://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 コントロールを示します。

    カスタム UserControl

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

WPF のベスト プラクティス

WPF はすべての開発プラットフォームと同様、目的の結果を得るために、さまざまな方法で使用できます。 必要なユーザー エクスペリエンスを WPF アプリケーションが確実に提供し、オーディエンス一般の需要に応える 1 つの方法として、アクセシビリティ、グローバリゼーションとローカリゼーション、パフォーマンスに関するお勧めのベスト プラクティスがあります。 詳しくは、次のトピックをご覧ください。

まとめ

WPF とは、視覚的に美しいさまざまなクライアント アプリケーションを構築するための包括的なプレゼンテーション テクノロジです。 この概要では、WPF の主な機能を紹介しました。

次の手順では、WPF アプリケーションを構築します。

アプリケーションを作成する際に、この概要に立ち戻って主要な機能を思い出し、ここで取り上げられている機能をより詳しく説明したページへの参照を見つけることができます。

関連項目

WPF の概要
Windows Presentation Foundation での最新のデスクトップ アプリケーションの作成
Windows Presentation Foundation