Skip to main content

Overview

The DaisyColorGrid control displays a customizable grid of color swatches from one or more palettes. It supports both predefined palettes (like Paint, Web216) and custom color collections with automatic “recent colors” management.
<DaisyColorGrid 
    Palette="{x:Static ColorCollection.Paint}"
    Color="{Binding SelectedColor, Mode=TwoWay}"
    Columns="16"
    CellSize="20,20" />

Properties

Color
Color
default:"Colors.Black"
Gets or sets the currently selected color. Setting this property updates ColorIndex to match the palette position.
ColorIndex
int
default:"-1"
Gets or sets the zero-based index of the selected color in the combined palette (main palette + custom colors). Returns -1 if the current color is not in any palette.
Palette
ColorCollection
default:"null"
Gets or sets the main color collection to display. Common values:
  • ColorCollection.Paint - Standard paint palette (128 colors)
  • ColorCollection.Web216 - Web-safe colors (216 colors)
  • Custom ColorCollection instances
CustomColors
ColorCollection
default:"16 empty slots"
Gets or sets the custom colors collection, typically used for “recent colors” or user-defined swatches. Defaults to a 16-slot collection.
ShowCustomColors
bool
default:"true"
Gets or sets whether to display the custom colors section below the main palette.
CellSize
Size
default:"new Size(16, 16)"
Gets or sets the width and height of each color cell in pixels.
Spacing
Size
default:"new Size(3, 3)"
Gets or sets the horizontal and vertical spacing between cells in pixels.
Columns
int
default:"16"
Gets or sets the number of columns in the grid. Rows are calculated automatically based on total color count.
CellBorderColor
Color
default:"Color.FromArgb(255, 160, 160, 160)"
Gets or sets the border color for unselected cells.
SelectionBorderColor
Color
default:"Color.FromArgb(255, 0, 120, 215)"
Gets or sets the border color for the selected cell. The selected cell also uses a thicker border (2px vs 1px).
AutoAddColors
bool
default:"true"
Gets or sets whether to automatically add selected colors to the custom colors collection.
OnColorChanged
Action<Color>
Gets or sets an optional callback invoked when the color changes.
AccessibleText
string
Gets or sets custom accessibility text. If not set, defaults to “Color grid #”.

Events

ColorChanged
EventHandler<ColorChangedEventArgs>
Occurs when the selected color changes through user interaction or programmatic updates.
private void OnGridColorChanged(object sender, ColorChangedEventArgs e)
{
    CurrentColor = e.Color;
}

Methods

AddCustomColor
void AddCustomColor(Color color)
Adds a color to the beginning of the custom colors collection, shifting existing colors down. If the collection is full, the last color is removed.
colorGrid.AddCustomColor(Colors.Purple);

Keyboard Navigation

  • Arrow Keys: Navigate between colors (Left/Right, Up/Down by row)
  • Home/End: Jump to first or last color
  • Page Up/Down: Jump up or down by 2 rows
  • Enter/Space: Confirm selection of current color

Color Collections

Flowery.Uno provides several built-in palettes:
// Standard paint palette (128 colors)
colorGrid.Palette = ColorCollection.Paint;

// Web-safe colors (216 colors)
colorGrid.Palette = ColorCollection.Web216;

// Create custom palette
var customPalette = new ColorCollection();
customPalette.Add(Colors.Red);
customPalette.Add(Colors.Green);
customPalette.Add(Colors.Blue);
colorGrid.Palette = customPalette;

// Create empty custom colors collection
colorGrid.CustomColors = ColorCollection.CreateCustom(12);

Examples

Basic Grid with Paint Palette

<DaisyColorGrid 
    Palette="{x:Static ColorCollection.Paint}"
    Columns="16"
    CellSize="18,18"
    Spacing="2,2"
    Color="{Binding SelectedColor, Mode=TwoWay}" />

Compact Grid (No Custom Colors)

<DaisyColorGrid 
    Palette="{x:Static ColorCollection.Web216}"
    ShowCustomColors="False"
    CellSize="12,12"
    Spacing="1,1"
    Columns="18" />

Custom Styling

<DaisyColorGrid 
    Palette="{x:Static ColorCollection.Paint}"
    CellSize="24,24"
    Spacing="4,4"
    CellBorderColor="#888888"
    SelectionBorderColor="Orange"
    Columns="12" />

Recent Colors Management

public sealed partial class ColorPickerDialog : ContentDialog
{
    public ColorPickerDialog()
    {
        InitializeComponent();
        
        // Initialize with saved recent colors
        ColorGrid.CustomColors = LoadRecentColors();
    }

    private void OnColorGridColorChanged(object sender, ColorChangedEventArgs e)
    {
        // Manually manage recent colors (if AutoAddColors is false)
        ColorGrid.AddCustomColor(e.Color);
        SaveRecentColors(ColorGrid.CustomColors);
    }

    private ColorCollection LoadRecentColors()
    {
        var colors = ColorCollection.CreateCustom(16);
        // Load from app settings/storage
        return colors;
    }

    private void SaveRecentColors(ColorCollection colors)
    {
        // Save to app settings/storage
    }
}

Programmatic Selection

// Select by color
colorGrid.Color = Colors.Red;

// Select by index
colorGrid.ColorIndex = 0;

// Find color in palette
int index = colorGrid.Palette?.Find(Colors.Blue, 0) ?? -1;
if (index >= 0)
{
    colorGrid.ColorIndex = index;
}

Dynamic Palette Switching

<StackPanel Spacing="8">
    <ComboBox x:Name="PaletteSelector" SelectionChanged="OnPaletteChanged">
        <ComboBoxItem Content="Paint" IsSelected="True" />
        <ComboBoxItem Content="Web Safe" />
    </ComboBox>
    
    <DaisyColorGrid x:Name="ColorGrid" Columns="16" />
</StackPanel>
private void OnPaletteChanged(object sender, SelectionChangedEventArgs e)
{
    if (PaletteSelector.SelectedIndex == 0)
        ColorGrid.Palette = ColorCollection.Paint;
    else
        ColorGrid.Palette = ColorCollection.Web216;
}

Alpha Channel Support

Cells with semi-transparent colors automatically display a checkerboard background pattern:
var palette = new ColorCollection();
palette.Add(Color.FromArgb(128, 255, 0, 0)); // 50% transparent red
palette.Add(Color.FromArgb(200, 0, 255, 0)); // 78% opaque green
colorGrid.Palette = palette;

Implementation Notes

  • The grid automatically calculates its size based on Columns, CellSize, and Spacing
  • Color cells are rendered using Border elements for each swatch
  • The control rebuilds all cells when Palette, CustomColors, CellSize, Spacing, or Columns change
  • Hover effects show a black border; selection shows the SelectionBorderColor with a thicker border
  • The control inherits from DaisyBaseContentControl and implements IScalableControl

Build docs developers (and LLMs) love