Adding ColorPicker and Related Primitive Controls

[robloo]

Adding ColorPicker/Button and ColorCanvas Controls

I don't think Avalonia has a ColorPicker control. Is there a plan to add this to the project? If so, I've been implementing my own (as many others have) and would like to propose the below idea. This is currently for UWP but porting should be possible. Right now I think it provides a unique concept to discuss and see if it fits with this project.

ColorCanvas

See WinUI

ColorPicker Example

Newest example:

Older example from the Windows Community Toolkit

Spectrum	Palette	Channels

[maxkatz6]

I am trying to implement ColorPicker from WinUI in Avalonia.
I will provide some results in a few days.

By the way, I like how your ColorPicker looks!

[robloo]

Awesome, I'm glad someone is already working on this!

The main issues with the WinUI/UWP ColorPicker I find are poor styling/layout, large size that isn't adaptive, and it doesn't fit in with other pickers (no flyout). Since AvaloniaUI is fixing past mistakes whenever possible it might make sense to correct those here. Alternatively, we could go with a two control approach which is what I'm advocating for in UWP:

1. ColorPicker : A panel that can be used to select a color like WinUI
2. ColorSwatchPicker : An actual picker that previews a selected color and opens a flyout to edit (like DatePicker, TimePicker, etc.) This is far more user-friendly and is what I pictured above.

[robloo]

@grokys @danwalmsley Regardless of if this 'ColorSwatchPicker' gets into the windows community toolkit or WinUI would you consider it for this project? If so, I would be happy to provide a port as I'm already doing for the UWP repos.

As stated above, I propose two controls: (1) the ColorPicker similar to UWP that @maxkatz6 is already working on and (2) This flyout-style ColorSwatchPicker useful for constrained spaces or where form-style input is needed.

[robloo]

I got the go ahead to start adding the flyout-style ColorPickerButton to the UWP toolkit. I still think it would be very useful in Avalonia so would like some additional feedback on this issue.

It also became apparent that the UWP ColorPicker is incorrectly named. It is not a Picker like the other controls: DatePicker, TimePicker, etc. It would be better to correct this in Avalonia now and follow the WPF extended toolkit convention: https://www.codeproject.com/Articles/779105/Color-Canvas-and-Color-Picker-WPF-Toolkit

1. ColorCanvas : A panel that can be used to select a color like WinUI. Matches what is currently in UWP.
2. ColorPicker : The control I'm proposing to add. An actual picker that previews a selected color and opens a flyout to edit (like DatePicker, TimePicker, etc.) This is far more user-friendly and is what I pictured above.

[maxkatz6]

@robloo I have pushed my ColorPicker port from WinUI - https://github.com/maxkatz6/AvaloniaWinUI.ColorPicker
It still isn't ready, although it mostly works.

Another WinUI port can be found here https://github.com/amwx/FluentAvalonia

[robloo]

@maxkatz6 Good stuff! I'm starting my own port to the Uno Platform from the WinUI sources as well. I'm not going to use yours as a base so I don't have to worry about the Avalonia-specific changes and also so I can document the architecture in WinUI. That said, it will be good to do a diff of the two C# versions once complete too see if there are any mistakes.

[robloo]

@maxkatz6 The Uno Platform C# port of this was completed as well. I'll circle back to the ColorPickerButton in the Windows Community Toolkit by next week and hopefully bring that to completion. The Toolkit maintainer wants to completely re-style the ColorPicker itself to get some of these updates. However, we can ignore those for now and just bring in the Button in a month or two when its ready. It should be a lot easier as it's already C# and only depends on the ColorSpectrum.

[robloo]

@maxkatz6 Would be great to get this in for the next 0.11 release. I'll port over the ColorPickerButton once you have merged in at least the ColorSpectrum. There can likely then be some larger architectural changes to modernize things and make the control responsive (something the WinUI version lacks).

[pr8x]

Would be nice to integrate that into the DevTools as well to allow for easier styling etc.

[robloo]

With Flyout almost added that unblocks DropDownButton which I plan to have implemented along with the other remaining WinUI button types. With DropDownButton I think this ColorPicker concept itself becomes unblocked.

