XAML theme resources reference

  • [アーティクル]

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

Windows Runtime XAML provides a set of resources that apply different values depending on which system theme is active. Here we list the keys/names of all the theme-specific XAML resources that specify colors, brushes, and other related UI resources, and the values that each of these resources has using the themes Default (Light), Dark, and HighContrast. Also, we describe additional named XAML styles that are defined in themeresources.xaml. These styles are for text elements and text-related controls, and for view items from data.

Prerequisites

This topic assumes that you have read ResourceDictionary and XAML resource references.

Theme resources and where they fit in the resource dictionary structure

Each theme resource is part of the XAML file themeresources.xaml. For design purposes, themeresources.xaml is available in the include/winrt/xaml/design folder from a Windows Software Development Kit (SDK) installation. These are all listed as part of the XAML file themeresources.xaml, which is available in the include/winrt/xaml/design folder as part of the Windows SDK.

The resource dictionaries in themeresources.xaml are also reproduced in generic.xaml in the same directory.

Note  The Windows Runtime doesn't use these physical files for runtime lookup. That's why they are specifically in a /design folder, and they aren't copied into apps by default. 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.

 

How theme resources differ from static resources

There are two XAML markup extensions that can reference a XAML resource from an existing XAML resource dictionary. These are: StaticResource and ThemeResource. For StaticResource, resource evaluation happens only when the XAML is first loaded by the app. A runtime action such as the user switching themes would not change the values of these static resources. In contrast, for ThemeResource, the XAML resources system can re-evaluate these resources dynamically if the theme is switched while the app is running. This is an important behavior for the default Windows Runtime XAML controls, which use the theme resources for many of their XAML resource references made from the control templates. For example, the brushes used for backgrounds, foregrounds, text, and similar UI are all tied to appropriate color choices for a dark theme (white on back) as opposed to a light theme (black on white), so that the overall look of a XAML control in your app matches with the look of other apps and of the system itself. By using ThemeResource, the default XAML controls force a re-evaluation of all those resources if the user happens to switch themes while the app remains running, so controls, apps and the system will all be using matching theming.

Theme-dependent brushes

The values listed here are each a keyed resource that defines a SolidColorBrush. The key that you use to reference that brush is in the "Key" column. That brush has different color values depending on which theme is currently loaded. The columns "Color in Default" and "Color in Light" give the string-form Color value of that SolidColorBrush. Most of these are specified in the #aarrggbb form, but a few reference one of the set of named colors. For more info on how the colors are set with strings, see "Syntax" and "Remarks" sections of Color or SolidColorBrush.

Rather than listing color values, "Color in HighContrast" is the name of another key, which is used to retrieve a StaticResource that is of type Color. For example, the full definition of AppBarBackgroundThemeBrush in the HighContrast area of themeresources.xaml is: <SolidColorBrush x:Key="AppBarBackgroundThemeBrush" Color="{ThemeResource SystemColorButtonFaceColor}" />

What's happening here is that 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. 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 respected and used as a system-sourced resource that is available to themes and your app XAML when the user runs a Windows Store app in high contrast.

There are also a small number of values in "Color in HighContrast" that are literal color strings, for example "Transparent" signifying the named color Colors.Transparent. These are values that aren't affected by system colors or what the user can control in Ease of Access.

Key Color in Default Color in Light Color in HighContrast

AppBarBackgroundThemeBrush

#FF000000

#FFF0F0F0

SystemColorButtonFaceColor

AppBarBorderThemeBrush

#FF000000

#FFF0F0F0

SystemColorHighlightColor

AppBarItemBackgroundThemeBrush

Transparent

Transparent

SystemColorButtonFaceColor

AppBarItemDisabledForegroundThemeBrush

#66FFFFFF

#66000000

SystemColorGrayTextColor

AppBarItemForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

AppBarItemPointerOverBackgroundThemeBrush

#21FFFFFF

#3D000000

SystemColorHighlightColor

AppBarItemPointerOverForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorHighlightTextColor

AppBarItemPressedForegroundThemeBrush

#FF000000

#FFFFFFFF

SystemColorButtonFaceColor

AppBarSeparatorForegroundThemeBrush

#FF7B7B7B

#FF7B7B7B

SystemColorButtonTextColor

AppBarToggleButtonCheckedBackgroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorHighlightColor

AppBarToggleButtonCheckedBorderThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

AppBarToggleButtonCheckedDisabledBackgroundThemeBrush

#66FFFFFF

#66000000

SystemColorGrayTextColor

AppBarToggleButtonCheckedDisabledBorderThemeBrush

Transparent

Transparent

Transparent

AppBarToggleButtonCheckedDisabledForegroundThemeBrush

#FF000000

#FFFFFFFF

SystemColorButtonFaceColor

AppBarToggleButtonCheckedForegroundThemeBrush

#FF000000

#99000000

SystemColorHighlightTextColor

AppBarToggleButtonCheckedPointerOverBackgroundThemeBrush

#99FFFFFF

#99000000

SystemColorHighlightColor

AppBarToggleButtonCheckedPointerOverBorderThemeBrush

#99FFFFFF

Transparent

SystemColorButtonTextColor

AppBarToggleButtonCheckedPressedBackgroundThemeBrush

Transparent

#FF000000

SystemColorButtonTextColor

AppBarToggleButtonCheckedPressedBorderThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

AppBarToggleButtonCheckedPressedForegroundThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorButtonFaceColor

AppBarToggleButtonPointerOverBackgroundThemeBrush

#21FFFFFF

#3D000000

SystemColorHighlightColor

ApplicationForegroundThemeBrush

#DEFFFFFF

#DE000000

SystemColorWindowTextColor

ApplicationHeaderForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorWindowTextColor

ApplicationPageBackgroundThemeBrush

#FF1D1D1D

#FFFFFFFF

SystemColorWindowColor

ApplicationPointerOverForegroundThemeBrush

#CCFFFFFF

#CC000000

SystemColorHotlightColor

ApplicationPressedForegroundThemeBrush

#66FFFFFF

#66000000

SystemColorHotlightColor

ApplicationSecondaryForegroundThemeBrush

#99FFFFFF

#99000000

SystemColorWindowTextColor

BackButtonBackgroundThemeBrush

Transparent

Transparent

SystemColorButtonFaceColor

BackButtonDisabledForegroundThemeBrush

