Seletor de cores

Um seletor de cores é usado para navegar e selecionar cores. Por padrão, ele permite que um usuário navegue pelas cores em um espectro de cores ou especifique uma cor nas caixas de texto RGB (Red-Green-Blue), Hue-Saturation-Value (HSV) ou Hexadecimal.

Será este o controlo correto?

Use o seletor de cores para permitir que um usuário selecione cores em seu aplicativo. Por exemplo, use-o para alterar as configurações de cor, como cores de fonte, plano de fundo ou cores de tema do aplicativo.

Se o seu aplicativo for para desenhar ou tarefas semelhantes usando caneta, considere usar controles de tinta digital junto com o seletor de cores.

Recommendations

• Pense em que tipo de experiência de seleção de cores é apropriada para seu aplicativo. Alguns cenários podem não exigir a seleção granular de cores e se beneficiariam de um seletor simplificado
• Para obter a experiência de seleção de cores mais precisa, use o espectro quadrado e certifique-se de que ele seja pelo menos 256x256px, ou inclua os campos de entrada de texto para permitir que os usuários refinem a cor selecionada.
• Quando usado em um menu flutuante, tocar no espectro ou ajustar o controle deslizante sozinho não deve confirmar a seleção de cores. Para confirmar a seleção:
  • Forneça os botões de confirmação e cancelamento para aplicar ou cancelar a seleção. Pressionar o botão voltar ou tocar fora do menu exibido fará com que ele seja fechado, sem salvar a seleção do usuário.
  • Ou confirme a seleção ao fechar o flyout, tocando no exterior do flyout ou pressionando o botão voltar.

Criar um seletor de cores

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

Este exemplo mostra como criar um seletor de cores padrão em XAML.

<ColorPicker x:Name="myColorPicker"/>

Por padrão, o seletor de cores mostra uma visualização da cor escolhida na barra retangular ao lado do espectro de cores. Você pode usar o evento ColorChanged ou a propriedade Color para acessar a cor selecionada e usá-la em seu aplicativo. Consulte os exemplos a seguir para obter código detalhado.

Vincular à cor escolhida

Quando a seleção de cores deve entrar em vigor imediatamente, você pode usar databinding para vincular à propriedade Color ou manipular o evento ColorChanged para acessar a cor selecionada em seu código.

Neste exemplo, vincula-se a propriedade Cor de um SolidColorBrush, que é usado como preenchimento para um retângulo, diretamente à cor selecionada no seletor de cores. Qualquer alteração no seletor de cores resulta numa alteração em tempo real na propriedade associada.

<ColorPicker x:Name="myColorPicker"
             ColorSpectrumShape="Ring"
             IsColorPreviewVisible="False"
             IsColorChannelTextInputVisible="False"
             IsHexInputVisible="False"/>

<Rectangle Height="50" Width="50">
    <Rectangle.Fill>
        <SolidColorBrush Color="{x:Bind myColorPicker.Color, Mode=OneWay}"/>
    </Rectangle.Fill>
</Rectangle>

Este exemplo usa um seletor de cores simplificado apenas com o círculo e o controle deslizante, que é uma experiência comum de seleção de cores "casual". Quando a alteração de cor pode ser vista e acontece em tempo real no objeto afetado, você não precisa mostrar a barra de visualização de cores. Consulte a seção Personalizar o seletor de cores para obter mais informações.

Salve a cor escolhida

Em alguns casos, você não deseja aplicar a mudança de cor imediatamente. Por exemplo, quando você hospeda um seletor de cores em um submenu, recomendamos que você aplique a cor selecionada somente depois que o usuário confirmar a seleção ou fechar o submenu. Você também pode salvar o valor de cor selecionado para usar mais tarde.

Neste exemplo, coloca um seletor de cores numa janela flutuante com os botões Confirmar e Cancelar. Quando o usuário confirma sua escolha de cor, você salva a cor selecionada para usar posteriormente em seu aplicativo.

<Page.Resources>
    <Flyout x:Key="myColorPickerFlyout">
        <RelativePanel>
            <ColorPicker x:Name="myColorPicker"
                         IsColorChannelTextInputVisible="False"
                         IsHexInputVisible="False"/>

            <Grid RelativePanel.Below="myColorPicker"
                  RelativePanel.AlignLeftWithPanel="True"
                  RelativePanel.AlignRightWithPanel="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Button Content="OK" Click="confirmColor_Click"
                        Margin="0,12,2,0" HorizontalAlignment="Stretch"/>
                <Button Content="Cancel" Click="cancelColor_Click"
                        Margin="2,12,0,0" HorizontalAlignment="Stretch"
                        Grid.Column="1"/>
            </Grid>
        </RelativePanel>
    </Flyout>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button x:Name="colorPickerButton"
            Content="Pick a color"
            Flyout="{StaticResource myColorPickerFlyout}"/>
