Proposal: ColorSwatches in ColorPicker

Credit: @mdtauk

Proposal: ColorSwatches in ColorPicker

Summary

The win32 ColorPicker has swatches, the WinUI colorpicker should too!

Rationale

• Close gap between win32 and WinUI
• Ability for developers to let users input accent colors easily
• Enables history of colors chosen by user

Scope

Capability	Priority
Close gap between win32 ColorPicker and WinUI ColorPicker	Must
List of windows accent colors	Must
Possibility to disable swatches	Must
Let developer disable list of accent colors	Must
List of app colors (e.g. list of brand colors)	Must
Disable list of app colors	Must
Change text of “App colors” label	Must
History of colors chosen by user	Should
Let developer disable list of color history	Should
Host custom XAML content	Could

Possible API

enum ColorPickerDisplayMode
{
  ColorsOnly, // Would be current mode
  Swatches, // Only show swatches
  Both // Shows both color swatches and color picker
}

enum ColorSwatchesMode
{
  AccentColors, // Windows 10 accent colors
  StandardSixteen, // Standard sixteen colors
  Custom // Binds to a custom collection of colors
}

class ColorPicker
{
  // DisplayMode
  ColorPickerDisplayMode DisplayMode;
  // SwatchesMode
  ColorSwatchesMode SwatchesMode;
  // Collection of colors to use when swatches are enabled and swatches is in custom mode
  IEnumerable<Color> SwatchesItemsSource;
}

Important Notes

Idea: @mdtauk (this comment)

Open Questions

If we disable everything in the swatches panel, what will we display?

[mdtauk]

Originally posted in the ColorPicker Orientation Issue, here is a horizontal and vertical mockup for how Swatches could be implemented.

This features:

• the Recent Colours option, which would maintain a list of x number of recently chosen colours;
• the App Colours option, where the app can choose a set of swatch colours to display;
• the Windows Colours option, where the Microsoft set of colours (as featured in the Settings App) would be displayed;

Any or all of these options can be turned on or off - no expander/heading would be shown if only one set of swatches is set to be displayed.

Edit: I want to call out the specific styling for the Selected Colour swatch, because by default it would use the AccentColor, but it should use the foreground color of the Light or Dark theme, to help it contrast well with the swatch colour itself.

[mdtauk]

Posting this by way of an example of another Fluent based UI kit from Microsoft doing Color Picking and Swatches…