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

XAML フレームワークで、コントロール テンプレートを作ることによって、コントロールの視覚的構造や視覚的動作をカスタマイズすることができます。You can customize a control's visual structure and visual behavior by creating a control template in the XAML framework. コントロールには、BackgroundForegroundFontFamily などの多くのプロパティがあり、このプロパティを設定することで、コントロールの外観に関するさまざまな要素を指定できます。Controls have many properties, such as Background, Foreground, and FontFamily, that you can set to specify different aspects of the control's appearance. ただし、これらのプロパティの設定によって変更できる内容は限られています。But the changes that you can make by setting these properties are limited. ControlTemplate クラスを使ってテンプレートを作成することにより、さらに細かいカスタマイズを指定できます。You can specify additional customizations by creating a template using the ControlTemplate class. ここでは、CheckBox コントロールの外観をカスタマイズする ControlTemplate の作成方法について説明します。Here, we show you how to create a ControlTemplate to customize the appearance of a CheckBox control.

重要な API:ControlTemplate クラスControl.Template プロパティImportant APIs: ControlTemplate class, Control.Template property

カスタム コントロール テンプレートの例Custom control template example

既定では、CheckBox コントロールの内容 (CheckBox の横に表示される文字列またはオブジェクト) は、選択ボックスの右側に配置され、チェック マークはユーザーがその CheckBox を選択したことを示します。By default, a CheckBox control puts its content (the string or object next to the CheckBox) to the right of the selection box, and a check mark indicates that a user selected the CheckBox. これらの特性は、CheckBox の視覚的構造や視覚的動作を表します。These characteristics represent the visual structure and visual behavior of the CheckBox.

次の図は、既定の ControlTemplate を使った CheckBox での UncheckedCheckedIndeterminate の各状態を示しています。Here's a CheckBox using the default ControlTemplate shown in the Unchecked, Checked, and Indeterminate states.

既定の CheckBox テンプレート

CheckBox に対して ControlTemplate を作成することで、これらの特性を変更できます。You can change these characteristics by creating a ControlTemplate for the CheckBox. たとえば、チェック ボックスの内容を選択ボックスの下に配置し、ユーザーがチェック ボックスをオンにしたことを X で示す場合を考えます。For example, if you want the content of the check box to be below the selection box, and you want to use an X to indicate that a user selected the check box. CheckBoxControlTemplate に、これらの特性を指定します。You specify these characteristics in the ControlTemplate of the CheckBox.

コントロールにカスタム テンプレートを使うには、ControlTemplate をコントロールの Template プロパティに割り当てます。To use a custom template with a control, assign the ControlTemplate to the Template property of the control. ここでは、CheckBoxCheckBoxTemplate1 という名前の ControlTemplate を使います。Here's a CheckBox using a ControlTemplate called CheckBoxTemplate1. ControlTemplate の Extensible Application Markup Language (XAML) は、次のセクションで示します。We show the Extensible Application Markup Language (XAML) for the ControlTemplate in the next section.

<CheckBox Content="CheckBox" Template="{StaticResource CheckBoxTemplate1}" IsThreeState="True" Margin="20"/>

このテンプレートを適用した後で CheckBoxUncheckedCheckedIndeterminate の各状態がどのようになるかを次に示します。Here's how this CheckBox looks in the Unchecked, Checked, and Indeterminate states after we apply our template.

カスタム CheckBox テンプレート

コントロールの視覚的構造の指定Specify the visual structure of a control

ControlTemplate を作るときには、いくつかの FrameworkElement オブジェクトを組み合わせて 1 つのコントロールを作ります。When you create a ControlTemplate, you combine FrameworkElement objects to build a single control. ControlTemplate には、ルート要素として FrameworkElement が 1 つだけ含まれている必要があります。A ControlTemplate must have only one FrameworkElement as its root element. 通常、ルート要素には、他の FrameworkElement オブジェクトが含まれています。The root element usually contains other FrameworkElement objects. オブジェクトの組み合わせによって、コントロールの視覚的構造が作られますThe combination of objects makes up the control's visual structure.

次の XAML は、コントロールの内容を選択ボックスの下に配置するよう指定する、CheckBox 用の ControlTemplate を作成します。This XAML creates a ControlTemplate for a CheckBox that specifies that the content of the control is below the selection box. ルート要素は Border です。The root element is a Border. この例では、ユーザーが CheckBox をオンにしたことを示す X を作成する Path と、不確定状態を示す Ellipse を指定しています。The example specifies a Path to create an X that indicates that a user selected the CheckBox, and an Ellipse that indicates an indeterminate state. これらの PathEllipse では Opacity が 0 に設定されているため、既定ではどちらも表示されません。Note that the Opacity is set to 0 on the Path and the Ellipse so that by default, neither appear.

