PopupColorEditor

The Eremex Controls library includes the PopupColorEditor control that allows you to display a color in the edit box, and pick a color from the associated popup window.

popupcoloreditor

The control's main features include:

Customizable default color pallete.
Standard color palette.
Custom color palette, which can be customized by users.
Built-in dialog allows you to select colors using a color picker or by specifying individual color components in the RGB or HSB format.

Select a Color

A user can pick a color using color palletes displayed in the dropdown window.

In code, you can specify a color or read the currently selected color with the PopupColorEditor.Color or PopupColorEditor.EditorValue property. These properties are in sync. They differ in the value type: the Color property is of the nullable Color type, while the EditorValue property is of the object type as in all Eremex editors.

Palettes

The PopupColorEditor supports three palettes: default, standard and custom. Use the PopupColorEditor.ColorsShowMode property to customize the visibility of individual palettes. The ColorsShowMode property is defined as a set of flags.

Standard Color Palette

Enable the StandardColors flag in the ColorsShowMode property value to display the Standard Color palette.

Custom Color Palette

Include the CustomColors flag into the ColorsShowMode property value to display the Custom Colors palette.

Users can add and customize colors in the Custom palette at runtime. Click the '+' button to add a color. Right-click an existing color to access context menu commands used to change and delete the color.

You can populate the Custom Colors palette in code beforehand, using the CustomColors property.

Example - How to set up a custom palette

The following code enables the Custom Colors palette, and populates it from a CustomColorCollection property defined in a ViewModel.

xmlns:mxe="clr-namespace:Eremex.AvaloniaUI.Controls.Editors;assembly=Eremex.Avalonia.Controls"
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;
}

Color Selection Dialog

When a user clicks the '+' button, or right-clicks an existing color box in the Custom palette, the editor activates the Color Picker dialog.

popupcoloreditor-colorselectiondialog

The dialog's UI contains the color picker and controls to specify components of a color in the RGB or HSB format.

ShowAlphaChannel — Allows you to hide the controls used to specify the Alpha component of a color.
ShowConfirmationButtons — Specifies whether to display the Apply and Cancel buttons in the Color Selection dialog. If the property is enabled, a user needs to press the Apply button to confirm a color selection. A click on the Back or Cancel button cancels the dialog. If the ShowConfirmationButtons property is set to false, a click on the Back button confirms the selected color.

Table of Contents