XAML スタイルXAML styles

XAML フレームワークを使って、さまざまな方法でアプリの外観をカスタマイズできます。You can customize the appearance of your apps in many ways by using the XAML framework. スタイルを使うと、コントロールのプロパティに値を設定し、その設定を再利用することで、複数のコントロールの外観を統一できます。Styles let you set control properties and reuse those settings for a consistent appearance across multiple controls.

スタイルの基本Style basics

スタイルを使うと、視覚的なプロパティの設定を、再利用可能なリソースとして抽出できます。Use styles to extract visual property settings into reusable resources. 次の例は、BorderBrushBorderThickness、および Foreground プロパティを設定するスタイルを適用した 3 つのボタンを示しています。Here's an example that shows 3 buttons with a style that sets the BorderBrush, BorderThickness and Foreground properties. スタイルを適用することで、これらのプロパティを各コントロールで個別に設定しなくて済み、また、コントロールに同じ外観を持たせることができます。By applying a style, you can make the controls appear the same without having to set these properties on each control separately.

スタイルを適用したボタン

スタイルは、XAML を使ってコントロールに対してインラインで定義するか、再利用可能なリソースとして定義できます。You can define a style inline in the XAML for a control, or as a reusable resource. リソースは、個々のページの XAML ファイル、App.xaml ファイル、別個のリソース ディクショナリ XAML ファイルのいずれかに定義します。Define resources in an individual page's XAML file, in the App.xaml file, or in a separate resource dictionary XAML file. リソース ディクショナリ XAML ファイルはアプリ間で共有できます。また、単一のアプリで複数のリソース ディクショナリをマージすることも可能です。A resource dictionary XAML file can be shared across apps, and more than one resource dictionary can be merged in a single app. リソースを定義する場所は、リソースが使われる範囲によって決まります。Where the resource is defined determines the scope in which it can be used. ページ レベルのリソースは定義元のページでしか利用できません。Page-level resources are available only in the page where they are defined. App.xaml とページ内の両方で同じキーが定義されている場合、ページ内のリソースが App.xaml 内のリソースよりも優先されます。If resources with the same key are defined in both App.xaml and in a page, the resource in the page overrides the resource in App.xaml. リソースが別個のリソース ディクショナリ ファイルで定義されている場合、そのスコープはリソース ディクショナリが参照される場所によって決まります。If a resource is defined in a separate resource dictionary file, it's scope is determined by where the resource dictionary is referenced.

Style の定義では、1 つの TargetType 属性と、1 つ以上の Setter 要素が必要になります。In the Style definition, you need a TargetType attribute and a collection of one or more Setter elements. TargetType 属性は、スタイルを適用する FrameworkElement 型を指定する文字列です。The TargetType attribute is a string that specifies a FrameworkElement type to apply the style to. TargetType の値では、Windows ランタイムか、参照先アセンブリ内で使用できるカスタム型で定義される FrameworkElement から派生した型を指定する必要があります。The TargetType value must specify a FrameworkElement-derived type that's defined by the Windows Runtime or a custom type that's available in a referenced assembly. 適用しようとしているスタイルの TargetType 属性の指定内容と異なるコントロールやコントロールの型にスタイルを適用しようとすると、例外が発生します。If you try to apply a style to a control and the control's type doesn't match the TargetType attribute of the style you're trying to apply, an exception occurs.

それぞれの Setter 要素に、PropertyValue が必要です。Each Setter element requires a Property and a Value. この 2 つのプロパティは、それぞれ、その設定が適用されるコントロールのプロパティと、そのプロパティに対して設定される値を指定します。These property settings indicate what control property the setting applies to, and the value to set for that property. Setter.Value は、属性構文またはプロパティ要素構文を使って設定できます。You can set the Setter.Value with either attribute or property element syntax. 次の XAML は前に示したボタンに適用されたスタイルを示しています。The XAML here shows the style applied to the buttons shown previously. この XAML では、最初の 2 つの Setter 要素に属性構文を使っていますが、BorderBrush プロパティ用の最後のSetter にはプロパティ要素構文を使っています。In this XAML, the first two Setter elements use attribute syntax, but the last Setter, for the BorderBrush property, uses property element syntax. この例では x:Key attribute 属性を使っていないため、スタイルはボタンに対して暗黙的に適用されます。The example doesn't use the x:Key attribute attribute, so the style is implicitly applied to the buttons. スタイルの暗黙的または明示的な適用については、次のセクションで説明します。Applying styles implicitly or explicitly is explained in the next section.

