Make ColorPicker button content customizable

Port of upstream AvaloniaUI/Avalonia#13073
robloo · Apr 13, 2024 · c692e6a · c692e6a
1 parent 9f0242b
commit c692e6a
Showing 1 changed file with 23 additions and 17 deletions.
diff --git a/src/FluentAvalonia/Styling/ControlThemes/BasicControls/ColorPicker/ColorPicker.axaml b/src/FluentAvalonia/Styling/ControlThemes/BasicControls/ColorPicker/ColorPicker.axaml
@@ -16,6 +16,25 @@
     <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>
+        <!-- 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>
+      </Template>
+    </Setter>
     <Setter Property="Palette">
       <controls:FluentColorPalette />
     </Setter>
@@ -24,30 +43,17 @@
         <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>
             <Style Selector="FlyoutPresenter.nopadding">
               <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">