ПалитраColor picker

Палитра используется для просмотра и выбора цвета.A color picker is used to browse through and select colors. По умолчанию она позволяет пользователю выбирать цвета из спектра или задать цвет в текстовых полях значений красного, зеленого и синего цветов формате RGB, значения насыщенности и оттенка (HSV) или значения цвета в шестнадцатеричном формате.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.

Палитра по умолчанию

Получение библиотеки пользовательского интерфейса WindowsGet the Windows UI Library

Логотип WinUI

Элемент управления ColorPicker является частью библиотеки пользовательского интерфейса Windows — пакета NuGet, который содержит новые элементы управления и компоненты пользовательского интерфейса для приложений для 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. Дополнительные сведения, включая инструкции по установке, см. в описании библиотеки пользовательского интерфейса Windows.For more info, including installation instructions, see Windows UI Library.

API-интерфейсы библиотеки пользовательского интерфейса Windows: класс ColorPicker, свойство Color, событие ColorChangedWindows UI Library APIs: ColorPicker class, Color property, ColorChanged event

API платформы: класс ColorPicker, свойство Color, событие ColorChangedPlatform APIs: ColorPicker class, Color property, ColorChanged event

Выбор правильного элемента управленияIs this the right control?

Палитра цветов используется, чтобы предоставить пользователю возможность выбора цвета в вашем приложении.Use the color picker to let a user select colors in your app. Например, используйте ее для изменения параметров цвета, таких как цвет шрифта, фона или цветов темы приложения.For example, use it to change color settings, such as font colors, background, or app theme colors.

Если ваше приложение для рисования или схожих задач использует перо, рассмотрите возможность использования элементов управления рукописным вводом вместе с палитрой.If your app is for drawing or similar tasks using pen, consider using Inking controls along with the color picker.

ПримерыExamples

XAML Controls GalleryXAML Controls Gallery
XAML controls gallery

Если у вас установлено приложение галереи элементов управления XAML, щелкните здесь, чтобы открыть приложение и увидеть ColorPicker в действии.If you have the XAML Controls Gallery app installed, click here to open the app and see the ColorPicker in action.

Создание палитрыCreate a color picker

В этом примере показано, как создать палитру по умолчанию на XAML.This example shows how to create a default color picker in XAML.

<ColorPicker x:Name="myColorPicker"/>

По умолчанию палитра отображает предварительное изображение выбранного цвета на прямоугольной панели рядом со спектром цветов.By default, the color picker shows a preview of the chosen color on the rectangular bar beside the color spectrum. Вы можете использовать событие ColorChanged или свойство Color для доступа к выбранному цвету и применения его в приложении.You can use either the ColorChanged event or the Color property to access the selected color and use it in your app. Ознакомьтесь со следующими примерами, чтобы изучить подробно описанный код.See the following examples for detailed code.

Привязка к выбранному цветуBind to the chosen color

Если выбранный цвет должен мгновенно вступить в действие, можно использовать привязку данных для привязки к свойству Color или обработать событие ColorChanged для обращения к выбранному цвету в коде.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.

В этом примере привязывается свойство Color элемента SolidColorBrush, используемое для заливки прямоугольной области напрямую выбранным на палитре цветом.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. Любые изменения на палитре в реальном времени изменяют связанное свойство.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>

В этом примере используется упрощенная палитра, содержащая только круг и ползунок. Это упрощенная палитра, используемая во многих приложениях для выбора цвета.This example uses a simplified color picker with just the circle and the slider, which is a common "casual" color picking experience. Когда изменение цвета можно увидеть и оно применяется к объекту в реальном времени, вам не нужно отображать панель просмотра цвета.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. В разделе Настройка палитры можно получить дополнительную информацию.See the Customize the color picker section for more info.

Сохранение выбранного цветаSave the chosen color

В некоторых случаях не требуется сразу применять изменение цвета.In some cases, you don't want to apply the color change immediately. Например, если палитра размещена во всплывающем элементе, мы рекомендуем применять выбранный цвет только после того, как пользователь подтвердит выбор или закроет этот всплывающий элемент.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. Вы также можете сохранить значение цвета для последующего использования.You can also save the selected color value to use later.

В этом примере палитра размещена во всплывающем элементе с кнопками "Confirm" (Подтвердить) и "Cancel" (Отменить).In this example, you host a color picker in a Flyout with Confirm and Cancel buttons. Когда пользователь подтверждает выбор цвета, можно сохранить выбранный цвет для использования в приложении.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();
}

Настройка палитрыConfigure the color picker

Не все поля нужны пользователю для выбора цвета, поэтому возможности палитры гибкие.Not all fields are necessary to let a user pick a color, so the color picker is flexible. Она предоставляет множество параметров, которые позволяют настроить этот элемент управления в соответствии со своими потребностями.It provides a variety of options that let you configure the control to fit your needs.

