XAML テーマ リソースXAML theme resources

XAML のテーマ リソースは、アクティブなシステム テーマに応じて異なる値を適用するリソースのセットです。Theme resources in XAML are a set of resources that apply different values depending on which system theme is active. XAML フレームワークでは、3 つのテーマがサポートされています。"Light"、"Dark"、および "HighContrast" です。There are 3 themes that the XAML framework supports: "Light", "Dark", and "HighContrast".

前提条件:このトピックでは、既に「ResourceDictionary と XAML リソースの参照」を読んでいることを前提としています。Prerequisites: This topic assumes that you have read ResourceDictionary and XAML resource references.

テーマ リソース vTheme resources v. 静的なリソースstatic resources

既存の XAML リソース ディクショナリから XAML リソースを参照できる XAML マークアップ拡張には、{StaticResource} マークアップ拡張{ThemeResource} マークアップ拡張の 2 つがあります。There are two XAML markup extensions that can reference a XAML resource from an existing XAML resource dictionary: {StaticResource} markup extension and {ThemeResource} markup extension.

{ThemeResource} マークアップ拡張はアプリの読み込み時に評価され、その後、実行時にテーマが変更されたときにもそのつど評価されます。Evaluation of a {ThemeResource} markup extension occurs when the app loads and subsequently each time the theme changes at runtime. これは通常、ユーザーがデバイスの設定を変更した場合、またはアプリ内でプログラムによってアプリの現在のテーマが変更された場合に発生します。This is typically the result of the user changing their device settings or from a programmatic change within the app that alters its current theme.

これに対して {StaticResource} マークアップ拡張は、XAML が最初にアプリに読み込まれるときにのみ評価されます。In contrast, a {StaticResource} markup extension is evaluated only when the XAML is first loaded by the app. これが更新されることはありません。It does not update. これは、アプリの起動時に XAML を検索し、実際のランタイム値に置き換えるようなものです。It’s similar to a find and replace in your XAML with the actual runtime value at app launch.

リソース ディクショナリ構造でのテーマ リソースTheme resources in the resource dictionary structure

