PopupColorEditor¶

Библиотека контролов Eremex включает в себя контрол PopupColorEditor, который позволяет отображать цвет в поле редактирования и выбирать цвет из связанного всплывающего окна.

popupcoloreditor

Основные функции контрола включают в себя:

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

Выберите цвет¶

Пользователь может выбрать цвет, используя цветовые палитры, отображаемые в всплывающем окне.

В коде вы можете указать цвет или прочитать выбранный в данный момент цвет с помощью свойства PopupColorEditor.Color или PopupColorEditor.EditorValue. Эти свойства синхронизированы. Они различаются типом значения: свойство Color имеет тип Color с возможностью обнуления, в то время как свойство EditorValue имеет тип object, как и во всех редакторах Eremex.

Палитры¶

PopupColorEditor поддерживает три палитры: по умолчанию, стандартную и пользовательскую. Используйте свойство PopupColorEditor.ColorsShowMode, чтобы настроить видимость отдельных палитр. Свойство ColorsShowMode определено как набор флагов.

popupcoloreditor-three-palettes

Дефолтная цветовая палитра¶

Палитра по умолчанию отображает набор предопределенных цветов.

popupcoloredit-defaultpalette

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

List<uint> fluentIntColors = new List<uint>() 
{
    0xffef6950, 0xffc30052, 0xff0063b1, 0xff881798, 0xff018574, 0xff515c6b, 0xff4c4a48, 0xff7e735f,
    0xffda3b01, 0xffea005e, 0xff0078d7, 0xffb146c2, 0xff00b294, 0xff68768a, 0xff767676, 0xff847545,
    0xffca5010, 0xffe81123, 0xff9a0089, 0xff744da9, 0xff038387, 0xff5d5a57, 0xff107c10, 0xff525e54,
    0xfff7630c, 0xffe74856, 0xffc239b3, 0xff8764b8, 0xff00b7c3, 0xff7a7574, 0xff498205, 0xff647c64
};

List<Color> fluentColors = new List<Color>();
fluentIntColors.ForEach(intColor => fluentColors.Add(Color.FromUInt32(intColor)));

ColorPalette colorPalette = new Eremex.AvaloniaUI.Controls.Editors.CustomPalette("myPalette", fluentColors);
popupColorEditor1.ThemePalette = colorPalette;

popupColorEdit-custom-default-palette

Стандартная цветовая палитра¶

Включите флаг StandardColors в значении свойства ColorsShowMode, чтобы отобразить палитру "Стандартные цвета".

popupcoloredit-standardpalette

<mxe:PopupColorEditor 
    Width="190" Height="30"
    Name="popupColorEditor1"
    ColorsShowMode="StandardColors,CustomColors"/>

Пользовательская цветовая палитра¶

Включите флаг CustomColors в значение свойства ColorsShowMode, чтобы отобразить палитру "Пользовательские цвета".

popupcoloredit-custompalette

<mxe:PopupColorEditor ColorsShowMode="CustomColors"/>

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

popupcoloreditor-addcustomcolor

Щелкните правой кнопкой мыши на существующем цвете, чтобы открыть контекстное меню, позволяющее изменять и удалять цвет.

popupcoloreditor-customcolor-contextmenu

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

Пример - Как настроить пользовательскую палитру¶

Следующий код включает пользовательскую палитру цветов и заполняет ее с помощью свойства CustomColorCollection, определенного в ViewModel.

xmlns:mxe="https://schemas.eremexcontrols.net/avalonia/editors"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:local="clr-namespace:ComboBoxTestSample"

<Window.DataContext>
    <local:MainViewModel/>
</Window.DataContext>

<mxe:PopupColorEditor ColorsShowMode="CustomColors" 
 CustomColors="{Binding CustomColorCollection}"/>

using Avalonia.Media;
using CommunityToolkit.Mvvm.ComponentModel;
using System.Collections.ObjectModel;

[ObservableObject]
public partial class MainViewModel 
{
    public MainViewModel()
    {
        CustomColorCollection = new ObservableCollection<Color>()
        {
            Color.FromRgb(0x7d, 0xd7, 0xab), 
            Color.FromRgb(0xc5, 0x94, 0x88), 
            Color.FromRgb(0x47, 0xfe, 0xff), 
            Color.FromRgb(0xe9, 0xbf, 0x3f),
        };
    }

    [ObservableProperty]
    ObservableCollection<Color> customColorCollection;
}

Диалог выбора цвета¶

Когда пользователь нажимает кнопку "+" или щелкает правой кнопкой мыши на существующем цветовом поле в пользовательской палитре, редактор активирует диалоговое окно "Диалог Выбора Цвета".

popupcoloreditor-colorselectiondialog

Пользовательский интерфейс диалогового окна содержит диалог Выбора Цвета и контролы для указания компонентов цвета в формате RGB или HSB.

Связанный API¶

ShowAlphaChannel — Позволяет скрыть контролы, используемые для указания альфа-компонента цвета.
PopupFooterButtons — Указывает, следует ли отображать кнопки "Применить" и "Отмена" в диалоговом окне выбора цвета. Если для свойства задано значение OkCancel, пользователю необходимо нажать кнопку Применить, чтобы подтвердить выбор цвета. Нажатие на кнопку "Назад" или "Отмена" отменяет диалоговое окно.

Предотвращение всплывающих окон в редакторах, доступных только для чтения¶

Дефолтное поведение любого Popup Editor заключается в том, чтобы разрешить пользователю открывать всплывающее окно редактора даже в режиме только для чтения, хотя он не может изменять значения ни через поле редактирования, ни через всплывающее окно. Чтобы отключить всплывающие окна для редакторов, доступных только для чтения, установите для свойства ShowPopupIfReadOnly значение false.

^* Эта страница была создана автоматически с помощью сервиса машинного перевода Яндекс Переводчик.