Overview
TheDaisyColorGrid 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.
Properties
Gets or sets the currently selected color. Setting this property updates
ColorIndex to match the palette position.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.
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
ColorCollectioninstances
Gets or sets the custom colors collection, typically used for “recent colors” or user-defined swatches. Defaults to a 16-slot collection.
Gets or sets whether to display the custom colors section below the main palette.
Gets or sets the width and height of each color cell in pixels.
Gets or sets the horizontal and vertical spacing between cells in pixels.
Gets or sets the number of columns in the grid. Rows are calculated automatically based on total color count.
Gets or sets the border color for unselected cells.
Gets or sets the border color for the selected cell. The selected cell also uses a thicker border (2px vs 1px).
Gets or sets whether to automatically add selected colors to the custom colors collection.
Gets or sets an optional callback invoked when the color changes.
Gets or sets custom accessibility text. If not set, defaults to “Color grid #”.
Events
Occurs when the selected color changes through user interaction or programmatic updates.
Methods
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.
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:Examples
Basic Grid with Paint Palette
Compact Grid (No Custom Colors)
Custom Styling
Recent Colors Management
Programmatic Selection
Dynamic Palette Switching
Alpha Channel Support
Cells with semi-transparent colors automatically display a checkerboard background pattern:Implementation Notes
- The grid automatically calculates its size based on
Columns,CellSize, andSpacing - Color cells are rendered using
Borderelements for each swatch - The control rebuilds all cells when
Palette,CustomColors,CellSize,Spacing, orColumnschange - Hover effects show a black border; selection shows the
SelectionBorderColorwith a thicker border - The control inherits from
DaisyBaseContentControland implementsIScalableControl

