WPF の概要

[アーティクル]
05/04/2023

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

Contoso Healthcare UI sample

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

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

WPF でのプログラミング

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

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

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

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

外観固有のマークアップが動作固有のコードと密接に結び付いていないので、開発と保守のコストが削減されます。
デザイナーがアプリケーションの外観を実装しているとき同時に、開発者はアプリケーションの動作を実装できるため、開発がより効率的に進みます。
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) を示しています。

A window that contains a button

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:Class と InitializeComponent を組み合わせることにより、実装が作成されるときはいつでも必ず正しく初期化されることが保証されます。分離コードクラスはボタンの Click イベントのイベントハンドラーも実装します。ボタンがクリックされると、イベントハンドラーは System.Windows.MessageBox.Show メソッドを呼び出して、メッセージボックスを表示します。

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

A MessageBox

コントロール

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

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

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 には、ユーザー入力動作と、それらの動作に応答するコードを分離するコマンドシステムがあります。

レイアウト

ユーザーインターフェイスを作成すると、場所とサイズによりコントロール類を配置して、レイアウトを決めます。すべてのレイアウトの重要な要件は、ウィンドウサイズと表示設定の変更に適応させることです。こうした状況でレイアウトを適応させるために開発者にコードを作成させるのではなく、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 コントロールはどのように配置するかを伝えることができます。このために、DockPanel は Dock 添付プロパティを実装しています。このプロパティが子コントロールに公開されて、それぞれのコントロールがドックスタイルを指定できるようになります。

注意

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

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

DockPanel page

データバインディング

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

管理対象のオブジェクトからコントロールにデータをコピーします。これらのコントロールで、データを表示および編集できます。
コントロールを使用してデータに対して行う変更が、必ず管理対象オブジェクトにもう一度コピーされるようにしてください。

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

Basic data binding diagram

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

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

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

グラフィックス

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

解像度にもデバイスにも依存しないグラフィックス。 WPF グラフィックスシステムでの測定値の基本単位は、デバイスに依存しないピクセル、すなわち 1 インチの 1/96 であり、実際の画面解像度には関係ありません。このため、解像度にもデバイスにも依存しないレンダリングの基盤が提供されます。デバイスに依存しない各ピクセルは、レンダリングを行うシステムのドット/インチ (dpi) 設定に合うように、自動的にスケーリングされます。
精度の向上。 WPF の座標系は、単精度ではなく、倍精度浮動小数点数で測定されます。変換および不透明度の値も倍精度で表現されます。また、WPF は、広色域 (scRGB) に対応しており、異なる色空間からの入力を管理する統合サポートを提供します。
高度なグラフィックスおよびアニメーションのサポート。 WPF はアニメーションのシーンを管理してグラフィックスのプログラミングを簡略化します。シーンの処理、レンダリングループ、バイリニア補間について心配する必要はありません。 WPF はさらに、ヒットテストのサポートとアルファ合成の完全なサポートを提供しています。
ハードウェアの高速化 WPF グラフィックスシステムでは、CPU 使用率を最小限に抑えるためにグラフィックスハードウェアを利用します。

2D 図形

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

Ellipses and rectangles

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

<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!");
        }
    }
}

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

A window with the text

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

2D ジオメトリ

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

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

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

Various uses of a path

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

2D 効果

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

Illustration of different brushes

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

3D レンダリング

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

Visual3D sample screen shot

詳細については、「3D グラフィックスの概要」を参照してください。

アニメーション

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

Images of an animated cube

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

Media

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

イメージ

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

Thumbnail images and a full-size image

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

ビデオとオーディオ

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

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

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

A MediaElement control with audio and video

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

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

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

OpenType フォントのサポート。
ClearType 機能拡張。
ハードウェアの高速化を利用する高パフォーマンス。
テキストと、メディア、グラフィックス、アニメーションとの統合。
国際対応フォントのサポートとフォールバックメカニズム。

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

Text with various text decorations

詳しくは、「 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>

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

A TextBox control that contains text

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

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

A button that contains multiple types of content

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

トリガー

XAML マークアップの主な目的はアプリケーションの外観を実装することですが、XAML を使用してアプリケーションの動作の一部の機能を実装することもできます。その一例として、ユーザーの操作に基づいて、アプリケーションの外観を変更するトリガーの使用があります。詳細については、スタイルとテンプレートに関するページをご覧ください。

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

WPF コントロールの既定のユーザーインターフェイスは、通常、他のコントロールと図形で構成されます。たとえば、 Button は ButtonChrome コントロールと ContentPresenter コントロールの両方で構成されます。 ButtonChrome は標準的なボタンの外観を提供するのに対し、 ContentPresenter は Content プロパティで指定したボタンのコンテンツを表示します。

コントロールの既定の外観が、アプリケーションの全体的な外観と調和しない場合もあります。そのような場合は、 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 がクリックされると、Button コントロールの既定の動作の一部として Click イベントが発生します。結果を次の図に示します。

An elliptical button and a second window

データテンプレート

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

A list box with the default appearance

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

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

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

List box that uses a data template

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">
    
    <Window.Resources>
        <!-- Style that will be applied to all buttons for this window -->
        <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>
    </Window.Resources>
    <StackPanel>

        <!-- 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>
        
    </StackPanel>
</Window>

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

Two orange buttons

詳細については、スタイルとテンプレートに関するページをご覧ください。

リソース

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

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

<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のすべての子に使用できます。次のように、リソースのスコープは多様です。この一覧では、解決される順序で各スコープが並べられています。

個々のコントロール (継承された System.Windows.FrameworkElement.Resources プロパティを使用)。
Window または Page (これも、継承された System.Windows.FrameworkElement.Resources プロパティを使用)。
Application ( System.Windows.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 コントロールを示します。

A custom UserControl

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

WPF のベストプラクティス

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

次の手順

WPF の主な機能を確認しました。次は、初めての WPF アプリをビルドします。

チュートリアル: 初めての WPF デスクトップアプリ

WPF の概要

WPF でのプログラミング

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

マークアップ

分離コード

コントロール

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

入力とコマンド

レイアウト

データバインディング

グラフィックス

2D 図形

2D ジオメトリ

2D 効果

3D レンダリング

アニメーション

Media

イメージ

ビデオとオーディオ

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

WPF アプリをカスタマイズする

コンテンツモデル

トリガー

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

データテンプレート

スタイル

リソース

カスタムコントロール

WPF のベストプラクティス

次の手順

関連項目

フィードバック

その他のリソース

WPF の概要

WPF でのプログラミング

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

マークアップ

分離コード

コントロール

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

入力とコマンド

レイアウト

データ バインディング

グラフィックス

2D 図形

2D ジオメトリ

2D 効果

3D レンダリング

アニメーション

Media

イメージ

ビデオとオーディオ

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

WPF アプリをカスタマイズする

コンテンツ モデル

トリガー

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

データ テンプレート

スタイル

リソース

カスタム コントロール

WPF のベスト プラクティス

次の手順

関連項目

フィードバック

その他のリソース

データバインディング

コンテンツモデル

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

データテンプレート

カスタムコントロール

WPF のベストプラクティス