WPF の概要Introduction to WPF

Windows Presentation Foundation (WPF) を使用して、視覚的に美しいユーザー エクスペリエンスを持つ Windows 用のデスクトップ クライアント アプリケーションを作成できます。Windows Presentation Foundation (WPF) lets you create desktop client applications for Windows with visually stunning user experiences.

Contoso Healthcare UI のサンプルContoso Healthcare UI sample

WPF の中核を成すのは、解像度に依存しない、ベクター ベースのレンダリング エンジンであり、これは最新のグラフィックス ハードウェアを活用できるように構築されています。The core of WPF is a resolution-independent and vector-based rendering engine that is built to take advantage of modern graphics hardware. この中核を拡張するため、WPF では、Extensible Application Markup Language (XAML)、コントロール、データ バインディング、レイアウト、2-D および 3-D グラフィックス、アニメーション、スタイル、テンプレート、ドキュメント、メディア、テキスト、タイポグラフィなどの、アプリケーション開発機能の包括的なセットを使用します。WPF extends the core with a comprehensive set of application-development features that include Extensible Application Markup Language (XAML), controls, data binding, layout, 2-D and 3-D graphics, animation, styles, templates, documents, media, text, and typography. WPF は .NET Framework に含まれるので、.NET Framework クラス ライブラリの他の要素を組み込んだアプリケーションを構築できます。WPF is included in the .NET Framework, so you can build applications that incorporate other elements of the .NET Framework class library.

この概要は初めての方を対象としており、WPF の主要な機能と概念を説明します。This overview is intended for newcomers and covers the key capabilities and concepts of WPF.

WPF によるプログラミングProgramming with WPF

WPF は、ほとんどの部分が System.Windows 名前空間に格納されている .NET Framework 型のサブセットとして存在します。WPF exists as a subset of .NET Framework types that are for the most part located in the System.Windows namespace. ASP.NET や Windows フォームのようなマネージ テクノロジを使用して .NET Framework で以前にアプリケーションを構築したことがあるユーザーは、基本的な WPF のプログラミングの経験には慣れているはずです。クラスのインスタンス化、プロパティの設定、メソッドの呼び出し、イベントの処理など、すべての操作は C# または Visual Basic などの使い慣れた .NET プログラミング言語を使用して行うことができます。If you have previously built applications with .NET Framework using managed technologies like ASP.NET and Windows Forms, the fundamental WPF programming experience should be familiar; you instantiate classes, set properties, call methods, and handle events, all using your favorite .NET programming language, such as C# or Visual Basic.

WPF には、プロパティとイベントを拡張する追加のプログラミング構成要素である、 依存関係プロパティルーティング イベントが含まれています。WPF includes additional programming constructs that enhance properties and events: dependency properties and routed events.

マークアップおよび分離コードMarkup and Code-Behind

WPF では マークアップ分離コードの両方を使用したアプリケーションを開発できます。これは ASP.NET 開発者にとってなじみ深いエクスペリエンスに違いありません。WPF lets you develop an application using both markup and code-behind, an experience that ASP.NET developers should be familiar with. 一般に、アプリケーションの外観を実装するには XAML マークアップを使用し、一方、その動作を実装するには、マネージ プログラミング言語 (分離コード) を使用します。You generally use XAML markup to implement the appearance of an application while using managed programming languages (code-behind) to implement its behavior. 外観と動作の実装を別々に行うことには、次の利点があります。This separation of appearance and behavior has the following benefits:

  • 外観固有のマークアップが動作固有のコードと密接に結び付いていないので、開発と保守のコストが削減されます。Development and maintenance costs are reduced because appearance-specific markup is not tightly coupled with behavior-specific code.

  • デザイナーがアプリケーションの外観を実装しているとき同時に、開発者はアプリケーションの動作を実装できるため、開発がより効率的に進みます。Development is more efficient because designers can implement an application's appearance simultaneously with developers who are implementing the application's behavior.

  • WPF アプリケーションのグローバリゼーションとローカリゼーション が簡略化します。Globalization and localization for WPF applications is simplified.

    WPF のマークアップおよび分離コードの簡単な概要を次に示します。The following is a brief introduction to WPF markup and code-behind.

マークアップMarkup

XAML は、アプリケーションの外観を宣言的に実装するために使用される XML ベースのマークアップ言語です。XAML is an XML-based markup language that is used to implement an application's appearance declaratively. 一般的に、ウィンドウ、ダイアログ ボックス、ページ、ユーザー コントロールの作成と、これらにコントロール、図形、グラフィックスを入れるために使用されます。It is typically used to create windows, dialog boxes, pages, and user controls, and to fill them with controls, shapes, and graphics.

次の例では XAML を使用して、1 つのボタンが入っているウィンドウの外観を実装しています。The following example uses XAML to implement the appearance of a window that contains a single button.

<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 エレメントを使用して、ウィンドウとボタンをそれぞれ定義しています。Specifically, this XAML defines a window and a button by using the Window and Button elements, respectively. 各エレメントは属性で構成されます。たとえば Window エレメントの Title 属性はウィンドウのタイトルバーのテキストを指定します。Each element is configured with attributes, such as the Window element's Title attribute to specify the window's title-bar text. マークアップで定義されている要素と属性は、実行時に WPF により、WPF クラスのインスタンスに変換されます。At run time, WPF converts the elements and attributes that are defined in markup to instances of WPF classes. たとえば、 Window エレメントは、 Window プロパティが Title 属性の値である Title クラスのインスタンスに変換されます。For example, the Window element is converted to an instance of the Window class whose Title property is the value of the Title attribute.