#66FFFFFF

#66000000

SystemColorGrayTextColor

BackButtonForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

BackButtonPointerOverBackgroundThemeBrush

#21FFFFFF

#3D000000

SystemColorHighlightColor

BackButtonPointerOverForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorHighlightTextColor

BackButtonPressedForegroundThemeBrush

#FF000000

#FFFFFFFF

SystemColorButtonFaceColor

ButtonBackgroundThemeBrush

Transparent

#B3B6B6B6

SystemColorButtonFaceColor

ButtonBorderThemeBrush

#FFFFFFFF

#33000000

SystemColorButtonTextColor

ButtonDisabledBackgroundThemeBrush

Transparent

#66CACACA

SystemColorButtonFaceColor

ButtonDisabledBorderThemeBrush

#66FFFFFF

#1A000000

SystemColorGrayTextColor

ButtonDisabledForegroundThemeBrush

#66FFFFFF

#66000000

SystemColorGrayTextColor

ButtonForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

ButtonPointerOverBackgroundThemeBrush

#21FFFFFF

#D1CDCDCD

SystemColorHighlightColor

ButtonPointerOverForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorHighlightTextColor

ButtonPressedBackgroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

ButtonPressedForegroundThemeBrush

#FF000000

#FFFFFFFF

SystemColorButtonFaceColor

CheckBoxBackgroundThemeBrush

#CCFFFFFF

#CCFFFFFF

SystemColorButtonFaceColor

CheckBoxBorderThemeBrush

#CCFFFFFF

#45000000

SystemColorButtonTextColor

CheckBoxContentDisabledForegroundThemeBrush

#66FFFFFF

#66000000

SystemColorGrayTextColor

CheckBoxContentForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

CheckBoxDisabledBackgroundThemeBrush

#66FFFFFF

#66CACACA

SystemColorButtonFaceColor

CheckBoxDisabledBorderThemeBrush

#66FFFFFF

#26000000

SystemColorGrayTextColor

CheckBoxDisabledForegroundThemeBrush

#66000000

#66000000

SystemColorGrayTextColor

CheckBoxForegroundThemeBrush

#FF000000

#FF000000

SystemColorButtonTextColor

CheckBoxPointerOverBackgroundThemeBrush

#DEFFFFFF

#DEFFFFFF

SystemColorHighlightColor

CheckBoxPointerOverBorderThemeBrush

#DEFFFFFF

#FF000000

SystemColorButtonTextColor

CheckBoxPointerOverForegroundThemeBrush

#FF000000

#70000000

SystemColorHighlightTextColor

CheckBoxPressedBackgroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

CheckBoxPressedBorderThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

CheckBoxPressedForegroundThemeBrush

#FF000000

#FFFFFFFF

SystemColorButtonFaceColor

ComboBoxArrowDisabledForegroundThemeBrush

#66FFFFFF

#66000000

SystemColorGrayTextColor

ComboBoxArrowForegroundThemeBrush

#FF000000

#FF000000

SystemColorButtonTextColor

ComboBoxArrowPressedForegroundThemeBrush

#FF000000

#FF000000

SystemColorButtonFaceColor

ComboBoxBackgroundThemeBrush

#CCFFFFFF

#CCFFFFFF

SystemColorButtonFaceColor

ComboBoxBorderThemeBrush

#CCFFFFFF

#45000000

SystemColorButtonTextColor

ComboBoxDisabledBackgroundThemeBrush

Transparent

#66CACACA

SystemColorButtonFaceColor

ComboBoxDisabledBorderThemeBrush

#66FFFFFF

#26000000

SystemColorGrayTextColor

ComboBoxDisabledForegroundThemeBrush

#66FFFFFF

#66000000

SystemColorGrayTextColor

ComboBoxFocusedBackgroundThemeBrush

White

White

SystemColorButtonFaceColor

ComboBoxFocusedBorderThemeBrush

White

#70000000

SystemColorButtonTextColor

ComboBoxFocusedForegroundThemeBrush

White

White

SystemColorHighlightTextColor

ComboBoxForegroundThemeBrush

#FF000000

#FF000000

SystemColorButtonTextColor

ComboBoxHeaderForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

ComboBoxItemDisabledForegroundThemeBrush

#66000000

#66000000

SystemColorGrayTextColor

ComboBoxItemPointerOverBackgroundThemeBrush

#21000000

#21000000

SystemColorHighlightColor

ComboBoxItemPointerOverForegroundThemeBrush

#FF000000

#FF000000

SystemColorHighlightTextColor

ComboBoxItemPressedBackgroundThemeBrush

#FFD3D3D3

#FFD3D3D3

SystemColorButtonTextColor

ComboBoxItemPressedForegroundThemeBrush

#FF000000

#FF000000

SystemColorButtonFaceColor

ComboBoxItemSelectedBackgroundThemeBrush

#FF4617B4

#FF4617B4

SystemColorHighlightColor

ComboBoxItemSelectedDisabledBackgroundThemeBrush

#8C000000

White

SystemColorGrayTextColor

ComboBoxItemSelectedDisabledForegroundThemeBrush

#99FFFFFF

#8C000000

SystemColorButtonFaceColor

ComboBoxItemSelectedForegroundThemeBrush

White

#99FFFFFF

SystemColorHighlightTextColor

ComboBoxItemSelectedPointerOverBackgroundThemeBrush

#FF5F37BE

#FF5F37BE

SystemColorHighlightColor

ComboBoxPlaceholderTextForegroundThemeBrush

#88000000

#88000000

#88000000

ComboBoxPointerOverBackgroundThemeBrush

#DEFFFFFF

#DEFFFFFF

SystemColorButtonFaceColor

ComboBoxPointerOverBorderThemeBrush

#DEFFFFFF

#70000000

SystemColorButtonTextColor

ComboBoxPopupBackgroundThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorButtonFaceColor

ComboBoxPopupBorderThemeBrush

#FF212121

#FF212121

SystemColorButtonTextColor

ComboBoxPopupForegroundThemeBrush

#FF000000

#FF000000

SystemColorButtonTextColor

ComboBoxPressedBackgroundThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorButtonTextColor

ComboBoxPressedBorderThemeBrush

#FFFFFFFF

#A3000000

SystemColorButtonTextColor

ComboBoxPressedHighlightThemeBrush

#FFD3D3D3

