Fix: ColorPicker Binding failed (#579)

* fix ColorPicker Binding failed

* Apply suggestions from code review

* Update components/ColorPicker/src/Converters/NullToTransparentConverter.cs

---------

Co-authored-by: Arlo <[email protected]>
Co-authored-by: Michael Hawker MSFT (XAML Llama) <[email protected]>

Author: 3 people

components/ColorPicker/src/ColorPicker.xaml

@@ -1,4 +1,4 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:animations="using:CommunityToolkit.WinUI.Animations"
                     xmlns:contract8Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,8)"
@@ -16,6 +16,7 @@
     <SolidColorBrush x:Key="CheckerboardColor1"
                      Color="#FFd4d4d4" />
     <converters:ColorToDisplayNameConverter x:Key="ColorToDisplayNameConverter" />
+    <localconverters:NullToTransparentConverter x:Key="NullToTransparentConverter" />
     <localconverters:ColorToHexConverter x:Key="ColorToHexConverter" />
 
     <localconverters:ContrastBrushConverter x:Key="ContrastBrushConverter" />
@@ -291,7 +292,7 @@
                                                   animations:Implicit.HideAnimations="{StaticResource HideTransitions}"
                                                   animations:Implicit.ShowAnimations="{StaticResource ShowTransitions}"
                                                   ItemsSource="{TemplateBinding CustomPaletteColors}"
-                                                  SelectedValue="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Color, Mode=TwoWay}"
+                                                  SelectedValue="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Color, Converter={StaticResource NullToTransparentConverter}, Mode=TwoWay}"
                                                   SelectionMode="Single"
                                                   Tag="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Color, Mode=OneWay}">
                                             <GridView.ItemsPanel>

components/ColorPicker/src/Converters/NullToTransparentConverter.cs

@@ -0,0 +1,22 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+namespace CommunityToolkit.WinUI.Controls;
+
+/// <summary>
+/// Value converter that converts null values to Transparent.
+/// </summary>
+public partial class NullToTransparentConverter : IValueConverter
+{
+    /// <inheritdoc/>
+    public object Convert(object value, Type targetType, object parameter, string language) => value;
+    
+    /// <inheritdoc/>
+    public object ConvertBack(object? value, Type targetType, object parameter, string language) => value ??
+#if WINUI2
+        Windows.UI.Colors.Transparent;
+#else
+        Microsoft.UI.Colors.Transparent;
+#endif
+}