次の図は、前記の例の XAML で定義されたユーザー インターフェイス (UI) を示しています。The following figure shows the user interface (UI) that is defined by the XAML in the previous example.

ボタンを含むウィンドウA window that contains a button

XAML は XML ベースなので、XAML を使用して作成する UI は 要素ツリーと呼ばれるネストされた要素の階層で組み立てられます。Since XAML is XML-based, the UI that you compose with it is assembled in a hierarchy of nested elements known as an element tree. 要素ツリーは UI を作成し、管理するための論理的かつ直感的な方法を提供します。The element tree provides a logical and intuitive way to create and manage UIs.

分離コードCode-Behind

アプリケーションの主な動作は、ユーザー インタラクションに対して応答する機能を実装することです。これにはイベントの処理 (メニュー、ツールバー、またはボタンをクリックする、など) および応答のビジネス ロジックやデータ アクセス ロジックの呼び出しなどが含まれます。The main behavior of an application is to implement the functionality that responds to user interactions, including handling events (for example, clicking a menu, tool bar, or button) and calling business logic and data access logic in response. WPF では、この動作が一般に、マークアップと関連付けられたコードで実装されます。In WPF, this behavior is generally implemented in code that is associated with markup. このタイプのコードは分離コードと呼ばれています。This type of code is known as code-behind. 次の例は、前記の例の更新されたマークアップと分離コードです。The following example shows the updated markup from the previous example and the code-behind.

<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 クラスから派生したクラスを分離コードが実装しています。In this example, the code-behind implements a class that derives from the Window class. マークアップを分離コード クラスと関連付けるために x:Class 属性が使用されます。The x:Class attribute is used to associate the markup with the code-behind class. 分離コード クラスのコンストラクターから InitializeComponent が呼び出されて、マークアップで定義された UI を分離コード クラスとマージします。InitializeComponent is called from the code-behind class's constructor to merge the UI that is defined in markup with the code-behind class. (InitializeComponent は、アプリケーションがビルドされるときに生成されます。手動で実装する必要がないのは、このためです。)x:ClassInitializeComponent を組み合わせることにより、実装が作成されるときはいつでも必ず正しく初期化されることが保証されます。(InitializeComponent is generated for you when your application is built, which is why you don't need to implement it manually.) The combination of x:Class and InitializeComponent ensure that your implementation is correctly initialized whenever it is created. 分離コード クラスはボタンの Click イベントのイベント ハンドラーも実装します。The code-behind class also implements an event handler for the button's Click event. ボタンがクリックされると、イベント ハンドラーは System.Windows.MessageBox.Show メソッドを呼び出して、メッセージ ボックスを表示します。When the button is clicked, the event handler shows a message box by calling the System.Windows.MessageBox.Show method.

次の図は、ボタンがクリックされたときの結果を示しています。The following figure shows the result when the button is clicked.

MessageBoxA MessageBox

コントロールControls

アプリケーション モデルにより提供されるユーザー エクスペリエンスは、構築済みのコントロールです。The user experiences that are delivered by the application model are constructed controls. WPF において、「コントロール」とはウィンドウまたはページによりホストされ、ユーザー インターフェイスを持ち、何らかの動作を実装する WPF クラスのカテゴリに適用される総称です。In WPF, "control" is an umbrella term that applies to a category of WPF classes that are hosted in either a window or a page, have a user interface, and implement some behavior.

詳しくは、「 コントロール」をご覧ください。For more information, see Controls.

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

組み込まれた WPF コントロールを次に挙げます。The built-in WPF controls are listed here.

入力とコマンド実行Input and Commanding

コントロールはほとんどの場合、ユーザー入力の検出と応答に使用されます。Controls most often detect and respond to user input. WPF 入力システム では直接イベントとルーティング イベントの両方を使用して、テキスト入力、フォーカス管理、マウス位置指定をサポートしています。The WPF input system uses both direct and routed events to support text input, focus management, and mouse positioning.

アプリケーションにはたいてい、複雑な入力要件があります。Applications often have complex input requirements. WPF には、ユーザー入力動作と、それらの動作に応答するコードを分離する コマンド システム があります。WPF provides a command system that separates user input actions from the code that responds to those actions.

レイアウトLayout

ユーザー インターフェイスを作成すると、場所とサイズによりコントロール類を配置して、レイアウトを決めます。When you create a user interface, you arrange your controls by location and size to form a layout. すべてのレイアウトの重要な要件は、ウィンドウ サイズと表示設定の変更に適応させることです。A key requirement of any layout is to adapt to changes in window size and display settings. こうした状況でレイアウトを適応させるために開発者にコードを作成させるのではなく、WPF では最上級の拡張可能なレイアウト システムを提供します。Rather than forcing you to write the code to adapt a layout in these circumstances, WPF provides a first-class, extensible layout system for you.