#FFD3D3D3

SystemColorButtonTextColor

ComboBoxPressedForegroundThemeBrush

#FF000000

#FF000000

SystemColorButtonFaceColor

ComboBoxSelectedBackgroundThemeBrush

#FF4617B4

#FF4617B4

SystemColorHighlightColor

ComboBoxSelectedPointerOverBackgroundThemeBrush

#FF5F37BE

#FF5F37BE

SystemColorHighlightColor

DatePickerHeaderForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

DatePickerForegroundThemeBrush

#FF000000

#FF000000

SystemColorButtonTextColor

DefaultTextForegroundThemeBrush

White

Black

SystemColorWindowTextColor

FlipViewButtonBackgroundThemeBrush

#59D5D5D5

#59D5D5D5

SystemColorButtonFaceColor

FlipViewButtonBorderThemeBrush

#59D5D5D5

#59D5D5D5

SystemColorButtonTextColor

FlipViewButtonForegroundThemeBrush

#99000000

#99000000

SystemColorButtonTextColor

FlipViewButtonPointerOverBackgroundThemeBrush

#F0D7D7D7

#F0D7D7D7

SystemColorHighlightColor

FlipViewButtonPointerOverBorderThemeBrush

#9EC1C1C1

#9EC1C1C1

SystemColorButtonTextColor

FlipViewButtonPointerOverForegroundThemeBrush

#FF000000

#FF000000

SystemColorHighlightTextColor

FlipViewButtonPressedBackgroundThemeBrush

#BD292929

#BD292929

SystemColorButtonTextColor

FlipViewButtonPressedBorderThemeBrush

#BD292929

#BD292929

SystemColorButtonTextColor

FlipViewButtonPressedForegroundThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorButtonFaceColor

FlyoutBackgroundThemeBrush

#FF000000

#FFFFFFFF

SystemColorWindowColor

FlyoutBorderThemeBrush

#FFFFFFFF

#FF000000

SystemColorWindowTextColor

FocusVisualBlackStrokeThemeBrush

Black

Black

Black

FocusVisualWhiteStrokeThemeBrush

White

White

White

HyperlinkButtonBackgroundThemeBrush

Transparent

Transparent

SystemColorWindowColor

HyperlinkButtonBorderThemeBrush

Transparent

Transparent

SystemColorWindowColor

HyperlinkDisabledThemeBrush

#66FFFFFF

#66000000

SystemColorGrayTextColor

HyperlinkForegroundThemeBrush

#FF9C72FF

#FF4F1ACB

SystemColorHotlightColor

HyperlinkPointerOverForegroundThemeBrush

#CC9C72FF

#CC4F1ACB

SystemColorHotlightColor

HyperlinkPressedForegroundThemeBrush

#999C72FF

#994F1ACB

SystemColorHotlightColor

HubSectionHeaderPointerOverForegroundThemeBrush

#FFD1D1D1

#FFD1D1D1

SystemColorHotlightColor

HubSectionHeaderPressedForegroundThemeBrush

#FF777777

#FF777777

SystemColorHotlightColor

IMECandidateBackgroundThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorButtonFaceColor

IMECandidateForegroundThemeBrush

#FF000000

#FF000000

SystemColorButtonTextColor

IMECandidatePointerOverBackgroundThemeBrush

#21000000

#21000000

SystemColorHighlightColor

IMECandidatePointerOverForegroundThemeBrush

#FF000000

#FF000000

SystemColorHighlightTextColor

IMECandidateSecondaryForegroundThemeBrush

#FF707070

#FF707070

SystemColorButtonTextColor

IMECandidateSelectedBackgroundThemeBrush

#FF4617B4

#FF4617B4

SystemColorHighlightColor

IMECandidateSelectedForegroundThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorHighlightTextColor

IMECandidateListBackgroundThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorButtonFaceColor

IMECandidateListPagingButtonBackgroundThemeBrush

#7FD9D9D9

#7FD9D9D9

SystemColorButtonFaceColor

IMECandidateListPagingButtonBorderThemeBrush

#FFFFFFFF

#33000000

SystemColorButtonTextColor

IMECandidateListPagingButtonForegroundThemeBrush

#7F000000

#7F000000

SystemColorButtonTextColor

IMECandidateListPagingButtonPointerOverBackgroundThemeBrush

#FFD9D9D9

#FFD9D9D9

SystemColorButtonFaceColor

IMECandidateListPagingButtonPointerOverForegroundThemeBrush

#FF000000

#FF000000

SystemColorButtonTextColor

IMECandidateListPagingButtonPressedBackgroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

IMECandidateListPagingButtonPressedForegroundThemeBrush

#FF000000

#FFFFFFFF

SystemColorButtonFaceColor

ListBoxBackgroundThemeBrush

#CCFFFFFF

#CCFFFFFF

SystemColorWindowColor

ListBoxBorderThemeBrush

Transparent

#45000000

SystemColorButtonTextColor

ListBoxDisabledForegroundThemeBrush

#66FFFFFF

#66000000

SystemColorGrayTextColor

ListBoxFocusBackgroundThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorButtonFaceColor

ListBoxForegroundThemeBrush

#FF000000

#FF000000

SystemColorButtonTextColor

ListBoxItemDisabledForegroundThemeBrush

#66FFFFFF

#FF000000

SystemColorGrayTextColor

ListBoxItemPointerOverBackgroundThemeBrush

#21000000

#CC000000

SystemColorHighlightColor

ListBoxItemPointerOverForegroundThemeBrush

#FF000000

#66000000

SystemColorHighlightTextColor

ListBoxItemPressedBackgroundThemeBrush

#FFD3D3D3

#66000000

SystemColorButtonTextColor

ListBoxItemPressedForegroundThemeBrush

#FF000000

#21000000

SystemColorButtonFaceColor

ListBoxItemSelectedBackgroundThemeBrush

#FF4617B4

#FF000000

SystemColorGrayTextColor

ListBoxItemSelectedDisabledBackgroundThemeBrush

#66FFFFFF

#FFD3D3D3

SystemColorButtonFaceColor

ListBoxItemSelectedDisabledForegroundThemeBrush

#99000000

#FF000000

SystemColorHighlightColor

ListBoxItemSelectedForegroundThemeBrush

White

#FF4617B4

SystemColorHighlightTextColor

ListBoxItemSelectedPointerOverBackgroundThemeBrush

