Merge pull request #444 from irihitech/colorpicker

Make ColorPicker dropdown button customizable.
irihitech · Oct 18, 2024 · c56ce90 · c56ce90
2 parents a5b0a89 + 33f266f
commit c56ce90
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 14 deletions.
diff --git a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
@@ -19,42 +19,74 @@
                 <ColorView ColorSpectrumShape="Box" />
                 <ColorView Palette="{DynamicResource SemiColorPalette}" />
             </StackPanel>
-            <StackPanel
-                VerticalAlignment="Top"
-                Orientation="Horizontal">
+            <StackPanel VerticalAlignment="Top" Orientation="Horizontal">
                 <ColorView
                     Name="SimpleColorViewTest"
-                    Theme="{StaticResource SimpleColorView}"
+                    HsvColor="hsv(120,11%,10%)"
                     IsAlphaVisible="True"
-                    HsvColor="hsv(120,11%,10%)" />
+                    Theme="{StaticResource SimpleColorView}" />
                 <StackPanel>
                     <TextBlock Text="{Binding #SimpleColorViewTest.HsvColor}" />
                     <TextBlock Text="{Binding #SimpleColorViewTest.Color}" />
                 </StackPanel>
             </StackPanel>
             <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
-                <ColorPicker ColorSpectrumShape="Ring">
+                <ColorPicker Margin="8" ColorSpectrumShape="Ring">
                     <ColorPicker.Palette>
                         <controls:FlatHalfColorPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
-                <ColorPicker ColorSpectrumShape="Box">
+                <ColorPicker Margin="8" ColorSpectrumShape="Box">
                     <ColorPicker.Palette>
                         <colorPicker:SemiColorLightPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
 
-                <ColorPicker ColorSpectrumShape="Box" Theme="{DynamicResource HexColorPicker}">
+                <ColorPicker
+                    Margin="8"
+                    ColorSpectrumShape="Box"
+                    Theme="{DynamicResource HexColorPicker}">
                     <ColorPicker.Palette>
                         <colorPicker:SemiColorLightPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
             </StackPanel>
+            <StackPanel HorizontalAlignment="Left" >
+                <TextBlock Text="Use Style to customize button"></TextBlock>
+                <ColorPicker
+                    Margin="8"
+                    Width="32"
+                    HsvColor="hsv(120,11%,10%)"
+                    >
+                    <ColorPicker.Content>
+                        <Border
+                            Margin="1"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Background="{Binding $parent[ColorPicker].HsvColor, 
+                                                     Converter={StaticResource ToBrushConverter}}"
+                            CornerRadius="1" />
+                    </ColorPicker.Content>
+                    <ColorPicker.Styles>
+                        <Style Selector="DropDownButton">
+                            <Setter Property="Padding" Value="0"/>
+                            <Style Selector="^ /template/ PathIcon">
+                                <Setter Property="IsVisible" Value="False"/>
+                            </Style>
+                        </Style>
+                    </ColorPicker.Styles>
+                </ColorPicker>
+
+            </StackPanel>
             <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
-                <ColorPicker Theme="{StaticResource SimpleColorPicker}"
-                             HsvColor="hsv(120,11%,10%)" />
-                <ColorPicker Theme="{StaticResource HexSimpleColorPicker}"
-                             HsvColor="hsv(120,11%,10%)" />
+                <ColorPicker
+                    Margin="8"
+                    HsvColor="hsv(120,11%,10%)"
+                    Theme="{StaticResource SimpleColorPicker}" />
+                <ColorPicker
+                    Margin="8"
+                    HsvColor="hsv(120,11%,10%)"
+                    Theme="{StaticResource HexSimpleColorPicker}" />
             </StackPanel>
         </StackPanel>
     </ScrollViewer>

diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
@@ -51,7 +51,6 @@
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    Padding="0,0,10,0"
                     HorizontalContentAlignment="Stretch"
                     VerticalContentAlignment="Stretch"
                     ClipToBounds="True"
@@ -473,6 +472,10 @@
                 </DropDownButton>
             </ControlTemplate>
         </Setter>
+
+        <Style Selector="^ /template/ DropDownButton">
+            <Setter Property="Padding" Value="0 0 10 0"></Setter>
+        </Style>
     </ControlTheme>
 
     <ControlTheme
@@ -523,7 +526,6 @@
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    Padding="0,0,10,0"
                     HorizontalContentAlignment="Stretch"
                     VerticalContentAlignment="Stretch"
                     ClipToBounds="True"