</Grid>

private Color myColor;

private void confirmColor_Click(object sender, RoutedEventArgs e)
{
    // Assign the selected color to a variable to use outside the popup.
    myColor = myColorPicker.Color;

    // Close the Flyout.
    colorPickerButton.Flyout.Hide();
}

private void cancelColor_Click(object sender, RoutedEventArgs e)
{
    // Close the Flyout.
    colorPickerButton.Flyout.Hide();
}

Configurar o seletor de cores

Nem todos os campos são necessários para permitir que um usuário escolha uma cor, portanto, o seletor de cores é flexível. Ele fornece uma variedade de opções que permitem configurar o controle para atender às suas necessidades.

Por exemplo, quando o usuário não precisa de controle preciso, como escolher uma cor de marcador em um aplicativo de anotações, você pode usar uma interface do usuário simplificada. Você pode ocultar os campos de entrada de texto e alterar o espectro de cores para um círculo.

Quando o usuário precisa de controle preciso, como em um aplicativo de design gráfico, você pode mostrar controles deslizantes e campos de entrada de texto para cada aspeto da cor.

Mostrar o espectro do círculo

Este exemplo mostra como usar a propriedade ColorSpectrumShape para configurar o seletor de cores para usar um espectro circular em vez do quadrado padrão.

<ColorPicker x:Name="myColorPicker"
             ColorSpectrumShape="Ring"/>

Quando você deve escolher entre o espectro de cores quadrado e circular, uma consideração principal é a precisão. Um usuário tem mais controle quando seleciona uma cor específica usando um quadrado porque mais da gama de cores é mostrada. Você deve considerar o espectro circular como uma experiência mais casual na escolha de cores.

Mostrar o canal alfa

Neste exemplo, você habilita um controle deslizante de opacidade e uma caixa de texto no seletor de cores.

<ColorPicker x:Name="myColorPicker"
             IsAlphaEnabled="True"/>

Mostrar um seletor simples

Este exemplo mostra como configurar o seletor de cores com uma interface do usuário simples para uso "casual". Você mostra o espectro circular e oculta as caixas de entrada de texto padrão. Quando a alteração de cor pode ser vista e acontece em tempo real no objeto afetado, você não precisa mostrar a barra de visualização de cores. Caso contrário, deves deixar a visualização de cores visível.

<ColorPicker x:Name="myColorPicker"
             ColorSpectrumShape="Ring"
             IsColorPreviewVisible="False"
             IsColorChannelTextInputVisible="False"
             IsHexInputVisible="False"/>

Especificar a direção do layout

Use a propriedade Orientation para especificar se o ColorPicker deve ser alinhado vertical ou horizontalmente. Isso afeta o local dos controles de edição em relação ao espectro de cores. Por padrão, a orientação é Vertical.

<ColorPicker IsAlphaEnabled="True" 
             Orientation="Horizontal"/>

Mostrar ou ocultar recursos adicionais

Esta tabela mostra todas as opções que você pode usar para configurar o controle ColorPicker.

UWP e WinUI 2

O controle ColorPicker para aplicativos UWP está incluído como parte da WinUI 2. Para obter mais informações, incluindo instruções de instalação, consulte WinUI 2. As APIs para esse controle existem nos namespaces Windows.UI.Xaml.Controls e Microsoft.UI.Xaml.Controls .

Recomendamos usar a WinUI 2 mais recente para obter os estilos, modelos e recursos mais atuais para todos os controles. WinUI 2.2 ou posterior inclui um novo modelo para este controle que usa cantos arredondados. Consulte Raio de cantopara obter mais informações.

Para usar o código neste artigo com WinUI 2, use um alias em XAML (usamos muxc) para representar as APIs da Biblioteca da Interface do Usuário do Windows incluídas em seu projeto. Consulte Introdução ao WinUI 2 para obter mais informações.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:ColorPicker />

Artigos relacionados

• Interações com caneta e estilete em aplicativos do Windows
• Entintamento