<Page.Resources>
    <Style TargetType="Button">
        <Setter Property="BorderThickness" Value="5" />
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="BorderBrush" >
            <Setter.Value>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="Yellow" Offset="0.0" />
                    <GradientStop Color="Red" Offset="0.25" />
                    <GradientStop Color="Blue" Offset="0.75" />
                    <GradientStop Color="LimeGreen" Offset="1.0" />
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<StackPanel Orientation="Horizontal">
    <Button Content="Button"/>
    <Button Content="Button"/>
    <Button Content="Button"/>
</StackPanel>

暗黙的または明示的なスタイルの適用Apply an implicit or explicit style

スタイルをリソースとして定義した場合、それをコントロールに適用するには 2 つの方法があります。If you define a style as a resource, there are two ways to apply it to your controls:

スタイルに x:Key 属性が含まれる場合、そのスタイルをコントロールに適用するには、コントロールの Style プロパティをキーで指定されたスタイルに設定する必要があります。If a style contains the x:Key attribute, you can only apply it to a control by setting the Style property of the control to the keyed style. 一方、x:Key attribute 属性を含まないスタイルは、ターゲットとなる型のすべてのコントロールに自動的に適用されます。それ以外の場合、これには明示的なスタイル設定がありません。In contrast, a style without an x:Key attribute is automatically applied to every control of its target type, that doesn't otherwise have an explicit style setting.

次の 2 つのボタンは、暗黙的なスタイルと明示的なスタイルを示しています。Here are two buttons that demonstrate implicit and explicit styles.

暗黙的および明示的にスタイルが適用されたボタン。

この例では、最初のスタイルには x:Key 属性が含まれ、ターゲットとなる型は Button です。In this example, the first style has an x:Key attribute and its target type is Button. 最初のボタンの Style プロパティはこのキーに設定されているため、このスタイルは明示的に適用されます。The first button's Style property is set to this key, so this style is applied explicitly. 2 番目のスタイルは、ターゲットとなる型が Button で、スタイルに x:Key 属性が含まれないため、2 番目のボタンに暗黙的に適用されます。The second style is applied implicitly to the second button because its target type is Button and the style doesn't have an x:Key attribute.

<Page.Resources>
    <Style x:Key="PurpleStyle" TargetType="Button">
        <Setter Property="FontFamily" Value="Segoe UI"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="Foreground" Value="Purple"/>
    </Style>

    <Style TargetType="Button">
        <Setter Property="FontFamily" Value="Segoe UI"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="RenderTransform">
            <Setter.Value>
                <RotateTransform Angle="25"/>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderBrush" Value="Green"/>
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="Foreground" Value="Green"/>
    </Style>
</Page.Resources>

<Grid x:Name="LayoutRoot">
    <Button Content="Button" Style="{StaticResource PurpleStyle}"/>
    <Button Content="Button"/>
</Grid>

継承スタイルの使用Use based-on styles