レイアウト システムの要となるのは、相対的な位置指定です。これにより、ウィンドウや表示条件の変化への適応性が高まります。The cornerstone of the layout system is relative positioning, which increases the ability to adapt to changing window and display conditions. さらに、レイアウト システムは各コントロール間のネゴシエーションを管理して、レイアウトを決定します。In addition, the layout system manages the negotiation between controls to determine the layout. このネゴシエーションは 2 段階のプロセスで行われます。まず、コントロールがその親に対して、必要な場所とサイズを伝えます。次に、親コントロールはどれぐらいの空間を持てるかを子コントロールに伝えます。The negotiation is a two-step process: first, a control tells its parent what location and size it requires; second, the parent tells the control what space it can have.

レイアウト システムは基本の WPF クラスを介して子コントロールに公開されます。The layout system is exposed to child controls through base WPF classes. グリッド、スタック、ドックなどの一般的なレイアウトについて、WPF には複数のレイアウト コントロールが組み込まれています。For common layouts such as grids, stacking, and docking, WPF includes several layout controls:

  • Canvas: 子コントロールは独自のレイアウトを提供します。Canvas: Child controls provide their own layout.

  • DockPanel: 子コントロールはパネルの縁に並べられます。DockPanel: Child controls are aligned to the edges of the panel.

  • Grid: 子コントロールは行ごと、列ごとに位置指定されます。Grid: Child controls are positioned by rows and columns.

  • StackPanel: 子コントロールは垂直方向または水平方向に積み上げられます。StackPanel: Child controls are stacked either vertically or horizontally.

  • VirtualizingStackPanel: 子コントロールは仮想化され、水平方向または垂直方向の 1 本の線上に配置されます。VirtualizingStackPanel: Child controls are virtualized and arranged on a single line that is either horizontally or vertically oriented.

  • WrapPanel: 子コントロールは左から右への順序に配置され、現在の行に納まらない場合は、次の行に折り返されます。WrapPanel: Child controls are positioned in left-to-right order and wrapped to the next line when there are more controls on the current line than space allows.

    次の例では DockPanel を使用して複数の TextBox コントロールを配置しています。The following example uses a DockPanel to lay out several TextBox controls.

    <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 コントロールはどのように配置するかを伝えることができます。The DockPanel allows the child TextBox controls to tell it how to arrange them. このために、DockPanelDock 添付プロパティを実装しています。このプロパティが子コントロールに公開されて、それぞれのコントロールがドック スタイルを指定できるようになります。To do this, the DockPanel implements a Dock attached property that is exposed to the child controls to allow each of them to specify a dock style.

注意

子コントロールが使うために、親コントロールにより実装されるプロパティは、 添付プロパティと呼ばれる WPF 構成要素です。A property that is implemented by a parent control for use by child controls is a WPF construct called an attached property.

次の図に、前の例の XAML マークアップの結果を示します。The following figure shows the result of the XAML markup in the preceding example.

DockPanel ページDockPanel page

データ バインディングData Binding

ほとんどのアプリケーションは、データの表示と編集の手段をユーザーに提供するために作成されます。Most applications are created to provide users with the means to view and edit data. WPF アプリケーションの場合、データ格納とアクセスの機能は、SQL Server や ADO .NET などのテクノロジにより、すでに提供されています。For WPF applications, the work of storing and accessing data is already provided for by technologies such as SQL Server and ADO .NET. データがアクセスされ、アプリケーションの管理対象オブジェクトに読み込まれると、WPF アプリケーションの処理が開始します。After the data is accessed and loaded into an application's managed objects, the hard work for WPF applications begins. 基本的に、これには 2 つの処理が伴います。Essentially, this involves two things:

  1. 管理対象のオブジェクトからコントロールにデータをコピーします。これらのコントロールで、データを表示および編集できます。Copying the data from the managed objects into controls, where the data can be displayed and edited.

  2. コントロールを使用してデータに対して行う変更が、必ず管理対象オブジェクトにもう一度コピーされるようにしてください。Ensuring that changes made to data by using controls are copied back to the managed objects.

    アプリケーションの開発を簡素化するために、WPF にはこれらの手順を自動的に実行する、データ バインディング エンジンが用意されています。To simplify application development, WPF provides a data binding engine to automatically perform these steps. データ バインディング エンジンの中核となる単位は Binding クラスであり、その仕事はコントロール (バインディング ターゲット) をデータ オブジェクト (バインディング ソース) にバインドすることです。The core unit of the data binding engine is the Binding class, whose job is to bind a control (the binding target) to a data object (the binding source). この関係を次の図に示します。This relationship is illustrated by the following figure.

    基本的なデータ バインディング ダイアグラムBasic data binding diagram

    次の例は、TextBox をカスタム Person オブジェクトのインスタンスにバインドする方法を示しています。The following example demonstrates how to bind a TextBox to an instance of a custom Person object. Person の実装を次のコードに示します。The Person implementation is shown in the following code.

    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 オブジェクトのインスタンスにバインドします。The following markup binds the TextBox to an instance of a custom Person object.

    <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のデータ コンテキストとして設定されます。In this example, the Person class is instantiated in code-behind and is set as the data context for the DataBindingWindow. マークアップでは、 TextTextBox プロパティが、 Person.Name プロパティにバインドされます ("{Binding ... }" XAML 構文を使用)。In markup, the Text property of the TextBox is bound to the Person.Name property (using the "{Binding ... }" XAML syntax). この XAML は WPF に対して、ウィンドウの TextBox プロパティに格納されている Person オブジェクトに、 DataContext コントロールをバインドするよう、指示します。This XAML tells WPF to bind the TextBox control to the Person object that is stored in the DataContext property of the window.

    WPF データ バインディング エンジンは、検証、並べ替え、フィルター処理、グループ化などのその他のサポートを提供します。The WPF data binding engine provides additional support that includes validation, sorting, filtering, and grouping. さらにデータ バインディングでは、標準の WPF コントロールによって表示されたユーザー インターフェイスが適切ではない場合に、バインドされたデータを操作するためのカスタム ユーザー インターフェイスをデータ テンプレートで作成することをサポートしています。Furthermore, data binding supports the use of data templates to create custom user interface for bound data when the user interface displayed by the standard WPF controls is not appropriate.

    詳しくは、「 データ バインディングの概要」をご覧ください。For more information, see Data Binding Overview.

