Skip to content

ColorPalette is based on GridView. so you can use SelectedItem, SelectedIndex and other proeprties.

cs
public partial class ColorPalette : GridView
cs
public partial class ColorPaletteItem : Control

ColorPaletteItem ​

Attributes ​

Property
ShowHexCode
ShowColorName
ShowToolTip
ItemShape
ColorName
Color

ColorPalette ​

Attributes ​

Property
SelectedColor
ItemWidth
ItemHeight
Colors
IsCopyColorCodeOnClickEnabled
ShowHexCode
ShowColorName
ShowToolTip
ColorSet
ItemShape
ItemsPanel

Events ​

Name
ColorChanged

Example ​

xml
<dev:ColorPalette />

Custom ColorSet ​

If you want to use your own color set, you can do it in two ways: by adding items in XAML or by adding colors in C# code.

Xaml Direct ​

xml
<dev:ColorPalette ColorSet="Custom">
    <dev:ColorPalette.Colors>
        <dev:ColorPaletteItem Color="Red" ColorName="Red"/>
        <dev:ColorPaletteItem Color="Green" ColorName="Green"/>
        <dev:ColorPaletteItem Color="Orange" ColorName="Orange"/>
        <dev:ColorPaletteItem Color="Blue" ColorName="Blue"/>
    </dev:ColorPalette.Colors>
</dev:ColorPalette>

C# Way ​

xml
<dev:ColorPalette x:Name="ColorPaletteSample" ColorSet="Custom" />
cs
ColorPaletteSample.Colors = new ObservableCollection<ColorPaletteItem2>
{
    new ColorPaletteItem2{ Color = Colors.Red, ColorName = "Red" },
    new ColorPaletteItem2{ Color = Colors.Yellow, ColorName = "Yellow" },
    new ColorPaletteItem2{ Color = Colors.Orange, ColorName = "Orange" },
};

WARNING

You must set ColorSet to Custom, and then add your ColorPaletteItem instances to the Colors collection — not ItemsSource or Items.

Customize ItemShape ​

The ColorPalette control accepts ColorPaletteItem elements. So, if you want to customize the item shape, you can override the ColorPaletteItem style and set its ItemShape property to Custom. This ensures that the control won't overwrite your custom ControlTemplate.

ItemsPanel ​

currently we are using a WrapPanel, but if you want, you can customize ItemsPanel:

xml
<dev:ColorPalette.ItemsPanel>
    <ItemsPanelTemplate>
        <dev:UniformGrid Columns="10"/>
    </ItemsPanelTemplate>
</dev:ColorPalette.ItemsPanel>

Demo ​

you can run demo and see this feature.

ColorPalette

Released under the MIT License.