スタイルを管理しやすくし、スタイルの再利用を最適化するために、他のスタイルから継承するスタイルを作成できます。To make styles easier to maintain and to optimize style reuse, you can create styles that inherit from other styles. 継承したスタイルを作成するには、BasedOn プロパティを使います。You use the BasedOn property to create inherited styles. 他のスタイルから継承するスタイルは、同じ型のコントロール、または基本スタイルのターゲットとなる型から派生したコントロールをターゲットとする必要があります。Styles that inherit from other styles must target the same type of control or a control that derives from the type targeted by the base style. たとえば、基本スタイルのターゲットが ContentControl である場合、このスタイルに基づくスタイルは、ContentControl、または ContentControl から派生した型 (ButtonScrollViewer など) をターゲットにできます。For example, if a base style targets ContentControl, styles that are based on this style can target ContentControl or types that derive from ContentControl such as Button and ScrollViewer. 継承スタイルに対して設定しない値は、基本スタイルから継承されます。If a value is not set in the based-on style, it's inherited from the base style. 基本スタイルから値を変更するには、継承スタイルに値を設定して上書きします。To change a value from the base style, the based-on style overrides that value. 次の例は、同じ基本スタイルから継承したスタイルを持つ ButtonCheckBox を示しています。The next example shows a Button and a CheckBox with styles that inherit from the same base style.

継承スタイルを使ってスタイルを適用したボタン。

