Microsoft-ui-xaml: Proposal: ColorSwatches in ColorPicker

[chingucoding]

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

```c#

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 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?

[chingucoding]

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.

[chingucoding]

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...

[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.