ColorSelect

A color swatch or input field with a palette and HSLA popover, as uikit:ColorSelect.

<Panel MinHeight="440" MinWidth="480">
  <StackPanel Orientation="Horizontal" Spacing="16" HorizontalAlignment="Left" VerticalAlignment="Top">
    <uikit:ColorSelect Color="#2563EB" />
    <uikit:ColorSelect Color="#F59E0B" Label="Accent" />
    <uikit:ColorSelect Icon="{StaticResource UIKit.Icon.Palette}" VerticalAlignment="Center" />
  </StackPanel>
</Panel>

#Usage

uikit:ColorSelect is part of UIKitTheme and needs no extra package. It has the swatch and field looks of the Color Picker, with Label after the swatch and Icon in its place. Its Color may be null for no color: the swatch is empty and the field shows PlaceholderText ("Please select").

The popover has two segmented tabs (ActiveTab): the palette, a row of featured colors (the theme's red, blue, green, yellow, cyan and magenta with their light shades, or FeaturedColors) over 99 colors from stone to pink, and the Hue, Saturation, Lightness and Alpha sliders. Below them are the previewed color and its hex. Pointing at a palette color previews it; a click on it, or Enter in the hex field, sets Color and closes the popover, and a slider sets Color as it moves. The hex field takes # and up to eight hex digits. Enter on the focused control opens and closes the popover and Escape closes it. Placement moves the popover from below the control.

The demo shows swatches: a color, a color with a label, and an icon.

#Examples

Fields: a color, no color with a placeholder, and one that opens on the HSLA tab.

<Panel MinHeight="480" MinWidth="320">
  <StackPanel Spacing="12" Width="200" HorizontalAlignment="Left" VerticalAlignment="Top">
    <uikit:ColorSelect Classes="field" Color="#2563EB" />
    <uikit:ColorSelect Classes="field" PlaceholderText="Pick a color" />
    <uikit:ColorSelect Classes="field" Color="#16A34A" ActiveTab="1" />
  </StackPanel>
</Panel>