Цветоподборщик

Статья
02/26/2025

Инструмент выбора цвета используется для просмотра и выбора цветов. По умолчанию он позволяет пользователю перемещаться по цветам в цветовом спектре или указывать цвет в текстовых полях Red-Green-Blue (RGB), Hue-Saturation-Value (HSV) или шестнадцатеричных текстовых полях.

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

Это правильный элемент управления?

Палитра цветов используется, чтобы предоставить пользователю возможность выбора цвета в вашем приложении. Например, используйте ее для изменения параметров цвета, таких как цвет шрифта, фона или цветов темы приложения.

Если ваше приложение предназначено для рисования или схожих задач с использованием пера, рассмотрите возможность использования элементов управления рукописным вводом вместе с инструментом выбора цвета.

Создать инструмент выбора цвета

Важные API:класс ColorPicker, свойство Color, событие ColorChanged

Откройте приложение коллекции WinUI 3 и просмотрите ColorPicker в действии

Приложение WinUI 3 Gallery включает интерактивные примеры большинства контролов, функционала и возможностей WinUI 3. Получение приложения из Microsoft Store или получение исходного кода на GitHub

В этом примере показано, как создать колорпикер по умолчанию в XAML.

<ColorPicker x:Name="myColorPicker"/>

По умолчанию выбор цвета отображает предварительный просмотр выбранного цвета на прямоугольной панели рядом со спектром цветов. Вы можете использовать событие ColorChanged или свойство Color для доступа к выбранному цвету и применения его в приложении. Ознакомьтесь со следующими примерами, чтобы изучить подробно описанный код.

Привязка к выбранному цвету

Если выбранный цвет должен мгновенно вступить в действие, можно использовать привязку данных для привязки к свойству Color или обработать событие ColorChanged для обращения к выбранному цвету в коде.

В этом примере вы привязываете свойство Color элемента SolidColorBrush, используемого в качестве заливки для прямоугольника, напрямую к цвету, выбранному в палитре. Любое изменение в выборе цвета приводит к немедленному изменению связанного свойства.

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

В этом примере используется упрощенная палитра, содержащая только круг и ползунок, что является типичным "неформальным" способом выбора цвета. Когда изменение цвета можно увидеть и оно применяется к объекту в реальном времени, вам не нужно отображать панель просмотра цвета. В разделе Настройка палитры можно получить дополнительную информацию.

Сохранение выбранного цвета

В некоторых случаях не требуется сразу применять изменение цвета. Например, при размещении средства выбора цветов во всплывающем элементе рекомендуется применить выбранный цвет только после того, как пользователь подтвердит выделение или закрывает всплывающий элемент. Вы также можете сохранить значение цвета для последующего использования.

В этом примере элемент выбора цвета размещён во всплывающем окне с кнопками "Подтвердить" и "Отменить". Когда пользователь подтверждает выбор цвета, можно сохранить выбранный цвет для использования в приложении.

<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();
}

Настройка выбора цвета

Не все поля нужны пользователю для выбора цвета, поэтому возможности палитры гибкие. Она предоставляет множество параметров, которые позволяют настроить этот элемент управления в соответствии со своими потребностями.

Если пользователю не нужна точность в выборе, например, чтобы выбрать цвет маркера в приложении для заметок, можно использовать упрощенный пользовательский интерфейс. Можно скрыть текстовые поля ввода и заменить спектр цветов кругом.

Когда пользователю нужна точность в выборе, например, в приложении для графического дизайна, можно отобразить и ползунки, и текстовые поля для каждого аспекта цвета.

Покажите круговой спектр

В этом примере показано, как использовать свойство ColorSpectrumShape, чтобы настроить палитру цветов для отображения кругового спектра вместо квадратного, который используется по умолчанию.

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

Инструмент выбора цвета с круговым спектром

Когда необходимо выбрать квадратный или круговой спектр цветов, основную роль в принятии решения играет точность. Пользователь имеет больше контроля, когда выбирает определенный цвет, используя квадраты, поскольку отображается более широкая цветовая гамма. Круговой спектр следует рассматривать как более "неформальный" опыт выбора цвета.

Отображение альфа-канала

В этом примере вы включаете ползунок непрозрачности и текстовое поле на палитре.

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

Инструмент выбора цвета с включенным альфа-каналом

Показать простой выборщик