グラフィックスGraphics

WPF では次の利点を備えた、広範囲にわたるスケーラブルで柔軟なグラフィックス機能セットが導入されています。WPF introduces an extensive, scalable, and flexible set of graphics features that have the following benefits:

  • 解像度にもデバイスにも依存しないグラフィックスResolution-independent and device-independent graphics. WPF グラフィックス システムでの測定値の基本単位は、デバイスに依存しないピクセル、すなわち 1 インチの 1/96 であり、実際の画面解像度には関係ありません。このため、解像度にもデバイスにも依存しないレンダリングの基盤が提供されます。The basic unit of measurement in the WPF graphics system is the device independent pixel, which is 1/96th of an inch, regardless of actual screen resolution, and provides the foundation for resolution-independent and device-independent rendering. デバイスに依存しない各ピクセルは、レンダリングを行うシステムのドット/インチ (dpi) 設定に合うように、自動的にスケーリングされます。Each device-independent pixel automatically scales to match the dots-per-inch (dpi) setting of the system it renders on.

  • 精度の向上Improved precision. WPF の座標系は、単精度ではなく、倍精度浮動小数点数で測定されます。The WPF coordinate system is measured with double-precision floating-point numbers rather than single-precision. 変換および不透明度の値も倍精度で表現されます。Transformations and opacity values are also expressed as double-precision. また、WPF は、広色域 (scRGB) に対応しており、異なる色空間からの入力を管理する統合サポートを提供します。WPF also supports a wide color gamut (scRGB) and provides integrated support for managing inputs from different color spaces.

  • 高度なグラフィックスおよびアニメーションのサポートAdvanced graphics and animation support. WPF はアニメーションのシーンを管理してグラフィックスのプログラミングを簡略化します。シーンの処理、レンダリング ループ、バイリニア補間について心配する必要はありません。WPF simplifies graphics programming by managing animation scenes for you; there is no need to worry about scene processing, rendering loops, and bilinear interpolation. WPF はさらに、ヒット テストのサポートとアルファ合成の完全なサポートを提供しています。Additionally, WPF provides hit-testing support and full alpha-compositing support.

  • ハードウェアの高速化Hardware acceleration. WPF グラフィックス システムでは、CPU 使用率を最小限に抑えるためにグラフィックス ハードウェアを利用します。The WPF graphics system takes advantage of graphics hardware to minimize CPU usage.

2-D 図形2-D Shapes

WPF には、次の図に示す四角形や楕円のような、一般的なベクター描画による 2-D 図形のライブラリが用意されています。WPF provides a library of common vector-drawn 2-D shapes, such as the rectangles and ellipses that are shown in the following illustration.

楕円と四角形Ellipses and rectangles

図形の興味深い機能は、単に表示するだけのものではないところです。図形はコントロールに期待される多くの機能 (キーボード入力とマウス入力を含む) を実装します。An interesting capability of shapes is that they are not just for display; shapes implement many of the features that you expect from controls, including keyboard and mouse input. 次の例は、 MouseUpEllipse イベント処理を示しています。The following example shows the MouseUp event of an Ellipse being handled.

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

次の図では、前のコードによって生成される内容を示しています。The following figure shows what is produced by the preceding code.

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

詳しくは、「 WPF での図形と基本描画の概要」をご覧ください。For more information, see Shapes and Basic Drawing in WPF Overview.

2-D ジオメトリ2-D Geometries

WPF で提供される 2-D 図形では、基本的な図形の標準セットが網羅されています。The 2-D shapes provided by WPF cover the standard set of basic shapes. ただし、カスタマイズされたユーザー インターフェイスを容易に設計するには、カスタム図形を作成しなければならない場合があります。However, you may need to create custom shapes to facilitate the design of a customized user interface. このため、WPF ではジオメトリが用意されています。For this purpose, WPF provides geometries. 次の図では、直接描画、ブラシとして使用、または他の図形やコントロールをクリップするために使用できるカスタム図形を作成するジオメトリの使用法を示します。The following figure demonstrates the use of geometries to create a custom shape that can be drawn directly, used as a brush, or used to clip other shapes and controls.

Path オブジェクトは、閉じているまたは開いている図形、複数の図形、さらに曲線図形の描画に使用できます。Path objects can be used to draw closed or open shapes, multiple shapes, and even curved shapes.

Geometry オブジェクトは、クリップ、ヒット テスト、2-D グラフィック データのレンダリングに使用できます。Geometry objects can be used for clipping, hit-testing, and rendering 2-D graphic data.

