Make ColorPicker button content customizable. (#13073)

* feat: add Content and ContentPresenter for ColorPicker

* feat: update according to https://github.com/AvaloniaUI/Avalonia/pull/13073 feedback.

* feat: add HorizontalContentAlignment and VerticalContentAlignment default value to simple theme.

* feat: update documentation wording.

---------

Co-authored-by: Max Katz <maxkatz6@outlook.com>

samples/ControlCatalog/Pages/ColorPickerPage.xaml

@@ -3,12 +3,14 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:controls="using:Avalonia.Controls"
+             xmlns:converters="clr-namespace:Avalonia.Markup.Xaml.Converters;assembly=Avalonia.Markup.Xaml"
              mc:Ignorable="d"
              d:DesignWidth="800"
              d:DesignHeight="450"
              x:Class="ControlCatalog.Pages.ColorPickerPage">
 
   <UserControl.Resources>
+    <converters:ColorToBrushConverter x:Key="ToBrushConverter"/>
   </UserControl.Resources>
 
   <Grid x:Name="LayoutRoot"
@@ -17,14 +19,30 @@
     <ColorView Grid.Column="0"
                Grid.Row="0"
                ColorSpectrumShape="Ring" />
-    <ColorPicker Grid.Column="0"
-                 Grid.Row="1"
-                 HsvColor="hsv(120, 1, 1)"
-                 Margin="0,50,0,0">
-      <ColorPicker.Palette>
-        <controls:FlatHalfColorPalette />
-      </ColorPicker.Palette>
-    </ColorPicker>
+    <StackPanel Grid.Column="0" Grid.Row="1">
+      <ColorPicker Grid.Column="0"
+                   Grid.Row="1"
+                   HsvColor="hsv(120, 1, 1)"
+                   Margin="0,50,0,0">
+        <ColorPicker.Palette>
+          <controls:FlatHalfColorPalette />
+        </ColorPicker.Palette>
+      </ColorPicker>
+      <ColorPicker HsvColor="hsv(120, 1, 1)"
+                   Width="150"
+                   Margin="0,50,0,0">
+      </ColorPicker>
+      <ColorPicker Width="150"
+                   VerticalContentAlignment="Center"
+                   HsvColor="hsv(120, 1, 1)"
+                   Margin="0,50,0,0">
+        <ColorPicker.Content>
+          <TextBlock Text="{Binding $parent[ColorPicker].Color}" 
+                     Foreground="{Binding $parent[ColorPicker].Color, Converter={StaticResource ToBrushConverter}}"></TextBlock>
+        </ColorPicker.Content>
+      </ColorPicker>
+    </StackPanel>
+
     <Grid Grid.Column="2"
           Grid.Row="0"
           RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto">

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

@@ -1,8 +1,14 @@
-namespace Avalonia.Controls
+using Avalonia.Controls.Metadata;
+using Avalonia.Controls.Primitives;
+using Avalonia.Controls.Templates;
+using Avalonia.Layout;
+using Avalonia.Metadata;
+
+namespace Avalonia.Controls
 {
     /// <summary>
     /// Presents a color for user editing using a spectrum, palette and component sliders within a drop down.
-    /// Editing is available when the drop down flyout is opened; otherwise, only the preview color is shown.
+    /// Editing is available when the drop down flyout is opened; otherwise, only the preview content area is shown.
     /// </summary>
     public class ColorPicker : ColorView
     {
@@ -12,5 +18,70 @@
         public ColorPicker() : base()
         {
         }
+
+        /// <summary>
+        /// Defines the <see cref="Content"/> property.
+        /// </summary>
+        public static readonly StyledProperty<object?> ContentProperty =
+            ContentControl.ContentProperty.AddOwner<ColorPicker>();
+
+        /// <summary>
+        /// Defines the <see cref="ContentTemplate"/> property.
+        /// </summary>
+        public static readonly StyledProperty<IDataTemplate?> ContentTemplateProperty =
+            ContentControl.ContentTemplateProperty.AddOwner<ColorPicker>();
+
+        /// <summary>
+        /// Defines the <see cref="HorizontalContentAlignment"/> property.
+        /// </summary>
+        public static readonly StyledProperty<HorizontalAlignment> HorizontalContentAlignmentProperty =
+            ContentControl.HorizontalContentAlignmentProperty.AddOwner<ColorPicker>();
+
+        /// <summary>
+        /// Defines the <see cref="VerticalContentAlignment"/> property.
+        /// </summary>
+        public static readonly StyledProperty<VerticalAlignment> VerticalContentAlignmentProperty =
+            ContentControl.VerticalContentAlignmentProperty.AddOwner<ColorPicker>();
+
+        /// <summary>
+        /// Gets or sets any content displayed in the ColorPicker's preview content area.
+        /// </summary>
+        /// <remarks>
+        /// By default this should show a preview of the currently selected color. 
+        /// </remarks>
+        [Content]
+        [DependsOn(nameof(ContentTemplate))]
+        public object? Content
+        {
+            get => GetValue(ContentProperty);
+            set => SetValue(ContentProperty, value);
+        }
+
+        /// <summary>
+        /// Gets or sets the data template used to display the content of the ColorPicker's preview content area.
+        /// </summary>
+        public IDataTemplate? ContentTemplate
+        {
+            get => GetValue(ContentTemplateProperty);
+            set => SetValue(ContentTemplateProperty, value);
+        }
+
+        /// <summary>
+        /// Gets or sets the horizontal alignment of the content within the ColorPicker's preview content area.
+        /// </summary>
+        public HorizontalAlignment HorizontalContentAlignment
+        {
+            get => GetValue(HorizontalContentAlignmentProperty);
+            set => SetValue(HorizontalContentAlignmentProperty, value);
+        }
+
+        /// <summary>
+        /// Gets or sets the vertical alignment of the content within the ColorPicker's preview content area.
+        /// </summary>
+        public VerticalAlignment VerticalContentAlignment
+        {
+            get => GetValue(VerticalContentAlignmentProperty);
+            set => SetValue(VerticalContentAlignmentProperty, value);
+        }
     }
 }

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

@@ -12,6 +12,24 @@
     <Setter Property="Height" Value="32" />
     <Setter Property="Width" Value="64" />
     <Setter Property="MinWidth" Value="64" />
+    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
+    <Setter Property="Content">
+      <Template>
+        <Panel>
+          <Border Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
+                  CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  Margin="1,1,0,1" />
+          <Border Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
+                  CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  Margin="1,1,0,1" />
+        </Panel>
+      </Template>
+    </Setter>
     <Setter Property="Palette">
       <controls:FluentColorPalette />
     </Setter>
@@ -20,8 +38,10 @@
         <DropDownButton CornerRadius="{TemplateBinding CornerRadius}"
                         Height="{TemplateBinding Height}"
                         Width="{TemplateBinding Width}"
-                        HorizontalContentAlignment="Stretch"
-                        VerticalContentAlignment="Stretch"
+                        Content="{TemplateBinding Content}"
+                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
                         Padding="0,0,10,0"
                         UseLayoutRounding="False">
           <DropDownButton.Styles>
@@ -29,21 +49,6 @@
               <Setter Property="Padding" Value="0" />
             </Style>
           </DropDownButton.Styles>
-          <DropDownButton.Content>
-            <!-- Preview color -->
-            <Panel>
-              <Border Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
-                      CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
-                      HorizontalAlignment="Stretch"
-                      VerticalAlignment="Stretch"
-                      Margin="1,1,0,1" />
-              <Border Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
-                      CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
-                      HorizontalAlignment="Stretch"
-                      VerticalAlignment="Stretch"
-                      Margin="1,1,0,1" />
-            </Panel>
-          </DropDownButton.Content>
           <DropDownButton.Flyout>
             <Flyout FlyoutPresenterClasses="nopadding"
                     Placement="Top">
@@ -519,7 +524,6 @@
       <Setter Property="IsPerceptive" Value="False" />
     </Style>
     -->
-
   </ControlTheme>
 
 </ResourceDictionary>

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

@@ -12,6 +12,24 @@
     <Setter Property="Height" Value="32" />
     <Setter Property="Width" Value="64" />
     <Setter Property="MinWidth" Value="64" />
+    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
+    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
+    <Setter Property="Content">
+      <Template>
+        <Panel>
+          <Border Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
+                  CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  Margin="1,1,0,1" />
+          <Border Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
+                  CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
+                  HorizontalAlignment="Stretch"
+                  VerticalAlignment="Stretch"
+                  Margin="1,1,0,1" />
+        </Panel>
+      </Template>
+    </Setter>
     <Setter Property="Palette">
       <controls:FluentColorPalette />
     </Setter>
@@ -20,8 +38,10 @@
         <DropDownButton CornerRadius="{TemplateBinding CornerRadius}"
                         Height="{TemplateBinding Height}"
                         Width="{TemplateBinding Width}"
-                        HorizontalContentAlignment="Stretch"
-                        VerticalContentAlignment="Stretch"
+                        Content="{TemplateBinding Content}"
+                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
                         Padding="0,0,10,0"
                         UseLayoutRounding="False">
           <DropDownButton.Styles>
@@ -29,21 +49,6 @@
               <Setter Property="Padding" Value="0" />
             </Style>
           </DropDownButton.Styles>
-          <DropDownButton.Content>
-            <!-- Preview color -->
-            <Panel>
-              <Border Background="{StaticResource ColorControlCheckeredBackgroundBrush}"
-                      CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
-                      HorizontalAlignment="Stretch"
-                      VerticalAlignment="Stretch"
-                      Margin="1,1,0,1" />
-              <Border Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
-                      CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}"
-                      HorizontalAlignment="Stretch"
-                      VerticalAlignment="Stretch"
-                      Margin="1,1,0,1" />
-            </Panel>
-          </DropDownButton.Content>
           <DropDownButton.Flyout>
             <Flyout Placement="Top">
 
@@ -518,7 +523,6 @@
       <Setter Property="IsPerceptive" Value="False" />
     </Style>
     -->
-
   </ControlTheme>
 
 </ResourceDictionary>