Changed ContrastOptionsPanel to use ColorPickerButton

Author: Avid29

components/ColorAnalyzer/samples/ContrastHelper/ContrastOptionsPane.xaml

@@ -1,4 +1,4 @@
-<UserControl x:Class="ColorAnalyzerExperiment.Samples.ContrastOptionsPane"
+<UserControl x:Class="ColorAnalyzerExperiment.Samples.ContrastOptionsPane"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:controls="using:CommunityToolkit.WinUI.Controls"
@@ -8,22 +8,11 @@
              mc:Ignorable="d">
 
     <StackPanel Spacing="2">
-        <StackPanel Orientation="Horizontal">
-            <StackPanel>
-                <TextBlock Text="Desired Foreground" />
-                <controls:ColorPicker ColorChanged="Foreground_ColorChanged"
-                                      IsColorChannelTextInputVisible="True"
-                                      IsColorSliderVisible="True"
-                                      Color="White" />
-            </StackPanel>
-            <StackPanel>
-                <TextBlock Text="Background" />
-                <controls:ColorPicker ColorChanged="Background_ColorChanged"
-                                      IsColorChannelTextInputVisible="True"
-                                      IsColorSliderVisible="True"
-                                      Color="Black" />
-            </StackPanel>
-        </StackPanel>
+        <TextBlock Text="Desired Foreground" />
+        <controls:ColorPickerButton SelectedColor="{x:Bind DesiredForeground, Mode=TwoWay}"/>
+
+        <TextBlock Text="Background" />
+        <controls:ColorPickerButton SelectedColor="{x:Bind DesiredBackground, Mode=TwoWay}"/>
 
         <Slider MinWidth="256"
                 HorizontalAlignment="Center"

components/ColorAnalyzer/samples/ContrastHelper/ContrastOptionsPane.xaml.cs

@@ -5,6 +5,7 @@
 #if !WINDOWS_UWP
 using Microsoft.UI.Xaml.Media.Imaging;
 #elif WINDOWS_UWP
+using Windows.UI;
 using Windows.UI.Xaml.Media.Imaging;
 #endif
 
@@ -19,10 +20,22 @@ public partial class ContrastOptionsPane : UserControl
     public ContrastOptionsPane(ContrastHelperSampleBase sample)
     {
         _sample = sample;
-        
+
         this.InitializeComponent();
     }
 
+    public Color DesiredForeground
+    {
+        get => _sample.DesiredForeground;
+        set => _sample.DesiredForeground = value;
+    }
+
+    public Color DesiredBackground
+    {
+        get => _sample.DesiredBackground;
+        set => _sample.DesiredBackground = value;
+    }
+
     private void Foreground_ColorChanged(MUXC.ColorPicker sender, MUXC.ColorChangedEventArgs args)
     {
         // TODO: Disect the colorpicker