Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Las aplicaciones de Windows admiten temas claros y oscuros, y puedes personalizar cómo responde la aplicación a la preferencia de tema del usuario. En este artículo se explica cómo cambiar los temas, usar pinceles de tema, personalizar colores de énfasis y trabajar con la API de color.
Para obtener instrucciones de diseño sobre el uso eficaz del color, consulte Color en Windows.
Modificación del tema
Para modificar temas, cambia la propiedad RequestedTheme en el archivo App.xaml.
<Application
x:Class="App9.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App9"
RequestedTheme="Dark">
</Application>
Quitar la propiedad RequestedTheme significa que la aplicación usará la configuración del sistema del usuario.
Los usuarios también pueden seleccionar el tema de contraste alto, que usa una pequeña paleta de colores que contrastan entre sí, lo que facilita la visualización de la interfaz. En ese caso, el sistema invalidará tu RequestedTheme.
Temas de pruebas
Si no solicitas un tema para la aplicación, asegúrate de probarla tanto en temas claros como oscuros para garantizar que sea legible en todas las circunstancias.
Pinceles de temas
Los controles comunes usan automáticamente pinceles de temas para ajustar el contraste para temas claros y oscuros.
Por ejemplo, esta es una ilustración de cómo AutoSuggestBox usa pinceles de temas:
Usar pinceles del tema
Al crear plantillas para controles personalizados, usa pinceles de temas en lugar de valores de color codificados. De esta forma, tu aplicación se puede adaptar con facilidad a cualquier tema.
Por ejemplo, estas plantillas de elementos para ListView muestran cómo usar los pinceles de tema en una plantilla personalizada.
<ListView ItemsSource="{x:Bind ViewModel.Recordings}">
<ListView.ItemTemplate>
<DataTemplate x:Name="DoubleLineDataTemplate" x:DataType="local:Recording">
<StackPanel Orientation="Horizontal" Height="64" AutomationProperties.Name="{x:Bind CompositionName}">
<Ellipse Height="48" Width="48" VerticalAlignment="Center">
<Ellipse.Fill>
<ImageBrush ImageSource="Placeholder.png"/>
</Ellipse.Fill>
</Ellipse>
<StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="12,0,0,0">
<TextBlock Text="{x:Bind CompositionName}" Style="{ThemeResource BodyStrongTextBlockStyle}" Foreground="{ThemeResource TextFillColorPrimaryBrush}" />
<TextBlock Text="{x:Bind ArtistName}" Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource TextFillColorTertiaryBrush}"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Para obtener más información sobre cómo usar pinceles de temas en tu aplicación, consulta Recursos de temas.
Colores de realce
Los controles comunes usan un color de énfasis para transmitir información de estado. De manera predeterminada, el color de énfasis es el SystemAccentColor que los usuarios seleccionan en la configuración. A pesar de esto, también puedes personalizar el color de énfasis de tu aplicación para reflejar tu marca.
Reemplazar el color de énfasis
Para cambiar el color de énfasis de tu aplicación, coloca el siguiente código en app.xaml.
<Application.Resources>
<ResourceDictionary>
<Color x:Key="SystemAccentColor">#107C10</Color>
</ResourceDictionary>
</Application.Resources>
Elegir un color de énfasis
Si seleccionas un color de énfasis personalizado para tu aplicación, asegúrate de que el texto y los fondos que usan el color de énfasis tengan suficiente contraste para mejorar la legibilidad. Para probar el contraste, puedes usar la herramienta Selector de colores en la configuración de Windows, o bien emplear estas herramientas de contraste en línea.
Paleta de colores de acento
Un algoritmo de color de énfasis en el shell de Windows genera tonos claros y oscuros del color de énfasis.
Puedes acceder a estos tonos como recursos de temas:
SystemAccentColorLight3SystemAccentColorLight2SystemAccentColorLight1SystemAccentColorDark1SystemAccentColorDark2SystemAccentColorDark3
También puedes acceder a la paleta de colores de énfasis mediante programación con el método UISettings.GetColorValue y la enumeración UIColorType.
Es posible usar la paleta de colores de énfasis para los temas de color de la aplicación. A continuación se incluye un ejemplo de cómo se puede usar la paleta de colores de énfasis en un botón.
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemAccentColor}"/>
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemAccentColorLight1}"/>
<SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemAccentColorDark1}"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Page.Resources>
<Button Content="Button"></Button>
Cuando uses el texto con color en un fondo con color, asegúrate de que hay suficiente contraste entre el texto y el fondo. De manera predeterminada, el hipervínculo o el hipertexto usarán el color de énfasis. Si aplicas variaciones del color de énfasis al fondo, debes usar una variación del color de énfasis original para optimizar el contraste del texto con color en un fondo con color.
En el gráfico siguiente se muestra un ejemplo de los distintos tonos claros y oscuros del color de énfasis y de cómo se puede aplicar texto con color sobre una superficie coloreada.
Para obtener más información sobre los controles de estilos, consulta Estilos XAML.
API de color
Hay varias API que se pueden usar para agregar color a la aplicación. En primer lugar, la clase Colors, que implementa una gran lista de colores predefinidos. Se puede acceder automáticamente a estos con las propiedades XAML. En el siguiente ejemplo, creamos un botón y establecemos las propiedades de color de fondo y de primer plano en miembros de la clase Colors.
<Button Background="MediumSlateBlue" Foreground="White">Button text</Button>
Puedes crear tus propios colores a partir de valores hexadecimales o RGB con la estructura Color en XAML.
<Color x:Key="LightBlue">#FF36C0FF</Color>
También puedes crear el mismo color en código mediante el método FromArgb.
Color LightBlue = Color.FromArgb(255,54,192,255);
Windows::UI::Color LightBlue = Windows::UI::ColorHelper::FromArgb(255,54,192,255);
Las letras "Argb" significan "alfa (opacidad), rojo, verde y azul", que son los cuatro componentes de un color. Cada argumente puede oscilar entre 0 y 255. Puedes optar por omitir el primer valor, lo que dará una opacidad predeterminada de 255, o 100 % opaco.
Nota:
Si usas C++, debes crear colores mediante la clase ColorHelper.
El uso más habitual de Color es como argumento de un SolidColorBrush, que se puede usar para pintar elementos de la interfaz de usuario de un solo color sólido. Por lo general, estos pinceles se definen en una clase ResourceDictionary, de modo que puedan volver a usarse para varios elementos.
<ResourceDictionary>
<SolidColorBrush x:Key="ButtonBackgroundBrush" Color="#FFFF4F67"/>
<SolidColorBrush x:Key="ButtonForegroundBrush" Color="White"/>
</ResourceDictionary>
Para obtener más información sobre cómo usar pinceles, consulta Pinceles XAML.
Temas relacionados
Colaborar con nosotros en GitHub
El origen de este contenido se puede encontrar en GitHub, donde también puede crear y revisar problemas y solicitudes de incorporación de cambios. Para más información, consulte nuestra guía para colaboradores.