パスのさまざまな使用方法Various uses of a Path

詳しくは、「ジオメトリの概要」をご覧ください。For more information, see Geometry Overview.

2-D 効果2-D Effects

WPF の 2-D 機能のサブセットには、グラデーション、ビットマップ、描画、ビデオによる塗りつぶし、回転、拡大縮小、傾斜などの視覚効果が含まれています。A subset of WPF 2-D capabilities includes visual effects, such as gradients, bitmaps, drawings, painting with videos, rotation, scaling, and skewing. これらはすべてブラシによって実現します。次の図に、例をいくつか示します。These are all achieved with brushes; the following figure shows some examples.

さまざまなブラシの図Illustration of different brushes

詳しくは、「 WPF のブラシの概要」をご覧ください。For more information, see WPF Brushes Overview.

3-D レンダリング3-D Rendering

WPF には 2-D グラフィックスと統合し、より魅力的で興味深いユーザー インターフェイスを作成できる 3-D レンダリング機能も含まれています。WPF also includes 3-D rendering capabilities that integrate with 2-d graphics to allow the creation of more exciting and interesting user interfaces. たとえば、次の図では 3-D 図形上にレンダリングされる 2-D イメージを示しています。For example, the following figure shows 2-D images rendered onto 3-D shapes.

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

詳しくは、「 3-D グラフィックスの概要」をご覧ください。For more information, see 3-D Graphics Overview.

アニメーションAnimation

WPF のアニメーション サポートを使用すると、コントロールを拡大、振動、スピン、フェードさせることができ、魅力的なページ遷移などを作成できです。WPF animation support lets you make controls grow, shake, spin, and fade, to create interesting page transitions, and more. カスタム クラスも含めて、ほとんどの WPF クラスをアニメーション表示できます。You can animate most WPF classes, even custom classes. 次の図に、実行中の単純なアニメーションを示します。The following figure shows a simple animation in action.

アニメーション キューブのイメージImages of an animated cube

詳しくは、「 アニメーションの概要」をご覧ください。For more information, see Animation Overview.

メディアMedia

リッチ コンテンツを伝達するための 1 つの方法は、オーディオビジュアル メディアを使用することです。One way to convey rich content is through the use of audiovisual media. WPF では、イメージ、ビデオ、オーディオに対して特別なサポートを提供しています。WPF provides special support for images, video, and audio.

イメージImages

イメージは、ほとんどのアプリケーションに共通していますが、WPF にはイメージを使用するための、いくつかの方法が用意されています。Images are common to most applications, and WPF provides several ways to use them. 次の図に、サムネイル イメージが含まれているリスト ボックスがある、ユーザー インターフェイスを示します。The following figure shows a user interface with a list box that contains thumbnail images. サムネイルを選ぶと、そのイメージがフル サイズで表示されます。When a thumbnail is selected, the image is shown full-size.

サムネイル イメージとフルサイズ イメージThumbnail images and a full-size image

詳しくは、「 イメージングの概要」をご覧ください。For more information, see Imaging Overview.

ビデオとオーディオVideo and Audio

MediaElement コントロールは、オーディオとビデオの両方を再生でき、カスタム メディア プレーヤーの土台となれる柔軟性を備えています。The MediaElement control is capable of playing both video and audio, and it is flexible enough to be the basis for a custom media player. 次の XAML マークアップは、メディア プレーヤーを実装します。The following XAML markup implements a media player.

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

次の図のウィンドウは、動作中の MediaElement コントロールを示しています。The window in the following figure shows the MediaElement control in action.

オーディオおよびビデオを含む MediaElement コントロールA MediaElement control with audio and video

詳細については、「グラフィックスとマルチメディア」を参照してください。For more information, see Graphics and Multimedia.

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

高品質のテキスト レンダリングを容易に行うために、WPF では次の機能が提供されています。To facilitate high-quality text rendering, WPF offers the following features:

  • OpenType フォントのサポート。OpenType font support.

  • ClearType 機能拡張。ClearType enhancements.

  • ハードウェアの高速化を利用する高パフォーマンス。High performance that takes advantage of hardware acceleration.

  • テキストと、メディア、グラフィックス、アニメーションとの統合。Integration of text with media, graphics, and animation.

  • 国際対応フォントのサポートとフォールバック メカニズム。International font support and fallback mechanisms.

    テキストとグラフィックスの統合のデモとして、次の図に文字の装飾の適用を示します。As a demonstration of text integration with graphics, the following figure shows the application of text decorations.

    さまざまなテキスト装飾を含むテキストText with various text decorations

    詳しくは、「 Windows Presentation Foundation のタイポグラフィ」をご覧ください。For more information, see Typography in Windows Presentation Foundation.

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

ここまで、アプリケーションを開発するための中核となる WPF 構成要素を説明してきました。Up to this point, you've seen the core WPF building blocks for developing applications. 主にコントロールから成るアプリケーション コンテンツをホストして提供するには、アプリケーション モデルを使用します。You use the application model to host and deliver application content, which consists mainly of controls. ユーザー インターフェイスでのコントロールの配置を簡素化して、ウィンドウ サイズや表示設定に変更が発生した場合にも配置を維持するには、WPF レイアウト システムを使用します。To simplify the arrangement of controls in a user interface, and to ensure the arrangement is maintained in the face of changes to window size and display settings, you use the WPF layout system. ほとんどのアプリケーションでは、ユーザーがデータと対話できるようになっているため、データ バインディングを使用すればユーザー インターフェイスとデータの統合作業を削減できます。Because most applications allow users to interact with data, you use data binding to reduce the work of integrating your user interface with data. アプリケーションの外観を向上させるには、WPF が提供する幅広いグラフィックス、アニメーション、メディアのサポートを使用します。To enhance the visual appearance of your application, you use the comprehensive range of graphics, animation, and media support provided by WPF.