基本スタイルは ContentControl をターゲットとし、Height プロパティと Width プロパティを設定します。The base style targets ContentControl, and sets the Height, and Width properties. このスタイルに基づくスタイルは、ContentControl から派生した CheckBoxButton をターゲットとします。The styles based on this style target CheckBox and Button, which derive from ContentControl. 各継承スタイルでは、BorderBrush プロパティと Foreground プロパティに異なる色を設定していますThe based-on styles set different colors for the BorderBrush and Foreground properties. (通常、CheckBox の周囲には境界線を配置しません。(You don't typically put a border around a CheckBox. ここでは、スタイルの効果を示すためにこのように設定しています)。We do it here to show the effects of the style.)

<Page.Resources>
    <Style x:Key="BasicStyle" TargetType="ContentControl">
        <Setter Property="Width" Value="130" />
        <Setter Property="Height" Value="30" />
    </Style>

    <Style x:Key="ButtonStyle" TargetType="Button"
           BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Orange" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Red" />
    </Style>

    <Style x:Key="CheckBoxStyle" TargetType="CheckBox"
           BasedOn="{StaticResource BasicStyle}">
        <Setter Property="BorderBrush" Value="Blue" />
        <Setter Property="BorderThickness" Value="2" />
        <Setter Property="Foreground" Value="Green" />
    </Style>
</Page.Resources>

<StackPanel>
    <Button Content="Button" Style="{StaticResource ButtonStyle}" Margin="0,10"/>
    <CheckBox Content="CheckBox" Style="{StaticResource CheckBoxStyle}"/>
</StackPanel>

ツールを使ってスタイルを簡単に操作Use tools to work with styles easily

コントロールにスタイルをすばやく適用する方法の 1 つは、Microsoft Visual Studio の XAML デザイン サーフェイスでコントロールを右クリックし、 [スタイルの編集] または [テンプレートの編集] (右クリックしたコントロールによって異なる) をクリックすることです。A fast way to apply styles to your controls is to right-click on a control on the Microsoft Visual Studio XAML design surface and select Edit Style or Edit Template (depending on the control you are right-clicking on). その後、 [リソースの適用] をクリックして既にあるスタイルを適用するか、または [空アイテムの作成] をクリックして新しいスタイルを定義できます。You can then apply an existing style by selecting Apply Resource or define a new style by selecting Create Empty. 空のスタイルを作成する場合は、ページ、App.xaml ファイル、または別のリソース ディクショナリにそのスタイルを定義できます。If you create an empty style, you are given the option to define it in the page, in the App.xaml file, or in a separate resource dictionary.

軽量なスタイル設定Lightweight styling

システム ブラシのオーバーライドは一般にアプリ レベルまたはページ レベルで行われます。いずれの場合も、色のオーバーライドはそのブラシを参照するすべてのコントロールに影響します。また、XAML では多くのコントロールが同じシステム ブラシを参照できます。Overriding the system brushes is generally done at the App or Page level, and in either case the color override will affect all controls that reference that brush – and in XAML many controls can reference the same system brush.

スタイルを適用したボタン

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                 <SolidColorBrush x:Key="ButtonBackground" Color="Transparent"/>
                 <SolidColorBrush x:Key="ButtonForeground" Color="MediumSlateBlue"/>
                 <SolidColorBrush x:Key="ButtonBorderBrush" Color="MediumSlateBlue"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

PointerOver (マウスがボタンの上に置かれている)、PointerPressed (ボタンが押された)、Disabled (ボタンが有効でない) などの状態に使用します。For states like PointerOver (mouse is hovered over the button), PointerPressed (button has been invoked), or Disabled (button is not interactable). 元の軽量なスタイル設定名にこれらの末尾が追加されます: ButtonBackgroundPointerOverButtonForegroundPointerPressedButtonBorderBrushDisabled。これらのブラシも変更することで、コントロールの色をアプリのテーマと統一できます。These endings are appended onto the original Lightweight styling names: ButtonBackgroundPointerOver, ButtonForegroundPointerPressed, ButtonBorderBrushDisabled, etc. Modifying those brushes as well, will make sure that your controls are colored consistently to your app's theme.

これらのブラシを配置すると、App.Resources レベルでオーバーライドし、(単一ページではなく) アプリ全体のすべてのボタンを変更します。Placing these brush overrides at the App.Resources level, will alter all the buttons within the entire app, instead of on a single page.

コントロールごとのスタイル設定Per-control styling

他のケースでは、コントロールの他のバージョンを変更することなく、1 つのページ上の単一のコントロールを特定の方法で表示するように変更することが望ましい方法です。In other cases, changing a single control on one page only to look a certain way, without altering any other versions of that control, is desired:

スタイルを適用したボタン

<CheckBox Content="Normal CheckBox" Margin="5"/>
    <CheckBox Content="Special CheckBox" Margin="5">
        <CheckBox.Resources>
            <ResourceDictionary>
                <ResourceDictionary.ThemeDictionaries>
                    <ResourceDictionary x:Key="Light">
                        <SolidColorBrush x:Key="CheckBoxForegroundUnchecked"
                            Color="Purple"/>
                        <SolidColorBrush x:Key="CheckBoxForegroundChecked"
                            Color="Purple"/>
                        <SolidColorBrush x:Key="CheckBoxCheckGlyphForegroundChecked"
                            Color="White"/>
                        <SolidColorBrush x:Key="CheckBoxCheckBackgroundStrokeChecked"  
                            Color="Purple"/>
                        <SolidColorBrush x:Key="CheckBoxCheckBackgroundFillChecked"
                            Color="Purple"/>
                    </ResourceDictionary>
                </ResourceDictionary.ThemeDictionaries>
            </ResourceDictionary>
        </CheckBox.Resources>
    </CheckBox>
<CheckBox Content="Normal CheckBox" Margin="5"/>

これは、そのコントロールが存在していたページ上の 1 つの「特別なチェック ボックス」にのみ影響します。This would only effect that one “Special CheckBox” on the page where that control existed.

既定のシステム スタイルの変更Modify the default system styles

可能であれば、Windows ランタイムの既定の XAML リソースからのスタイルを使う必要があります。You should use the styles that come from the Windows Runtime default XAML resources when you can. 独自のスタイルを定義する必要がある場合は、できるだけこれらの既定のスタイルから継承したスタイルを作成します (このクイック スタートで既に説明したように継承スタイルを使います。元の既定のスタイルのコピーを編集することから始めます)。When you have to define your own styles, try to base your styles on the default ones when possible (using based-on styles as explained earlier, or start by editing a copy of the original default style).

テンプレート プロパティThe template property

スタイル setter は、ControlTemplate プロパティに使うことができ、実際に、一般的な XAML スタイルとアプリの XAML リソースの主要な部分を構成しています。A style setter can be used for the Template property of a Control, and in fact this makes up the majority of a typical XAML style and an app's XAML resources. 詳しくは、「コントロール テンプレート」をご覧ください。This is discussed in more detail in the topic Control templates.