Если пользователю не нужна точность в выборе, например, чтобы выбрать цвет маркера в приложении для заметок, можно использовать упрощенный пользовательский интерфейс.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. Можно скрыть текстовые поля ввода и заменить спектр цветов кругом.You can hide the text entry fields and change the color spectrum to a circle.

Когда пользователю нужна точность в выборе, например, в приложении для графического дизайна, можно отобразить и ползунки, и текстовые поля для каждого аспекта цвета.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.

Отображение кругового спектраShow the circle spectrum

В этом примере показано, как использовать свойство ColorSpectrumShape, чтобы настроить палитру для отображения кругового спектра вместо квадратного спектра цветов по умолчанию.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"/>

Палитра с круговым спектром

Когда необходимо выбрать квадратный или круговой спектр цветов, основную роль в принятии решения играет точность.When you must choose between the square and circle color spectrum, a primary consideration is accuracy. Пользователь может точнее выбрать цвет на квадратном спектре, так как он отображает более широкую цветовую гамму.A user has more control when they select a specific color using a square because more of the color gamut is shown. Круговой спектр можно считать более простым средством выбора цвета.You should consider the circle spectrum as more of the "casual" color choosing experience.

Отображение альфа-каналаShow the alpha channel

В этом примере вы включаете ползунок непрозрачности и текстовое поле на палитре.In this example, you enable an opacity slider and textbox on the color picker.

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

Палитра с IsAlphaEnabled, для которого задано значение true

Отображение простой палитрыShow a simple picker

В этом примере показано, как настроить палитру с простым пользовательским интерфейсом для простых задач.This example shows how to configure the color picker with a simple UI for "casual" use. Вы отображаете круговой спектр и скрываете поля для ввода текста по умолчанию.You show the circular spectrum and hide the default text input boxes. Когда изменение цвета можно увидеть и оно применяется к объекту в реальном времени, вам не нужно отображать панель просмотра цвета.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. В противном случае не следует скрывать панель просмотра цвета.Otherwise, you should leave the color preview visible.

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

Простая палитра

Отображение или скрытие дополнительных компонентовShow or hide additional features

В этой таблице показаны все параметры, которые можно использовать для настройки элемента управления ColorPicker.This table shows all the options you can use to configure the ColorPicker control.

ФункцияFeature СвойстваProperties
Спектр цветовColor spectrum IsColorSpectrumVisible, ColorSpectrumShape, ColorSpectrumComponentsIsColorSpectrumVisible, ColorSpectrumShape, ColorSpectrumComponents
Просмотр цветаColor preview IsColorPreviewVisibleIsColorPreviewVisible
Значения цветаColor values IsColorSliderVisible, IsColorChannelTextInputVisibleIsColorSliderVisible, IsColorChannelTextInputVisible
Значения непрозрачностиOpacity values IsAlphaEnabled, IsAlphaSliderVisible, IsAlphaTextInputVisibleIsAlphaEnabled, IsAlphaSliderVisible, IsAlphaTextInputVisible
Шестнадцатеричные значенияHex values IsHexInputVisibleIsHexInputVisible

Примечание

Параметр IsAlphaEnabled должн иметь значение true для отображения текстового поля непрозрачности и ползунка.IsAlphaEnabled must be true in order to show the opacity textbox and slider. Видимость элементов управления для ввода можно изменять с помощью свойств IsAlphaTextInputVisible и IsAlphaSliderVisible.The visibility of the input controls can then be modified using IsAlphaTextInputVisible and IsAlphaSliderVisible properties. Дополнительные сведения см. в документации по API.See the API documentation for details.

Что следует и чего не следует делатьDo's and Don'ts

  • Подумайте о том, какие возможности выбора цвета подойдут для вашего приложения.Do think about what kind of color picking experience is appropriate for your app. Для некоторых сценариев может не требоваться точный выбор цвета и будет достаточно использовать упрощенную палитру.Some scenarios may not require granular color picking and would benefit from a simplified picker
  • Чтобы обеспечить наиболее точный выбор цвета, используйте квадратный спектр размером не менее 256x256 пикселей или включите текстовые поля ввода, позволив пользователям уточнить выбранный цвет.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.
  • Если для выбора цвета используется всплывающий элемент, касания спектра или перемещения ползунка должно быть недостаточно, чтобы зафиксировать выбор цвета.When used in a flyout, tapping in the spectrum or adjusting the slider alone should not commit the color selection. Реализуйте следующие возможности фиксации выбора.To commit the selection:
    • Предоставьте кнопки фиксации и отмены для применения или отмены выбора.Provide commit and cancel buttons to apply or cancel the selection. Нажатие кнопки "Назад" или касание вне всплывающего элемента должно закрывать его без сохранения выбора пользователя.Hitting the back button or tapping outside of the flyout will dismiss it, and not save the user's selection.
    • Можно также фиксировать выбор после закрытия всплывающего элемента, когда пользователь коснется области за его пределами или нажмет кнопку "Назад".Or, commit the selection upon dismissing the flyout, by either tapping outside of the flyout or hitting the back button.

Получение примера кодаGet the sample code