Allow setting the PaletteColors collection as an IEnumerable

In WPF it was standard to have read-only collections. However, it's necessary to bind this collection between the ColorPicker and ColorView so it cannot be read-only. ItemsControl in Avalonia implements the Items property a similar way.

src/Avalonia.Controls.ColorPicker/ColorView/ColorView.Properties.cs

@@ -1,4 +1,5 @@
-using System.Collections.ObjectModel;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
 using Avalonia.Controls.Primitives;
 using Avalonia.Data;
 using Avalonia.Media;
@@ -176,10 +177,10 @@ namespace Avalonia.Controls
         /// <summary>
         /// Defines the <see cref="PaletteColors"/> property.
         /// </summary>
-        public static readonly DirectProperty<ColorView, ObservableCollection<Color>> PaletteColorsProperty =
-            AvaloniaProperty.RegisterDirect<ColorView, ObservableCollection<Color>>(
+        public static readonly StyledProperty<IEnumerable<Color>?> PaletteColorsProperty =
+            AvaloniaProperty.Register<ColorView, IEnumerable<Color>?>(
                 nameof(PaletteColors),
-                o => o.PaletteColors);
+                null);
 
         /// <summary>
         /// Defines the <see cref="PaletteColumnCount"/> property.
@@ -392,7 +393,7 @@ namespace Avalonia.Controls
         }
 
         /// <summary>
-        /// Gets the list of individual colors in the palette.
+        /// Gets or sets the collection of individual colors in the palette.
         /// </summary>
         /// <remarks>
         /// This is not commonly set manually. Instead, it should be set automatically by
@@ -401,9 +402,10 @@ namespace Avalonia.Controls
         /// Also note that this property is what should be bound in the control template.
         /// <see cref="Palette"/> is too high-level to use on its own.
         /// </remarks>
-        public ObservableCollection<Color> PaletteColors
+        public IEnumerable<Color>? PaletteColors
         {
-            get => _paletteColors;
+            get => GetValue(PaletteColorsProperty);
+            set => SetValue(PaletteColorsProperty, value);
         }
 
         /// <summary>

src/Avalonia.Controls.ColorPicker/ColorView/ColorView.cs

@@ -1,4 +1,5 @@
 using System;
+using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Globalization;
 using Avalonia.Controls.Converters;
@@ -223,15 +224,17 @@ namespace Avalonia.Controls
                 if (palette != null)
                 {
                     PaletteColumnCount = palette.ColorCount;
-                    PaletteColors.Clear();
 
+                    List<Color> newPaletteColors = new List<Color>();
                     for (int shadeIndex = 0; shadeIndex < palette.ShadeCount; shadeIndex++)
                     {
                         for (int colorIndex = 0; colorIndex < palette.ColorCount; colorIndex++)
                         {
-                            PaletteColors.Add(palette.GetColor(colorIndex, shadeIndex));
+                            newPaletteColors.Add(palette.GetColor(colorIndex, shadeIndex));
                         }
                     }
+
+                    PaletteColors = newPaletteColors;
                 }
             }
             else if (change.Property == IsColorComponentsVisibleProperty ||

src/Avalonia.Controls.ColorPicker/Themes/Fluent/ColorPicker.xaml

@@ -45,9 +45,6 @@
           </DropDownButton.Content>
           <DropDownButton.Flyout>
             <Flyout FlyoutPresenterClasses="NoPadding">
-              <!-- Skip the following:
-                - PaletteColors
-              -->
               <ColorView x:Name="FlyoutColorView"
                          Color="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                          ColorModel="{Binding ColorModel, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
@@ -69,6 +66,7 @@
                          MinHue="{TemplateBinding MinHue}"
                          MinSaturation="{TemplateBinding MinSaturation}"
                          MinValue="{TemplateBinding MinValue}"
+                         PaletteColors="{TemplateBinding PaletteColors}"
                          PaletteColumnCount="{TemplateBinding PaletteColumnCount}"
                          Palette="{TemplateBinding Palette}"
                          SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"