feat: enhance ColorPicker & redesign demo.

demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml

@@ -10,18 +10,15 @@
     mc:Ignorable="d">
     <ScrollViewer>
         <StackPanel Spacing="20">
-            <StackPanel
-                VerticalAlignment="Top"
-                Orientation="Horizontal"
-                Spacing="20">
+            <StackPanel Orientation="Horizontal" Spacing="20">
                 <ColorView Name="Test" ColorSpectrumShape="Ring" />
                 <ColorView ColorSpectrumShape="Box" />
                 <ColorView Palette="{DynamicResource SemiColorPalette}" />
             </StackPanel>
-            <StackPanel VerticalAlignment="Top" Orientation="Horizontal">
+            <StackPanel Orientation="Horizontal">
                 <ColorView
                     Name="SimpleColorViewTest"
-                    HsvColor="hsv(120,11%,10%)"
+                    HsvColor="hsv(180,80%,70%)"
                     IsAlphaVisible="True"
                     Theme="{StaticResource SimpleColorView}" />
                 <StackPanel>
@@ -29,63 +26,55 @@
                     <TextBlock Text="{Binding #SimpleColorViewTest.Color}" />
                 </StackPanel>
             </StackPanel>
-            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
-                <ColorPicker Margin="8" ColorSpectrumShape="Ring">
+            <StackPanel Orientation="Horizontal" Spacing="8">
+                <ColorPicker ColorSpectrumShape="Ring">
                     <ColorPicker.Palette>
                         <FlatHalfColorPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
-                <ColorPicker Margin="8" ColorSpectrumShape="Box">
+                <ColorPicker ColorSpectrumShape="Box">
                     <ColorPicker.Palette>
                         <semi:SemiColorLightPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
-
                 <ColorPicker
-                    Margin="8"
-                    ColorSpectrumShape="Box"
-                    Theme="{DynamicResource HexColorPicker}">
+                    Theme="{DynamicResource HexColorPicker}"
+                    ColorSpectrumShape="Box">
                     <ColorPicker.Palette>
                         <semi:SemiColorLightPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
             </StackPanel>
-            <StackPanel HorizontalAlignment="Left" >
-                <TextBlock Text="Use Style to customize button"></TextBlock>
+            <StackPanel HorizontalAlignment="Left">
+                <TextBlock Text="Use Style to customize button" />
                 <ColorPicker
                     Margin="8"
                     Width="32"
-                    HsvColor="hsv(120,11%,10%)"
-                    >
+                    HsvColor="hsv(180,80%,70%)">
                     <ColorPicker.Content>
                         <Border
                             Margin="1"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Stretch"
-                            Background="{Binding $parent[ColorPicker].HsvColor, 
-                                                     Converter={StaticResource ToBrushConverter}}"
+                            Background="{Binding $parent[ColorPicker].HsvColor, Converter={StaticResource ToBrushConverter}}"
                             CornerRadius="1" />
                     </ColorPicker.Content>
                     <ColorPicker.Styles>
                         <Style Selector="DropDownButton">
-                            <Setter Property="Padding" Value="0"/>
+                            <Setter Property="Padding" Value="0" />
                             <Style Selector="^ /template/ PathIcon">
-                                <Setter Property="IsVisible" Value="False"/>
+                                <Setter Property="IsVisible" Value="False" />
                             </Style>
                         </Style>
                     </ColorPicker.Styles>
                 </ColorPicker>
-
             </StackPanel>
-            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
+
+            <StackPanel Orientation="Horizontal" Spacing="8">
                 <ColorPicker
-                    Margin="8"
-                    HsvColor="hsv(120,11%,10%)"
-                    Theme="{StaticResource SimpleColorPicker}" />
+                    Theme="{StaticResource SimpleColorPicker}"
+                    HsvColor="hsv(180,80%,70%)" />
                 <ColorPicker
-                    Margin="8"
-                    HsvColor="hsv(120,11%,10%)"
-                    Theme="{StaticResource HexSimpleColorPicker}" />
+                    Theme="{StaticResource HexSimpleColorPicker}"
+                    HsvColor="hsv(180,80%,70%)" />
             </StackPanel>
         </StackPanel>
     </ScrollViewer>

src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml

@@ -7,25 +7,18 @@
     <converters:ToBrushConverter x:Key="ToBrushConverter" />
 
     <ControlTheme x:Key="{x:Type ColorPicker}" TargetType="ColorPicker">
-        <Setter Property="CornerRadius" Value="3" />
-        <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="MinHeight" Value="32" />
+        <Setter Property="CornerRadius" Value="3" />
         <Setter Property="Content">
             <Template>
                 <Panel>
                     <Border
                         Margin="1,1,0,1"
-                        HorizontalAlignment="Stretch"
-                        VerticalAlignment="Stretch"
                         Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
                         CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
                     <Border
                         Margin="1,1,0,1"
-                        HorizontalAlignment="Stretch"
-                        VerticalAlignment="Stretch"
                         Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
                         CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
                 </Panel>
@@ -39,12 +32,14 @@
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    HorizontalContentAlignment="Stretch"
-                    VerticalContentAlignment="Stretch"
-                    ClipToBounds="True"
+                    MinWidth="{TemplateBinding MinWidth}"
+                    MinHeight="{TemplateBinding MinHeight}"
+                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                     Content="{TemplateBinding Content}"
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}"
+                    ClipToBounds="True"
                     UseLayoutRounding="False">
                     <DropDownButton.Styles>
                         <Style Selector="FlyoutPresenter.nopadding">
@@ -499,9 +494,10 @@
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    HorizontalContentAlignment="Stretch"
-                    VerticalContentAlignment="Stretch"
-                    ClipToBounds="True"
+                    MinWidth="{TemplateBinding MinWidth}"
+                    MinHeight="{TemplateBinding MinHeight}"
+                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                     Content="{TemplateBinding Content}"
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}"

src/Semi.Avalonia.ColorPicker/Shared.axaml

@@ -2,7 +2,7 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:semi="https://irihi.tech/semi">
-    <FontWeight x:Key="ColorViewRadioButtonFontWeight">600</FontWeight>
+    <StaticResource x:Key="ColorViewRadioButtonFontWeight" ResourceKey="SemiFontWeightBold" />
     <Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness>
     <x:Double x:Key="ColorViewNumericUpDownWidth">70</x:Double>
 
@@ -18,7 +18,7 @@
     <x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double>
     <x:Double x:Key="ColorPreviewerAccentSectionHeight">20</x:Double>
     <x:Double x:Key="ColorPreviewerHeight">48</x:Double>
-    <CornerRadius x:Key="ColorPreviewerCornerRadius">3</CornerRadius>
+    <StaticResource x:Key="ColorPreviewerCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
 
     <semi:SemiColorDarkPalette x:Key="SemiColorPalette" />