Selector de coloresColor picker

Un selector de colores se usa para explorar y seleccionar colores.A color picker is used to browse through and select colors. De manera predeterminada, permite a un usuario navegar por los colores en un espectro de colores o especificar un color en los cuadros de texto rojo, verde y azul (RGB), valor de matiz-saturación (HSV) o hexadecimal.By default, it lets a user navigate through colors on a color spectrum, or specify a color in either Red-Green-Blue (RGB), Hue-Saturation-Value (HSV), or Hexadecimal textboxes.

Selector de colores predeterminado

Obtención de la biblioteca de la interfaz de usuario de WindowsGet the Windows UI Library

Logotipo de WinUI

El control ColorPicker se incluye como parte de la biblioteca de interfaz de usuario de Windows, un paquete NuGet que contiene nuevos controles y características de interfaz de usuario destinados a aplicaciones de Windows.The ColorPicker control is included as part of the Windows UI Library, a NuGet package that contains new controls and UI features for Windows apps. Para obtener más información e instrucciones sobre la instalación, consulta el artículo Windows UI Library (Biblioteca de interfaz de usuario de Windows).For more info, including installation instructions, see Windows UI Library.

API de la biblioteca de interfaz de usuario de Windows: Clase ColorPicker, propiedad Color, evento ColorChangedWindows UI Library APIs: ColorPicker class, Color property, ColorChanged event

API de plataforma: Clase ColorPicker, propiedad Color, evento ColorChangedPlatform APIs: ColorPicker class, Color property, ColorChanged event

¿Es este el control adecuado?Is this the right control?

Usa el selector de colores para permitir que un usuario seleccione colores en tu aplicación.Use the color picker to let a user select colors in your app. Por ejemplo, úsalo para cambiar la configuración de color, como los colores de fuente, el fondo o los colores del tema de la aplicación.For example, use it to change color settings, such as font colors, background, or app theme colors.

Si tu aplicación está pensada para dibujar o realizar tareas similares con el lápiz, considera la posibilidad de usar controles de entrada manuscrita junto con el selector de colores.If your app is for drawing or similar tasks using pen, consider using Inking controls along with the color picker.

EjemplosExamples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

Si tienes instalada la aplicación XAML Controls Gallery, haz clic aquí para abrir la aplicación y ver ColorPicker en acción.If you have the XAML Controls Gallery app installed, click here to open the app and see the ColorPicker in action.

Crear un selector de coloresCreate a color picker

En este ejemplo se muestra cómo crear un selector de colores predeterminado en XAML.This example shows how to create a default color picker in XAML.

<ColorPicker x:Name="myColorPicker"/>

De manera predeterminada, el selector de colores muestra una vista previa del color seleccionado en la barra rectangular que se encuentra junto al espectro de colores.By default, the color picker shows a preview of the chosen color on the rectangular bar beside the color spectrum. Puedes usar el evento ColorChanged o la propiedad Color para acceder al color seleccionado y usarlo en tu aplicación.You can use either the ColorChanged event or the Color property to access the selected color and use it in your app. Consulta los siguientes ejemplos de código detallado.See the following examples for detailed code.

Enlazar al color elegidoBind to the chosen color

Cuando la selección de colores debe surtir efecto inmediatamente, puedes usar el enlace de datos para enlazar a la propiedad Color o controlar el evento ColorChanged para acceder al color seleccionado en el código.When the color selection should take effect immediately, you can either use databinding to bind to the Color property, or handle the ColorChanged event to access the selected color in your code.

En este ejemplo, enlazas la propiedad Color de SolidColorBrush que se usa como el relleno de un rectángulo directamente al color seleccionado en el selector de colores.In this example, you bind the Color property of a SolidColorBrush that's used as the Fill for a Rectangle directly to the color picker's selected color. Cualquier cambio en el selector de colores produce un cambio dinámico en la propiedad enlazada.Any change to the color picker results in a live change to the bound property.

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

En este ejemplo se usa un selector de colores simplificado únicamente con el círculo y el control deslizante, lo cual es una experiencia de selección de color informal habitual.This example uses a simplified color picker with just the circle and the slider, which is a common "casual" color picking experience. Cuando se puede ver el cambio del color y se produce en tiempo real en el objeto afectado, no necesitas mostrar la barra de vista previa de color.When the color change can be seen and happens in real-time on the affected object, you don't need to show the color preview bar. Consulta la sección Personalizar el selector de colores para obtener más información.See the Customize the color picker section for more info.

Guardar el color elegidoSave the chosen color

En algunos casos, no te interesa aplicar el cambio de color inmediatamente.In some cases, you don't want to apply the color change immediately. Por ejemplo, cuando hospedes un selector de colores en un control flotante, te recomendamos que apliques el color seleccionado únicamente después de que el usuario confirme la selección o cierre el control flotante.For example, when you host a color picker in a flyout, we recomend that you apply the selected color only after the user confirms the selection or closes the flyout. También puedes guardar el valor del color seleccionado para usarlo más adelante.You can also save the selected color value to use later.

En este ejemplo, hospedas un selector de colores en un control flotante con botones Confirmar y Cancelar.In this example, you host a color picker in a Flyout with Confirm and Cancel buttons. Cuando el usuario confirma su elección del color, puedes guardar el color seleccionado para usarlo más adelante en la aplicación.When the user confirms their color choice, you save the selected color to use later in your app.

<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 el selector de coloresConfigure the color picker

No todos los campos son necesarios para permitir a un usuario seleccionar un color, por lo que el selector de colores es flexible.Not all fields are necessary to let a user pick a color, so the color picker is flexible. Proporciona una variedad de opciones que te permiten configurar el control según tus necesidades.It provides a variety of options that let you configure the control to fit your needs.