TemplateBinding は、コントロール テンプレート内のプロパティの値を、template 宣言されたコントロールのその他の公開されているプロパティの値にリンクする特殊なバインディングです。A TemplateBinding is a special binding that links the value of a property in a control template to the value of some other exposed property on the templated control. XAML では、TemplateBinding は ControlTemplate 定義内でのみ使用できます。TemplateBinding can only be used within a ControlTemplate definition in XAML. 詳しくは、「TemplateBinding マークアップ拡張」をご覧ください。See TemplateBinding markup extension for more info.

注意

Windows 10 Version 1809 (SDK 17763) 以降、TemplateBinding を使用する場所で x:bind マークアップ拡張を使用できます。Starting with Windows 10, version 1809 (SDK 17763), you can use x:Bind markup extensions in places you use TemplateBinding. 詳しくは、「TemplateBinding マークアップ拡張」をご覧ください。See TemplateBinding markup extension for more info.

<ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox">
    <Border BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Background="{TemplateBinding Background}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="NormalRectangle" Fill="Transparent" Height="20" Width="20"
                       Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
                       UseLayoutRounding="False"/>
            <!-- Create an X to indicate that the CheckBox is selected. -->
            <Path x:Name="CheckGlyph"
                  Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z"
                  Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                  FlowDirection="LeftToRight"
                  Height="14" Width="16" Opacity="0" Stretch="Fill"/>
            <Ellipse x:Name="IndeterminateGlyph"
                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                     Height="8" Width="8" Opacity="0" UseLayoutRounding="False" />
            <ContentPresenter x:Name="ContentPresenter"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              Content="{TemplateBinding Content}"
                              Margin="{TemplateBinding Padding}" Grid.Row="1"
                              HorizontalAlignment="Center"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
</ControlTemplate>

コントロールの視覚的動作の指定Specify the visual behavior of a control

視覚的動作は、コントロールが特定の状態にあるときの外観を指定します。A visual behavior specifies the appearance of a control when it is in a certain state. CheckBox コントロールには、CheckedUncheckedIndeterminate という 3 つのチェック状態があります。The CheckBox control has 3 check states: Checked, Unchecked, and Indeterminate. IsChecked プロパティの値によって CheckBox の状態が決まり、その状態によって、ボックスに何が表示されるかが決まります。The value of the IsChecked property determines the state of the CheckBox, and its state determines what appears in the box.

次の表に、考えられる IsChecked の値と、対応する CheckBox の状態および CheckBox の外観を示します。This table lists the possible values of IsChecked, the corresponding states of the CheckBox, and the appearance of the CheckBox.

IsChecked の値IsChecked value CheckBox の状態CheckBox state CheckBox の外観CheckBox appearance
truetrue Checked "X" を表示。Contains an "X".
falsefalse Unchecked 空白。Empty.
nullnull Indeterminate 円を表示。Contains a circle.

VisualState オブジェクトを使って、コントロールが特定の状態にあるときの外観を指定します。You specify the appearance of a control when it is in a certain state by using VisualState objects. VisualState には、ControlTemplate 内の要素の外観を変更する Setter または Storyboard が含まれています。A VisualState contains a Setter or Storyboard that changes the appearance of the elements in the ControlTemplate. コントロールが VisualState.Name プロパティで指定された状態になると、Setter または Storyboard 内のプロパティの変更が適用されます。When the control enters the state that the VisualState.Name property specifies, the property changes in the Setter or Storyboard are applied. コントロールがこの状態でなくなると、変更は削除されます。When the control exits the state, the changes are removed. VisualState オブジェクトは VisualStateGroup オブジェクトに追加します。You add VisualState objects to VisualStateGroup objects. ControlTemplate のルート FrameworkElement に設定する VisualStateManager.VisualStateGroups 添付プロパティに、VisualStateGroup オブジェクトを追加します。You add VisualStateGroup objects to the VisualStateManager.VisualStateGroups attached property, which you set on the root FrameworkElement of the ControlTemplate.

次の XAML は、CheckedUncheckedIndeterminate の各状態に対する VisualState オブジェクトを示しています。This XAML shows the VisualState objects for the Checked, Unchecked, and Indeterminate states. この例では、ControlTemplate のルート要素である Border に対して VisualStateManager.VisualStateGroups 添付プロパティを設定します。The example sets the VisualStateManager.VisualStateGroups attached property on the Border, which is the root element of the ControlTemplate. Checked VisualState は、(前の例で示した) CheckGlyph という名前の PathOpacity が 1 であることを指定します。The Checked VisualState specifies that the Opacity of the Path named CheckGlyph (which we show in the previous example) is 1. Indeterminate VisualState は、IndeterminateGlyph という名前の EllipseOpacity が 1 であることを指定します。The Indeterminate VisualState specifies that the Opacity of the Ellipse named IndeterminateGlyph is 1. Unchecked VisualState には Setter または Storyboard がないため、CheckBox は既定の外観に戻ります。The Unchecked VisualState has no Setter or Storyboard, so the CheckBox returns to its default appearance.