ただし多くの場合、基本要素だけでは、真に個性的で視覚的に美しいユーザー エクスペリエンスを作成し、管理するには不十分です。Often, though, the basics are not enough for creating and managing a truly distinct and visually stunning user experience. 標準の WPF コントロールでは、アプリケーションの目的の外観にはそぐわない場合があります。The standard WPF controls may not integrate with the desired appearance of your application. 最も効果的な方法でデータを表示できない可能性があります。Data may not be displayed in the most effective way. アプリケーションの全体的なユーザー エクスペリエンスが、Windows のテーマの既定のルック アンド フィールに適合しない場合があります。Your application's overall user experience may not be suited to the default look and feel of Windows themes. 多くの点で、プレゼンテーション技術には他の機能拡張と同様、視覚的な機能拡張性が必要です。In many ways, a presentation technology needs visual extensibility as much as any other kind of extensibility.

このため、WPF には独自のユーザー エクスペリエンスを作成するためのさまざまなメカニズムが用意されています。コントロール、トリガー、コントロールとデータのテンプレート、スタイル、ユーザー インターフェイスのリソース、テーマとスキン用の豊富なコンテンツ モデルがあります。For this reason, WPF provides a variety of mechanisms for creating unique user experiences, including a rich content model for controls, triggers, control and data templates, styles, user interface resources, and themes and skins.

コンテンツ モデルContent Model

大半の WPF コントロールの主な目的はコンテンツを表示することです。The main purpose of a majority of the WPF controls is to display content. WPF では、コントロールのコンテンツを構成するアイテムの種類と数を、コントロールの コンテンツ モデルと呼びます。In WPF, the type and number of items that can constitute the content of a control is referred to as the control's content model. 一部のコントロールには、1 つのアイテムと種類のコンテンツを含めることができます。たとえば、 TextBox のコンテンツは Text プロパティに割り当てられている文字列値です。Some controls can contain a single item and type of content; for example, the content of a TextBox is a string value that is assigned to the Text property. 次の例では TextBoxのコンテンツを設定します。The following example sets the content of a 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>  

次の図に、結果を示します。The following figure shows the result.

テキストを含む TextBox コントロールA TextBox control that contains text

しかし、さまざまな種類の複数のアイテムのコンテンツを含めることができるコントロールもあります。Content プロパティで指定された Button のコンテンツには、レイアウト コントロール、テキスト、画像、図形などのさまざまなアイテムを含めることができます。Other controls, however, can contain multiple items of different types of content; the content of a Button, specified by the Content property, can contain a variety of items including layout controls, text, images, and shapes. 次の例に、 ButtonDockPanelLabelBorderを含むコンテンツを備えた MediaElementを示します。The following example shows a Button with content that includes a DockPanel, a Label, a Border, and a MediaElement.

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

次の図はこのボタンのコンテンツを示しています。The following figure shows the content of this button.

複数の種類の内容を含むボタンA button that contains multiple types of content

さまざまなコントロールでサポートされているコンテンツの種類について詳しくは、「 WPF コンテンツ モデル」をご覧ください。For more information on the kinds of content that is supported by various controls, see WPF Content Model.

トリガーTriggers

XAML マークアップの主な目的はアプリケーションの外観を実装することですが、XAML を使用してアプリケーションの動作の一部の機能を実装することもできます。Although the main purpose of XAML markup is to implement an application's appearance, you can also use XAML to implement some aspects of an application's behavior. その一例として、ユーザーの操作に基づいて、アプリケーションの外観を変更するトリガーの使用があります。One example is the use of triggers to change an application's appearance based on user interactions. 詳しくは、「 スタイルとテンプレート」をご覧ください。For more information, see Styling and Templating.

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

WPF コントロールの既定のユーザー インターフェイスは、通常、他のコントロールと図形で構成されます。The default user interfaces for WPF controls are typically constructed from other controls and shapes. たとえば、 ButtonButtonChrome コントロールと ContentPresenter コントロールの両方で構成されます。For example, a Button is composed of both ButtonChrome and ContentPresenter controls. ButtonChrome は標準的なボタンの外観を提供するのに対し、 ContentPresenterContent プロパティで指定したボタンのコンテンツを表示します。The ButtonChrome provides the standard button appearance, while the ContentPresenter displays the button's content, as specified by the Content property.

コントロールの既定の外観が、アプリケーションの全体的な外観と調和しない場合もあります。Sometimes the default appearance of a control may be incongruent with the overall appearance of an application. そのような場合は、 ControlTemplate を使用すれば、コンテンツと動作を変更することなく、コントロールのユーザー インターフェイスの外観を変更できます。In this case, you can use a ControlTemplate to change the appearance of the control's user interface without changing its content and behavior.