#FF5F37BE

#8C000000

SystemColorHighlightColor

ListViewGroupHeaderForegroundThemeBrush

#FFFFFFFF

#99FFFFFF

SystemColorWindowTextColor

ListViewGroupHeaderPointerOverForegroundThemeBrush

#CCFFFFFF

White

SystemColorHotlightColor

ListViewGroupHeaderPressedForegroundThemeBrush

#66FFFFFF

#FF5F37BE

SystemColorHotlightColor

ListViewItemCheckHintThemeBrush

#FFFFFFFF

#FF4617B4

SystemColorWindowTextColor

ListViewItemCheckSelectingThemeBrush

#FFFFFFFF

#FF4617B4

SystemColorWindowTextColor

ListViewItemCheckThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorHighlightTextColor

ListViewItemDragBackgroundThemeBrush

#994617B4

#994617B4

SystemColorHighlightColor

ListViewItemDragForegroundThemeBrush

White

White

SystemColorHighlightTextColor

ListViewItemFocusBorderThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

ListViewItemOverlayBackgroundThemeBrush

#A6000000

#A6000000

SystemColorButtonFaceColor

ListViewItemOverlayForegroundThemeBrush

#FFFFFFFF

#99FFFFFF

SystemColorWindowTextColor

ListViewItemOverlaySecondaryForegroundThemeBrush

#99FFFFFF

#FFFFFFFF

SystemColorWindowTextColor

ListViewItemPlaceholderBackgroundThemeBrush

#FF3D3D3D

#FF3D3D3D

SystemColorGrayTextColor

ListViewItemPointerOverBackgroundThemeBrush

#4DFFFFFF

#4D000000

SystemColorHighlightColor

ListViewItemSelectedBackgroundThemeBrush

#FF4617B4

#FF4617B4

SystemColorHighlightColor

ListViewItemSelectedForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorHighlightTextColor

ListViewItemSelectedPointerOverBackgroundThemeBrush

#FF5F37BE

#FF5F37BE

SystemColorHighlightColor

ListViewItemSelectedPointerOverBorderThemeBrush

#FF5F37BE

#FF5F37BE

SystemColorHighlightColor

MediaButtonForegroundThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorButtonTextColor

MediaButtonBackgroundThemeBrush

Transparent

Transparent

SystemColorButtonFaceColor

MediaButtonPointerOverForegroundThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorHotlightColor

MediaButtonPointerOverBackgroundThemeBrush

#26FFFFFF

#26FFFFFF

SystemColorButtonFaceColor

MediaButtonPressedForegroundThemeBrush

#FF000000

#FF000000

SystemColorHighlightColor

MediaButtonPressedBackgroundThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorButtonFaceColor

MediaButtonPressedBorderThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorHighlightColor

MediaControlPanelVideoThemeBrush

#A3000000

#A3000000

SystemColorButtonFaceColor

MediaControlPanelAudioThemeBrush

#FF000000

#FF000000

SystemColorButtonFaceColor

MediaDownloadProgressIndicatorThemeBrush

#38FFFFFF

#38FFFFFF

SystemColorHotlightColor

MediaErrorBackgroundThemeBrush

#FF000000

#FF000000

SystemColorButtonFaceColor

MediaTextThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorButtonTextColor

MenuFlyoutItemFocusedBackgroundThemeBrush

#FF212121

#FFE5E5E5

SystemColorHighlightColor

MenuFlyoutItemFocusedForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorHighlightTextColor

MenuFlyoutItemDisabledForegroundThemeBrush

#66FFFFFF

#66000000

SystemColorGrayTextColor

MenuFlyoutItemPointerOverBackgroundThemeBrush

#FF212121

#FFE5E5E5

SystemColorHighlightColor

MenuFlyoutItemPointerOverForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorHighlightTextColor

MenuFlyoutItemPressedBackgroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

MenuFlyoutItemPressedForegroundThemeBrush

#FF000000

#FFFFFFFF

SystemColorButtonFaceColor

MenuFlyoutSeparatorThemeBrush

#FF7A7A7A

#FF7A7A7A

SystemColorWindowTextColor

ProgressBarBackgroundThemeBrush

#59FFFFFF

#30000000

SystemColorButtonFaceColor

ProgressBarBorderThemeBrush

Transparent

Transparent

SystemColorButtonTextColor

ProgressBarForegroundThemeBrush

#FF5B2EC5

#FF4617B4

SystemColorHighlightColor

ProgressBarIndeterminateForegroundThemeBrush

#FF8A57FF

#FF4617B4

SystemColorHighlightColor

RadioButtonBackgroundThemeBrush

#CCFFFFFF

#CCFFFFFF

SystemColorButtonFaceColor

RadioButtonBorderThemeBrush

#CCFFFFFF

#45000000

SystemColorButtonTextColor

RadioButtonContentDisabledForegroundThemeBrush

#66FFFFFF

#66000000

SystemColorGrayTextColor

RadioButtonContentForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

RadioButtonDisabledBackgroundThemeBrush

#66FFFFFF

#66CACACA

SystemColorHighlightTextColor

RadioButtonDisabledBorderThemeBrush

#66FFFFFF

#26000000

SystemColorButtonFaceColor

RadioButtonDisabledForegroundThemeBrush

#66000000

#66000000

SystemColorGrayTextColor

RadioButtonForegroundThemeBrush

#FF000000

#FF000000

SystemColorGrayTextColor

RadioButtonPointerOverBackgroundThemeBrush

#DEFFFFFF

#DEFFFFFF

SystemColorButtonTextColor

RadioButtonPointerOverBorderThemeBrush

#DEFFFFFF

#70000000

SystemColorHighlightColor

RadioButtonPointerOverForegroundThemeBrush

#FF000000

#FF000000

SystemColorButtonTextColor

RadioButtonPressedBackgroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorHighlightTextColor

RadioButtonPressedBorderThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

RadioButtonPressedForegroundThemeBrush

#FF000000

#FFFFFFFF

SystemColorButtonTextColor

RepeatButtonBorderThemeBrush

#FFFFFFFF

#33000000

SystemColorButtonFaceColor

RepeatButtonDisabledBackgroundThemeBrush

Transparent

#66CACACA

SystemColorButtonTextColor

RepeatButtonDisabledBorderThemeBrush

