Work around AoT issue by setting ColorPicker value in code instead of using XAML binding

Author: AndrewKeepCoding

components/ColorPicker/src/ColorPicker.cs

@@ -42,6 +42,7 @@ namespace CommunityToolkit.WinUI.Controls;
 [TemplatePart(Name = nameof(ColorPicker.CheckeredBackground9Border),  Type = typeof(Border))]
 [TemplatePart(Name = nameof(ColorPicker.CheckeredBackground10Border), Type = typeof(Border))]
 [TemplatePart(Name = nameof(ColorPicker.ColorPanelSelector),          Type = typeof(Segmented))]
+[TemplatePart(Name = nameof(ColorPicker.ContentContainer),            Type = typeof(SwitchPresenter))]
 [TemplatePart(Name = nameof(ColorPicker.ColorSpectrumControl),        Type = typeof(ColorSpectrum))]
 [TemplatePart(Name = nameof(ColorPicker.ColorSpectrumAlphaSlider),    Type = typeof(ColorPickerSlider))]
 [TemplatePart(Name = nameof(ColorPicker.ColorSpectrumThirdDimensionSlider), Type = typeof(ColorPickerSlider))]
@@ -74,7 +75,9 @@ public partial class ColorPicker : Microsoft.UI.Xaml.Controls.ColorPicker
     private Color?               updatedRgbColor            = null;
     private DispatcherQueueTimer? dispatcherQueueTimer       = null;
 
-    private Segmented           ColorPanelSelector;
+    private Segmented       ColorPanelSelector;
+    private SwitchPresenter ContentContainer;
+
     private ColorSpectrum     ColorSpectrumControl;
     private ColorPickerSlider ColorSpectrumAlphaSlider;
     private ColorPickerSlider ColorSpectrumThirdDimensionSlider;
@@ -177,6 +180,7 @@ protected override void OnApplyTemplate()
         this.ConnectEvents(false);
 
         this.ColorPanelSelector = (Segmented)GetTemplateChild(nameof(ColorPanelSelector));
+        this.ContentContainer   = (SwitchPresenter)GetTemplateChild(nameof(ContentContainer));
 
         this.ColorSpectrumControl              = (ColorSpectrum)GetTemplateChild(nameof(ColorSpectrumControl));
         this.ColorSpectrumAlphaSlider          = (ColorPickerSlider)this.GetTemplateChild(nameof(ColorSpectrumAlphaSlider));
@@ -255,6 +259,8 @@ private void ConnectEvents(bool connected)
             this.eventsConnected == false)
         {
             // Add all events
+            if (this.ColorPanelSelector != null) { this.ColorPanelSelector.SelectionChanged += this.ColorPanelSelector_SelectionChanged; }
+
             if (this.ColorSpectrumControl != null) { this.ColorSpectrumControl.ColorChanged += ColorSpectrum_ColorChanged; }
             if (this.ColorSpectrumControl != null) { this.ColorSpectrumControl.GotFocus     += ColorSpectrum_GotFocus; }
             if (this.HexInputTextBox      != null) { this.HexInputTextBox.KeyDown           += HexInputTextBox_KeyDown; }
@@ -299,6 +305,8 @@ private void ConnectEvents(bool connected)
                  this.eventsConnected == true)
         {
             // Remove all events
+            if (this.ColorPanelSelector != null) { this.ColorPanelSelector.SelectionChanged -= this.ColorPanelSelector_SelectionChanged; }
+
             if (this.ColorSpectrumControl != null) { this.ColorSpectrumControl.ColorChanged -= ColorSpectrum_ColorChanged; }
             if (this.ColorSpectrumControl != null) { this.ColorSpectrumControl.GotFocus     -= ColorSpectrum_GotFocus; }
             if (this.HexInputTextBox      != null) { this.HexInputTextBox.KeyDown           -= HexInputTextBox_KeyDown; }
@@ -1186,6 +1194,22 @@ private void CustomPaletteColors_CollectionChanged(object? sender, NotifyCollect
         return;
     }
 
+    /// <summary>
+    /// Event handler for when the color panel selector selection changes.
+    /// We are setting the value here instead of ElementName binding as a workaround for AoT issues.
+    /// (See https://github.com/microsoft/microsoft-ui-xaml/issues/10214)
+    /// </summary>
+    private void ColorPanelSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)
+    {
+        if (this.ContentContainer is null ||
+            (sender as Segmented)?.SelectedItem is not FrameworkElement selectedItem)
+        {
+            return;
+        }
+
+        this.ContentContainer.Value = selectedItem.Name;
+    }
+
     /// <summary>
     /// Event handler for when the color spectrum color is changed.
     /// This occurs when the user presses on the spectrum to select a new color.

components/ColorPicker/src/ColorPicker.xaml

@@ -237,8 +237,7 @@
                             </controls:Segmented>
 
                             <controls:SwitchPresenter x:Name="ContentContainer"
-                                                      Grid.Row="2"
-                                                      Value="{Binding ElementName=ColorPanelSelector, Path=SelectedItem.Name}">
+                                                      Grid.Row="2">
                                 <controls:Case Value="SpectrumItem">
                                     <Grid HorizontalAlignment="Stretch"
                                           animations:Implicit.HideAnimations="{StaticResource HideTransitions}"