Switch ColorPicker to Derive from WinUI Controls (#4010)

## Fixes #

Fixes some potential crashes with the built-in Windows 10 ColorSpectrum by switching to the WinUI version instead with the latest bug fixes.

 * ColorPicker and ColorSpectrum now derive from the WinUI equivalent controls

<!-- Add a brief overview here of the feature/bug & fix. -->

## PR Type
What kind of change does this PR introduce?
<!-- Please uncomment one or more that apply to this PR. -->

- Bugfix
<!-- - Feature -->
<!-- - Code style update (formatting) -->
- Refactoring (no functional changes, no api changes) 
<!-- - Build or CI related changes -->
<!-- - Documentation content changes -->
<!-- - Sample app changes -->
<!-- - Other... Please describe: -->


## What is the current behavior?
<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->


## What is the new behavior?
<!-- Describe how was this issue resolved or changed? -->


## PR Checklist

Please check if your PR fulfills the following requirements:

- [x] Tested code with current [supported SDKs](../readme.md#supported)
- [ ] ~Pull Request has been submitted to the documentation repository [instructions](..\contributing.md#docs). Link:~ <!-- docs PR link -->
- [ ] ~Sample in sample app has been added / updated (for bug fixes / features)~
    - [ ] ~Icon has been created (if new sample) following the [Thumbnail Style Guide and templates](https://github.com/windows-toolkit/WindowsCommunityToolkit-design-assets)~
- [ ] ~New major technical changes in the toolkit have or will be added to the [Wiki](https://github.com/windows-toolkit/WindowsCommunityToolkit/wiki) e.g. build changes, source generators, testing infrastructure, sample creation changes, etc...~
- [ ] ~Tests for the changes have been added (for bug fixes / features) (if applicable)~
- [ ] ~Header has been added to all new source files (run *build/UpdateHeaders.bat*)~
- [ ] Contains **NO** breaking changes
     **Anyone customizing the Spectrum shape or components directly in C# will need to switch to Microsoft.UI.Xaml namespace**

<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. 
     Please note that breaking changes are likely to be rejected within minor release cycles or held until major versions. -->


## Other information

See discussion in #3943 #3943 (comment)

Author: msftbot[bot]

Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPicker.cs

@@ -15,6 +15,7 @@
 using Windows.UI.Xaml.Controls.Primitives;
 using Windows.UI.Xaml.Media;
 using ColorPickerSlider = Microsoft.Toolkit.Uwp.UI.Controls.Primitives.ColorPickerSlider;
+using ColorSpectrum = Microsoft.UI.Xaml.Controls.Primitives.ColorSpectrum;
 
 namespace Microsoft.Toolkit.Uwp.UI.Controls
 {
@@ -52,7 +53,7 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls
     [System.Diagnostics.CodeAnalysis.SuppressMessage("StyleCop.CSharp.LayoutRules", "SA1501:Statement should not be on a single line", Justification = "Inline brackets are used to improve code readability with repeated null checks.")]
     [System.Diagnostics.CodeAnalysis.SuppressMessage("StyleCop.CSharp.SpacingRules", "SA1025:Code should not contain multiple whitespace in a row", Justification = "Whitespace is used to align code in columns for readability.")]
     [System.Diagnostics.CodeAnalysis.SuppressMessage("StyleCop.CSharp.NamingRules", "SA1306:Field names should begin with lower-case letter", Justification = "Only template parts start with a capital letter. This differentiates them from other fields.")]
-    public partial class ColorPicker : Windows.UI.Xaml.Controls.ColorPicker
+    public partial class ColorPicker : Microsoft.UI.Xaml.Controls.ColorPicker
     {
         internal Color CheckerBackgroundColor { get; set; } = Color.FromArgb(0x19, 0x80, 0x80, 0x80); // Overridden later
 
@@ -122,6 +123,7 @@ public partial class ColorPicker : Windows.UI.Xaml.Controls.ColorPicker
         public ColorPicker()
         {
             this.DefaultStyleKey = typeof(ColorPicker);
+            this.DefaultStyleResourceUri = new System.Uri("ms-appx:///Microsoft.Toolkit.Uwp.UI.Controls.Input/Themes/Generic.xaml");
 
             // Setup collections
             this.SetValue(CustomPaletteColorsProperty, new ObservableCollection<Color>());
@@ -486,22 +488,22 @@ private ColorChannel GetActiveColorSpectrumThirdDimension()
         {
             switch (this.ColorSpectrumComponents)
             {
-                case Windows.UI.Xaml.Controls.ColorSpectrumComponents.SaturationValue:
-                case Windows.UI.Xaml.Controls.ColorSpectrumComponents.ValueSaturation:
+                case Microsoft.UI.Xaml.Controls.ColorSpectrumComponents.SaturationValue:
+                case Microsoft.UI.Xaml.Controls.ColorSpectrumComponents.ValueSaturation:
                 {
                     // Hue
                     return ColorChannel.Channel1;
                 }
 
-                case Windows.UI.Xaml.Controls.ColorSpectrumComponents.HueValue:
-                case Windows.UI.Xaml.Controls.ColorSpectrumComponents.ValueHue:
+                case Microsoft.UI.Xaml.Controls.ColorSpectrumComponents.HueValue:
+                case Microsoft.UI.Xaml.Controls.ColorSpectrumComponents.ValueHue:
                 {
                     // Saturation
                     return ColorChannel.Channel2;
                 }
 
-                case Windows.UI.Xaml.Controls.ColorSpectrumComponents.HueSaturation:
-                case Windows.UI.Xaml.Controls.ColorSpectrumComponents.SaturationHue:
+                case Microsoft.UI.Xaml.Controls.ColorSpectrumComponents.HueSaturation:
+                case Microsoft.UI.Xaml.Controls.ColorSpectrumComponents.SaturationHue:
                 {
                     // Value
                     return ColorChannel.Channel3;
@@ -1125,7 +1127,7 @@ private void DispatcherQueueTimer_Tick(object sender, object e)
          ***************************************************************************************/
 
         /// <summary>
-        /// Callback for when the <see cref="Windows.UI.Xaml.Controls.ColorPicker.Color"/> dependency property value changes.
+        /// Callback for when the <see cref="Microsoft.UI.Xaml.Controls.ColorPicker.Color"/> dependency property value changes.
         /// </summary>
         private void OnColorChanged(DependencyObject d, DependencyProperty e)
         {
@@ -1226,7 +1228,7 @@ private void CustomPaletteColors_CollectionChanged(object sender, NotifyCollecti
         /// Event handler for when the color spectrum color is changed.
         /// This occurs when the user presses on the spectrum to select a new color.
         /// </summary>
-        private void ColorSpectrum_ColorChanged(ColorSpectrum sender, Windows.UI.Xaml.Controls.ColorChangedEventArgs args)
+        private void ColorSpectrum_ColorChanged(ColorSpectrum sender, Microsoft.UI.Xaml.Controls.ColorChangedEventArgs args)
         {
             // It is OK in this case to use the RGB representation
             this.ScheduleColorUpdate(this.ColorSpectrumControl.Color);

Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPicker.xaml

@@ -4,7 +4,8 @@
                     xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
                     xmlns:localconverters="using:Microsoft.Toolkit.Uwp.UI.Controls.ColorPickerConverters"
                     xmlns:primitives="using:Microsoft.Toolkit.Uwp.UI.Controls.Primitives"
-                    xmlns:ui="using:Microsoft.Toolkit.Uwp.UI">
+                    xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
+                    xmlns:winuiprimitives="using:Microsoft.UI.Xaml.Controls.Primitives">
 
     <SolidColorBrush x:Key="CheckerboardColor0">
         <SolidColorBrush.Color>
@@ -120,23 +121,23 @@
                                                       Orientation="Vertical" />
                         <!--  Keep in mind the spectrum is always HSV  -->
                         <!--  This must also not be named 'ColorSpectrum' to differentiate from the base class  -->
-                        <ColorSpectrum x:Name="ColorSpectrumControl"
-                                       Grid.Row="0"
-                                       Grid.RowSpan="2"
-                                       Grid.Column="1"
-                                       MinWidth="256"
-                                       MinHeight="256"
-                                       HorizontalAlignment="Stretch"
-                                       VerticalAlignment="Stretch"
-                                       AutomationProperties.Name="Third Dimension"
-                                       Components="{TemplateBinding ColorSpectrumComponents}"
-                                       MaxHue="{TemplateBinding MaxHue}"
-                                       MaxSaturation="{TemplateBinding MaxSaturation}"
-                                       MaxValue="{TemplateBinding MaxValue}"
-                                       MinHue="{TemplateBinding MinHue}"
-                                       MinSaturation="{TemplateBinding MinSaturation}"
-                                       MinValue="{TemplateBinding MinValue}"
-                                       Shape="{TemplateBinding ColorSpectrumShape}" />
+                        <winuiprimitives:ColorSpectrum x:Name="ColorSpectrumControl"
+                                                       Grid.Row="0"
+                                                       Grid.RowSpan="2"
+                                                       Grid.Column="1"
+                                                       MinWidth="256"
+                                                       MinHeight="256"
+                                                       HorizontalAlignment="Stretch"
+                                                       VerticalAlignment="Stretch"
+                                                       AutomationProperties.Name="Third Dimension"
+                                                       Components="{TemplateBinding ColorSpectrumComponents}"
+                                                       MaxHue="{TemplateBinding MaxHue}"
+                                                       MaxSaturation="{TemplateBinding MaxSaturation}"
+                                                       MaxValue="{TemplateBinding MaxValue}"
+                                                       MinHue="{TemplateBinding MinHue}"
+                                                       MinSaturation="{TemplateBinding MinSaturation}"
+                                                       MinValue="{TemplateBinding MinValue}"
+                                                       Shape="{TemplateBinding ColorSpectrumShape}" />
                         <primitives:ColorPickerSlider x:Name="ColorSpectrumAlphaSlider"
                                                       Grid.Row="1"
                                                       Grid.RowSpan="2"

Microsoft.Toolkit.Uwp.UI.Controls.Input/ColorPicker/ColorPickerButton.cs

@@ -142,7 +142,7 @@ protected override void OnApplyTemplate()
             }
         }
 
-        private void ColorPicker_ColorChanged(Windows.UI.Xaml.Controls.ColorPicker sender, ColorChangedEventArgs args)
+        private void ColorPicker_ColorChanged(Microsoft.UI.Xaml.Controls.ColorPicker sender, Microsoft.UI.Xaml.Controls.ColorChangedEventArgs args)
         {
             SelectedColor = args.NewColor;
         }