Uno: Add ColorPicker & ColorSpectrum Control

[robloo]

What would you like to be added:

Add the ColorPicker and ColorSpectrum controls from WinUI.

https://github.com/microsoft/microsoft-ui-xaml/tree/master/dev/ColorPicker
https://docs.microsoft.com/en-us/uwp/api/microsoft.ui.xaml.controls.colorpicker?view=winui-2.4

Why is this needed:

1. Feature parity
2. Allows colors to be selected in Uno
3. Opens the door for the inclusion of the ColorPickerButton in the community toolkit which depends on the ColorSpectrum

For which Platform:

• [x] iOS
• [x] Android
• [x] WebAssembly
• [ ] WebAssembly renderers for Xamarin.Forms
• [x] macOS
• [ ] Windows
• [ ] Build tasks
• [ ] Solution Templates

Anything else we need to know?

[robloo]

I would be interested in porting this myself. However, I would like some feedback on why it hasn't been attempted yet and what are the roadblocks.

[davidjohnoliver]

I would like some feedback on why it hasn't been attempted yet

No special reason - it simply hasn't reached the top of the core team's priority stack yet. You're very welcome to tackle it. 😃

and what are the roadblocks.

It depends on exactly what APIs the control is using. After taking a quick look, the inner ColorSpectrum control seems to be the more complicated part. It seems to be using WriteableBitmap, which is supported on Uno, but I can't tell if all the low-level pixel manipulations going on are necessarily going to work on all platforms.

Can I suggest that if you do decide to work on it, you start off by making a high-level overview of the control - how it behaves, what framework APIs it relies upon etc - and post your findings here? Even including some screenshots. 😄 That'll help us guide you further, and it'll also turn out to be useful no matter whether it's you or someone else who ultimately ends up porting the control.

[robloo]

@davidjohnoliver Thanks a lot for your fast reply!

It seems to be using WriteableBitmap, which is supported on Uno, but I can't tell if all the low-level pixel manipulations going on are necessarily going to work on all platforms.

I expect the spectrum works like the slider and renders an image as an array of bits entirely in software then converts it to a bitmap and finally draws that bitmap to the background using an ImageBrush. I already ported and re-wrote that code for the slider in the ColorPickerButton here so don't expect many roadblocks from that aspect.

Can I suggest that if you do decide to work on it, you start off by making a high-level overview of the control - how it behaves, what framework APIs it relies upon etc - and post your findings here?

Yes, good idea. I already started some outlines that will go into the WinUI repository as we are trying to document the architecture of controls now.

Separately, what is the policy on control porting:

• Should we follow the code verbatim only converting to C# and adopting work-arounds for unsupported features with comments? This seems almost madatory in order to do a diff in the future of WinUI changes and port them back to Uno. past discussion here
• Are we encouraged to restructure the code and document things better?

[robloo]

In terms of timing, it will be a few weeks before I circle back to the Community Toolkit and complete an updated styling of the ColorPicker to match the ColorPickerButton. Afterwards, I can tackle this and will probably start by just porting to c# as I document the details.

The decision was made to use Uno with an existing large-codebase UWP app, at least as a trial port, and ColorPicker is one of the missing controls that can't easily be worked around. Therefore, it makes a lot of sense for me to tackle this in parallel with porting to Uno.

[davidjohnoliver]

Separately, what is the policy on control porting:

• Should we follow the code verbatim only converting to C# and adopting work-arounds for unsupported features with comments? This seems almost madatory in order to do a diff in the future of WinUI changes and port them back to Uno. past discussion here
• Are we encouraged to restructure the code and document things better?

The first one. As you say, we want to stick closely to the source to be able to more easily track upstream changes, even if the resulting code would benefit from refactoring.

Additional documentation is less problematic than modifying the code itself. Maybe just, if it's inline documentation, make it clear it's not from the original source (eg // UNO DOC: This method is doing blah blah blah...)

[francoistanguay]

@robloo We also have internal Regex-es internally that help port C++ WinUI code to C#. If you reach out on DIscord/Twitter, we can help you jumpstart this process. Would love to help make sure you're successful porting ColorPIcker, we've had the request multiple times and it would be a great addition!

[robloo]

@francoistanguay Thanks! I'll connect with the team on Discord when porting starts. Initial work on this could actually begin as early as next week. I'm sure we will be successful bringing this control over to the Uno Platform!

[robloo]

I have the ColorSpectrum and all related rendering/helper code fully ported from C++ -> C# running in plain UWP (no need for RegEx's). The way C++ and C# do rounding/truncation/type-conversion is different so the math will have to be adjusted as a straight conversion doesn't quite work. Regardless, this proves the ColorPicker is indeed possible without too much trouble.

I did note a few things:

• ColorHelper.ToDisplayName isn't supported on Uno. Related code is automatically disabled and there was a nice switch to do so already built into the WinUI code base.
• On RS2 or above the ColorPicker actually uses it's own SpectrumBrush to render the spectrum itself. This is disabled and I'm falling back to the byte array -> WritableBitmap -> ImageBrush methodology which should work just fine in Uno. If Uno ever supports Composition this could be re-enabled for added performance.

As ColorSpectrum is the most difficult component of the ColorPicker I don't foresee any showstoppers. When the port is done, I will have a list of things that need to be discussed though.

If only building Uno was this straightforward :)

[davidjohnoliver]

@robloo Fantastic! That's actually a great idea, to validate the C++ to C# conversion in UWP first.

Let us know if you do hit any roadblocks integrating it into Uno.

[robloo]

Left: Newly converted C# spectrem Right: C++ WinUI ColorSpectrum, no difference.

As mentioned there have been a few gotchas where the C++ to C# conversion is correct, but the C# rounding and casting of types is different in some edge cases which causes rendering glitches. Most have been fixed it just takes extra effort to find them.

Overall, I definitely recommend this approach for porting controls from WinUI -- first going to UWP. It eliminates a whole class of potentially unsupported features in Uno which allows for incremental conversion and testing along the way.

[robloo]

@davidjohnoliver As we previously discussed, a first WIP draft of the high-level overview is started here: https://github.com/microsoft/microsoft-ui-xaml/blob/786129a37d36890d9d8ef1a61f945cc2f3be19a4/dev/ColorPicker/readme.md. This should help reviewing the PR related to this discussion.

[robloo]

The full ColorPicker is now running in Android as shown below. Help closing bugs in related controls would be appreciated!

[jeromelaban]

@robloo this is some very nice progress there! Nice work!