<ControlTemplate x:Key="CheckBoxTemplate1" TargetType="CheckBox">
    <Border BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Background="{TemplateBinding Background}">

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CheckStates">
                <VisualState x:Name="Checked">
                    <VisualState.Setters>
                        <Setter Target="CheckGlyph.Opacity" Value="1"/>
                    </VisualState.Setters>
                    <!-- This Storyboard is equivalent to the Setter. -->
                    <!--<Storyboard>
                        <DoubleAnimation Duration="0" To="1"
                         Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Opacity"/>
                    </Storyboard>-->
                </VisualState>
                <VisualState x:Name="Unchecked"/>
                <VisualState x:Name="Indeterminate">
                    <VisualState.Setters>
                        <Setter Target="IndeterminateGlyph.Opacity" Value="1"/>
                    </VisualState.Setters>
                    <!-- This Storyboard is equivalent to the Setter. -->
                    <!--<Storyboard>
                        <DoubleAnimation Duration="0" To="1"
                         Storyboard.TargetName="IndeterminateGlyph" Storyboard.TargetProperty="Opacity"/>
                    </Storyboard>-->
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <Rectangle x:Name="NormalRectangle" Fill="Transparent" Height="20" Width="20"
                       Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                       StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
                       UseLayoutRounding="False"/>
            <!-- Create an X to indicate that the CheckBox is selected. -->
            <Path x:Name="CheckGlyph"
                  Data="M103,240 L111,240 119,248 127,240 135,240 123,252 135,264 127,264 119,257 111,264 103,264 114,252 z"
                  Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                  FlowDirection="LeftToRight"
                  Height="14" Width="16" Opacity="0" Stretch="Fill"/>
            <Ellipse x:Name="IndeterminateGlyph"
                     Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                     Height="8" Width="8" Opacity="0" UseLayoutRounding="False" />
            <ContentPresenter x:Name="ContentPresenter"
                              ContentTemplate="{TemplateBinding ContentTemplate}"
                              Content="{TemplateBinding Content}"
                              Margin="{TemplateBinding Padding}" Grid.Row="1"
                              HorizontalAlignment="Center"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
</ControlTemplate>

VisualState オブジェクトの機能をよりよく理解するために、CheckBoxUnchecked 状態から Checked 状態に変化した後、Indeterminate 状態に変化してから、Unchecked 状態に戻るとき、どのようになるかを考えてみます。To better understand how VisualState objects work, consider what happens when the CheckBox goes from the Unchecked state to the Checked state, then to the Indeterminate state, and then back to the Unchecked state. 状態の遷移を次に示します。Here are the transitions.

状態の遷移State transition 動作What happens 遷移完了時の CheckBox の外観CheckBox appearance when the transition completes
Unchecked から CheckedFrom Unchecked to Checked. Checked VisualStateSetter 値が適用され、CheckGlyphOpacity が 1 となる。The Setter value of the Checked VisualState is applied, so the Opacity of CheckGlyph is 1. X が表示される。An X is displayed.
Checked から IndeterminateFrom Checked to Indeterminate. Indeterminate VisualStateSetter 値が適用され、IndeterminateGlyphOpacity が 1 となる。The Setter value of the Indeterminate VisualState is applied, so the Opacity of IndeterminateGlyph is 1. Checked VisualStateSetter 値が削除され、CheckGlyphOpacity が 0 となる。The Setter value of the Checked VisualState is removed, so the Opacity of CheckGlyph is 0. 円が表示される。A circle is displayed.
Indeterminate から UncheckedFrom Indeterminate to Unchecked. Indeterminate VisualStateSetter 値が削除され、IndeterminateGlyphOpacity が 0 となる。The Setter value of the Indeterminate VisualState is removed, so the Opacity of IndeterminateGlyph is 0. 何も表示されない。Nothing is displayed.

  コントロールの表示状態の作成方法、特に、Storyboard クラスとアニメーション タイプの使い方について詳しくは、「表示状態用にストーリーボードに設定されたアニメーション」をご覧ください。For more info about how to create visual states for controls, and in particular how to use the Storyboard class and the animation types, see Storyboarded animations for visual states.

ツールを使ってテーマを簡単に操作Use tools to work with themes easily

コントロールにテーマをすばやく適用する方法の 1 つは、Microsoft Visual Studio の [ドキュメント アウトライン] でコントロールを右クリックし、 [テーマの編集] または [スタイルの編集] (右クリックしたコントロールによって異なる) をクリックすることです。A fast way to apply themes to your controls is to right-click on a control on the Microsoft Visual Studio Document Outline and select Edit Theme or Edit Style (depending on the control you are right-clicking on). その後、 [リソースの適用] をクリックして既にあるテーマを適用するか、または [空アイテムの作成] をクリックして新しいテーマを定義できます。You can then apply an existing theme by selecting Apply Resource or define a new one by selecting Create Empty.

