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