Microsoft-ui-xaml: Proposal: Add a ColorPickerButton Control

[robloo]

Proposal: Add a ColorPickerButton Control

The color picker is a big help when using WinUI. However, it takes a lot of space. A common design practice is to preview the color in a small button. Pressing the button will open the color picker in a flyout for editing. There are lots of different implementations for this and Microsoft even provides an example here: https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/color-picker#save-the-chosen-color

This concept should be standardized and pulled into WinUI itself for use in all applications. Additional features should be added such as sliders for all color channels and a color palette to select from.

I've already added this control in a PR on the WindowsCommunityToolkit. Once stabilized, I would like to bring it over to WinUI 3.0.

• [[Feature] Add a Reimagined Color Picker

  3363](https://github.com/windows-toolkit/WindowsCommunityToolkit/issues/3363)

• Add ColorPickerButton #3379

Summary

Add a color picker drop-down button as shown below (example). The name of this control was decided to be 'ColorPickerButton' (technically it should be ColorPicker while the existing one should be ColorCanvas) but some ideas are:

• ColorSwatchPicker
• ColorBox
• ColorPickerButton
• ColorPickerDropDown
• ColorDropDownButton
• ColorPickerDropDownButton (long I know)

The drop down button could look as below:

The button will show a preview of the selected color which also supports transparency on a checkered background. When the drop-down is opened, a color picker is shown in a flyout to change the selected color.

| Spectrum | Palette | Channels |
| ------------- | ------------- | ------------- |
| | | |
| | | |

Rationale

• Standardize the common 'ColorPickerButton' design principle
• Save application screen space when choosing a color
• Provides an input control to use in forms
• Adds ability to modify a color using channel sliders (with colored slider backgrounds)
• Adds ability to select a color from a palette

Scope

| Capability | Priority |
| :---------- | :------- |
| Create a new 'ColorPickerButton' | Must |
| Support all color picker properties in the button | Must |
| Support preview of transparent colors on a checkered background | Must |

[StephenLPeters]

@robloo is this achievable using a DropDownButton with colorPicker in the flyout? Seems like it shouldn't be too involved.

[robloo]

@StephenLPeters, You would think it could be implemented with a DropDownButton and a ColorPicker in a flyout -- and this would work if the implementation is done inside the application itself. However, the ColorPicker properties and methods need to be exposed by the new control. Therefore, it's better to inherit from ColorPicker and create the new control. Then re-implement the dropdownbutton in the template of the new control.

Edit: I suppose an alternative would be just expose the color picker reference as a property itself. That's not as good of a design in my option though. Either implementation won't be very difficult though.

[ranjeshj]

I'm having trouble justifying creating a separate control for this. Would it make sense to have this as a sample/control in the community toolkit ? @michael-hawker ?

[robloo]

@ranjeshj I understand some of your apprehension about creating and maintaining a control for this; however, I find this type of color input is used in several different scenarios. It is definitely filling a gap in WinUI and is something that historically has only been done by 3rd parties -- like the NumberBox.

The net benefit for Microsoft is more from a design standpoint than a technical one. Standardizing the Windows 10 UI is important and this control would align with that goal. This control is also not technically prohibitive to implement -- it would be quite simple. Of course you would also be filling a gap in WinUI control library and making application development simpler.

Microsoft added the DropDownButton itself for similar reasons I would think. It's a relatively simple control to implement -- but it's one used in so many places it makes sense to standardize and pull into the framework.

[ranjeshj]

@robloo Thank you for elaborating. I can see the consistency argument. Thinking about this a bit more, this is likely more of a pattern where we have a picker (some input control that is relatively large layout wise) and we want to show the selected value after it has been picked. We have Date/Time/Calendar pickers for example. @chigy as FYI

[mdtauk]

This control of it is approved, would work well for a future WinUI ribbon control.

It could also be aligned with the horizontal mode issue, and the idea of a Swatch mode for the colour picker

[robloo]

It could also be aligned with the horizontal mode issue, and the idea of a Swatch mode for the colour picker

Yes, I agree and had that in mind as well. Inheriting from ColorPicker would keep all future changes to ColorPicker included in this control too.

It's also too bad the ColorPicker name is already used as this proposal more closely aligns with a picker. The existing ColorPicker is more like a ColorView or ColorPanel.

[mdtauk]

ColorSwatchDropDownPicker

ColorSwatchPicker

[robloo]

I like ColorSwatchPicker -- good idea

[niels9001]

Would be really nice to have this, either in the Community Toolkit or WinUI.

We have created something similar in the PowerToys settings app:

[robloo]

@ranjeshj @StephenLPeters @chigy Is there any merit to pursing this idea here in WinUI? The usability benefits speak for themselves I think. A lot of apps use a concept along these lines. It is also a standard 'picker' control now and conceptually fits in with the others such as DatePicker. I've never understood why the existing ColorPicker was named like it was unless there was always a plan to re-template it?

Here is the complete proposal:

[robloo]

Quick update: This is being released in the Windows Community Toolkit version 7.0. The hope is to gain plenty of feedback with the new designs and then to add the control to WinUI at a later date.