#66FFFFFF

#1A000000

SystemColorButtonFaceColor

RepeatButtonDisabledForegroundThemeBrush

#66FFFFFF

#66000000

SystemColorGrayTextColor

RepeatButtonForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorGrayTextColor

RepeatButtonPointerOverBackgroundThemeBrush

#21FFFFFF

#D1CDCDCD

SystemColorButtonTextColor

RepeatButtonPointerOverForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorHighlightColor

RepeatButtonPressedBackgroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorHighlightTextColor

RepeatButtonPressedForegroundThemeBrush

#FF000000

#FFFFFFFF

SystemColorButtonTextColor

ScrollBarButtonForegroundThemeBrush

#99000000

#99000000

SystemColorButtonFaceColor

ScrollBarButtonPointerOverBackgroundThemeBrush

#FFDADADA

#FFDADADA

SystemColorButtonTextColor

ScrollBarButtonPointerOverBorderThemeBrush

#FFDADADA

#FFDADADA

SystemColorHighlightColor

ScrollBarButtonPointerOverForegroundThemeBrush

#FF000000

#FF000000

SystemColorButtonTextColor

ScrollBarButtonPressedBackgroundThemeBrush

#99000000

#99000000

SystemColorHighlightTextColor

ScrollBarButtonPressedBorderThemeBrush

#99000000

#99000000

SystemColorButtonTextColor

ScrollBarButtonPressedForegroundThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorButtonTextColor

ScrollBarPanningBackgroundThemeBrush

#FFCDCDCD

#FFCDCDCD

SystemColorButtonFaceColor

ScrollBarPanningBorderThemeBrush

#7D9A9A9A

#7D9A9A9A

SystemColorButtonTextColor

ScrollBarThumbBackgroundThemeBrush

#FFCDCDCD

#FFCDCDCD

SystemColorButtonFaceColor

ScrollBarThumbBorderThemeBrush

#3B555555

#3B555555

SystemColorButtonTextColor

ScrollBarThumbPointerOverBackgroundThemeBrush

#FFDADADA

#FFDADADA

SystemColorButtonTextColor

ScrollBarThumbPointerOverBorderThemeBrush

#6BB7B7B7

#6BB7B7B7

SystemColorHighlightColor

ScrollBarThumbPressedBackgroundThemeBrush

#99000000

#99000000

SystemColorButtonTextColor

ScrollBarThumbPressedBorderThemeBrush

#ED555555

#ED555555

SystemColorButtonFaceColor

ScrollBarTrackBackgroundThemeBrush

#59D5D5D5

#59D5D5D5

SystemColorButtonTextColor

ScrollBarTrackBorderThemeBrush

#59D5D5D5

#59D5D5D5

SystemColorButtonFaceColor

SearchBoxBackgroundThemeBrush

#CCFFFFFF

#CCFFFFFF

SystemColorButtonTextColor

SearchBoxBorderThemeBrush

#FF2A2A2A

#FF2A2A2A

SystemColorButtonFaceColor

SearchBoxDisabledBackgroundThemeBrush

Transparent

#66CACACA

SystemColorButtonTextColor

SearchBoxDisabledTextThemeBrush

#66FFFFFF

#38000000

SystemColorButtonFaceColor

SearchBoxDisabledBorderThemeBrush

#FF666666

#26000000

SystemColorButtonTextColor

SearchBoxPointerOverBackgroundThemeBrush

#DDFFFFFF

#DDFFFFFF

SystemColorGrayTextColor

SearchBoxPointerOverTextThemeBrush

#99000000

#99000000

SystemColorHighlightColor

SearchBoxPointerOverBorderThemeBrush

#FFDDDDDD

#88000000

SystemColorHighlightTextColor

SearchBoxFocusedBackgroundThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorButtonTextColor

SearchBoxFocusedTextThemeBrush

#FF000000

#FF000000

SystemColorButtonFaceColor

SearchBoxFocusedBorderThemeBrush

#FF2A2A2A

#FF2A2A2A

SystemColorButtonTextColor

SearchBoxButtonBackgroundThemeBrush

#FF4617B4

#FF4617B4

SystemColorButtonTextColor

SearchBoxButtonForegroundThemeBrush

White

White

SystemColorHighlightColor

SearchBoxButtonPointerOverForegroundThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorHighlightTextColor

SearchBoxButtonPointerOverBackgroundThemeBrush

#FF5F37BE

#FF5F37BE

SystemColorHighlightTextColor

SearchBoxSeparatorSuggestionForegroundThemeBrush

#FF000000

#FF000000

SystemColorHighlightColor

SearchBoxHitHighlightForegroundThemeBrush

#FF4617B4

#FF4617B4

SystemColorButtonTextColor

SearchBoxHitHighlightSelectedForegroundThemeBrush

#FFA38BDA

#FFA38BDA

SystemColorButtonTextColor

SearchBoxIMECandidateListSeparatorThemeBrush

#FF2A2A2A

#FF2A2A2A

SystemColorHighlightTextColor

SearchBoxForegroundThemeBrush

#FF000000

#FF000000

SystemColorButtonTextColor

SemanticZoomButtonBackgroundThemeBrush

#59D5D5D5

#59D5D5D5

SystemColorButtonTextColor

SemanticZoomButtonBorderThemeBrush

#59D5D5D5

#59D5D5D5

SystemColorButtonFaceColor

SemanticZoomButtonForegroundThemeBrush

#99000000

#99000000

SystemColorButtonTextColor

SemanticZoomButtonPointerOverBackgroundThemeBrush

#FFDADADA

#FFDADADA

SystemColorButtonTextColor

SemanticZoomButtonPointerOverBorderThemeBrush

#FFDADADA

#FFDADADA

SystemColorHighlightColor

SemanticZoomButtonPointerOverForegroundThemeBrush

#FF000000

#FF000000

SystemColorButtonTextColor

SemanticZoomButtonPressedBackgroundThemeBrush

#99000000

#99000000

SystemColorHighlightTextColor

SemanticZoomButtonPressedBorderThemeBrush

#99000000

#99000000

SystemColorButtonTextColor

SemanticZoomButtonPressedForegroundThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorButtonTextColor

SettingsFlyoutBackgroundThemeBrush

#FF000000

#FFFFFFFF

SystemColorButtonFaceColor

SettingsFlyoutBackButtonPointerOverBackgroundThemeBrush