Por ejemplo, cuando el usuario no necesita un control preciso, como seleccionar un color de marcador de resaltado en una aplicación de toma de notas, puedes usar una interfaz de usuario simplificada.For example, when the user doesn't need precise control, like picking a highlighter color in a note taking app, you can use a simplified UI. Puedes ocultar los campos de entrada de texto y cambiar el espectro de colores a un círculo.You can hide the text entry fields and change the color spectrum to a circle.

Cuando el usuario necesita un control preciso, como en una aplicación de diseño gráfico, puedes mostrar controles deslizantes y campos de entrada de texto para todos los aspectos del color.When the user does need precise control, like in a graphic design app, you can show both sliders and text entry fields for each aspect of the color.

Mostrar el espectro de círculoShow the circle spectrum

En este ejemplo se muestra cómo usar la propiedad ColorSpectrumShape para configurar el selector de colores con el fin de usar un espectro circular en lugar del cuadrado predeterminado.This example shows how to use the ColorSpectrumShape property to configure the color picker to use a circular spectrum instead of the default square.

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

Selector de colores con un espectro de círculo

Cuando se deba elegir entre el espectro de colores de cuadrado y círculo, la precisión será una cuestión principal que se deberá tener en cuenta.When you must choose between the square and circle color spectrum, a primary consideration is accuracy. Un usuario tiene un mayor control cuando selecciona un color específico con un cuadrado, ya que se muestra más de la gama de colores.A user has more control when they select a specific color using a square because more of the color gamut is shown. Debes considerar el espectro de círculo una parte más de la experiencia de elección de color informal.You should consider the circle spectrum as more of the "casual" color choosing experience.

Mostrar el canal alfaShow the alpha channel

En este ejemplo, habilitas un control deslizante de opacidad y un cuadro de texto en el selector de colores.In this example, you enable an opacity slider and textbox on the color picker.

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

Selector de colores con IsAlphaEnabled establecido en true

Mostrar un selector sencilloShow a simple picker

En este ejemplo se muestra cómo configurar el selector de colores con una interfaz de usuario sencilla para su uso informal.This example shows how to configure the color picker with a simple UI for "casual" use. Muestras el espectro circular y ocultas los cuadros de entrada de texto predeterminados.You show the circular spectrum and hide the default text input boxes. Cuando se puede ver el cambio del color y se produce en tiempo real en el objeto afectado, no necesitas mostrar la barra de vista previa de color.When the color change can be seen and happens in real-time on the affected object, you don't need to show the color preview bar. De lo contrario, debes dejar visible la vista previa del color.Otherwise, you should leave the color preview visible.

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

Selector de colores sencillo

Mostrar u ocultar características adicionalesShow or hide additional features

En esta tabla se muestran todas las opciones que puedes usar para configurar el control ColorPicker.This table shows all the options you can use to configure the ColorPicker control.

CaracterísticaFeature PropiedadesProperties
Espectro de coloresColor spectrum IsColorSpectrumVisible, ColorSpectrumShape, ColorSpectrumComponentsIsColorSpectrumVisible, ColorSpectrumShape, ColorSpectrumComponents
Vista previa del colorColor preview IsColorPreviewVisibleIsColorPreviewVisible
Valores de colorColor values IsColorSliderVisible, IsColorChannelTextInputVisibleIsColorSliderVisible, IsColorChannelTextInputVisible
Valores de opacidadOpacity values IsAlphaEnabled, IsAlphaSliderVisible, IsAlphaTextInputVisibleIsAlphaEnabled, IsAlphaSliderVisible, IsAlphaTextInputVisible
Valores hexadecimalesHex values IsHexInputVisibleIsHexInputVisible

Nota

IsAlphaEnabled debe ser true para mostrar el control deslizante y el cuadro de texto de opacidad.IsAlphaEnabled must be true in order to show the opacity textbox and slider. La visibilidad de los controles de entrada se puede modificar después con las propiedades IsAlphaTextInputVisible e IsAlphaSliderVisible.The visibility of the input controls can then be modified using IsAlphaTextInputVisible and IsAlphaSliderVisible properties. Consulta la documentación sobre API para obtener más información.See the API documentation for details.

Cosas que hacer y cosas que evitarDo's and Don'ts

  • Piensa en qué tipo de experiencia de selección de colores es adecuada para tu aplicación.Do think about what kind of color picking experience is appropriate for your app. Es posible que algunos escenarios no requieran la selección de colores detallada y que se beneficien de un selector simplificado.Some scenarios may not require granular color picking and would benefit from a simplified picker
  • Para lograr la experiencia de selección de colores más precisa, usa el espectro de cuadrado y asegúrate de que el tamaño es de al menos 256 x 256 píxeles, o incluye los campos de entrada de texto para permitir que los usuarios ajusten el color seleccionado.For the most accurate color picking experience, use the square spectrum and ensure it is at least 256x256px, or include the text input fields to let users refine their selected color.
  • Cuando se usa en un control flotante, la acción de pulsar en el espectro o ajustar solo el control deslizante no debe confirmar la selección de colores.When used in a flyout, tapping in the spectrum or adjusting the slider alone should not commit the color selection. Para confirmar la selección:To commit the selection:
    • Proporciona botones de confirmar y cancelar para aplicar o cancelar la selección.Provide commit and cancel buttons to apply or cancel the selection. Se descartará al presionar el botón Atrás o pulsar fuera del control flotante, y no se guardará la selección del usuario.Hitting the back button or tapping outside of the flyout will dismiss it, and not save the user's selection.
    • También se puede confirmar la selección tras descartar el control flotante al pulsar fuera del control flotante o al presionar el botón Atrás.Or, commit the selection upon dismissing the flyout, by either tapping outside of the flyout or hitting the back button.

Obtención del código de ejemploGet the sample code