How to: Create and Add Palettes in PopupColorEdit

• May 22, 2020
• 2 minutes to read

A PopupColorEdit allows you to choose colors from the RGBA color space. Its features include 20 preset color palettes and an unlimited number of custom color palettes.

This document demonstrates how to create the PopupColorEdit control, and add predefined and custom palettes.

Create a New Project and Add a PopupColorEdit

1. Run MS Visual Studio.
2. Create a new WPF Application project. For this, choose New Project on the File menu or press Ctrl+Shift+N, and then choose WPF Application.

3. Add a PopupColorEdit component to the project.

   To do this, open the Visual Studio toolbox, locate the “DX: Common Controls” tab, choose the PopupColorEdit toolbox item and drop it onto the window.

   

   XAML

   <Window x:Class="DXEditors_PopupColorEdit.MainWindow" 
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
           Title="MainWindow" Height="400" Width="300" 
           xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" 
           xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core">
       <Grid>
           <dxe:PopupColorEdit HorizontalAlignment="Center" Name="popupColorEdit1" VerticalAlignment="Top" Width="150" />
       </Grid>
   </Window>
   

Create and Add Palettes

4. To add a predefined palette, add the following code after the InitializeComponent method.

   C#

   namespace DXEditors_PopupColorEdit
   {
       public partial class MainWindow : Window
       {
           public MainWindow()
           {
               InitializeComponent();
               popupColorEdit1.Palettes.Add(CustomPalette.CreateGradientPalette("Paper Colors", PredefinedColorCollections.Paper));
           }
       }
   }
   

5. To create and add a custom palette, add the following code after the InitializeComponent method.

   C#

   namespace DXEditors_PopupColorEdit
   {
       public partial class MainWindow : Window
       {
           public MainWindow()
           {
               InitializeComponent();
               popupColorEdit1.Palettes.Add(CustomPalette.CreateGradientPalette("Paper Colors", PredefinedColorCollections.Paper));
               popupColorEdit1.Palettes.Add(
                   new CustomPalette("Custom RGB Colors",
                   new List<Color>() {
                       Color.FromRgb(170, 0, 0),
                       Color.FromRgb(0, 125, 0),
                       Color.FromRgb(0, 0, 170) }));
           }
       }
   }
   

6. Run the application to see the result.