#21FFFFFF

#21FFFFFF

SystemColorWindowColor

SettingsFlyoutHeaderBackgroundThemeBrush

#FF464646

#FF464646

SystemColorHighlightColor

SettingsFlyoutHeaderForegroundThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorWindowColor

SliderBorderThemeBrush

Transparent

Transparent

SystemColorWindowTextColor

SliderDisabledBorderThemeBrush

Transparent

Transparent

SystemColorButtonTextColor

SliderThumbBackgroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorGrayTextColor

SliderThumbBorderThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

SliderThumbDisabledBackgroundThemeBrush

#FF7E7E7E

#FF929292

SystemColorHighlightTextColor

SliderThumbPointerOverBackgroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorGrayTextColor

SliderThumbPointerOverBorderThemeBrush

#FFFFFFFF

#FF000000

SystemColorHighlightColor

SliderThumbPressedBackgroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorHighlightTextColor

SliderThumbPressedBorderThemeBrush

#FFFFFFFF

#FF000000

SystemColorHighlightTextColor

SliderTickMarkInlineBackgroundThemeBrush

Black

White

SystemColorButtonTextColor

SliderTickMarkInlineDisabledForegroundThemeBrush

Black

White

SystemColorButtonTextColor

SliderTickmarkOutsideBackgroundThemeBrush

#80FFFFFF

#80000000

SystemColorGrayTextColor

SliderTickMarkOutsideDisabledForegroundThemeBrush

#80FFFFFF

#80000000

SystemColorButtonTextColor

SliderTrackBackgroundThemeBrush

#29FFFFFF

#1A000000

SystemColorGrayTextColor

SliderTrackDecreaseBackgroundThemeBrush

#FF5B2EC5

#FF4617B4

SystemColorButtonFaceColor

SliderTrackDecreaseDisabledBackgroundThemeBrush

#1FFFFFFF

#1C000000

SystemColorHighlightColor

SliderTrackDecreasePointerOverBackgroundThemeBrush

#FF724BCD

#FF5F37BE

SystemColorButtonFaceColor

SliderTrackDecreasePressedBackgroundThemeBrush

#FF8152EF

#FF7241E4

SystemColorHighlightColor

SliderTrackDisabledBackgroundThemeBrush

#29FFFFFF

#1A000000

SystemColorHighlightColor

SliderTrackPointerOverBackgroundThemeBrush

#46FFFFFF

#26000000

SystemColorButtonFaceColor

SliderTrackPressedBackgroundThemeBrush

#59FFFFFF

#33000000

SystemColorButtonFaceColor

SliderHeaderForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonFaceColor

TextBoxForegroundHeaderThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

TextBoxPlaceholderTextThemeBrush

#AB000000

#AB000000

SystemColorButtonFaceColor

TextBoxBackgroundThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorGrayTextColor

TextSelectionHighlightColorThemeBrush

#FF4617b4

#A3000000

SystemColorButtonFaceColor

TextBoxBorderThemeBrush

#FFFFFFFF

Transparent

SystemColorHighlightColor

TextBoxButtonBackgroundThemeBrush

Transparent

Transparent

SystemColorButtonTextColor

TextBoxButtonBorderThemeBrush

Transparent

#FF000000

SystemColorButtonFaceColor

TextBoxButtonForegroundThemeBrush

#FF000000

#FF4617b4

Transparent

TextBoxButtonPointerOverBackgroundThemeBrush

#FFDEDEDE

#FFDEDEDE

SystemColorButtonTextColor

TextBoxButtonPointerOverBorderThemeBrush

Transparent

Transparent

SystemColorHighlightColor

TextBoxButtonPointerOverForegroundThemeBrush

#FF000000

Black

SystemColorButtonTextColor

TextBoxButtonPressedBackgroundThemeBrush

#FF000000

#FF000000

SystemColorHighlightTextColor

TextBoxButtonPressedBorderThemeBrush

Transparent

Transparent

SystemColorButtonTextColor

TextBoxButtonPressedForegroundThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorButtonTextColor

TextBoxDisabledBackgroundThemeBrush

Transparent

#66CACACA

SystemColorButtonFaceColor

TextBoxDisabledBorderThemeBrush

#66FFFFFF

#26000000

SystemColorButtonFaceColor

TextBoxDisabledForegroundThemeBrush

#FF666666

#FF666666

SystemColorGrayTextColor

TextBoxForegroundThemeBrush

#FF000000

#FF000000

SystemColorButtonTextColor

ThumbBackgroundThemeBrush

#FFCDCDCD

#FFCDCDCD

SystemColorButtonTextColor

ThumbBorderThemeBrush

#3B555555

#3B555555

SystemColorButtonTextColor

ThumbPointerOverBackgroundThemeBrush

#FFDADADA

#FFDADADA

SystemColorButtonTextColor

ThumbPointerOverBorderThemeBrush

#6BB7B7B7

#6BB7B7B7

SystemColorHighlightColor

ThumbPressedBackgroundThemeBrush

#99000000

#99000000

SystemColorButtonTextColor

ThumbPressedBorderThemeBrush

#ED555555

#ED555555

SystemColorButtonFaceColor

TimePickerHeaderForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

TimePickerForegroundThemeBrush

#FF000000

#FF000000

SystemColorButtonTextColor

ToggleButtonBackgroundThemeBrush

Transparent

Transparent

SystemColorButtonTextColor

ToggleButtonBorderThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonFaceColor

ToggleButtonCheckedBackgroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

ToggleButtonCheckedBorderThemeBrush

#FFFFFFFF

#FF000000

SystemColorHighlightColor

ToggleButtonCheckedDisabledBackgroundThemeBrush

#66FFFFFF

#66000000

SystemColorButtonTextColor

ToggleButtonCheckedDisabledForegroundThemeBrush

#FF000000

#FFFFFFFF

SystemColorGrayTextColor

ToggleButtonCheckedForegroundThemeBrush

#FF000000

#FFFFFFFF

SystemColorButtonFaceColor

ToggleButtonCheckedPointerOverBackgroundThemeBrush

#99FFFFFF

#99000000

SystemColorHighlightTextColor

ToggleButtonCheckedPointerOverBorderThemeBrush

#99FFFFFF

#99000000

SystemColorHighlightColor

ToggleButtonCheckedPressedBackgroundThemeBrush