I still have not figured out exactly what the implementation will look like. I go back and forth between doing a clean reimplementation fixing all the wrongs with WinUI or just porting over directly from the WCT and using @maxkatz6 port as-is. The WPF toolkit had better names for these controls though (WinUI's ColorPicker is really a ColorCanvas and the ColorPickerButton is really what the ColorPicker should be).

There are other architectural/naming changes I would like to make based on this document and discussed a little with @maxkatz6 here. This would align the control quite a bit more with XAML concepts.

What I want to get a feel for is how people would accept larger deviations from WinUI such as the control names themselves and the property name updates (ThirdDimension -> ThirdChannel) etc. Any comments?

I would also encourage everyone to try out the Windows Community Toolkit 7.0 or later to get an understanding of the ColorPicker changes I'm talking about

[robloo]

Here is the plan:

1. Deviations from all previous implementations will be made so that this control fully integrates with Avalonia and fixes past mistakes
2. The following controls will be added. Note that adding so many individual controls greatly increases composability and the ability to customize for specific app needs.
   • ColorPicker : This is the main control to use for color selection and appears as a drop down button. All other pickers are already drop downs so ColorPicker was originally named incorrectly in WinUI (this was discussed in that repo).
   • ColorSpectrum [Primitive] : This will be a refactored port of the WinUI code. Features are largely the same and perhaps only a few properties are renamed.
   • ColorSlider [Primitive] : This is NOT based on the WinUI code and is a complete rewrite.
   • ColorPresenter [Primitive] : A control that previews a color with optional accent colors to the side. This is brand new.
   • ColorView [Primitive] : This is the 'canvas' version of the control that does not have a drop down button. ColorPicker will host this in a drop down button flyout.
3. Everything is going to go inside a new ColorPicker directory -- including the primitives
4. There are other architectural/naming changes I would like to make based on this document and discussed a little with @maxkatz6 here. This would align the control quite a bit more with XAML concepts.
5. The checkered background can be done using a TileBrush like what was possible in WPF. This was not possible in UWP/WinUI so it's rather ugly how it's done there. This can all be cleaned up now. Also see the comments here: https://github.com/maxkatz6/AvaloniaWinUI.ColorPicker/issues/1#issuecomment-766620432

   I recently removed quite a lot of code required to build checkered background and fade-in background, and replaced it with brushes/opacitymask declared in the XAML. It wasn't possible in UWP/WinUI, but possible in WPF/Avalonia, and I usually prefer moving UI logic to the xaml files, where it's possible. This also simplified control, but in another way.

Each of these components will be implemented in a separate PR so there is a chance it can be reviewed sanely:

• DropDownButton Add DropDownButton porting over from WinUI #4960
  - PR Add new DropDownButton Control #7838
• HsvColor Add new HsvColor struct #7705
  - PR Add new HsvColor struct #7724
• ColorSpectrum spectrum #5743
  - PR Add new ColorSpectrum Primitive #7842
• ColorPickerSlider ColorChannelSlider ColorSlider
  - PR Add new ColorSlider & ColorPreviewer Primitives #8050
• ColorPreviewer ColorPresenter
  - PR Add new ColorSlider & ColorPreviewer Primitives #8050
• ColorEditor ColorView
  - PR Add new ColorView & ColorPicker Controls #8215
• ColorPicker
  - PR Add new ColorView & ColorPicker Controls #8215

There is an open question of naming. The WinUI code isn't even consistent here.

• "ColorChannel" vs "ColorComponent" vs "Dimension". "Component" is more user-friendly and matches with iOS for example, however it is less technical than "Channel". ColorSpectrum in WinUI uses the term "Component" but the ColorPickerSlider uses "Channel". "Dimension" is used in a few places in WinUI but that is the worste name and won't be used. Overall, direction is moving towards "ColorChannel" as the appropriate name.
  • Poll: API Naming Color "Channel" vs. "Component" #7852
  • "Component" won the poll almost 2-to-1 and will be used in place of all other terms. This also matches with the pre-existing RGB Color struct.
• "ColorRepresentation" vs "ColorModel" vs "ColorSpace". "ColorRepresentation" is what is used in WinUI but I'm changing this to "ColorModel" which is shorter and actually makes more sense. ColorSpace is not always the correct term.
  • "ColorModel" will be used.
• The ColorEditor/ColorView could be named many things. The following were considered: ColorCanvas, ColorView, ColorEditor, ColorControl, ColorPresenter.
  • "ColorView" sounds the best and is similar to CalendarView in concept.

[robloo]

Just going to leave this here:

[maxkatz6]

@robloo may I ask, do you plan to port SwitchPresenter as well or use styled TabControl? TabStrip? From what I see, we don't really need a new control here.

[robloo]

do you plan to port SwitchPresenter as well or use styled TabControl? TabStrip? From what I see, we don't really need a new control here.

No, I don't plan to port SwitchPresenter. I have the same conclusion that TabControl/TabStrip is enough.