Avalonia: Adding ColorPicker and ColorCanvas 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
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/Avalonia.ColorPicker
It still isn't ready, although it mostly works.
I haven't a lot of time to work on it, however I still want to complete it.

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