В этом примере показано, как настроить инструмент выбора цвета с простым пользовательским интерфейсом для повседневного использования. Вы отображаете круговой спектр и скрываете поля для ввода текста по умолчанию. Когда изменение цвета можно увидеть и оно применяется к объекту в реальном времени, вам не нужно отображать панель просмотра цвета. В противном случае следует оставить предпросмотр цвета видимым.

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

Простой инструмент для выбора цвета

Задайте направление макета

Используйте свойство Orientation, чтобы указать, должен ли ColorPicker располагаться вертикально или горизонтально. Это влияет на расположение элементов управления редактированием относительно цветового спектра. По умолчанию ориентация — вертикальная.

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

Средство выбора цвета в горизонтальной ориентации

Примечание.

Если для параметра "Ориентация" задано значение "Горизонтально", свойство ColorPicker не применяет свойство IsMoreButtonVisible .

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

В этой таблице показаны все параметры, которые можно использовать для настройки элемента управления ColorPicker.

Функция	Свойства
Спектр цветов	IsColorSpectrumVisible, ColorSpectrumShape, ColorSpectrumComponents
Просмотр цвета	IsColorPreviewVisible
Значения цвета	IsColorSliderVisible, IsColorChannelTextInputVisible
Значения непрозрачности	IsAlphaEnabled, ВидимостьПолзункаАльфы, ВидимостьТекстовогоВводаАльфы
Шестнадцатеричные значения	IsHexInputVisible

Примечание.

Параметр IsAlphaEnabled должн иметь значение true для отображения текстового поля непрозрачности и ползунка. Видимость элементов управления для ввода можно изменять с помощью свойств IsAlphaTextInputVisible и IsAlphaSliderVisible. Дополнительные сведения см. в документации по API.

UWP и WinUI 2

Внимание

Сведения и примеры в этой статье оптимизированы для приложений, использующих пакет SDK для приложений Windows и WinUI 3, но обычно применимы к приложениям UWP, использующим WinUI 2. См. справочник по API UWP для конкретных сведений и примеров платформы.

В этом разделе содержатся сведения, необходимые для использования элемента управления в приложении UWP или WinUI 2.

Элемент управления ColorPicker для приложений UWP включен в состав WinUI 2. Дополнительные сведения, включая инструкции по установке, см. в статье WinUI 2. API для этого элемента управления существуют как в пространствах имен Windows.UI.Xaml.Controls, так и в пространствах имен Microsoft.UI.Xaml.Controls .

API UWP:класс ColorPicker, свойство Color, событие ColorChanged
WinUI 2 API:класс ColorPicker, свойство Color, событие ColorChanged
Откройте приложение коллекции WinUI 2 и просмотрите ColorPicker в действии. Приложения из коллекции WinUI 2 включают интерактивные примеры большинства элементов управления, возможностей и функций WinUI 2. Получите приложение из Microsoft Store или получите исходный код в GitHub.

Мы рекомендуем использовать последнюю версию WinUI 2 , чтобы получить самые актуальные стили, шаблоны и функции для всех элементов управления. WinUI 2.2 или более поздней версии содержит новый шаблон для этого элемента управления, использующего округленные углы. Дополнительные сведения см. в разделе о радиусе угла.

Чтобы использовать код в этой статье с WinUI 2, используйте псевдоним в XAML (мы используем muxc), чтобы представить API библиотеки пользовательского интерфейса Windows, включенные в проект. Дополнительные сведения см. в статье "Начало работы с WinUI 2 ".

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

<muxc:ColorPicker />

Поделиться через

Цветоподборщик

Это правильный элемент управления?

Рекомендации

Создать инструмент выбора цвета

Привязка к выбранному цвету

Сохранение выбранного цвета

Настройка выбора цвета

Покажите круговой спектр

Отображение альфа-канала

Показать простой выборщик

Задайте направление макета

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

UWP и WinUI 2

Дополнительные ресурсы

Поделиться через

Цветоподборщик

Это правильный элемент управления?

Рекомендации

Создать инструмент выбора цвета

Привязка к выбранному цвету

Сохранение выбранного цвета

Настройка выбора цвета

Покажите круговой спектр

Отображение альфа-канала

Показать простой выборщик

Задайте направление макета

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

UWP и WinUI 2

Связанные статьи

Дополнительные ресурсы