各テーマ リソースは、XAML ファイル themeresources.xaml の一部です。Each theme resource is part of the XAML file themeresources.xaml. 設計の目的には、Windows ソフトウェア開発キット (SDK) のインストール先の \(プログラム ファイル)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<SDK version>\Generic フォルダーにある themeresources.xaml を使うことができます。For design purposes, themeresources.xaml is available in the \(Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<SDK version>\Generic folder from a Windows Software Development Kit (SDK) installation. themeresources.xaml 内のリソース ディクショナリは、同じディレクトリの generic.xaml にも複製されています。The resource dictionaries in themeresources.xaml are also reproduced in generic.xaml in the same directory.

これらの物理ファイルは Windows ランタイムでランタイム検索に使われません。The Windows Runtime doesn't use these physical files for runtime lookup. そのため、明示的に DesignTime フォルダー内にあり、既定ではアプリにコピーされません。That's why they are specifically in a DesignTime folder, and they aren't copied into apps by default. 代わりに、これらのリソース ディクショナリは Windows ランタイム自体の一部としてメモリ内に存在し、テーマ リソース (またはシステム リソース) へのアプリの XAML リソース参照は実行時にメモリ内で解決されます。Instead, these resource dictionaries exist in memory as part of the Windows Runtime itself, and your app's XAML resource references to theme resources (or system resources) resolve there at runtime.

カスタム テーマ リソースのガイドラインGuidelines for custom theme resources

独自のカスタム テーマ リソースを定義して使うときは、次のガイドラインに従ってください。Follow these guidelines when you define and consume your own custom theme resources:

  • "HighContrast" ディクショナリに加えて、"Light" と "Dark" の両方のテーマ ディクショナリを指定します。Specify theme dictionaries for both "Light" and "Dark" in addition to your "HighContrast" dictionary. "Default" をキーとする ResourceDictionary を作成することもできますが、明示的に "Light"、"Dark"、"HighContrast" を使うことをお勧めします。Although you can create a ResourceDictionary with "Default" as the key, it’s preferred to be explicit and instead use "Light", "Dark", and "HighContrast".

  • {ThemeResource} マークアップ拡張を次で使用します:スタイル、セッター、コントロール テンプレート、プロパティ セッター、アニメーション。Use the {ThemeResource} markup extension in: Styles, Setters, Control templates, Property setters, and Animations.

  • ThemeDictionaries 内のリソース定義では、{ThemeResource} マークアップ拡張 を使わないでください。Don't use the {ThemeResource} markup extension in your resource definitions inside your ThemeDictionaries. 代わりに、{StaticResource} マークアップ拡張を使います。Use {StaticResource} markup extension instead.

    例外:ThemeDictionaries 内のアプリ テーマに依存しないリソースを参照するために {ThemeResource} マークアップ拡張を使うことができます。EXCEPTION: You can use the {ThemeResource} markup extension to reference resources that are agnostic to the app theme in your ThemeDictionaries. このようなリソースの例として、SystemAccentColor などのアクセント カラー リソースや、通常は "SystemColor" というプレフィックスの付いた SystemColorButtonFaceColor などのシステム カラー リソースがあります。Examples of these resources are accent color resources like SystemAccentColor, or system color resources, which are typically prefixed with "SystemColor" like SystemColorButtonFaceColor.

注意事項

これらのガイドラインに従わないと、テーマに関連する予期しない動作がアプリで発生することがあります。If you don’t follow these guidelines, you might see unexpected behavior related to themes in your app. 詳しくは、「テーマ リソースのトラブルシューティング」セクションをご覧ください。For more info, see the Troubleshooting theme resources section.

XAML 色見本とテーマ依存のブラシThe XAML color ramp and theme-dependent brushes

XAML における Windows 色見本は、"Light"、"Dark"、"HighContrast" の各テーマの色のセットを組み合わせることで構成されます。The combined set of colors for "Light", "Dark", and "HighContrast" themes make up the Windows color ramp in XAML. システム テーマを変更する場合でも、システム テーマを独自の XAML 要素に適用する場合でも、カラー リソースがどのように構成されるかを理解することが重要です。Whether you want to modify the system themes, or apply a system theme to your own XAML elements, it’s important to understand how the color resources are structured.

UWP アプリで色を適用する方法の詳細については、「UWP アプリでの色使い」をご覧ください。For additional information about how to apply color in your UWP app, please see Color in UWP apps.

Light テーマと Dark テーマの色Light and Dark theme colors

XAML フレームワークには、"Light" と "Dark" のテーマに合わせてカスタマイズされた名前付きの Color リソースのセットが用意されています。The XAML framework provides a set of named Color resources with values that are tailored for the "Light" and "Dark" themes. これらを参照するために使うキーは、System[Simple Light/Dark Name]Color という名前付け形式に従います。The keys you use to reference these follow the naming format: System[Simple Light/Dark Name]Color.

次の表は、XAML フレームワークで提供されている "Light" と "Dark" のリソースについて、(#aarrggbb の形式を使用して) 色のキー、簡易名、文字列表現を一覧にしたものです。This table lists the key, simple name, and string representation of the color (using the #aarrggbb format) for the "Light" and "Dark" resources provided by the XAML framework. キーは、アプリでリソースを参照するときに使われます。The key is used to reference the resource in an app. "Light/Dark 簡易名" は、後で説明するブラシの名前付け規則の一部として使われます。The "Simple light/dark name" is used as part of the brush naming convention that we explain later.

KeyKey Light/Dark 簡易名Simple light/dark name 明るいLight 暗いDark
SystemAltHighColorSystemAltHighColor AltHighAltHigh #FFFFFFFF#FFFFFFFF #FF000000#FF000000
SystemAltLowColorSystemAltLowColor AltLowAltLow #33FFFFFF#33FFFFFF #33000000#33000000
SystemAltMediumColorSystemAltMediumColor AltMediumAltMedium #99FFFFFF#99FFFFFF #99000000#99000000
SystemAltMediumHighColorSystemAltMediumHighColor AltMediumHighAltMediumHigh #CCFFFFFF#CCFFFFFF #CC000000#CC000000
SystemAltMediumLowColorSystemAltMediumLowColor AltMediumLowAltMediumLow #66FFFFFF#66FFFFFF #66000000#66000000
SystemBaseHighColorSystemBaseHighColor BaseHighBaseHigh #FF000000#FF000000 #FFFFFFFF#FFFFFFFF
SystemBaseLowColorSystemBaseLowColor BaseLowBaseLow #33000000#33000000 #33FFFFFF#33FFFFFF
SystemBaseMediumColorSystemBaseMediumColor BaseMediumBaseMedium #99000000#99000000 #99FFFFFF#99FFFFFF
SystemBaseMediumHighColorSystemBaseMediumHighColor BaseMediumHighBaseMediumHigh #CC000000#CC000000 #CCFFFFFF#CCFFFFFF
SystemBaseMediumLowColorSystemBaseMediumLowColor BaseMediumLowBaseMediumLow #66000000#66000000 #66FFFFFF#66FFFFFF
SystemChromeAltLowColorSystemChromeAltLowColor ChromeAltLowChromeAltLow #FF171717#FF171717 #FFF2F2F2#FFF2F2F2
SystemChromeBlackHighColorSystemChromeBlackHighColor ChromeBlackHighChromeBlackHigh #FF000000#FF000000 #FF000000#FF000000
SystemChromeBlackLowColorSystemChromeBlackLowColor ChromeBlackLowChromeBlackLow #33000000#33000000 #33000000#33000000
SystemChromeBlackMediumLowColorSystemChromeBlackMediumLowColor ChromeBlackMediumLowChromeBlackMediumLow #66000000#66000000 #66000000#66000000
SystemChromeBlackMediumColorSystemChromeBlackMediumColor ChromeBlackMediumChromeBlackMedium #CC000000#CC000000 #CC000000#CC000000
SystemChromeDisabledHighColorSystemChromeDisabledHighColor ChromeDisabledHighChromeDisabledHigh #FFCCCCCC#FFCCCCCC #FF333333#FF333333
SystemChromeDisabledLowColorSystemChromeDisabledLowColor ChromeDisabledLowChromeDisabledLow #FF7A7A7A#FF7A7A7A #FF858585#FF858585
SystemChromeHighColorSystemChromeHighColor ChromeHighChromeHigh #FFCCCCCC#FFCCCCCC #FF767676#FF767676
SystemChromeLowColorSystemChromeLowColor ChromeLowChromeLow #FFF2F2F2#FFF2F2F2 #FF171717#FF171717
SystemChromeMediumColorSystemChromeMediumColor ChromeMediumChromeMedium #FFE6E6E6#FFE6E6E6 #FF1F1F1F#FF1F1F1F
SystemChromeMediumLowColorSystemChromeMediumLowColor ChromeMediumLowChromeMediumLow #FFF2F2F2#FFF2F2F2 #FF2B2B2B#FF2B2B2B
SystemChromeWhiteColorSystemChromeWhiteColor ChromeWhiteChromeWhite #FFFFFFFF#FFFFFFFF #FFFFFFFF#FFFFFFFF
SystemListLowColorSystemListLowColor ListLowListLow #19000000#19000000 #19FFFFFF#19FFFFFF
SystemListMediumColorSystemListMediumColor ListMediumListMedium #33000000#33000000 #33FFFFFF#33FFFFFF

Light theme

Dark theme

基本Base

The base light theme

The base dark theme

代替Alt

The alt light theme

The alt dark theme

一覧List

The list light theme

The list dark theme

クロムChrome

The chrome light theme

The chrome dark theme

Windows システムのハイ コントラストの色Windows system high-contrast colors

XAML フレームワークによって提供されるリソースのセットのほかに、Windows のシステム パレットから派生するカラー値のセットがあります。In addition to the set of resources provided by the XAML framework, there's a set of color values derived from the Windows system palette. これらの色は、Windows ランタイムやユニバーサル Windows プラットフォーム (UWP) アプリに固有のものではありません。These colors are not specific to the Windows Runtime or Universal Windows Platform (UWP) apps. しかし、"HighContrast" テーマでシステムが動作しているとき (およびアプリが実行されているとき) には、XAML Brush リソースの多くでこれらの色が使われます。However, many of the XAML Brush resources consume these colors when the system is operating (and the app is running) using the "HighContrast" theme. XAML フレームワークには、このようなシステム全体の色がキーを持つリソースとして用意されています。The XAML framework provides these system-wide colors as keyed resources. これらのキーは、SystemColor[name]Color という名前付け形式に従います。The keys follow the naming format: SystemColor[name]Color.

次の表は、Windows システム パレットから派生したリソース オブジェクトとして XAML に用意されているシステム全体の色を示します。This table lists the system-wide colors that XAML provides as resource objects derived from the Windows system palette. "簡単操作での名前" 列は、その色が Windows の設定の UI でどのように表現されるかを示しています。The "Ease of Access name" column shows how color is labeled in the Windows settings UI. "HighContrast 簡易名" 列は、その色が XAML コモン コントロールにどのように適用されるかをひとことで表す単語になっています。The "Simple HighContrast name" column is a one word description of how the color is applied across the XAML common controls. これは、後で説明するブラシの名前付け規則の一部として使われます。It's used as part of the brush naming convention that we explain later. "初期既定値" 列は、システムがハイ コントラストで動作していない場合に使われる値を示します。The "Initial default" column shows the values you'd get if the system is not running in high contrast at all.

KeyKey 簡単操作での名前Ease of Access name HighContrast 簡易名Simple HighContrast name 初期既定値Initial default
SystemColorButtonFaceColorSystemColorButtonFaceColor ボタン テキスト (背景)Button Text (background) 背景Background #FFF0F0F0#FFF0F0F0
SystemColorButtonTextColorSystemColorButtonTextColor ボタン テキスト (前景)Button Text (foreground) ForegroundForeground #FF000000#FF000000
SystemColorGrayTextColorSystemColorGrayTextColor 選択不可のテキストDisabled Text 無効Disabled #FF6D6D6D#FF6D6D6D
SystemColorHighlightColorSystemColorHighlightColor 選択されたテキスト (背景)Selected Text (background) HighlightHighlight #FF3399FF#FF3399FF
SystemColorHighlightTextColorSystemColorHighlightTextColor 選択されたテキスト (前景)Selected Text (foreground) HighlightAltHighlightAlt #FFFFFFFF#FFFFFFFF
SystemColorHotlightColorSystemColorHotlightColor ハイパーリンクHyperlinks ハイパーリンクHyperlink #FF0066CC#FF0066CC
SystemColorWindowColorSystemColorWindowColor 背景Background PageBackgroundPageBackground #FFFFFFFF#FFFFFFFF
SystemColorWindowTextColorSystemColorWindowTextColor テキストText PageTextPageText #FF000000#FF000000

Windows には複数のハイ コントラスト テーマが用意されているほか、次のように、コンピューターの簡単操作を通じて、独自のハイ コントラスト設定で使う特定の色をユーザーが設定することもできます。Windows provides different high-contrast themes, and enables the user to set the specific colors to for their high-contrast settings through the Ease of Access Center, as shown here. このため、ハイ コントラストのカラー値の確定的な一覧を提供することはできません。Therefore, it's not possible to provide a definitive list of high-contrast color values.

Windows のハイ コントラストの設定 UI

ハイ コントラスト テーマのサポートについて詳しくは、「ハイ コントラスト テーマ」をご覧ください。For more info about supporting high-contrast themes, see High-contrast themes.

システムのアクセント カラーSystem accent color

システムのハイ コントラスト テーマの色に加えて、システムのアクセント カラーも、SystemAccentColor というキーを使う特別なカラー リソースとして用意されています。In addition to the system high-contrast theme colors, the system accent color is provided as a special color resource using the key SystemAccentColor. このリソースは、ユーザーが Windows の個人設定でアクセント カラーとして指定した色を実行時に取得します。At runtime, this resource gets the color that the user has specified as the accent color in the Windows personalization settings.

注意

システム カラー リソースをオーバーライドすることもできますが、特にハイ コントラスト設定については、ユーザーによる色の選択を尊重することをお勧めします。While it’s possible to override the system color resources, it’s a best practice to respect the user’s color choices, especially for high-contrast settings.

テーマ依存のブラシTheme-dependent brushes

システム テーマ リソース ディクショナリの SolidColorBrush リソースの Color プロパティは、前のセクションに示したカラー リソースを使って設定されます。The color resources shown in the preceding sections are used to set the Color property of SolidColorBrush resources in the system theme resource dictionaries. XAML 要素に色を適用するには、ブラシ リソースが使われます。You use the brush resources to apply the color to XAML elements. ブラシ リソースのキーは、SystemControl[Simple HighContrast name][Simple light/dark name]Brush という名前付け形式に従います。The keys for the brush resources follow the naming format: SystemControl[Simple HighContrast name][Simple light/dark name]Brush. たとえば、SystemControlBackroundAltHighBrush と記述します。For example, SystemControlBackroundAltHighBrush.

このブラシの色の値が実行時にどのように決定されるかを見てみましょう。Let’s look at how the color value for this brush is determined at run-time. "Light" と "Dark" の各リソース ディクショナリでは、このブラシは次のように定義されています。In the "Light" and "Dark" resource dictionaries, this brush is defined like this:

<SolidColorBrush x:Key="SystemControlBackgroundAltHighBrush" Color="{StaticResource SystemAltHighColor}"/>

"HighContrast" リソース ディクショナリでは、このブラシは次のように定義されています。In the "HighContrast" resource dictionary, this brush is defined like this:

<SolidColorBrush x:Key="SystemControlBackgroundAltHighBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>

このブラシが XAML 要素に適用されるとき、その色は、次の表に示すように現在のテーマによって実行時に決定されます。When this brush is applied to a XAML element, its color is determined at run-time by the current theme, as shown in this table.

ThemeTheme 色の簡易名Color simple name カラー リソースColor resource ランタイム値Runtime value
明るいLight AltHighAltHigh SystemAltHighColorSystemAltHighColor #FFFFFFFF#FFFFFFFF
暗いDark AltHighAltHigh SystemAltHighColorSystemAltHighColor #FF000000#FF000000
HighContrastHighContrast 背景Background SystemColorButtonFaceColorSystemColorButtonFaceColor 設定でボタンの背景として指定された色。The color specified in settings for the button background.

独自の XAML 要素に適用するブラシを決めるには、SystemControl[Simple HighContrast name][Simple light/dark name]Brush という名前付けスキームを使います。You can use the SystemControl[Simple HighContrast name][Simple light/dark name]Brush naming scheme to determine which brush to apply to your own XAML elements.

注意

[HighContrast 簡易名][Light/Dark 簡易名]のすべての組み合わせがブラシ リソースとして提供されているわけではありません。Not every combination of [Simple HighContrast name][Simple light/dark name] is provided as a brush resource.

XAML の書体見本The XAML type ramp

themeresources.xaml ファイルには、UI 上のテキスト コンテナー (具体的には TextBlock または RichTextBlock) に適用できる Style を定義するリソースがいくつか定義されています。The themeresources.xaml file defines several resources that define a Style that you can apply to text containers in your UI, specifically for either TextBlock or RichTextBlock. これらは、既定の暗黙的なスタイルとは異なります。These are not the default implicit styles. これらのスタイルを使うと、「フォントのガイドライン」で説明されている Windows の書体見本に一致する XAML UI 定義を簡単に作成できるようになります。They are provided to make it easier for you to create XAML UI definitions that match the Windows type ramp documented in Guidelines for fonts.

これらのスタイルは、テキスト コンテナー全体に適用されるテキスト属性を設定するものです。These styles are for text attributes that you want applied to the whole text container. テキストの一部にのみスタイルを適用する場合は、コンテナー内のテキスト要素に属性を設定します。たとえば、TextBlock.InlinesRunRichTextBlock.BlocksParagraph を使うことができます。If you want styles applied just to sections of the text, set attributes on the text elements within the container, such as on a Run in TextBlock.Inlines or on a Paragraph in RichTextBlock.Blocks.

スタイルを TextBlock に適用すると、次のようになります。The styles look like this when applied to a TextBlock:

テキスト ブロック スタイル

<TextBlock Text="Header" Style="{StaticResource HeaderTextBlockStyle}"/>
<TextBlock Text="SubHeader" Style="{StaticResource SubheaderTextBlockStyle}"/>
<TextBlock Text="Title" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Text="SubTitle" Style="{StaticResource SubtitleTextBlockStyle}"/>
<TextBlock Text="Base" Style="{StaticResource BaseTextBlockStyle}"/>
<TextBlock Text="Body" Style="{StaticResource BodyTextBlockStyle}"/>
<TextBlock Text="Caption" Style="{StaticResource CaptionTextBlockStyle}"/>

アプリで UWP 書体見本を使用する方法のガイダンスについては、「UWP アプリの文字体裁」をご覧ください。For guidance on how to use the UWP type ramp in your app, see Typography in UWP apps.

BaseTextBlockStyleBaseTextBlockStyle

TargetType:TextBlockTargetType: TextBlock

他のすべての TextBlock コンテナー スタイルに対する一般的なプロパティを提供します。Supplies the common properties for all the other TextBlock container styles.

<!-- Usage -->
<TextBlock Text="Base" Style="{StaticResource BaseTextBlockStyle}"/>

<!-- Style definition -->
<Style x:Key="BaseTextBlockStyle" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="Segoe UI"/>
    <Setter Property="FontWeight" Value="SemiBold"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="TextTrimming" Value="None"/>
    <Setter Property="TextWrapping" Value="Wrap"/>
    <Setter Property="LineStackingStrategy" Value="MaxHeight"/>
    <Setter Property="TextLineBounds" Value="Full"/>
</Style>

HeaderTextBlockStyleHeaderTextBlockStyle

<!-- Usage -->
<TextBlock Text="Header" Style="{StaticResource HeaderTextBlockStyle}"/>

<!-- Style definition -->
<Style x:Key="HeaderTextBlockStyle" TargetType="TextBlock"
       BasedOn="{StaticResource BaseTextBlockStyle}">
    <Setter Property="FontSize" Value="46"/>
    <Setter Property="FontWeight" Value="Light"/>
    <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
</Style>

SubheaderTextBlockStyleSubheaderTextBlockStyle

<!-- Usage -->
<TextBlock Text="SubHeader" Style="{StaticResource SubheaderTextBlockStyle}"/>

<!-- Style definition -->
<Style x:Key="SubheaderTextBlockStyle" TargetType="TextBlock" 
       BasedOn="{StaticResource BaseTextBlockStyle}">
    <Setter Property="FontSize" Value="34"/>
    <Setter Property="FontWeight" Value="Light"/>
    <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
</Style>

TitleTextBlockStyleTitleTextBlockStyle

<!-- Usage -->
<TextBlock Text="Title" Style="{StaticResource TitleTextBlockStyle}"/>

<!-- Style definition -->
<Style x:Key="TitleTextBlockStyle" TargetType="TextBlock" 
       BasedOn="{StaticResource BaseTextBlockStyle}">
    <Setter Property="FontWeight" Value="SemiLight"/>
    <Setter Property="FontSize" Value="24"/>
    <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
</Style>

SubtitleTextBlockStyleSubtitleTextBlockStyle

<!-- Usage -->
<TextBlock Text="SubTitle" Style="{StaticResource SubtitleTextBlockStyle}"/>

<!-- Style definition -->
<Style x:Key="SubtitleTextBlockStyle" TargetType="TextBlock" 
       BasedOn="{StaticResource BaseTextBlockStyle}">
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="FontSize" Value="20"/>
    <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
</Style>

BodyTextBlockStyleBodyTextBlockStyle

<!-- Usage -->
<TextBlock Text="Body" Style="{StaticResource BodyTextBlockStyle}"/>

<!-- Style definition -->
<Style x:Key="BodyTextBlockStyle" TargetType="TextBlock" 
       BasedOn="{StaticResource BaseTextBlockStyle}">
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="FontSize" Value="14"/>
</Style>

CaptionTextBlockStyleCaptionTextBlockStyle

<!-- Usage -->
<TextBlock Text="Caption" Style="{StaticResource CaptionTextBlockStyle}"/>

<!-- Style definition -->
<Style x:Key="CaptionTextBlockStyle" TargetType="TextBlock" 
       BasedOn="{StaticResource BaseTextBlockStyle}">
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="FontWeight" Value="Normal"/>
</Style>

BaseRichTextBlockStyleBaseRichTextBlockStyle

TargetType:RichTextBlockTargetType: RichTextBlock

他のすべての RichTextBlock コンテナー スタイルに対する一般的なプロパティを提供します。Supplies the common properties for all the other RichTextBlock container styles.

<!-- Usage -->
<RichTextBlock Style="{StaticResource BaseRichTextBlockStyle}">
    <Paragraph>Rich text.</Paragraph>
</RichTextBlock>

<!-- Style definition -->
<Style x:Key="BaseRichTextBlockStyle" TargetType="RichTextBlock">
    <Setter Property="FontFamily" Value="Segoe UI"/>
    <Setter Property="FontWeight" Value="SemiBold"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="TextTrimming" Value="None"/>
    <Setter Property="TextWrapping" Value="Wrap"/>
    <Setter Property="LineStackingStrategy" Value="MaxHeight"/>
    <Setter Property="TextLineBounds" Value="Full"/>
    <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
</Style>

BodyRichTextBlockStyleBodyRichTextBlockStyle

<!-- Usage -->
<RichTextBlock Style="{StaticResource BodyRichTextBlockStyle}">
    <Paragraph>Rich text.</Paragraph>
</RichTextBlock>

<!-- Style definition -->
<Style x:Key="BodyRichTextBlockStyle" TargetType="RichTextBlock" BasedOn="{StaticResource BaseRichTextBlockStyle}">
    <Setter Property="FontWeight" Value="Normal"/>
</Style>

注意:  RichTextBlock スタイルには、TextBlock に含まれているテキスト見本スタイルのすべては含まれていません。これは主に、RichTextBlock のブロック ベースのドキュメント オブジェクト モデルでは、個々のテキスト要素への属性の設定がより簡単になっているためです。Note:  The RichTextBlock styles don't have all the text ramp styles that TextBlock does, mainly because the block-based document object model for RichTextBlock makes it easier to set attributes on the individual text elements. また、XAML コンテンツ プロパティを使って TextBlock.Text を設定する方式では、スタイルを設定できるテキスト要素が存在しない状況になるため、コンテナーにスタイルを設定する必要があります。Also, setting TextBlock.Text using the XAML content property introduces a situation where there is no text element to style and thus you'd have to style the container. これに対して RichTextBlock では、テキスト コンテンツは常に Paragraph などの固有のテキスト要素になり、そこにページ ヘッダーやページ サブヘッダー、類似のテキスト見本定義の XAML スタイルを適用できるため、この問題はありません。That isn't an issue for RichTextBlock because its text content always has to be in specific text elements like Paragraph, which is where you might apply XAML styles for page header, page subheader and similar text ramp definitions.

その他の名前付きスタイルMiscellaneous Named styles

Button には、キーを持つ Style 定義の追加のセットを適用することもできます。これにより、既定の暗黙的なスタイルとは異なるスタイルを設定できます。There's an additional set of keyed Style definitions you can apply to style a Button differently than its default implicit style.

TextBlockButtonStyleTextBlockButtonStyle

TargetType:ButtonBaseTargetType: ButtonBase

ユーザーがクリックしてアクションを実行できるテキストを表示する必要がある場合は、このスタイルを Button に適用します。Apply this style to a Button when you need to show text that a user can click to take action. このテキストには、対話型であることがわかるように現在のアクセント カラーを使ったスタイルが設定され、テキストに適したフォーカス四角形が表示されます。The text is styled using the current accent color to distinguish it as interactive and has focus rectangles that work well for text. HyperlinkButton の暗黙的なスタイルとは異なり、TextBlockButtonStyle のテキストには下線は付きません。Unlike the implicit style of a HyperlinkButton, the TextBlockButtonStyle does not underline the text.

このテンプレートは、表示テキストにもスタイルを設定して、SystemControlHyperlinkBaseMediumBrush ("PointerOver" 状態の場合)、SystemControlHighlightBaseMediumLowBrush ("Pressed" 状態の場合)、SystemControlDisabledBaseLowBrush ("Disabled" 状態の場合) が使われるようにします。The template also styles the presented text to use SystemControlHyperlinkBaseMediumBrush (for "PointerOver" state), SystemControlHighlightBaseMediumLowBrush (for "Pressed" state) and SystemControlDisabledBaseLowBrush (for "Disabled" state).

TextBlockButtonStyle リソースを適用した Button の例を以下に示します。Here's a Button with the TextBlockButtonStyle resource applied to it.

<Button Content="Clickable text" Style="{StaticResource TextBlockButtonStyle}"
        Click="Button_Click"/>

次のようになります。It looks like this:

テキストのような外観にスタイル設定されたボタン

TargetType:ボタンTargetType: Button

この Style は、ナビゲーション アプリの戻るボタンとして使うことができる Button 用の完全なテンプレートを提供します。This Style provides a complete template for a Button that can be the navigation back button for a navigation app. 既定の寸法は 40 x 40 ピクセルです。The default dimensions are 40 x 40 pixels. スタイルを調整するには、ButtonHeightWidthFontSize、その他のプロパティを明示的に設定するか、BasedOn を使って派生スタイルを作成します。To tailor the styling you can either explicitly set the Height, Width, FontSize, and other properties on your Button or create a derived style using BasedOn.

NavigationBackButtonNormalStyle リソースを適用した Button の例を以下に示します。Here's a Button with the NavigationBackButtonNormalStyle resource applied to it.

<Button Style="{StaticResource NavigationBackButtonNormalStyle}" />

次のようになります。It looks like this:

"戻る" ボタンとしてスタイル設定されたボタン

TargetType:ボタンTargetType: Button

この Style は、ナビゲーション アプリの戻るボタンとして使うことができる Button 用の完全なテンプレートを提供します。This Style provides a complete template for a Button that can be the navigation back button for a navigation app. NavigationBackButtonNormalStyle と同様ですが、寸法は 30 x 30 ピクセルになります。It's similar to NavigationBackButtonNormalStyle, but its dimensions are 30 x 30 pixels.

NavigationBackButtonSmallStyle リソースを適用した Button の例を以下に示します。Here's a Button with the NavigationBackButtonSmallStyle resource applied to it.

<Button Style="{StaticResource NavigationBackButtonSmallStyle}" />

テーマ リソースのトラブルシューティングTroubleshooting theme resources

テーマ リソースの使用に関するガイドラインに従わないと、テーマに関連する予期しない動作がアプリで発生することがあります。If you don’t follow the guidelines for using theme resources, you might see unexpected behavior related to themes in your app.

たとえば、淡色テーマのポップアップを開いたときに、濃色テーマのアプリの部分まで淡色テーマのように変更される場合があります。For example, when you open a light-themed flyout, parts of your dark-themed app also change as if they were in the light theme. または、淡色テーマのページに移動してから戻ってくると、元の濃色テーマのページ (またはその部分) が淡色テーマのように表示される場合もあります。Or if you navigate to a light-themed page and then navigate back, the original dark-themed page (or parts of it) now looks as though it is in the light theme.

このような問題は、通常、"Default" テーマと "HighContrast" テーマを用意してハイ コントラスト シナリオをサポートした状態で、"Light" と "Dark" の両方のテーマをアプリ内の別々の部分で使っている場合に発生します。Typically, these types of issues occur when you provide a "Default" theme and a "HighContrast" theme to support high-contrast scenarios, and then use both "Light" and "Dark" themes in different parts of your app.

たとえば、次のテーマ ディクショナリの定義について考えてみます。For example, consider this theme dictionary definition:

<!-- DO NOT USE. THIS XAML DEMONSTRATES AN ERROR. -->
<ResourceDictionary>
  <ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
      <SolidColorBrush x:Key="myBrush" Color="{ThemeResource SystemBaseHighColor}"/>
    </ResourceDictionary>
    <ResourceDictionary x:Key="HighContrast">
      <SolidColorBrush x:Key="myBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
    </ResourceDictionary>
  </ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>

直感的には、これは正しく見えます。Intuitively, this looks correct. ハイ コントラストのときは myBrush が指す色を変更しますが、ハイ コントラストでない場合は、{ThemeResource} マークアップ拡張を利用することで myBrush がテーマに適した色を指すようにしています。You want to change the color pointed to by myBrush when in high-contrast, but when not in high-contrast, you rely on the {ThemeResource} markup extension to make sure that myBrush points to the right color for your theme. これは通常、アプリのビジュアル ツリー内に FrameworkElement.RequestedTheme が設定された要素がなければ期待どおりに動作します。If your app never has FrameworkElement.RequestedTheme set on elements within its visual tree, this will typically work as expected. しかし、ビジュアル ツリーの各部分にテーマを再設定し始めたとたんに、アプリで問題が発生することになります。However, you run into problems in your app as soon as you start to re-theme different parts of your visual tree.

問題が発生する原因は、他のほとんどの XAML 型とは異なり、ブラシが共有リソースであるためです。The problem occurs because brushes are shared resources, unlike most other XAML types. XAML サブツリーに 2 つの要素があり、同じブラシ リソースを参照する別々のテーマが設定されている場合、フレームワークが各サブツリーを走査してそれぞれの {ThemeResource} マークアップ拡張表現を更新していくと、それにつれて共有ブラシ リソースに対する変更が他のサブツリーに反映されます。これは意図した結果とは異なります。If you have 2 elements in XAML sub-trees with different themes that reference the same brush resource, then as the framework walks each sub-tree to update its {ThemeResource} markup extension expressions, changes to the shared brush resource are reflected in the other sub-tree, which is not your intended result.

これを修正するには、"Default" ディクショナリを置き換えて、"HighContrast" に加えて "Light" テーマと "Dark" テーマのディクショナリも個別に指定します。To fix this, replace the "Default" dictionary with separate theme dictionaries for both "Light" and "Dark" themes in addition to "HighContrast":

<!-- DO NOT USE. THIS XAML DEMONSTRATES AN ERROR. -->
<ResourceDictionary>
  <ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Light">
      <SolidColorBrush x:Key="myBrush" Color="{ThemeResource SystemBaseHighColor}"/>
    </ResourceDictionary>
    <ResourceDictionary x:Key="Dark">
      <SolidColorBrush x:Key="myBrush" Color="{ThemeResource SystemBaseHighColor}"/>
    </ResourceDictionary>
    <ResourceDictionary x:Key="HighContrast">
      <SolidColorBrush x:Key="myBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
    </ResourceDictionary>
  </ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>

ただし、これらのリソースのいずれかが Foreground などの継承されたプロパティで参照されていると、引き続き問題が発生します。However, problems still occur if any of these resources are referenced in inherited properties like Foreground. カスタム コントロール テンプレートでは、{ThemeResource} マークアップ拡張を使って要素の前景色を指定している場合がありますが、継承された値がフレームワークによって子要素に伝達されるときは、{ThemeResource} マークアップ拡張表現で解決されたリソースへの直接参照が提供されます。Your custom control template might specify the foreground color of an element using the {ThemeResource} markup extension, but when the framework propagates the inherited value to child elements, it provides a direct reference to the resource that was resolved by the {ThemeResource} markup extension expression. フレームワークがコントロールのビジュアル ツリーを走査する過程でテーマの変更が処理されると、問題が発生します。This causes problems when the framework processes theme changes as it walks your control's visual tree. フレームワークは {ThemeResource} マークアップ拡張表現を再評価して新しいブラシ リソースを取得しますが、この参照はまだコントロールの子に伝達されません。子への伝達は、次回の測定パスの間など、後で行われます。It re-evaluates the {ThemeResource} markup extension expression to get a new brush resource but doesn’t yet propagate this reference down to the children of your control; this happens later, such as during the next measure pass.

結果として、テーマの変更に応答してコントロールのビジュアル ツリーを走査した後、フレームワークは子を走査し、それぞれに設定されている {ThemeResource} マークアップ拡張表現、または子のプロパティに設定されているオブジェクト上の表現をすべて更新します。As a result, after walking the control visual tree in response to a theme change, the framework walks the children and updates any {ThemeResource} markup extension expressions set on them, or on objects set on their properties. ここで問題が発生します。フレームワークがブラシ リソースを走査すると、その色は {ThemeResource} マークアップ拡張を使って指定されているため、ブラシ リソースが再評価されます。This is where the problem occurs; the framework walks the brush resource and because it specifies its color using a {ThemeResource} markup extension, it's re-evaluated.

この時点で、あるディクショナリのリソースに別のディクショナリから設定された色が適用され、フレームワークがテーマ ディクショナリを汚染した形になります。At this point, the framework appears to have polluted your theme dictionary because it now has a resource from one dictionary that has its color set from another dictionary.

この問題を解決するには、{ThemeResource} マークアップ拡張の代わりに {StaticResource} マークアップ拡張を使います。To fix this problem, use the {StaticResource} markup extension instead of {ThemeResource} markup extension. ガイドラインを適用したテーマ ディクショナリは次のようになります。With the guidelines applied, the theme dictionaries look like this:

<ResourceDictionary>
  <ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Light">
      <SolidColorBrush x:Key="myBrush" Color="{StaticResource SystemBaseHighColor}"/>
    </ResourceDictionary>
    <ResourceDictionary x:Key="Dark">
      <SolidColorBrush x:Key="myBrush" Color="{StaticResource SystemBaseHighColor}"/>
    </ResourceDictionary>
    <ResourceDictionary x:Key="HighContrast">
      <SolidColorBrush x:Key="myBrush" Color="{ThemeResource SystemColorButtonFaceColor}"/>
    </ResourceDictionary>
  </ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>

"HighContrast" ディクショナリでは、{StaticResource} マークアップ拡張ではなく {ThemeResource} マークアップ拡張が引き続き使われていることに注意してください。Notice that the {ThemeResource} markup extension is still used in the "HighContrast" dictionary instead of {StaticResource} markup extension. この状況は、ガイドラインで既に説明した例外に当てはまります。This situation falls under the exception given earlier in the guidelines. "HighContrast" テーマに使われるブラシの値のほとんどは、システムによって全体的に制御される色から選択されますが、これらは特別な名前付きのリソース (名前に 'SystemColor' というプレフィックスが付いているもの) として XAML に公開されています。Most of the brush values that are used for the "HighContrast" theme are using color choices that are globally controlled by the system, but exposed to XAML as a specially-named resource (those prefixed with ‘SystemColor’ in the name). ハイ コントラスト設定で使う特定の色は、コンピューターの簡単操作を通じてユーザーが設定できるようになっています。The system enables the user to set the specific colors that should be used for their high contrast settings through the Ease of Access Center. これらの色の選択は、特別な名前付きのリソースに適用されます。Those color choices are applied to the specially-named resources. XAML フレームワークでは、システム レベルでの変更の検出時にこれらのブラシを更新する場合にも、同じテーマ変更イベントを使用します。The XAML framework uses the same theme changed event to also update these brushes when it detects they’ve changed at the system level. ここで {ThemeResource} マークアップ拡張が使われているのはこのためです。This is why the {ThemeResource} markup extension is used here.