Transparent

Transparent

SystemColorButtonTextColor

ToggleButtonCheckedPressedBorderThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

ToggleButtonCheckedPressedForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

ToggleButtonDisabledBorderThemeBrush

#66FFFFFF

#66000000

SystemColorButtonFaceColor

ToggleButtonDisabledForegroundThemeBrush

#66FFFFFF

#66000000

SystemColorGrayTextColor

ToggleButtonForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorGrayTextColor

ToggleButtonPointerOverBackgroundThemeBrush

#21FFFFFF

#21000000

SystemColorButtonTextColor

ToggleButtonPressedBackgroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonFaceColor

ToggleButtonPressedForegroundThemeBrush

#FF000000

#FFFFFFFF

SystemColorButtonTextColor

ToggleSwitchCurtainBackgroundThemeBrush

#FF5729C1

#FF4617B4

SystemColorButtonFaceColor

ToggleSwitchCurtainDisabledBackgroundThemeBrush

Transparent

Transparent

SystemColorHighlightColor

ToggleSwitchCurtainPointerOverBackgroundThemeBrush

#FF6E46CA

#FF5F37BE

SystemColorButtonFaceColor

ToggleSwitchCurtainPressedBackgroundThemeBrush

#FF7E4FEC

#FF7241E4

SystemColorHighlightColor

ToggleSwitchDisabledForegroundThemeBrush

#66FFFFFF

#66000000

SystemColorHighlightColor

ToggleSwitchForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorGrayTextColor

ToggleSwitchHeaderDisabledForegroundThemeBrush

#66FFFFFF

#66000000

SystemColorButtonTextColor

ToggleSwitchHeaderForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorGrayTextColor

ToggleSwitchOuterBorderBorderThemeBrush

#59FFFFFF

#59000000

SystemColorButtonTextColor

ToggleSwitchOuterBorderDisabledBorderThemeBrush

#33FFFFFF

#33000000

SystemColorButtonTextColor

ToggleSwitchThumbBackgroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorGrayTextColor

ToggleSwitchThumbBorderThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

ToggleSwitchThumbDisabledBackgroundThemeBrush

#FF7E7E7E

#FF929292

SystemColorButtonTextColor

ToggleSwitchThumbDisabledBorderThemeBrush

#FF7E7E7E

#FF929292

SystemColorGrayTextColor

ToggleSwitchThumbPointerOverBackgroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorGrayTextColor

ToggleSwitchThumbPointerOverBorderThemeBrush

#FFFFFFFF

#FF000000

SystemColorHighlightColor

ToggleSwitchThumbPressedBackgroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonTextColor

ToggleSwitchThumbPressedForegroundThemeBrush

#FFFFFFFF

#FF000000

SystemColorButtonFaceColor

ToggleSwitchTrackBackgroundThemeBrush

#42FFFFFF

#59000000

SystemColorButtonTextColor

ToggleSwitchTrackBorderThemeBrush

Transparent

Transparent

SystemColorButtonFaceColor

ToggleSwitchTrackDisabledBackgroundThemeBrush

#1FFFFFFF

#1F000000

Transparent

ToggleSwitchTrackPointerOverBackgroundThemeBrush

#4AFFFFFF

#4A000000

SystemColorButtonFaceColor

ToggleSwitchTrackPressedBackgroundThemeBrush

#59FFFFFF

#42000000

SystemColorButtonFaceColor

ToolTipBackgroundThemeBrush

#FFFFFFFF

#FFFFFFFF

SystemColorButtonFaceColor

ToolTipBorderThemeBrush

#FF808080

#FF808080

SystemColorWindowColor

ToolTipForegroundThemeBrush

#FF666666

#FF666666

SystemColorWindowTextColor

 

Default text foreground

One of the resources listed, DefaultTextForegroundThemeBrush, is important for general text such as the text content of a TextBlock. If you want to change the foreground color of all text in your app, you can override this theme resource. (Another alternative is overriding the default implicit Style of specific text elements such as TextBlock and applying a style setter for Foreground.)

"SystemColor" Color resources

This section lists each of the XAML resources that are forwarding color values that are controlled by the Windows system. These resources are consumed by many of the specific Brush resources when the system is operating (and the app is running) using the HighContrast theme. The values listed for "Initial default" are the values you'd get if the system is not running in high contrast at all. There are many available high contrast themes and the user can customize colors within them, so listing the color values for all the high contrast themes won't be definitive

Key Initial default

SystemColorButtonFaceColor

#FFF0F0F0

SystemColorButtonTextColor

#FF000000

SystemColorGrayTextColor

#FF6D6D6D

SystemColorHighlightColor

#FF3399FF

SystemColorHighlightTextColor

#FFFFFFFF

SystemColorHotlightColor

#FF0066CC

SystemColorWindowColor

#FFFFFFFF

SystemColorWindowTextColor

#FF000000

 

Named styles in themeresources.xaml

themeresources.xaml defines several resources that define a Style. Some of these are styles that you'd apply to elements that are not controls, notably text elements. Some are control styles that are not the default implicit style and instead have a discrete key.

Control templates for expanded list items

These styles provide a complete control template for ListViewItem or GridViewItem in an expanded mode. This is implemented as a separate named style in order to offer the legacy (Windows 8) templates. These are preserved for scenarios where the default templates do not provide adequate exposure of the template parts for per-part customization. The default style uses an ItemPresenter rather than ContentPresenter and doesn't have any visual states for interaction within the items themselves. The design principle here is to streamline the item visuals creation process, with much of the visual and state behavior built-in to the ItemPresenter behavior. The ItemPresenter can create the visuals just-in-time during items creation, whereas ContentPresenter needs the whole visual tree built before it can present. The "Expanded" styles have explicit visual states for interactions such as dragging and selection hints, and use ContentPresenter. These can provide a basis for making visual changes to items that the ItemPresenter behavior can't support. However, you should be aware that templating items using the legacy templates has performance consequences. For more info see Improve startup time for apps with GridView and ListView controls.

Note  The intention for providing these styles is not to use them as-is. Using the styles as-is results in equivalent visuals and behavior to the default templates, with notably slower performance during startup. Instead, use these styles as a starting point for your own styles that are making significant changes to the parts or states within the expanded template. Make copies of these styles, using your own name, and store them in your own XAML resource locations. You can also declare a BasedOn style that modifies the original style (appropriate if your changes are minor).

 