コントロールとアクセシビリティControls and accessibility

コントロールのテンプレートを新しく作成するときは、コントロールの動作と外見を変更する以外にも、アクセシビリティ フレームワークに対する表現方法も変更することができます。When you create a new template for a control, in addition to possibly changing the control's behavior and visual appearance, you might also be changing how the control represents itself to accessibility frameworks. ユニバーサル Windows プラットフォーム (UWP) は、アクセシビリティのための Microsoft UI オートメーション フレームワークをサポートしています。The Universal Windows Platform (UWP) supports the Microsoft UI Automation framework for accessibility. 既定のコントロールとそのテンプレートはいずれも、UI オートメーションの共通のコントロール型と、その目的や機能に合ったパターンをサポートしています。All of the default controls and their templates have support for common UI Automation control types and patterns that are appropriate for the control's purpose and function. 支援技術などの UI オートメーション クライアントが、これらのコントロール型とパターンを解釈することにより、アクセシビリティ対応アプリの UI という、より大きな枠組みを構成する要素としてコントロールを利用することができます。These control types and patterns are interpreted by UI Automation clients such as assistive technologies, and this enables a control to be accessible as a part of a larger accessible app UI.

基本的なコントロールのロジックを分離すると共に、UI オートメーションのアーキテクチャに求められるいくつかの要件を満たすために、コントロール クラスのアクセシビリティ機能は、別個のクラス (オートメーション ピア) に置かれています。To separate the basic control logic and also to satisfy some of the architectural requirements of UI Automation, control classes include their accessibility support in a separate class, an automation peer. オートメーション ピアは、折に触れてコントロール テンプレートと対話します。テンプレート内の特定の名前付きパーツの存在を頼りにその機能 (支援技術によってボタン アクションを呼び出すなど) を実現しているためです。The automation peers sometimes have interactions with the control templates because the peers expect certain named parts to exist in the templates, so that functionality such as enabling assistive technologies to invoke actions of buttons is possible.

まったく新しいカスタム コントロールを作成するときは、同時に、新しいオートメーション ピアの作成が必要になることもあります。When you create a completely new custom control, you sometimes also will want to create a new automation peer to go along with it. 詳しくは、「カスタム オートメーション ピア」をご覧ください。For more info, see Custom automation peers.

コントロールの既定のテンプレートの詳細Learn more about a control's default template

XAML コントロールのスタイルとテンプレートについて説明するトピックでは、既に説明した テーマの編集スタイルの編集の手法を使った場合に見られる、同じ XAML の開始部分を抜粋しています。The topics that document the styles and templates for XAML controls show you excerpts of the same starting XAML you'd see if you used the Edit Theme or Edit Style techniques explained previously. 各トピックでは、表示状態の名前、使用しているテーマ リソースを示しているほか、テンプレートを含むスタイルの完全な XAML を示しています。Each topic lists the names of the visual states, the theme resources used, and the full XAML for the style that contains the template. これらのトピックが便利なガイダンスになるのは、テンプレートを変更し始めてから元のテンプレートがどのように見えていたかを確認したり、必要な名前付きの表示状態がすべて新しいテンプレートにあることを確認したりする場合です。The topics can be useful guidance if you've already started modifying a template and want to see what the original template looked like, or to verify that your new template has all of the required named visual states.

コントロール テンプレートのテーマ リソースTheme resources in control templates

XAML の例を見ると、一部の属性について {ThemeResource} マークアップ拡張機能 を使うリソース参照があることがわかるでしょう。For some of the attributes in the XAML examples, you may have noticed resource references that use the {ThemeResource} markup extension. この手法では、現在アクティブであるテーマに応じて値が変わるリソースを 1 つのコントロール テンプレートで使用できます。This is a technique that enables a single control template to use resources that can be different values depending on which theme is currently active. この点はブラシと色に特に重要です。システム全体に暗い、明るい、またはハイコントラストのいずれのテーマを適用するかをユーザーが選択できるようにすることが、テーマの主な目的であるためです。This is particularly important for brushes and colors, because the main purpose of the themes is to enable users to choose whether they want a dark, light, or high contrast theme applied to the system overall. XAML リソース システムを使うアプリはそのテーマに適切な一連のリソースを使用できます。そのため、アプリの UI のテーマの選択にはユーザーのシステム全体のテーマの選択が反映されます。Apps that use the XAML resource system can use a resource set that's appropriate for that theme, so that the theme choices in an app's UI are reflective of the user's systemwide theme choice.

サンプル コードを入手するGet the sample code