たとえば、次の例は Button を使用して ControlTemplateの外観を変更する方法を示しています。For example, the following example shows how to change the appearance of a Button by using a ControlTemplate.

<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

この例では、既定のボタン ユーザー インターフェイスが、濃い青の枠線を持ち、 Ellipse で塗りつぶされた RadialGradientBrushに置き換えられています。In this example, the default button user interface has been replaced with an Ellipse that has a dark blue border and is filled using a RadialGradientBrush. ContentPresenter コントロールは Buttonのコンテンツである "Click Me!" を表示します。The ContentPresenter control displays the content of the Button, "Click Me!" Button がクリックされると、 Click コントロールの既定の動作の一部として Button イベントが発生します。When the Button is clicked, the Click event is still raised as part of the Button control's default behavior. 結果を次の例に示します。The result is shown in the following figure.

省略記号ボタンと 2 番目のウィンドウAn elliptical button and a second window

データ テンプレートData Templates

コントロール テンプレートを使用すると、コントロールの外観を指定できますが、データ テンプレートではコントロールのコンテンツの外観を指定できます。Whereas a control template lets you specify the appearance of a control, a data template lets you specify the appearance of a control's content. データ テンプレートはたいてい、バインドされたデータの表示方法を多様化するために使用されます。Data templates are frequently used to enhance how bound data is displayed. 次の図では、Task オブジェクトのコレクションにバインドされた ListBox の既定の外観を示しています。各タスクは名前、説明、優先順位を持ちます。The following figure shows the default appearance for a ListBox that is bound to a collection of Task objects, where each task has a name, description, and priority.

既定の外観を使用したリスト ボックスA list box with the default appearance

既定の外観は ListBox に期待されるものです。The default appearance is what you would expect from a ListBox. ただし、各タスクの既定の外観にはタスク名しか含まれていません。However, the default appearance of each task contains only the task name. タスク名、説明、優先度の既定の外観を表示するには、 ListBox コントロールのバインドされたリスト項目の既定の外観を、 DataTemplateを使用して変更する必要があります。To show the task name, description, and priority, the default appearance of the ListBox control's bound list items must be changed by using a DataTemplate. 次の XAML はこのような DataTemplateを定義しています。これが、 ItemTemplate 属性を使用して各タスクに適用されます。The following XAML defines such a DataTemplate, which is applied to each task by using the ItemTemplate attribute.

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

次の図にこのコードの効果を示します。The following figure shows the effect of this code.

データ テンプレートを使用するリスト ボックスLlist box that uses a data template

ListBox の動作と全体的な外観は保持されていることにご注意ください。リスト ボックスにより表示されるコンテンツの外観のみが変更されています。Note that the ListBox has retained its behavior and overall appearance; only the appearance of the content being displayed by the list box has changed.

詳しくは「 データ テンプレートの概要」をご覧ください。For more information, see Data Templating Overview.

スタイルStyles

スタイルを使うと、開発者とデザイナーは製品の特定の外観を標準化できます。Styles enable developers and designers to standardize on a particular appearance for their product. WPF には強力なスタイル モデルが用意されており、この基盤となるのが Style 要素です。WPF provides a strong style model, the foundation of which is the Style element. 次の例では、ウィンドウ上の各 Button の背景色を Orangeに設定するスタイルを作成しています。The following example creates a style that sets the background color for every Button on a window to 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 コントロールを対象としているため、次の図に示すように、スタイルがウィンドウのすべてのボタンに自動的に適用されます。Because this style targets all Button controls, the style is automatically applied to all the buttons in the window, as shown in the following figure.

2 つのオレンジ色のボタンTwo orange buttons

詳しくは、「 スタイルとテンプレート」をご覧ください。For more information, see Styling and Templating.

リソースResources

アプリケーションのコントロール類は、同じ外観を持つ必要があります。こうした外観はフォントや背景色からコントロール テンプレート、データ テンプレート、スタイルまで、多岐にわたります。Controls in an application should share the same appearance, which can include anything from fonts and background colors to control templates, data templates, and styles. ユーザー インターフェイスのリソースに対する WPF のサポートを使用すれば、こうした各種リソースを 1 つの場所でカプセル化して、再利用することができます。You can use WPF's support for user interface resources to encapsulate these resources in a single location for reuse.

次の例は ButtonLabelで共有される共通の背景色を定義しています。The following example defines a common background color that is shared by a Button and a 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 プロパティ要素を使用して、背景色リソースを実装しています。This example implements a background color resource by using the Window.Resources property element. このリソースは Windowのすべての子に使用できます。This resource is available to all children of the Window. 次のように、リソースのスコープは多様です。この一覧では、解決される順序で各スコープが並べられています。There are a variety of resource scopes, including the following, listed in the order in which they are resolved:

  1. 個々のコントロール (継承された System.Windows.FrameworkElement.Resources プロパティを使用)。An individual control (using the inherited System.Windows.FrameworkElement.Resources property).

  2. Window または Page (これも、継承された System.Windows.FrameworkElement.Resources プロパティを使用)。A Window or a Page (also using the inherited System.Windows.FrameworkElement.Resources property).

  3. Application ( System.Windows.Application.Resources プロパティを使用)。An Application (using the System.Windows.Application.Resources property).

    このようなスコープの多様さのおかげで、リソースを柔軟に定義して共有できるようになります。The variety of scopes gives you flexibility with respect to the way in which you define and share your resources.

    リソースを特定のスコープに直接関連付ける代わりに、アプリケーションの他の部分で参照できる別個の ResourceDictionary を使用して、1 つ以上のリソースをパッケージ化することができます。As an alternative to directly associating your resources with a particular scope, you can package one or more resources by using a separate ResourceDictionary that can be referenced in other parts of an application. たとえば、次の例ではリソース ディクショナリに既定の背景色を定義しています。For example, the following example defines a default background color in a resource dictionary.

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

