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 프레임워크에서 지원하는 테마는 “밝게”, “어둡게”, “고대비”의 세 가지입니다.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.

테마 리소스와Theme resources v. 고정 리소스 비교static resources

기존 XAML 리소스 사전에서 XAML 리소스를 참조할 수 있는 두 가지 XAML 태그 확장 즉, {StaticResource} 태그 확장{ThemeResource} 태그 확장이 있습니다.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. 디자인 목적으로, themeresources.xaml은 Windows SDK(소프트웨어 개발 키트) 설치의 \(Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<SDK version>\Generic 폴더에 제공됩니다.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:

  • "고대비" 사전 외에 "밝게" 및 "어둡게" 둘 다에 대해서도 테마 사전을 지정하세요.Specify theme dictionaries for both "Light" and "Dark" in addition to your "HighContrast" dictionary. "기본값"을 키로 사용하여 ResourceDictionary를 만들 수도 있지만 명시적으로 "밝게", "어둡게" 및 "고대비"를 대신 사용하는 것이 좋습니다.Although you can create a ResourceDictionary with "Default" as the key, it’s preferred to be explicit and instead use "Light", "Dark", and "HighContrast".

  • 스타일, setter, 컨트롤 템플릿, 속성 setter 및 애니메이션에서 {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.

    예외: {ThemeResource} 태그 확장을 사용하여 ThemeDictionaries의 앱 테마에 관계없이 리소스를 참조할 수 있습니다.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 색 램프를 구성합니다.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.

Windows 앱에 색을 적용하는 방법에 대한 자세한 내용은 Windows 앱의 색을 참조하세요.For additional information about how to apply color in your Windows app, please see Color in Windows apps.

밝게 및 어둡게 테마 색Light and Dark theme colors

XAML 프레임워크는 "밝게" 및 "어둡게" 테마에 맞게 조정된 값을 갖는 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 프레임워크에서 제공하는 “밝게” 및 “어둡게” 리소스에 대한 키, 간단한 이름, 색의 문자열 표현(#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. "간단한 밝게/어둡게 이름"은 뒷부분에서 설명되는 브러시 이름 지정 규칙의 일부로 사용됩니다.The "Simple light/dark name" is used as part of the brush naming convention that we explain later.

Key 간단한 밝게/어둡게 이름Simple light/dark name LightLight DarkDark
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

기본 밝은 테마

기본 어두운 테마

AltAlt

대체 밝은 테마

대체 어두운 테마

목록List

목록 밝은 테마

목록 어두운 테마

크롬Chrome

크롬 밝은 테마

크롬 어두운 테마

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 앱에만 국한되지 않습니다.These colors are not specific to the Windows Runtime or Windows apps. 그러나 색상 시스템이 "고대비" 테마를 사용하여 작동되고 앱이 실행될 때 많은 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]ColorThe keys follow the naming format: SystemColor[name]Color.

다음 표에서는 XAML이 제공하는 시스템 수준 색을 Windows 시스템 팔레트에서 가져온 리소스 개체로 표시합니다.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. "간단한 고대비 이름" 열은 일반적인 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.

Key 접근성 이름Ease of Access name 단순한 고대비 이름Simple HighContrast name 초기 기본값Initial default
SystemColorButtonFaceColorSystemColorButtonFaceColor 단추 텍스트(배경)Button Text (background) 배경Background #FFF0F0F0#FFF0F0F0
SystemColorButtonTextColorSystemColorButtonTextColor 단추 텍스트(전경)Button Text (foreground) 전경Foreground #FF000000#FF000000
SystemColorGrayTextColorSystemColorGrayTextColor 사용할 수 없는 텍스트Disabled Text 사용 안 함Disabled #FF6D6D6D#FF6D6D6D
SystemColorHighlightColorSystemColorHighlightColor 선택한 텍스트(배경)Selected Text (background) 강조 표시Highlight #FF3399FF#FF3399FF
SystemColorHighlightTextColorSystemColorHighlightTextColor 선택한 텍스트(전경)Selected Text (foreground) HighlightAltHighlightAlt #FFFFFFFF#FFFFFFFF
SystemColorHotlightColorSystemColorHotlightColor 하이퍼링크Hyperlinks HyperlinkHyperlink #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. 정의합니다(예: SystemControlBackgroundAltHighBrush).For example, SystemControlBackgroundAltHighBrush.

런타임에 이 브러시에 대한 색 값이 결정되는 방식을 알아보겠습니다.Let’s look at how the color value for this brush is determined at run-time. "밝게" 및 "어둡게" 리소스 사전에서 이 브러시는 다음과 같이 정의됩니다.In the "Light" and "Dark" resource dictionaries, this brush is defined like this:

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

"고대비" 리소스 사전에서 이 브러시는 다음과 같이 정의됩니다.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.

테마Theme 간단한 색 이름Color simple name 색 리소스Color resource 런타임 값Runtime value
LightLight AltHighAltHigh SystemAltHighColorSystemAltHighColor #FFFFFFFF#FFFFFFFF
DarkDark AltHighAltHigh SystemAltHighColorSystemAltHighColor #FF000000#FF000000
고대비HighContrast 배경Background SystemColorButtonFaceColorSystemColorButtonFaceColor 단추 배경에 대한 설정에 지정된 색입니다.The color specified in settings for the button background.

SystemControl[Simple HighContrast name][Simple light/dark name]Brush 이름 지정 체계를 사용하여 고유한 XAML 요소에 적용할 브러시를 확인할 수 있습니다.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.

참고

[‘단순한 고대비 이름’][’단순한 밝게/어둡게 이름’]의 모든 조합이 브러시 리소스로 제공되는 것은 아닙니다. 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.InlinesRun 또는 RichTextBlock.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}"/>

앱에서 Windows 유형 램프를 사용하는 방법에 대한 지침은 Windows 앱의 입력 체계를 참조하세요.For guidance on how to use the Windows type ramp in your app, see Typography in Windows 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의 경우에는 문제가 되지 않습니다. 해당 텍스트 콘텐츠가 페이지 머리글, 페이지 하위 머리글, 유사한 텍스트 램프 정의에 대해 XAML 스타일을 적용하는 Paragraph 같은 특정 텍스트 요소에 항상 있어야 하기 때문입니다.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: ButtonTargetType: 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. 스타일을 조정하기 위해 Button에 대해 Height, Width, FontSize 및 다른 속성을 명시적으로 설정하거나, 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: ButtonTargetType: Button

Style은 탐색 앱을 위한 탐색 뒤로 단추가 될 수 있는 Button용 전체 템플릿을 제공합니다.This Style provides a complete template for a Button that can be the navigation back button for a navigation app. NavigationBackButtonNormalStyle과 비슷하지만, 치수가 30x30 픽셀입니다.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.

일반적으로 이러한 유형의 문제는 고대비 시나리오를 제공하기 위해 "기본" 테마 및 "고대비" 테마를 제공한 다음 앱의 다른 부분에서 "밝게" 및 "어둡게" 테마를 모두 사용하는 경우에 발생합니다.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.

이 문제를 해결하려면 "고대비" 외에, "밝게" 및 "어둡게" 둘 다에 대해 "기본" 사전을 별도의 테마 사전으로 바꾸세요.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>

{ThemeResource} 태그 확장은 "고대비" 사전에서 여전히 {StaticResource} 태그 확장 대신 사용됩니다.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. "고대비" 테마에 사용되는 대부분의 브러시 값은 시스템에서 포괄적으로 제어되는 색 선택을 사용하지만 XAML에는 특수하게 명명된 리소스(이름 맨 앞에 ‘System Color’가 붙은 리소스)로 노출됩니다.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.