Recursos de temas XAMLXAML theme resources

Los recursos de tema en XAML son un conjunto de recursos que aplican distintos valores según el tema del sistema que esté activo.Theme resources in XAML are a set of resources that apply different values depending on which system theme is active. Existen 3 temas que admiten el marco XAML: "Light", "Dark" y "HighContrast".There are 3 themes that the XAML framework supports: "Light", "Dark", and "HighContrast".

Requisitos previos: Para este tema se presupone que has leído Referencias a ResourceDictionary y a recursos XAML.Prerequisites: This topic assumes that you have read ResourceDictionary and XAML resource references.

Comparación entre recursos de temasTheme resources v. y recursos estáticosstatic resources

Hay dos extensiones de marcado XAML que pueden hacer referencia a un recurso XAML de un diccionario de recursos XAML existente: la extensión de marcado {StaticResource} y la extensión de marcado {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.

La evaluación de una extensión de marcado {ThemeResource} se produce cuando la aplicación se carga y, posteriormente, cada vez que el tema cambia en tiempo de ejecución.Evaluation of a {ThemeResource} markup extension occurs when the app loads and subsequently each time the theme changes at runtime. Esto suele ocurrir cuando el usuario cambia la configuración de su dispositivo o cuando se produce un cambio de programación en la aplicación que modifique su tema actual.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.

En cambio, una extensión de marcado {StaticResource} solo se evalúa cuando la aplicación carga por primera vez el código XAML.In contrast, a {StaticResource} markup extension is evaluated only when the XAML is first loaded by the app. No se actualiza.It does not update. Es similar a buscar y reemplazar en el código XAML con el valor real en tiempo de ejecución en el inicio de la aplicación.It’s similar to a find and replace in your XAML with the actual runtime value at app launch.

Recursos de temas en la estructura del diccionario de recursosTheme resources in the resource dictionary structure

Cada recurso de tema es parte del archivo XAML themeresources.xaml.Each theme resource is part of the XAML file themeresources.xaml. Por cuestiones de diseño, themeresources.xaml está disponible en la carpeta \(Archivos de programa)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<Versión del SDK>\Generic de una instalación del Kit de desarrollo de software (SDK) de 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. Los diccionarios de recursos de themeresources.xaml también se reproducen en generic.xaml en el mismo directorio.The resource dictionaries in themeresources.xaml are also reproduced in generic.xaml in the same directory.

Windows Runtime no usa estos archivos físicos para la búsqueda en tiempo de ejecución.The Windows Runtime doesn't use these physical files for runtime lookup. Por este motivo, están específicamente en una carpeta DesignTime y no se copian a aplicaciones de forma predeterminada.That's why they are specifically in a DesignTime folder, and they aren't copied into apps by default. En cambio, estos diccionarios de recursos existen en la memoria como parte del propio Windows Runtime y las referencias de los recursos XAML de la aplicación a recursos de tema (o recursos del sistema) se resuelven allí en tiempo de ejecución.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.

Directrices para recursos de temas personalizadosGuidelines for custom theme resources

Sigue estas instrucciones al definir y consumir tus propios recursos de tema personalizados:Follow these guidelines when you define and consume your own custom theme resources:

Precaución

Si no sigues estas directrices es posible que veas un comportamiento inesperado con relación a los temas de tu aplicación.If you don’t follow these guidelines, you might see unexpected behavior related to themes in your app. Para más información, consulta la sección Solución de problemas de recursos de tema.For more info, see the Troubleshooting theme resources section.

Los pinceles dependientes del tema y la rampa de colores de XAMLThe XAML color ramp and theme-dependent brushes

El conjunto de colores combinado para los temas "Light", "Dark" y "HighContrast" constituyen la Rampa de colores de Windows en XAML.The combined set of colors for "Light", "Dark", and "HighContrast" themes make up the Windows color ramp in XAML. Si quieres modificar los temas del sistema o bien aplicar un tema del sistema a tus propios elementos XAML, es importante comprender cómo se estructuran los recursos de color.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 obtener más información acerca de cómo aplicar color en tu aplicación de Windows, consulta Color en aplicaciones de Windows.For additional information about how to apply color in your Windows app, please see Color in Windows apps.

Temas de colores Claro y OscuroLight and Dark theme colors

El marco XAML proporciona un conjunto de recursos Color designados con valores diseñados exclusivamente para los temas "Light" y "Dark".The XAML framework provides a set of named Color resources with values that are tailored for the "Light" and "Dark" themes. Las claves que usas para hacer referencia a estos tienen un formato de nombre de tipo: System[Simple Light/Dark Name]Color.The keys you use to reference these follow the naming format: System[Simple Light/Dark Name]Color.

Esta tabla enumera la clave, el nombre simple y la representación de cadena del color (con el formato #aarrggbb) para los recursos "Light" y "Dark" que proporciona el marco 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. La clave se usa para hacer referencia al recurso en una aplicación.The key is used to reference the resource in an app. El "Nombre simple claro/oscuro" se usa como parte de la convención de nomenclatura de pincel que explicaremos más adelante.The "Simple light/dark name" is used as part of the brush naming convention that we explain later.

ClaveKey Nombre simple claro/oscuroSimple light/dark name LigeroLight OscuroDark
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 oscuroDark theme

BaseBase

El tema claro Base

El tema oscuro Base

AltAlt

El tema claro Alt

El tema oscuro alternativo

ListaList

El tema claro List

El tema oscuro de list

ChromeChrome

El tema claro Chrome

El tema oscuro chrome

Colores en contraste alto del sistema de WindowsWindows system high-contrast colors

Además del conjunto de recursos proporcionados por el marco XAML, hay un conjunto de valores de color derivado de la paleta del sistema de 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. Estos colores no son específicos de las aplicaciones de Windows Runtime o de Windows.These colors are not specific to the Windows Runtime or Windows apps. Sin embargo, muchos de los recursos XAML Brush consumen estos colores cuando el sistema está funcionando (y la aplicación está ejecutándose) con el 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. El marco XAML proporciona estos colores de todo el sistema como recursos con clave.The XAML framework provides these system-wide colors as keyed resources. Las claves siguen el formato de nombre: SystemColor[name]Color.The keys follow the naming format: SystemColor[name]Color.

Esta tabla enumera los colores de todo el sistema que XAML proporciona como objetos de recursos derivados de la paleta del sistema de Windows.This table lists the system-wide colors that XAML provides as resource objects derived from the Windows system palette. La columna "Nombre de accesibilidad" muestra cómo se etiqueta el color en la interfaz de usuario de la configuración de Windows.The "Ease of Access name" column shows how color is labeled in the Windows settings UI. La columna "Nombre simple de contraste alto" es una descripción en una palabra de cómo se aplica el color en los controles comunes de XAML.The "Simple HighContrast name" column is a one word description of how the color is applied across the XAML common controls. Se usa como parte de la convención de nomenclatura de pincel que explicaremos más adelante.It's used as part of the brush naming convention that we explain later. La columna "Predeterminado inicial" muestra los valores que se obtendrían si el sistema no se ejecutara en contraste alto.The "Initial default" column shows the values you'd get if the system is not running in high contrast at all.

ClaveKey Nombre de accesibilidadEase of Access name Nombre simple de contraste altoSimple HighContrast name Predeterminado inicialInitial default
SystemColorButtonFaceColorSystemColorButtonFaceColor Texto del botón (segundo plano)Button Text (background) Segundo planoBackground #FFF0F0F0#FFF0F0F0
SystemColorButtonTextColorSystemColorButtonTextColor Texto del botón (primer plano)Button Text (foreground) Primer planoForeground #FF000000#FF000000
SystemColorGrayTextColorSystemColorGrayTextColor Texto deshabilitadoDisabled Text DeshabilitadaDisabled #FF6D6D6D#FF6D6D6D
SystemColorHighlightColorSystemColorHighlightColor Texto seleccionado (segundo plano)Selected Text (background) ResaltarHighlight #FF3399FF#FF3399FF
SystemColorHighlightTextColorSystemColorHighlightTextColor Texto seleccionado (primer plano)Selected Text (foreground) HighlightAltHighlightAlt #FFFFFFFF#FFFFFFFF
SystemColorHotlightColorSystemColorHotlightColor HipervínculosHyperlinks HyperlinkHyperlink #FF0066CC#FF0066CC
SystemColorWindowColorSystemColorWindowColor FondoBackground PageBackgroundPageBackground #FFFFFFFF#FFFFFFFF
SystemColorWindowTextColorSystemColorWindowTextColor TextoText PageTextPageText #FF000000#FF000000

Windows proporciona distintos temas de contraste alto y permite al usuario establecer los colores específicos para su configuración de contraste alto a través del Centro de accesibilidad, como se muestra aquí.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 lo tanto, no es posible proporcionar una lista definitiva de valores de color de contraste alto.Therefore, it's not possible to provide a definitive list of high-contrast color values.

La interfaz de usuario de la configuración de contraste alto de Windows

Para más información acerca de la compatibilidad los temas de contraste alto, consulta Temas de contraste alto.For more info about supporting high-contrast themes, see High-contrast themes.

Color de énfasis del sistemaSystem accent color

Además de los colores de tema de contraste alto del sistema, el color de énfasis del sistema se proporciona como un recurso de color especial con la clave 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. En tiempo de ejecución, este recurso toma el color que el usuario haya especificado como color de énfasis en la configuración de personalización de Windows.At runtime, this resource gets the color that the user has specified as the accent color in the Windows personalization settings.

Nota

Si bien es posible invalidar los recursos de color del sistema, se recomienda respetar los colores elegidos por el usuario, especialmente para la configuración de contraste alto.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.

Pinceles dependientes del temaTheme-dependent brushes

Los recursos de color que se muestran en las secciones anteriores se usan para establecer la propiedad Color de los recursos SolidColorBrush en los diccionarios de recursos de temas del 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. Usa los recursos de pincel para aplicar el color a elementos XAML.You use the brush resources to apply the color to XAML elements. Las claves para los recursos de pincel tienen el siguiente formato de nombre: 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 ejemplo, SystemControlBackgroundAltHighBrush.For example, SystemControlBackgroundAltHighBrush.

Veamos cómo se determina el valor de color de este pincel en tiempo de ejecución.Let’s look at how the color value for this brush is determined at run-time. En los diccionarios de recursos "Light" y "Dark", el pincel se define así:In the "Light" and "Dark" resource dictionaries, this brush is defined like this:

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

En el diccionario de recursos "HighContrast", el pincel se define así:In the "HighContrast" resource dictionary, this brush is defined like this:

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

Cuando este pincel se aplica a un elemento XAML, el tema actual determina su color en tiempo de ejecución, como se muestra en esta tabla.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 Nombre simple del colorColor simple name Recurso de colorColor resource Valor en tiempo de ejecuciónRuntime value
LigeroLight AltHighAltHigh SystemAltHighColorSystemAltHighColor #FFFFFFFF#FFFFFFFF
OscuroDark AltHighAltHigh SystemAltHighColorSystemAltHighColor #FF000000#FF000000
HighContrastHighContrast Segundo planoBackground SystemColorButtonFaceColorSystemColorButtonFaceColor El color especificado en la configuración para el fondo del botón.The color specified in settings for the button background.

Puedes usar el esquema de nombre SystemControl[Simple HighContrast name][Simple light/dark name]Brush para determinar qué pincel aplicar a tus propios 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.

Nota

No todas las combinaciones de [Nombre simple de contraste alto][Nombre simple claro/oscuro] se proporcionan como recurso de pincel.Not every combination of [Simple HighContrast name][Simple light/dark name] is provided as a brush resource.

La rampa de tipos XAMLThe XAML type ramp

El archivo themeresources.xaml define varios recursos que definen un Style que puedes aplicar a los contenedores de texto en tu interfaz de usuario, específicamente para TextBlock o 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. No son los estilos implícitos predeterminados.These are not the default implicit styles. Se proporcionan para facilitar la creación de definiciones de interfaces de usuario de XAML que coincidan con la Rampa de tipos de Windows documentada en Directrices para fuentes.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.

Estos estilos son para atributos de texto que quieres aplicar a todo el contenedor de texto.These styles are for text attributes that you want applied to the whole text container. Si quieres que los estilos se apliquen solo a secciones del texto, debes establecer los atributos en los elementos de texto dentro del contenedor, como en Run para TextBlock.Inlines o en Paragraph para 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.

Los estilos tienen este aspecto cuando se aplican a un elemento TextBlock:The styles look like this when applied to a TextBlock:

estilos de bloque 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 obtener instrucciones sobre cómo usar la rampa de tipos de Windows en la aplicación, consulta Tipografía en aplicaciones de Windows.For guidance on how to use the Windows type ramp in your app, see Typography in Windows apps.

BaseTextBlockStyleBaseTextBlockStyle

TargetType: TextBlockTargetType: TextBlock

Proporciona las propiedades comunes para todos los demás estilos contenedores de 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

Proporciona las propiedades comunes para todos los demás estilos contenedores de 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>

Nota:  Los estilos RichTextBlock no tienen todos los estilos de rampa de texto que tiene TextBlock, principalmente porque el modelo de objetos de documento basado en bloques de RichTextBlock permite establecer atributos con mayor facilidad en los elementos de texto individuales.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. Además, al establecer TextBlock.Text mediante la propiedad de contenido XAML se crea una situación en la que no hay ningún elemento de texto para el estilo y, por tanto, tendrías que aplicar estilo al contenedor.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. Esto no supone ningún problema para RichTextBlock, porque su contenido de texto siempre tiene que estar en elementos de texto específicos, como Paragraph, que es donde probablemente aplicarás los estilos XAML para el encabezado de página, el subtítulo de página y las definiciones de rampa de texto similares.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.

Varios estilos con nombreMiscellaneous Named styles

Existe un conjunto adicional de definiciones Style con clave que se puede usar para aplicar estilo a un elemento Button de forma diferente a su estilo implícito predeterminado.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

Aplicar este estilo para un elemento Button cuando necesites mostrar texto en el que un usuario pueda hacer clic para realizar una acción.Apply this style to a Button when you need to show text that a user can click to take action. Al texto se le aplica estilo con el color de énfasis actual para distinguirlo como interactivo y tiene rectángulos de foco que funcionan bien con texto.The text is styled using the current accent color to distinguish it as interactive and has focus rectangles that work well for text. A diferencia del estilo implícito de un elemento HyperlinkButton, TextBlockButtonStyle no subraya el texto.Unlike the implicit style of a HyperlinkButton, the TextBlockButtonStyle does not underline the text.

La plantilla también aplica estilo al texto presentado para usar SystemControlHyperlinkBaseMediumBrush (para el estado "PointerOver"), SystemControlHighlightBaseMediumLowBrush (para el estado "Pressed") y SystemControlDisabledBaseLowBrush (para el estado "Disabled").The template also styles the presented text to use SystemControlHyperlinkBaseMediumBrush (for "PointerOver" state), SystemControlHighlightBaseMediumLowBrush (for "Pressed" state) and SystemControlDisabledBaseLowBrush (for "Disabled" state).

Este es un elemento Button al que se le ha aplicado el recurso TextBlockButtonStyle.Here's a Button with the TextBlockButtonStyle resource applied to it.

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

Tiene esta apariencia:It looks like this:

Un botón al que se le aplica estilo para que tenga el aspecto de texto

TargetType: BotónTargetType: Button

Este elemento Style proporciona una plantilla completa para un elemento Button que puede ser el botón de retroceso en la navegación para una aplicación de navegación.This Style provides a complete template for a Button that can be the navigation back button for a navigation app. Las dimensiones predeterminadas son 40 x 40 píxeles.The default dimensions are 40 x 40 pixels. Para personalizar el estilo puedes establecer explícitamente Height, Width, FontSize y otras propiedades en tu elemento Button o crear un estilo derivado mediante 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.

Este es un elemento Button al que se ha aplicado el recurso NavigationBackButtonNormalStyle.Here's a Button with the NavigationBackButtonNormalStyle resource applied to it.

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

Tiene esta apariencia:It looks like this:

Un botón al que se le ha aplicado el estilo de botón de retroceso

TargetType: BotónTargetType: Button

Este elemento Style proporciona una plantilla completa para un elemento Button que puede ser el botón de retroceso en la navegación para una aplicación de navegación.This Style provides a complete template for a Button that can be the navigation back button for a navigation app. Es similar a NavigationBackButtonNormalStyle, pero con unas dimensiones de 30 x 30 píxeles.It's similar to NavigationBackButtonNormalStyle, but its dimensions are 30 x 30 pixels.

Este es un elemento Button al que se ha aplicado el recurso NavigationBackButtonSmallStyle.Here's a Button with the NavigationBackButtonSmallStyle resource applied to it.

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

Solución de recursos de temasTroubleshooting theme resources

Si no sigues las directrices para usar recursos de temas, es posible que veas un comportamiento inesperado en relación con los temas de tu aplicación.If you don’t follow the guidelines for using theme resources, you might see unexpected behavior related to themes in your app.

Por ejemplo, cuando abres un control flotante con temas claros, partes de la aplicación con temas oscuros también cambian como si estuvieran en el 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. O si navegas a una página con temas claros y, a continuación, retrocedes en la navegación, la página original con temas oscuros (o partes de él) ahora tienen una apariencia como si estuvieran en un 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, estos tipos de problemas se producen al proporcionar un tema "Predeterminado" y un tema "HighContrast" para admitir escenarios de contraste alto y, a continuación, usar ambos temas, "Light" y "Dark", en distintas partes de la aplicación.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 ejemplo, ten en cuenta esta definición del diccionario 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, esto parece correcto.Intuitively, this looks correct. Quieres cambiar el color señalado por myBrush cuando está en contraste alto, pero cuando no, te basas en la extensión de marcado {ThemeResource} para asegurarte de que myBrush apunte al color correcto para tu 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. Si la aplicación nunca tiene FrameworkElement.RequestedTheme establecido en elementos dentro de su árbol visual, esto normalmente funcionará según lo esperado.If your app never has FrameworkElement.RequestedTheme set on elements within its visual tree, this will typically work as expected. Sin embargo, te encuentras problemas en la aplicación en cuanto empiezas a cambiar el tema de distintas partes de tu árbol visual.However, you run into problems in your app as soon as you start to re-theme different parts of your visual tree.

El problema se produce porque los pinceles son recursos compartidos, a diferencia de la mayoría del resto de tipos XAML.The problem occurs because brushes are shared resources, unlike most other XAML types. Si tienes 2 elementos en subárboles XAML con distintos temas que hacen referencia al mismo recurso de pincel, entonces a medida que el marco recorre cada subárbol para actualizar sus expresiones de la extensión de marcado {ThemeResource}, los cambios que se producen en el recurso compartido de pincel se reflejan en el otro subárbol, que no es el resultado previsto.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 corregir esto, reemplaza el diccionario "Predeterminado" por diccionarios de temas independientes para los temas "Light" y "Dark" además 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>

Sin embargo, seguirán produciéndose problemas si se hace referencia a cualquiera de estos recursos en propiedades heredadas como Foreground.However, problems still occur if any of these resources are referenced in inherited properties like Foreground. La plantilla de control personalizado puede especificar el color de primer plano de un elemento usando la {extensión de marcado ThemeResource}, pero cuando el marco propaga el valor heredado a los elementos secundarios, proporciona una referencia directa al recurso que resuelve la expresión de la extensión de marcado {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. Esto provoca problemas cuando el marco procesa los cambios de tema a medida que recorre el árbol visual del control.This causes problems when the framework processes theme changes as it walks your control's visual tree. Vuelve a evaluar la expresión de la extensión de marcado {ThemeResource} para obtener un nuevo recurso de pincel, pero aún no propaga esta referencia a los elementos secundarios del control; esto sucede más adelante, por ejemplo durante el pase de medición siguiente.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.

Como resultado, después de recorrer el árbol visual del control en respuesta a un cambio de tema, el marco recorre los elementos secundarios y actualiza cualquier expresión de la extensión de marcado {ThemeResource} que se establezca en estos o en los objetos establecidos en sus propiedades.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. En este punto se produce el problema: el marco recorre el recurso de pincel y como especifica su color usando una extensión de marcado {ThemeResource}, se vuelve a evaluar.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.

En este punto, el marco parece haber contaminado el diccionario de temas porque ahora tiene un recurso de un diccionario que tiene el color establecido de otro diccionario.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 solucionar este problema, usa la extensión de marcado {StaticResource} en lugar de la extensión de marcado {ThemeResource}.To fix this problem, use the {StaticResource} markup extension instead of {ThemeResource} markup extension. Una vez aplicadas las directrices, los diccionarios de temas tienen este aspecto: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>

Observa que la extensión de marcado {ThemeResource} aún se usa en el diccionario "HighContrast" en lugar de la extensión de marcado {StaticResource}.Notice that the {ThemeResource} markup extension is still used in the "HighContrast" dictionary instead of {StaticResource} markup extension. Esta situación está incluida en la excepción descrita anteriormente en las directrices.This situation falls under the exception given earlier in the guidelines. La mayoría de los valores que se usan para el tema "HighContrast" emplean opciones de colores que están controladas por el sistema de manera global, pero que se exponen a XAML como un recurso con nombre especial (aquellos con el prefijo 'SystemColor' en el nombre).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). El sistema permite al usuario establecer los colores específicos que deben usarse para su configuración de contraste alto a través del Centro de accesibilidad.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. Estas opciones de color se aplican a los recursos con nombre especial.Those color choices are applied to the specially-named resources. El marco XAML también usa el mismo evento de tema cambiado para actualizar estos pinceles cuando detecta que han cambiado en el nivel del 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. Este es el motivo por el que se usa aquí la extensión de marcado {ThemeResource}.This is why the {ThemeResource} markup extension is used here.