The expanded templates for list items can be referenced in Microsoft Visual Studio by selecting a list item in the XAML design view, right-clicking, and choosing Edit Additional Templates > Edit Generated Content (ContentTemplate) > Apply Resource > ListViewItemExpanded / GridViewItemExpanded.

ListViewItemExpanded

TargetType: ListViewItem

Defines an items template for a ListView where items are presented with ContentPresenter and visual states for interaction are explicit in the XAML.

GridViewItemExpanded

TargetType: GridViewItem

Defines an items template for a GridView where items are presented with ContentPresenter and visual states for interaction are explicit in the XAML.

Text container styles

These styles are for text containers in your UI, specifically for either TextBlock or RichTextBlock. The styles make it simpler for XAML UI definitions to use the recommendations for the Windows type ramp, as documented in Guidelines for fonts. (Most of the examples in Guidelines for fonts are showing CSS for HTML; you should extrapolate this guidance to how you'd set styles/attributes in XAML, and use the appropriate text container style that's listed here.)

Note  Font sizes in CSS are specified in points whereas XAML specifies font sizes in pixels. So you'll see a factor of 1.333 difference for all the point values mentioned in Guidelines for fonts when you see these XAML styles setting FontSize values using pixels.

 

These styles are for text attributes that you want applied to the whole text container. If you wanted styles applied just to sections of the text you'd set attributes on the text elements within the container, such as on a Run in TextBlock.Inlines or on a Paragraph in RichTextBlock.Blocks.

BaseTextBlockStyle

TargetType: TextBlock

Supplies the common properties for all the other text container styles. Sets these properties with references to other theme-specific styles, using ThemeResource:

Sets non-themed, sometimes non-default values for these properties: TextTrimming, TextWrapping, Typography.StylisticSet20, Typography.DiscretionaryLigatures, Typography.CaseSensitiveForms, LineHeight, LineStackingStrategy, TextLineBounds, OpticalMarginAlignment.

HeaderTextBlockStyle

BasedOn: BaseTextBlockStyle

Styles "Page header" as shown in Guidelines for fonts.

    <Setter Property="FontSize" Value="56" />
    <Setter Property="FontWeight" Value="Light" />
    <Setter Property="LineHeight" Value="40" />

SubheaderTextBlockStyle

BasedOn: BaseTextBlockStyle

Styles "Page subheader" as shown in Guidelines for fonts.

    <Setter Property="FontSize" Value="26.667" />
    <Setter Property="FontWeight" Value="Light" />
    <Setter Property="LineHeight" Value="30" />

TitleTextBlockStyle

BasedOn: BaseTextBlockStyle

Styles "Item title/header" as shown in Guidelines for fonts.

    <Setter Property="FontWeight" Value="SemiBold" />

SubtitleTextBlockStyle

BasedOn: BaseTextBlockStyle

Styles "Navigation" as shown in Guidelines for fonts.

    <Setter Property="FontWeight" Value="Normal" />

BodyTextBlockStyle

BasedOn: BaseTextBlockStyle

Styles "Body text" as shown in Guidelines for fonts.

    <Setter Property="FontWeight" Value="SemiLight" />

CaptionTextBlockStyle

BasedOn: BaseTextBlockStyle

Styles "Tertiary info" as shown in Guidelines for fonts.

    <Setter Property="FontSize" Value="12" />
    <Setter Property="FontWeight" Value="Normal" />

BaseRichTextBlockStyle

TargetType: RichTextBlock

Supplies the common properties for all the other RichTextBlock-base text container styles (although in this set, that's only BodyRichTextBlockStyle). Sets these properties with references to other theme-specific styles, using ThemeResource:

Sets non-themed, sometimes non-default values for these properties: TextTrimming, TextWrapping, Typography.StylisticSet20, Typography.DiscretionaryLigatures, Typography.CaseSensitiveForms, LineHeight, LineStackingStrategy, TextLineBounds, OpticalMarginAlignment.

BodyRichTextBlockStyle

BasedOn: BaseRichTextBlockStyle

Styles "Body text" as shown in Guidelines for fonts.

    <Setter Property="FontWeight" Value="SemiLight" />

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

TextBlockButtonStyle

TargetType: ButtonBase

Inside a button you often use a binding of a string directly to the Content property. There's a ContentPresenter that does the presentation but it isn't available for styling directly on a Button tag. The TextBlockButtonStyle style provides a template that has focus rectangles that work well for text. The template also styles the presented text to use ApplicationPointerOverForegroundThemeBrush (for "PointerOver" state), ApplicationPressedForegroundThemeBrush (for "Pressed" state) and ApplicationSecondaryForegroundThemeBrush (for "Unchecked" state).

SettingsFlyoutSectionStyle

TargetType: StackPanel

This style applies a 39-pixel bottom margin to a StackPanel that's intended to be the layout container child within a SettingsFlyout. The margin keeps the flyout's items from potentially drawing under the bottom app bar.

TargetType: Button

A complete template for a Button that can be the navigation back button for a navigation app. Includes theme resource references that make this button look like an AppBarButton as far as font, behavior and so on, but because it's a regular Button you can put it anywhere in your UI.

TargetType: Button

A complete template for a Button that can be the navigation back button for a navigation app. Similar to NavigationBackButtonNormalStyle but dimensions are 30 by 30 pixels (NavigationBackButtonNormalStyle's button is 41 by 41).

Windows 8 compatibility and migration notes

The resources described in this topic describe how they exist for Windows 8.1. The resources either didn't exist for Windows 8, or were factored in a different way. Windows 8 didn't support ThemeResource, and did not have a themeresources.xaml resource file. Instead, an entirely separate generic.xaml was used for each theme and could only be reloaded during app initiation (the app wouldn't respond to theme changes while it was running). Named styles were in standardstyles.xaml, a helper file that was part of project templates in Windows 8 but is no longer in project templates for Windows 8.1.

Windows Phone

Windows Phone has a different SDK location for themeresources.xaml. It also has substantial differences both in the values of resources that Windows and Windows Phone share as far as names, as well as resources that only are relevant for Windows Phone and its XAML control templates.

ResourceDictionary and XAML resource references

ResourceDictionary

XAML overview

StaticResource markup extension

ThemeResource markup extension

Quickstart: Styling controls

x:Key attribute