次の例では、前の例で定義したリソース ディクショナリを参照し、アプリケーション全体で共有されるようにしています。The following example references the resource dictionary defined in the previous example so that it is shared across an application.

<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 サポートの基礎です。Resources and resource dictionaries are the foundation of WPF support for themes and skins.

詳しくは、「 リソースの概要」をご覧ください。For more information, see Resources Overview.

カスタム コントロールCustom Controls

WPF にはカスタマイズに対する多くのサポートが用意されていますが、状況によっては既存の WPF コントロールではアプリケーションやそのユーザーのニーズを満たせない場合があります。Although WPF provides a host of customization support, you may encounter situations where existing WPF controls do not meet the needs of either your application or its users. 次のような状況が考えられます。This can occur when:

  • WPF の既存の実装のルックアンドフィールをカスタマイズしても、必要とするユーザー インターフェイスを作成できない。The user interface that you require cannot be created by customizing the look and feel of existing WPF implementations.

  • WPF の既存の実装が、必要とする動作をサポートしない (または簡単にはサポートできない)。The behavior that you require is not supported (or not easily supported) by existing WPF implementations.

    ただし現時点では、3 つの WPF モデルのいずれかを利用して、新しいコントロールを作成できます。At this point, however, you can take advantage of one of three WPF models to create a new control. 各モデルは固有のシナリオを対象としており、カスタム コントロールは特定の WPF 基底クラスから派生するものでなければなりません。Each model targets a specific scenario and requires your custom control to derive from a particular WPF base class. この 3 つのモデルは次のとおりです。The three models are listed here:

  • ユーザー コントロール モデルUser Control Model. カスタム コントロールは UserControl から派生し、他の 1 つ以上のコントロールで構成されます。A custom control derives from UserControl and is composed of one or more other controls.

  • コントロール モデルControl Model. カスタム コントロールは Control から派生し、大半の WPF コントロール同様、テンプレートを使用して、動作を外観から分離する実装を構築するために使用されます。A custom control derives from Control and is used to build implementations that separate their behavior from their appearance using templates, much like the majority of WPF controls. Control から派生することにより、ユーザー コントロールよりも自由度の高いカスタム ユーザー インターフェイスを作成できますが、これにはより多くの労力が必要です。Deriving from Control allows you more freedom for creating a custom user interface than user controls, but it may require more effort.

  • フレームワーク要素モデルFramework Element Model. カスタム コントロールは、カスタム レンダリング ロジック (テンプレートではなく) によって外観が定義されるときに、 FrameworkElement から派生します。A custom control derives from FrameworkElement when its appearance is defined by custom rendering logic (not templates).

    次の例に UserControlから派生するカスタムの数値のアップダウン コントロールを示します。The following example shows a custom numeric up/down control that derives from 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 を示しています。The next example illustrates the XAML that is required to incorporate the user control into a Window.

    <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 コントロールを示します。The following figure shows the NumericUpDown control hosted in a Window.

    カスタム UserControlA custom UserControl

    カスタム コントロールについて詳しくは、「 コントロールの作成の概要」をご覧ください。For more information on custom controls, see Control Authoring Overview.

WPF のベスト プラクティスWPF Best Practices

WPF はすべての開発プラットフォームと同様、目的の結果を得るために、さまざまな方法で使用できます。As with any development platform, WPF can be used in a variety of ways to achieve the desired result. 必要なユーザー エクスペリエンスを WPF アプリケーションが確実に提供し、オーディエンス一般の需要に応える 1 つの方法として、アクセシビリティ、グローバリゼーションとローカリゼーション、パフォーマンスに関するお勧めのベスト プラクティスがあります。As a way of ensuring that your WPF applications provide the required user experience and meet the demands of the audience in general, there are recommended best practices for accessibility, globalization and localization, and performance. 詳しくは、次のトピックをご覧ください。See the following for more information:

まとめSummary

WPF とは、視覚的に美しいさまざまなクライアント アプリケーションを構築するための包括的なプレゼンテーション テクノロジです。WPF is a comprehensive presentation technology for building a wide variety of visually stunning client applications. この概要では、WPF の主な機能を紹介しました。This introduction has provided a look at the key features of WPF.

次の手順では、WPF アプリケーションを構築します。The next step is to build WPF applications!

アプリケーションを作成する際に、この概要に立ち戻って主要な機能を思い出し、ここで取り上げられている機能をより詳しく説明したページへの参照を見つけることができます。As you build them, you can come back to this introduction for a refresher on the key features and to find references to more detailed coverage of the features covered in this introduction.

参照See Also

WPF の概要 Getting Started with WPF
Windows Presentation Foundation での最新のデスクトップ アプリケーションの作成 Create Modern Desktop Applications with Windows Presentation Foundation
Windows Presentation FoundationWindows Presentation Foundation