Cor no Windows

O Windows emprega cores para ajudar os usuários a se concentrarem em suas tarefas, indicando uma hierarquia visual e uma estrutura entre os elementos da interface do usuário. A cor é apropriada ao contexto e usada para fornecer uma base calmante, melhorando sutilmente as interações do usuário e enfatizando itens significativos apenas quando necessário.

Modos de cor

O Windows suporta dois modos de cor ou temas: claro e escuro. Cada modo consiste em um conjunto de valores de cor neutra que são ajustados automaticamente para garantir o contraste ideal.

Nos modos de cores claro e escuro, cores mais escuras indicam superfícies de fundo de menor importância. Superfícies importantes são destacadas com cores mais claras e brilhantes. Consulte camadas e elevação para obter mais informações.

Cor de destaque

A cor de destaque é usada para enfatizar elementos importantes na interface do usuário e para indicar o estado de um objeto ou controle interativo. Os valores de cor de destaque são gerados automaticamente e otimizados para contraste nos modos claro e escuro. As cores de destaque são usadas com moderação para destacar elementos importantes e transmitir informações sobre o estado de um elemento interativo.

Exemplos

O aplicativo WinUI 3 Gallery inclui exemplos interativos da maioria dos controles, recursos e funcionalidades do WinUI 3. Obtenha o aplicativo no da Microsoft Store ou obtenha o código-fonte em do GitHub

Cor em aplicações do Windows

O Color fornece uma maneira intuitiva de comunicar informações aos usuários em seu aplicativo: ele pode ser usado para indicar interatividade, dar feedback às ações do usuário e dar à sua interface uma sensação de continuidade visual.

Nos aplicativos do Windows, as cores são determinadas principalmente pela cor de destaque e pelo tema. Neste artigo, discutiremos como você pode usar cores em seu aplicativo e como usar cores de destaque e recursos de tema para tornar seu aplicativo do Windows utilizável em qualquer contexto de tema.

Princípios de cor

Temas

Os aplicativos do Windows podem usar um tema de aplicativo claro ou escuro. O tema afeta as cores do plano de fundo, texto, ícones e controles comuns do aplicativo.

Tema Luz

Tema escuro

Por padrão, o tema do seu aplicativo do Windows é a preferência de tema do usuário nas Configurações do Windows ou no tema padrão do dispositivo. No entanto, você pode definir o tema especificamente para seu aplicativo do Windows.

Alterar o tema

Você pode alterar temas alterando a propriedade RequestedTheme em seu App.xaml arquivo.

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

Remover a propriedade RequestedTheme significa que a aplicação usará as configurações do sistema do utilizador.

Os usuários também podem selecionar o tema de alto contraste, que usa uma pequena paleta de cores contrastantes que torna a interface mais fácil de ver. Nesse caso, o sistema substituirá o seu RequestedTheme.

Temas de teste

Se você não solicitar um tema para seu aplicativo, certifique-se de testar seu aplicativo em temas claros e escuros para garantir que seu aplicativo seja legível em todas as condições.

Pincéis temáticos

Os controles comuns usam automaticamente pincéis de tema para ajustar o contraste para temas claros e escuros.

Por exemplo, aqui está uma ilustração de como a AutoSuggestBox usa pincéis de tema:

Uso de pincéis temáticos

<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 obter mais informações sobre como usar pincéis de tema em seu aplicativo, consulte Recursos de tema.

Cores de destaque

Os controles comuns usam uma cor de destaque para transmitir informações de estado. Por padrão, a cor de destaque é a SystemAccentColor que os usuários selecionam em suas configurações. No entanto, você também pode personalizar a cor de destaque do seu aplicativo para refletir sua marca.

Substituindo a cor de destaque

Para alterar a cor de destaque do seu aplicativo, coloque o seguinte código em app.xaml.

<Application.Resources>
    <ResourceDictionary>
        <Color x:Key="SystemAccentColor">#107C10</Color>
    </ResourceDictionary>
</Application.Resources>

Escolher uma cor de destaque

Se você selecionar uma cor de destaque personalizada para seu aplicativo, certifique-se de que o texto e os planos de fundo que usam a cor de destaque tenham contraste suficiente para uma legibilidade ideal. Para testar o contraste, pode utilizar a ferramenta de seleção de cores nas Definições do Windows ou pode utilizar estas ferramentas de contraste online.

Paleta de cores de destaque

Um algoritmo de cor de destaque no shell do Windows gera tons claros e escuros da cor de destaque.

Esses tons podem ser acessados como recursos temáticos :

• SystemAccentColorLight3
• SystemAccentColorLight2
• SystemAccentColorLight1
• SystemAccentColorDark1
• SystemAccentColorDark2
• SystemAccentColorDark3

Você também pode acessar a paleta de cores de destaque programaticamente com o método UISettings.GetColorValue e UIColorType enum.

Você pode usar a paleta de cores de destaque para temas de cores em seu aplicativo. Abaixo está um exemplo de como você pode usar a paleta de cores de destaque em um botão.

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

Ao usar texto colorido em um plano de fundo colorido, verifique se há contraste suficiente entre texto e plano de fundo. Por padrão, hiperlink ou hipertexto usará a cor de destaque. Se você aplicar variações da cor de destaque ao plano de fundo, deverá usar uma variação da cor de destaque original para otimizar o contraste do texto colorido em um plano de fundo colorido.

O diagrama abaixo ilustra um exemplo dos vários tons claros/escuros de cor de destaque e como o texto colorido pode ser aplicado numa superfície colorida.

Para obter mais informações sobre como estilizar controles, consulte estilos XAML.

API de cores

Existem várias APIs que podem ser usadas para adicionar cor ao seu aplicativo. Primeiro, o Cores classe, que implementa uma grande lista de cores predefinidas. Eles podem ser acessados automaticamente com propriedades XAML. No exemplo abaixo, criamos um botão e definimos as propriedades de cores de fundo e de primeiro plano como membros da Cores classe.

<Button Background="MediumSlateBlue" Foreground="White">Button text</Button>

Você pode criar suas próprias cores a partir de valores RGB ou hexadecimais usando a estrutura Color em XAML.

<Color x:Key="LightBlue">#FF36C0FF</Color>

Você também pode criar a mesma cor no código usando o método FromArgb.

Color LightBlue = Color.FromArgb(255,54,192,255);

Windows::UI::Color LightBlue = Windows::UI::ColorHelper::FromArgb(255,54,192,255);

As letras "Argb" significam Alpha (opacidade), Vermelho, Verde e Azul, que são os quatro componentes de uma cor. Cada argumento pode variar de 0 a 255. Você pode optar por omitir o primeiro valor, o que lhe dará uma opacidade padrão de 255 ou 100% opaco.

O uso mais comum para um Color é como argumento para um SolidColorBrush, que pode ser usado para pintar elementos da interface de utilizador numa única cor sólida. Esses pincéis geralmente são definidos num ResourceDictionary, para que possam ser reutilizados para vários elementos.

<ResourceDictionary>
    <SolidColorBrush x:Key="ButtonBackgroundBrush" Color="#FFFF4F67"/>
    <SolidColorBrush x:Key="ButtonForegroundBrush" Color="White"/>
</ResourceDictionary>

Para obter mais informações sobre como usar pincéis, consulte pincéis XAML.

Usabilidade

Relacionado

• Estilos XAML
• Recursos de tema XAML
• WinUI 3 Galeria - Cores