Proposal: ColorSwatches in ColorPicker

[marcelwgn]

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]

Thank you for writing this up as a proper proposal @chingucoding I could imagine there may be scope for further "sections" that could be added to the ColorPicker, if some compelling ideas were to be proposed. Failing that, there could be custom XAML content added.

[shaheedmalik]

Yes. It looks great.

[adrientetar]

Why not put R,G,B on the same line and the legends below?

[marcelwgn]

Why not put R,G,B on the same line and the legends below?

There were also some thoughts put into this idea in #1637. The main problem I saw is how to deal with lengthy translations.

[robloo]

Why not put R,G,B on the same line and the legends below?

There were also some thoughts put into this idea in #1637. The main problem I saw is how to deal with lengthy translations.

Yes, when I added the suggestion I also mentioned translation could be an issue. However, there are some methods of fixing this:

1. The text could have trimming
2. The control could resize itself
3. Just use color component abbreviations like Photoshop(r) has: just 'R', 'G', 'B'

I like #3 the best and would argue if the user is editing the components directly they already know what they are doing. I'll add this comment in the other discussion too.

As far as color swatches, I also added this in one of my apps. Might I suggest a layout like what is below? It also has the 'standard' I'll say 16 colors which should be an option some place. Another useful add is the 'Clear' button which will set the alpha channel to zero for full transparency. Transparency should be a selectable option somehow.

[marcelwgn]

As far as color swatches, I also added this in one of my apps. Might I suggest a layout like what is below? It also has the 'standard' I'll say 16 colors which should be an option some place. Another useful add is the 'Clear' button which will set the alpha channel to zero for full transparency. Transparency should be a selectable option somehow.

This would also make sense. Maybe color swatches could have a DisplayMode with values "Hidden", "Inline" and "Tab".

[mdtauk]

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