Recursos de temas XAMLXAML theme resources

Recursos de temas no XAML são um conjunto de recursos que aplicam valores diferentes de acordo com o tema do sistema que estiver ativo.Theme resources in XAML are a set of resources that apply different values depending on which system theme is active. Há três temas que são aceitos pela estrutura XAML: "Light", "Dark" E "HighContrast".There are 3 themes that the XAML framework supports: "Light", "Dark", and "HighContrast".

Pré-requisitos: Este tópico pressupõe que você tenha lido as Referências a recursos ResourceDictionary e XAML.Prerequisites: This topic assumes that you have read ResourceDictionary and XAML resource references.

Recursos de tema vs.Theme resources v. recursos estáticosstatic resources

Existem duas extensões de marcação XAML que podem referenciar um recurso XAML de um dicionário de recursos XAML existente: aextensão de marcação {StaticResource} e a extensão de marcação {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.

A avaliação de uma extensão de marcação {ThemeResource} ocorre quando o aplicativo é carregado e, posteriormente, toda vez que o tema é alterado em runtime.Evaluation of a {ThemeResource} markup extension occurs when the app loads and subsequently each time the theme changes at runtime. Normalmente é o resultado da alteração que o usuário faz nas configurações do dispositivo ou de uma alteração programática dentro do aplicativo que altera o tema atual.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.

Por outro lado, uma extensão de marcação {StaticResource} é avaliada somente quando o XAML é carregado pela primeira vez pelo aplicativo.In contrast, a {StaticResource} markup extension is evaluated only when the XAML is first loaded by the app. Ele não é atualizado.It does not update. Isso é semelhante a localizar e substituir no XAML pelo valor do runtime real na inicialização do aplicativo.It’s similar to a find and replace in your XAML with the actual runtime value at app launch.

Recursos de tema na estrutura de dicionário de recursosTheme resources in the resource dictionary structure

Cada recurso de tema é parte do arquivo XAML themeresources.xaml.Each theme resource is part of the XAML file themeresources.xaml. Para fins de design, themeresources.xaml está disponível na pasta \(Arquivos de Programas)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<versão do SDK>\Generic em uma instalação do SDK (Software Development Kit (SDK) do Windows.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. Os dicionários de recursos em themeresources.xaml também são reproduzidos em generic.xaml no mesmo diretório.The resource dictionaries in themeresources.xaml are also reproduced in generic.xaml in the same directory.

O Windows Runtime não usa esses arquivos físicos para pesquisa de tempo de execução.The Windows Runtime doesn't use these physical files for runtime lookup. É por isso que eles estão especificamente em uma pasta DesignTime, e eles não são copiados para aplicativos por padrão.That's why they are specifically in a DesignTime folder, and they aren't copied into apps by default. Em vez disso, esses dicionários de recursos existem na memória como parte do Windows Runtime propriamente dito, e as referências de recurso XAML do aplicativo a recursos de tema (ou recursos do sistema) são resolvidas no tempo de execução.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.

Diretrizes para recursos de temas personalizadosGuidelines for custom theme resources

Siga estas diretrizes ao definir e consumir os seus próprios recursos de tema personalizados:Follow these guidelines when you define and consume your own custom theme resources:

Cuidado

Caso não siga essas diretrizes, você pode notar um comportamento inesperado relacionado aos temas no aplicativo.If you don’t follow these guidelines, you might see unexpected behavior related to themes in your app. Para obter mais informações, consulte a seção Solução de problemas de recursos de tema.For more info, see the Troubleshooting theme resources section.

A rampa de cores XAML e os pincéis dependentes de temasThe XAML color ramp and theme-dependent brushes

O conjunto combinado de cores para temas "Light", "Dark" e "HighContrast" formam a rampa de cores do Windows em XAML.The combined set of colors for "Light", "Dark", and "HighContrast" themes make up the Windows color ramp in XAML. Independentemente de desejar modificar os temas do sistema ou aplicar um tema do sistema aos elementos XAML próprios, é importante compreender como os recursos de cores são estruturados.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.

Para obter informações adicionais sobre como aplicar cor em seu aplicativo do Windows, confira Cor em aplicativos do Windows.For additional information about how to apply color in your Windows app, please see Color in Windows apps.

Cores dos temas Light e DarkLight and Dark theme colors

A estrutura XAML fornece um conjunto de recursos nomeado Color com valores personalizados para os temas "Light" e "Dark".The XAML framework provides a set of named Color resources with values that are tailored for the "Light" and "Dark" themes. As chaves que você usa para fazer referência a eles seguem o formato de nomenclatura: System[Simple Light/Dark Name]Color.The keys you use to reference these follow the naming format: System[Simple Light/Dark Name]Color.

Esta tabela lista a chave, o nome simples e a representação da cadeia de caracteres da cor (usando o formato #aarrggbb) dos recursos "Light" e "Dark" fornecidos pela estrutura XAML.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. A chave é usada para fazer referência ao recurso em um aplicativo.The key is used to reference the resource in an app. O "Simple light/dark name" é usado como parte da convenção de nomenclatura de pincel que explicaremos mais adiante.The "Simple light/dark name" is used as part of the brush naming convention that we explain later.

ChaveKey Simple light/dark nameSimple light/dark name LeveLight EscuroDark
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

Tema claroLight theme

Tema escuroDark theme

BaseBase

O tema claro base

O tema escuro base

AltAlt

O tema claro alternativo

O tema escuro alternativo

ListList

O tema claro de lista

O tema escuro de lista

CromadoChrome

O tema claro cromado

O tema escuro cromado

Cores de alto contraste do sistema WindowsWindows system high-contrast colors

Além do conjunto de recursos fornecido pela estrutura XAML, há um conjunto de valores de cor derivado da paleta do sistema 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. Essas cores não são específicas dos aplicativos do Windows ou Windows Runtime.These colors are not specific to the Windows Runtime or Windows apps. Porém, muitos dos recursos XAML Brush consomem essas cores quando o sistema está em operação (e o aplicativo está em execução) usando o tema "HighContrast".However, many of the XAML Brush resources consume these colors when the system is operating (and the app is running) using the "HighContrast" theme. A estrutura XAML fornece essas cores de todo o sistema como recursos inseridos.The XAML framework provides these system-wide colors as keyed resources. As chaves seguem o formato de nomenclatura: SystemColor[name]Color.The keys follow the naming format: SystemColor[name]Color.

Esta tabela lista as cores de todo o sistema que XAML fornece como objetos de recursos derivados da paleta do sistema Windows.This table lists the system-wide colors that XAML provides as resource objects derived from the Windows system palette. A coluna "Ease of Access name" mostra como a cor é identificada na interface do usuário das configurações do Windows.The "Ease of Access name" column shows how color is labeled in the Windows settings UI. A coluna "Simple HighContrast name" é uma descrição de uma palavra de como a cor é aplicada entre os controles comuns XAML.The "Simple HighContrast name" column is a one word description of how the color is applied across the XAML common controls. Ela é usada como parte da convenção de nomenclatura de pincel que explicaremos mais adiante.It's used as part of the brush naming convention that we explain later. A coluna "Initial default" mostra os valores que você obteria se o sistema não estivesse em execução em alto contraste.The "Initial default" column shows the values you'd get if the system is not running in high contrast at all.

ChaveKey Ease of Access nameEase of Access name Simple HighContrast nameSimple HighContrast name Initial defaultInitial default
SystemColorButtonFaceColorSystemColorButtonFaceColor Texto do Botão (em segundo plano)Button Text (background) Tela de fundoBackground #FFF0F0F0#FFF0F0F0
SystemColorButtonTextColorSystemColorButtonTextColor Texto do Botão (em primeiro plano)Button Text (foreground) Primeiro planoForeground #FF000000#FF000000
SystemColorGrayTextColorSystemColorGrayTextColor Texto DesabilitadoDisabled Text DesabilitadoDisabled #FF6D6D6D#FF6D6D6D
SystemColorHighlightColorSystemColorHighlightColor Texto Selecionado (em segundo plano)Selected Text (background) RealceHighlight #FF3399FF#FF3399FF
SystemColorHighlightTextColorSystemColorHighlightTextColor Texto Selecionado (em primeiro plano)Selected Text (foreground) HighlightAltHighlightAlt #FFFFFFFF#FFFFFFFF
SystemColorHotlightColorSystemColorHotlightColor HiperlinksHyperlinks HyperlinkHyperlink #FF0066CC#FF0066CC
SystemColorWindowColorSystemColorWindowColor Tela de fundoBackground PageBackgroundPageBackground #FFFFFFFF#FFFFFFFF
SystemColorWindowTextColorSystemColorWindowTextColor TextoText PageTextPageText #FF000000#FF000000

O Windows oferece diferentes temas de alto contraste e permite que o usuário defina as cores específicas para as configurações de alto contraste na Central de Facilidade de Acesso, conforme mostrado aqui.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. Por isso, não é possível fornecer uma lista definitiva de valores de cores de alto contraste.Therefore, it's not possible to provide a definitive list of high-contrast color values.

A interface do usuário das configurações de alto contraste do Windows

Para obter mais informações sobre como dar suporte a temas de alto contraste, consulte Temas de alto contraste.For more info about supporting high-contrast themes, see High-contrast themes.

Cor de destaque do sistemaSystem accent color

Além das cores do tema de alto contraste do sistema, a cor de destaque do sistema é fornecida como um recurso de cores especial usando-se a chave 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. Em runtime, esse recurso obtém a cor que o usuário especificou como a cor de destaque nas configurações de personalização do Windows.At runtime, this resource gets the color that the user has specified as the accent color in the Windows personalization settings.

Observação

Embora seja possível substituir os recursos de cor do sistema, é uma prática recomendada respeitar as opções de cor do usuário, especialmente para configurações de alto contraste.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.

Pincéis dependentes de temasTheme-dependent brushes

Os recursos de cor mostrados nas seções anteriores são usados para definir a propriedade Color dos recursos SolidColorBrush nos dicionários de recursos de temas do sistema.The color resources shown in the preceding sections are used to set the Color property of SolidColorBrush resources in the system theme resource dictionaries. Use os recursos de pincel para aplicar a cor a elementos XAML.You use the brush resources to apply the color to XAML elements. As chaves dos recursos de pincel seguem o formato de nomenclatura: 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. Por exemplo, SystemControlBackgroundAltHighBrush.For example, SystemControlBackgroundAltHighBrush.

Consultemos como o valor de cores desse pincel é determinado no tempo de execução.Let’s look at how the color value for this brush is determined at run-time. Nos dicionários de recursos "Light" e "Dark", esse pincel é definido desta forma:In the "Light" and "Dark" resource dictionaries, this brush is defined like this:

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

No dicionário de recursos "HighContrast", esse pincel é definido desta forma:In the "HighContrast" resource dictionary, this brush is defined like this:

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

Quando esse pincel é aplicado a um elemento XAML, a cor é determinada em tempo de execução pelo tema atual, conforme mostrado nesta tabela.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.

TemaTheme Nome simples da corColor simple name Recurso de coresColor resource Valor do runtimeRuntime value
LeveLight AltHighAltHigh SystemAltHighColorSystemAltHighColor #FFFFFFFF#FFFFFFFF
EscuroDark AltHighAltHigh SystemAltHighColorSystemAltHighColor #FF000000#FF000000
HighContrastHighContrast Tela de fundoBackground SystemColorButtonFaceColorSystemColorButtonFaceColor A cor especificada nas configurações do segundo plano do botão.The color specified in settings for the button background.

Você pode usar o esquema de nomenclatura SystemControl[Simple HighContrast name][Simple light/dark name]Brush para determinar qual pincel aplicar aos próprios elementos 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.

Observação

Nem toda combinação de [nome simples HighContrast][nome claro/escuro simples] é fornecida como um recurso de pincel.Not every combination of [Simple HighContrast name][Simple light/dark name] is provided as a brush resource.

A rampa de tipos XAMLThe XAML type ramp

O arquivo themeresources.xaml define vários recursos que determinam um Style que você pode aplicar a contêineres de texto na interface do usuário, especificamente para TextBlock ou RichTextBlock.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. Eles não são os estilos implícitos padrão.These are not the default implicit styles. Eles são fornecidos para facilitar a criação de definições da interface do usuário XAML que correspondam à rampa de tipos do Windows documentada em Diretrizes para fontes.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.

Esses estilos se destinam a atributos de texto que você deseja aplicar ao contêiner de texto inteiro.These styles are for text attributes that you want applied to the whole text container. Se desejar que o estilos sejam aplicados somente a seções do texto, defina atributos nos elementos de texto dentro do contêiner, como em um Run em TextBlock.Inlines ou em um Paragraph em RichTextBlock.Blocks.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.

Os estilos têm esta aparência quando aplicados a um TextBlock:The styles look like this when applied to a TextBlock:

estilos de bloco de texto

<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}"/>

Para obter diretrizes sobre como usar a rampa de tipos do Windows em seu aplicativo, confira Tipografia em aplicativos do Windows.For guidance on how to use the Windows type ramp in your app, see Typography in Windows apps.

BaseTextBlockStyleBaseTextBlockStyle

TargetType: TextBlockTargetType: TextBlock

Fornece as propriedades comuns para todos os outros estilos de contêiner 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

Fornece as propriedades comuns para todos os outros estilos de contêiner 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>

Observação:  Os estilos RichTextBlock não têm todos os estilos de rampa de texto de TextBlock, principalmente porque o modelo de objeto de documento baseado em bloco de RichTextBlock facilita a definição de atributos nos elementos de texto individuais.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. Além disso, definir TextBlock.Text usando a propriedade de conteúdo XAML provoca uma situação em que não há elementos de texto para os quais definir um estilo e, portanto, você teria que definir um estilo para o contêiner.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. Isso não é um problema para RichTextBlock, pois o conteúdo de texto sempre precisa estar em elementos de texto específicos, como Paragraph, onde você pode aplicar estilos XAML do cabeçalho de página, do subcabeçalho de página e das definições de rampa de texto semelhantes.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.

Estilos nomeados diversosMiscellaneous Named styles

Há um conjunto adicional de definições Style inseridas que você pode aplicar para criar um Button diferente do estilo implícito padrão.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

Aplique esse estilo a um Button quando você precisar mostrar o texto em que um usuário pode clicar para realizar uma ação.Apply this style to a Button when you need to show text that a user can click to take action. O texto é criado usando-se a cor de destaque atual para diferenciá-lo como interativo e tem retângulos de foco que funcionam bem para textos.The text is styled using the current accent color to distinguish it as interactive and has focus rectangles that work well for text. Diferentemente do estilo implícito de um HyperlinkButton, o TextBlockButtonStyle não sublinha o texto.Unlike the implicit style of a HyperlinkButton, the TextBlockButtonStyle does not underline the text.

O modelo também cria o estilo do texto apresentado para usar SystemControlHyperlinkBaseMediumBrush (para o estado "PointerOver"), SystemControlHighlightBaseMediumLowBrush (para o estado "Pressionado") e SystemControlDisabledBaseLowBrush (para o estado "Desabilitado").The template also styles the presented text to use SystemControlHyperlinkBaseMediumBrush (for "PointerOver" state), SystemControlHighlightBaseMediumLowBrush (for "Pressed" state) and SystemControlDisabledBaseLowBrush (for "Disabled" state).

Veja a seguir um Button com o recurso TextBlockButtonStyle aplicado.Here's a Button with the TextBlockButtonStyle resource applied to it.

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

Ele é semelhante ao seguinte:It looks like this:

Um botão criado para ter a aparência de texto

TargetType: BotãoTargetType: Button

Esse Style oferece um modelo completo para um Button que pode ser o botão voltar de navegação de um aplicativo de navegação.This Style provides a complete template for a Button that can be the navigation back button for a navigation app. As dimensões padrão são 40 x 40 pixels.The default dimensions are 40 x 40 pixels. Para personalizar o estilo, você pode definir explicitamente Height, Width, FontSize e outras propriedades no Button ou criar um estilo derivado usando 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.

Veja a seguir um Button com o recurso NavigationBackButtonNormalStyle aplicado.Here's a Button with the NavigationBackButtonNormalStyle resource applied to it.

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

Ele é semelhante ao seguinte:It looks like this:

Um botão com o estilo de um botão voltar

TargetType: BotãoTargetType: Button

Esse Style oferece um modelo completo para um Button que pode ser o botão voltar de navegação de um aplicativo de navegação.This Style provides a complete template for a Button that can be the navigation back button for a navigation app. Ele é semelhante a NavigationBackButtonNormalStyle, mas as dimensões são 30 x 30 pixels.It's similar to NavigationBackButtonNormalStyle, but its dimensions are 30 x 30 pixels.

Veja a seguir um Button com o recurso NavigationBackButtonSmallStyle aplicado.Here's a Button with the NavigationBackButtonSmallStyle resource applied to it.

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

Solução de problemas de recursos de temasTroubleshooting theme resources

Caso não siga as diretrizes para usar recursos de tema, você pode notar um comportamento inesperado relacionado aos temas no aplicativo.If you don’t follow the guidelines for using theme resources, you might see unexpected behavior related to themes in your app.

Por exemplo, quando você abre um submenu com tema claro, partes do aplicativo com tema escuro também mudam como se estivessem no tema claro.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. Ou, caso você navegue até uma página com tema claro e, em seguida, volte à navegação original, a página com tema escuro original (ou partes dele) agora parece ser do tema claro.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.

Normalmente, esses tipos de problemas ocorrem quando você fornece um tema "Default" e um tema "HighContrast" para dar suporte a cenários de alto contraste e, em seguida, usa ambos os temas "Light" e "Dark" em partes diferentes do aplicativo.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.

Por exemplo, considere esta definição do dicionário de temas: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>

Intuitivamente, ela parece correta.Intuitively, this looks correct. Você deseja alterar a cor apontada por myBrush quando está em alto contraste, mas, quando não está em alto contraste, você depende da extensão de marcação {ThemeResource} para verificar se myBrush aponta para a cor certa do tema.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. Se o aplicativo jamais tiver FrameworkElement.RequestedTheme definido em elementos dentro da árvore visual, isso normalmente funcionará conforme esperado.If your app never has FrameworkElement.RequestedTheme set on elements within its visual tree, this will typically work as expected. No entanto, você tem problemas no aplicativo assim que começa a recriar partes diferentes do tema da árvore visual.However, you run into problems in your app as soon as you start to re-theme different parts of your visual tree.

O problema ocorre porque pincéis são recursos compartilhados, diferentemente da maioria dos outros tipos XAML.The problem occurs because brushes are shared resources, unlike most other XAML types. Caso você tenha dois elementos em subárvores XAML com temas diferentes que referenciam o mesmo recurso pincel, à medida que a estrutura percorre cada subárvore para atualizar as expressões da extensão de marcação {ThemeResource}, as alterações feitas no recurso pincel compartilhado se refletem na outra subárvore, que não é o resultado desejado.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.

Para corrigir isso, substitua o dicionário "Default" por dicionários de temas separados para os dois temas "Light" e "Dark", além de "HighContrast":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>

No entanto, ainda haverá problemas se qualquer um desses recursos forem referenciados em propriedades herdadas, como Foreground.However, problems still occur if any of these resources are referenced in inherited properties like Foreground. O modelo de controle personalizado pode especificar a cor de primeiro plano de um elemento usando a extensão de marcação {ThemeResource}, mas, quando a estrutura propaga o valor herdado para elementos filho, ela fornece uma referência direta para o recurso que foi resolvido pela expressão da extensão de marcação {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. Isso causa problemas quando a estrutura processa alterações de tema à medida que percorre a árvore visual do controle.This causes problems when the framework processes theme changes as it walks your control's visual tree. Ele reavalia a expressão da extensão de marcação {ThemeResource} para obter um novo recurso pincel, mas ainda não propaga essa referência para os filhos do controle; isso acontecerá mais tarde como, por exemplo, durante o próximo cálculo de medição.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.

Dessa forma, depois de percorrer a árvore visual do controle em resposta a uma alteração feita no tema, a estrutura orienta os filhos e atualiza todas as expressões da extensão de marcação {ThemeResource} definidas neles ou em objetos definidos nas propriedades.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. É onde o problema ocorre; a estrutura percorre o recurso pincel e, como ela especifica a cor usando uma extensão de marcação {ThemeResource}, ela é reavaliada.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.

A esta altura, a estrutura aparentemente poluiu o dicionário de temas porque agora tem um recurso de um dicionário com a cor definida de outro dicionário.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.

Para corrigir esse problema, use a extensão de marcação {StaticResource} no lugar da extensão de marcação {ThemeResource}.To fix this problem, use the {StaticResource} markup extension instead of {ThemeResource} markup extension. Com as diretrizes aplicadas, os dicionários de temas têm esta aparência: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>

Observe que a extensão de marcação {ThemeResource} ainda é usada no dicionário "HighContrast" no lugar da extensão de marcação {StaticResource}.Notice that the {ThemeResource} markup extension is still used in the "HighContrast" dictionary instead of {StaticResource} markup extension. Essa situação se enquadra na exceção apresentada anteriormente nas diretrizes.This situation falls under the exception given earlier in the guidelines. A maioria dos valores de pincéis usados para o tema "HighContrast" está usando opções de cores controladas globalmente pelo sistema, mas expostas a XAML como um recurso especialmente nomeado (os prefixados com "SystemColor" no nome).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). O sistema permite que o usuário defina as cores específicas que devem ser usadas nas configurações de alto contraste por meio da Central de Facilidade de Acesso.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. Essas opções de cores são aplicadas aos recursos especialmente nomeados.Those color choices are applied to the specially-named resources. A estrutura XAML usa o mesmo evento de tema alterado para também atualizar esses pincéis ao detectar que eles foram alterados no nível do sistema.The XAML framework uses the same theme changed event to also update these brushes when it detects they’ve changed at the system level. É por isso que a extensão de marcação {ThemeResource} é usada aqui.This is why the {ThemeResource} markup extension is used here.