From 27b08caae72b85959a53db81a77b3be766e23b40 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Fri, 28 Feb 2025 16:18:41 +0800
Subject: [PATCH 1/8] misc: format ColorPicker xaml.

---
 .../Controls/ColorPicker.axaml                | 113 +++++-----
 .../Controls/ColorPreviewer.axaml             |  39 ++--
 .../Controls/ColorSlider.axaml                |  52 ++---
 .../Controls/ColorSpectrum.axaml              | 198 +++++++++---------
 .../Controls/ColorView.axaml                  | 129 ++++++------
 .../Controls/_index.axaml                     |  12 ++
 src/Semi.Avalonia.ColorPicker/Index.axaml     |   2 +-
 7 files changed, 254 insertions(+), 291 deletions(-)
 create mode 100644 src/Semi.Avalonia.ColorPicker/Controls/_index.axaml

diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
index 27745b7..f3d894a 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
@@ -1,17 +1,8 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:Avalonia.Controls"
     xmlns:converters="using:Avalonia.Controls.Converters"
-    xmlns:primitives="using:Avalonia.Controls.Primitives"
     x:CompileBindings="True">
-    <ResourceDictionary.MergedDictionaries>
-        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml" />
-        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml" />
-        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml" />
-        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorView.axaml" />
-    </ResourceDictionary.MergedDictionaries>
-
     <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
     <converters:ToBrushConverter x:Key="ToBrushConverter" />
 
@@ -30,21 +21,18 @@
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                        CornerRadius="{TemplateBinding CornerRadius,
-                                                       Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+                        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}}" />
+                        Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
+                        CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
                 </Panel>
             </Template>
         </Setter>
         <Setter Property="Palette">
-            <controls:FluentColorPalette />
+            <FluentColorPalette />
         </Setter>
         <Setter Property="Template">
             <ControlTemplate TargetType="{x:Type ColorPicker}">
@@ -127,7 +115,7 @@
                                                 <ColumnDefinition Width="*" />
                                                 <ColumnDefinition Width="Auto" MinWidth="32" />
                                             </Grid.ColumnDefinitions>
-                                            <primitives:ColorSlider
+                                            <ColorSlider
                                                 Name="ColorSpectrumThirdComponentSlider"
                                                 Grid.Column="0"
                                                 Margin="0,0,12,0"
@@ -141,8 +129,8 @@
                                                 IsPerceptive="False"
                                                 IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                                 Orientation="Vertical" />
-                                            <primitives:ColorSpectrum
-                                                x:Name="ColorSpectrum"
+                                            <ColorSpectrum
+                                                Name="ColorSpectrum"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Stretch"
@@ -155,7 +143,7 @@
                                                 MinSaturation="{TemplateBinding MinSaturation}"
                                                 MinValue="{TemplateBinding MinValue}"
                                                 Shape="{TemplateBinding ColorSpectrumShape}" />
-                                            <primitives:ColorSlider
+                                            <ColorSlider
                                                 Name="ColorSpectrumAlphaSlider"
                                                 Grid.Column="2"
                                                 Margin="12,0,0,0"
@@ -167,12 +155,12 @@
                                                 HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
                                                 IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                                 Orientation="Vertical">
-                                                <primitives:ColorSlider.IsVisible>
+                                                <ColorSlider.IsVisible>
                                                     <MultiBinding Converter="{x:Static BoolConverters.And}">
                                                         <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                                     </MultiBinding>
-                                                </primitives:ColorSlider.IsVisible>
-                                            </primitives:ColorSlider>
+                                                </ColorSlider.IsVisible>
+                                            </ColorSlider>
                                         </Grid>
                                     </TabItem>
                                     <!--  Palette Tab  -->
@@ -228,7 +216,7 @@
                                         <Grid
                                             Margin="12"
                                             ColumnDefinitions="Auto,*"
-                                            RowDefinitions="Auto,24,1*,1*,1*,1*,12"
+                                            RowDefinitions="Auto,24,*,*,*,*,12"
                                             Tag="{TemplateBinding ColorModel}">
                                             <Grid.Styles>
                                                 <Style Selector="NumericUpDown">
@@ -272,13 +260,13 @@
                                                 Grid.Row="0"
                                                 Grid.Column="0"
                                                 Grid.ColumnSpan="2"
-                                                ColumnDefinitions="1*,12,1*">
+                                                ColumnDefinitions="*,12,*">
                                                 <!--  RadioButtonGroup  -->
                                                 <Border
                                                     Padding="2"
                                                     Background="{DynamicResource ColorViewRadioButtonPointeroverBackground}"
                                                     CornerRadius="3">
-                                                    <Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
+                                                    <Grid ColumnDefinitions="*,*" IsVisible="{TemplateBinding IsColorModelVisible}">
                                                         <RadioButton
                                                             Name="RgbRadioButton"
                                                             Grid.Column="0"
@@ -287,9 +275,9 @@
                                                             Content="RGB"
                                                             CornerRadius="3,0,0,3"
                                                             IsChecked="{TemplateBinding ColorModel,
-                                                                                        Converter={StaticResource EnumToBoolConverter},
-                                                                                        ConverterParameter={x:Static controls:ColorModel.Rgba},
-                                                                                        Mode=TwoWay}"
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static ColorModel.Rgba},
+                                                            Mode=TwoWay}"
                                                             Theme="{DynamicResource ColorViewRadioButton}" />
                                                         <RadioButton
                                                             Name="HsvRadioButton"
@@ -299,9 +287,9 @@
                                                             Content="HSV"
                                                             CornerRadius="0,3,3,0"
                                                             IsChecked="{TemplateBinding ColorModel,
-                                                                                        Converter={StaticResource EnumToBoolConverter},
-                                                                                        ConverterParameter={x:Static controls:ColorModel.Hsva},
-                                                                                        Mode=TwoWay}"
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static ColorModel.Hsva},
+                                                            Mode=TwoWay}"
                                                             Theme="{DynamicResource ColorViewRadioButton}" />
                                                     </Grid>
                                                 </Border>
@@ -332,15 +320,14 @@
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component1Slider}" />
-                                            <primitives:ColorSlider
-                                                x:Name="Component1Slider"
+                                            <ColorSlider
+                                                Name="Component1Slider"
                                                 Grid.Row="2"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component1"
-                                                ColorModel="{TemplateBinding ColorModel,
-                                                                             Mode=OneWay}"
+                                                ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
                                                 HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
@@ -363,15 +350,14 @@
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component2Slider}" />
-                                            <primitives:ColorSlider
-                                                x:Name="Component2Slider"
+                                            <ColorSlider
+                                                Name="Component2Slider"
                                                 Grid.Row="3"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component2"
-                                                ColorModel="{TemplateBinding ColorModel,
-                                                                             Mode=OneWay}"
+                                                ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
                                                 HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
@@ -394,15 +380,14 @@
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component3Slider}" />
-                                            <primitives:ColorSlider
-                                                x:Name="Component3Slider"
+                                            <ColorSlider
+                                                Name="Component3Slider"
                                                 Grid.Row="4"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component3"
-                                                ColorModel="{TemplateBinding ColorModel,
-                                                                             Mode=OneWay}"
+                                                ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
                                                 HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
@@ -432,34 +417,33 @@
                                                     </MultiBinding>
                                                 </NumericUpDown.IsVisible>
                                             </NumericUpDown>
-                                            <primitives:ColorSlider
-                                                x:Name="AlphaComponentSlider"
+                                            <ColorSlider
+                                                Name="AlphaComponentSlider"
                                                 Grid.Row="5"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Alpha"
-                                                ColorModel="{TemplateBinding ColorModel,
-                                                                             Mode=OneWay}"
+                                                ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
                                                 HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
                                                 Orientation="Horizontal"
                                                 TickFrequency="1">
-                                                <primitives:ColorSlider.IsVisible>
+                                                <ColorSlider.IsVisible>
                                                     <MultiBinding Converter="{x:Static BoolConverters.And}">
                                                         <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                                         <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                                     </MultiBinding>
-                                                </primitives:ColorSlider.IsVisible>
-                                            </primitives:ColorSlider>
+                                                </ColorSlider.IsVisible>
+                                            </ColorSlider>
                                         </Grid>
                                     </TabItem>
                                 </TabControl>
                                 <!--  Previewer  -->
                                 <!--  Note that top/bottom margins have -5 to remove for drop shadow padding  -->
-                                <primitives:ColorPreviewer
+                                <ColorPreviewer
                                     Grid.Row="1"
                                     Margin="12,-5,12,7"
                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
@@ -471,9 +455,9 @@
                 </DropDownButton>
             </ControlTemplate>
         </Setter>
-        
+
         <Style Selector="^ /template/ DropDownButton">
-            <Setter Property="Padding" Value="0 0 10 0"></Setter>
+            <Setter Property="Padding" Value="0 0 10 0" />
         </Style>
     </ControlTheme>
 
@@ -499,8 +483,7 @@
                         Margin="1,1,0,1"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
-                        Background="{TemplateBinding HsvColor,
-                                                     Converter={StaticResource ToBrushConverter}}"
+                        Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
                         CornerRadius="{TemplateBinding CornerRadius}" />
                     <TextBlock
                         Grid.Column="1"
@@ -557,8 +540,8 @@
                                     Grid.Row="0"
                                     CornerRadius="8 8 0 0"
                                     ClipToBounds="True">
-                                    <primitives:ColorSpectrum
-                                        x:Name="ColorSpectrum"
+                                    <ColorSpectrum
+                                        Name="ColorSpectrum"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
                                         Components="{TemplateBinding ColorSpectrumComponents}"
@@ -571,7 +554,7 @@
                                         MinValue="{TemplateBinding MinValue}"
                                         Shape="{TemplateBinding ColorSpectrumShape}" />
                                 </Border>
-                                <primitives:ColorSlider
+                                <ColorSlider
                                     Name="ColorSpectrumThirdComponentSlider"
                                     Grid.Row="1"
                                     HorizontalAlignment="Stretch"
@@ -583,8 +566,8 @@
                                     IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                     Orientation="Horizontal" />
 
-                                <primitives:ColorSlider
-                                    x:Name="ColorSpectrumAlphaSlider"
+                                <ColorSlider
+                                    Name="ColorSpectrumAlphaSlider"
                                     Grid.Row="2"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
@@ -597,8 +580,7 @@
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
                                     TickFrequency="1"
-                                    Orientation="Horizontal">
-                                </primitives:ColorSlider>
+                                    Orientation="Horizontal" />
                                 <StackPanel
                                     Grid.Row="3"
                                     HorizontalAlignment="Stretch"
@@ -693,8 +675,7 @@
                         Margin="1,1,0,1"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
-                        Background="{TemplateBinding HsvColor,
-                                                     Converter={StaticResource ToBrushConverter}}"
+                        Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
                         CornerRadius="{TemplateBinding CornerRadius}" />
                     <TextBlock
                         Grid.Column="1"
@@ -709,4 +690,4 @@
         </Setter>
     </ControlTheme>
 
-</ResourceDictionary>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml
index 6ee2837..3ddd64b 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml
@@ -33,17 +33,16 @@
                                 Name="PART_AccentDecrement2Border"
                                 Grid.Column="0"
                                 Background="{TemplateBinding HsvColor,
-                                                             Converter={StaticResource AccentColorConverter},
-                                                             ConverterParameter='-2'}"
-                                CornerRadius="{TemplateBinding CornerRadius,
-                                                               Converter={StaticResource LeftCornerRadiusFilterConverter}}"
+                                Converter={StaticResource AccentColorConverter},
+                                ConverterParameter='-2'}"
+                                CornerRadius="{TemplateBinding CornerRadius,Converter={StaticResource LeftCornerRadiusFilterConverter}}"
                                 Tag="-2" />
                             <Border
                                 Name="PART_AccentDecrement1Border"
                                 Grid.Column="1"
                                 Background="{TemplateBinding HsvColor,
-                                                             Converter={StaticResource AccentColorConverter},
-                                                             ConverterParameter='-1'}"
+                                Converter={StaticResource AccentColorConverter},
+                                ConverterParameter='-1'}"
                                 Tag="-1" />
                         </Grid>
                         <!--  Right accent colors  -->
@@ -63,17 +62,16 @@
                                 Name="PART_AccentIncrement1Border"
                                 Grid.Column="0"
                                 Background="{TemplateBinding HsvColor,
-                                                             Converter={StaticResource AccentColorConverter},
-                                                             ConverterParameter='1'}"
+                                Converter={StaticResource AccentColorConverter},
+                                ConverterParameter='1'}"
                                 Tag="1" />
                             <Border
                                 Name="PART_AccentIncrement2Border"
                                 Grid.Column="1"
                                 Background="{TemplateBinding HsvColor,
-                                                             Converter={StaticResource AccentColorConverter},
-                                                             ConverterParameter='2'}"
-                                CornerRadius="{TemplateBinding CornerRadius,
-                                                               Converter={StaticResource RightCornerRadiusFilterConverter}}"
+                                Converter={StaticResource AccentColorConverter},
+                                ConverterParameter='2'}"
+                                CornerRadius="{TemplateBinding CornerRadius,Converter={StaticResource RightCornerRadiusFilterConverter}}"
                                 Tag="2" />
                         </Grid>
                         <!--  Preview color: Must be last for drop shadow Z-index  -->
@@ -85,12 +83,13 @@
                             BoxShadow="{DynamicResource ColorPreviewerMainBoxShadow}"
                             CornerRadius="{TemplateBinding CornerRadius}">
                             <Panel>
-                                <Border Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" CornerRadius="{TemplateBinding CornerRadius}" />
+                                <Border
+                                    Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
+                                    CornerRadius="{TemplateBinding CornerRadius}" />
                                 <Border
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Stretch"
-                                    Background="{TemplateBinding HsvColor,
-                                                                 Converter={StaticResource ToBrushConverter}}"
+                                    Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
                                     CornerRadius="{TemplateBinding CornerRadius}" />
                             </Panel>
                         </Border>
@@ -100,15 +99,15 @@
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         CornerRadius="{TemplateBinding CornerRadius}"
-                        IsVisible="{TemplateBinding IsAccentColorsVisible,
-                                                    Converter={x:Static BoolConverters.Not}}">
+                        IsVisible="{TemplateBinding IsAccentColorsVisible,Converter={x:Static BoolConverters.Not}}">
                         <Panel>
-                            <Border Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" CornerRadius="{TemplateBinding CornerRadius}" />
+                            <Border
+                                Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
+                                CornerRadius="{TemplateBinding CornerRadius}" />
                             <Border
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
-                                Background="{TemplateBinding HsvColor,
-                                                             Converter={StaticResource ToBrushConverter}}"
+                                Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
                                 CornerRadius="{TemplateBinding CornerRadius}" />
                         </Panel>
                     </Border>
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml
index 8b7fe64..03c6840 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml
@@ -13,17 +13,15 @@
         <Setter Property="BorderThickness" Value="{DynamicResource ColorSliderThumbBorderBrush}" />
         <Setter Property="CornerRadius" Value="999" />
         <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate>
-                    <Border
-                        Margin="1"
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        BoxShadow="{DynamicResource ColorSliderBoxShadow}"
-                        CornerRadius="{TemplateBinding CornerRadius}" />
-                </ControlTemplate>
-            </Setter.Value>
+            <ControlTemplate>
+                <Border
+                    Margin="1"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    BoxShadow="{DynamicResource ColorSliderBoxShadow}"
+                    CornerRadius="{TemplateBinding CornerRadius}" />
+            </ControlTemplate>
         </Setter>
     </ControlTheme>
 
@@ -45,20 +43,16 @@
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                                RadiusX="{TemplateBinding CornerRadius,
-                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,
-                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Rectangle
                                 Width="{Binding #PART_Track.Bounds.Width}"
                                 Height="{Binding #PART_Track.Bounds.Height}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{TemplateBinding Background}"
-                                RadiusX="{TemplateBinding CornerRadius,
-                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,
-                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Track
                                 Name="PART_Track"
                                 Height="12"
@@ -68,8 +62,7 @@
                                 Maximum="{TemplateBinding Maximum}"
                                 Minimum="{TemplateBinding Minimum}"
                                 Orientation="Horizontal"
-                                Value="{TemplateBinding Value,
-                                                        Mode=TwoWay}">
+                                Value="{TemplateBinding Value,Mode=TwoWay}">
                                 <Track.DecreaseButton>
                                     <RepeatButton
                                         Name="PART_DecreaseButton"
@@ -136,20 +129,16 @@
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                                RadiusX="{TemplateBinding CornerRadius,
-                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,
-                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Rectangle
                                 Width="{Binding #PART_Track.Bounds.Width}"
                                 Height="{Binding #PART_Track.Bounds.Height}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{TemplateBinding Background}"
-                                RadiusX="{TemplateBinding CornerRadius,
-                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,
-                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Track
                                 Name="PART_Track"
                                 Width="12"
@@ -159,8 +148,7 @@
                                 Maximum="{TemplateBinding Maximum}"
                                 Minimum="{TemplateBinding Minimum}"
                                 Orientation="Vertical"
-                                Value="{TemplateBinding Value,
-                                                        Mode=TwoWay}">
+                                Value="{TemplateBinding Value,Mode=TwoWay}">
                                 <Track.DecreaseButton>
                                     <RepeatButton
                                         Name="PART_DecreaseButton"
@@ -231,4 +219,4 @@
         </Style>
 
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml
index 748b1f3..bbc1acc 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml
@@ -1,125 +1,115 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:Avalonia.Controls"
     xmlns:converters="using:Avalonia.Controls.Converters"
     x:CompileBindings="True">
     <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
     <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
     <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
 
-
     <ControlTheme x:Key="{x:Type ColorSpectrum}" TargetType="ColorSpectrum">
         <Setter Property="CornerRadius" Value="6" />
         <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="{x:Type ColorSpectrum}">
+            <ControlTemplate TargetType="{x:Type ColorSpectrum}">
+                <Panel
+                    Name="PART_LayoutRoot"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Stretch">
                     <Panel
-                        Name="PART_LayoutRoot"
-                        HorizontalAlignment="Stretch"
-                        VerticalAlignment="Stretch">
-                        <Panel
-                            Name="PART_SizingPanel"
-                            HorizontalAlignment="Center"
-                            VerticalAlignment="Center"
-                            ClipToBounds="True">
-                            <Rectangle
-                                Name="PART_SpectrumRectangle"
-                                HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                IsHitTestVisible="False"
-                                IsVisible="{TemplateBinding Shape,
-                                                            Converter={StaticResource EnumToBoolConverter},
-                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
-                                RadiusX="{TemplateBinding CornerRadius,
-                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,
-                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-                            <Rectangle
-                                Name="PART_SpectrumOverlayRectangle"
-                                HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                IsHitTestVisible="False"
-                                IsVisible="{TemplateBinding Shape,
-                                                            Converter={StaticResource EnumToBoolConverter},
-                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
-                                RadiusX="{TemplateBinding CornerRadius,
-                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,
-                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-                            <Ellipse
-                                Name="PART_SpectrumEllipse"
-                                HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                IsHitTestVisible="False"
-                                IsVisible="{TemplateBinding Shape,
-                                                            Converter={StaticResource EnumToBoolConverter},
-                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
-                            <Ellipse
-                                Name="PART_SpectrumOverlayEllipse"
-                                HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                IsHitTestVisible="False"
-                                IsVisible="{TemplateBinding Shape,
-                                                            Converter={StaticResource EnumToBoolConverter},
-                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
-                            <Canvas
-                                Name="PART_InputTarget"
-                                HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                Background="Transparent">
-                                <!--  Note: ToolTip.VerticalOffset is for touch devices to keep the tip above fingers  -->
-                                <Panel
-                                    Name="PART_SelectionEllipsePanel"
-                                    ToolTip.Placement="Top"
-                                    ToolTip.VerticalOffset="-10">
-                                    <Ellipse
-                                        Name="FocusEllipse"
-                                        Margin="-2"
-                                        HorizontalAlignment="Stretch"
-                                        VerticalAlignment="Stretch"
-                                        IsHitTestVisible="False"
-                                        StrokeThickness="2" />
-                                    <Ellipse
-                                        Name="SelectionEllipse"
-                                        HorizontalAlignment="Stretch"
-                                        VerticalAlignment="Stretch"
-                                        IsHitTestVisible="False"
-                                        StrokeThickness="2" />
-                                    <ToolTip.Tip>
-                                        <!--  Set in code-behind  -->
-                                    </ToolTip.Tip>
-                                </Panel>
-                            </Canvas>
-                            <Rectangle
-                                Name="BorderRectangle"
-                                HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                IsHitTestVisible="False"
-                                IsVisible="{TemplateBinding Shape,
-                                                            Converter={StaticResource EnumToBoolConverter},
-                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
-                                RadiusX="{TemplateBinding CornerRadius,
-                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,
-                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-                            <Ellipse
-                                Name="BorderEllipse"
-                                HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                IsHitTestVisible="False"
-                                IsVisible="{TemplateBinding Shape,
-                                                            Converter={StaticResource EnumToBoolConverter},
-                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
-                        </Panel>
+                        Name="PART_SizingPanel"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        ClipToBounds="True">
+                        <Rectangle
+                            Name="PART_SpectrumRectangle"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            IsHitTestVisible="False"
+                            IsVisible="{TemplateBinding Shape,
+                            Converter={StaticResource EnumToBoolConverter},
+                            ConverterParameter={x:Static ColorSpectrumShape.Box}}"
+                            RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                            RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                        <Rectangle
+                            Name="PART_SpectrumOverlayRectangle"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            IsHitTestVisible="False"
+                            IsVisible="{TemplateBinding Shape,
+                            Converter={StaticResource EnumToBoolConverter},
+                            ConverterParameter={x:Static ColorSpectrumShape.Box}}"
+                            RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                            RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                        <Ellipse
+                            Name="PART_SpectrumEllipse"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            IsHitTestVisible="False"
+                            IsVisible="{TemplateBinding Shape,
+                            Converter={StaticResource EnumToBoolConverter},
+                            ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
+                        <Ellipse
+                            Name="PART_SpectrumOverlayEllipse"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            IsHitTestVisible="False"
+                            IsVisible="{TemplateBinding Shape,
+                            Converter={StaticResource EnumToBoolConverter},
+                            ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
+                        <Canvas
+                            Name="PART_InputTarget"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Background="Transparent">
+                            <!--  Note: ToolTip.VerticalOffset is for touch devices to keep the tip above fingers  -->
+                            <Panel
+                                Name="PART_SelectionEllipsePanel"
+                                ToolTip.Placement="Top"
+                                ToolTip.VerticalOffset="-10">
+                                <Ellipse
+                                    Name="FocusEllipse"
+                                    Margin="-2"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
+                                    IsHitTestVisible="False"
+                                    StrokeThickness="2" />
+                                <Ellipse
+                                    Name="SelectionEllipse"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Stretch"
+                                    IsHitTestVisible="False"
+                                    StrokeThickness="2" />
+                                <ToolTip.Tip>
+                                    <!--  Set in code-behind  -->
+                                </ToolTip.Tip>
+                            </Panel>
+                        </Canvas>
+                        <Rectangle
+                            Name="BorderRectangle"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            IsHitTestVisible="False"
+                            IsVisible="{TemplateBinding Shape,
+                            Converter={StaticResource EnumToBoolConverter},
+                            ConverterParameter={x:Static ColorSpectrumShape.Box}}"
+                            RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                            RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                        <Ellipse
+                            Name="BorderEllipse"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            IsHitTestVisible="False"
+                            IsVisible="{TemplateBinding Shape,
+                            Converter={StaticResource EnumToBoolConverter},
+                            ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
                     </Panel>
-                </ControlTemplate>
-            </Setter.Value>
+                </Panel>
+            </ControlTemplate>
         </Setter>
 
         <!--  Normal  -->
         <!--  Separating this allows easier customization in applications  -->
-        <Style Selector="^ /template/ Ellipse#BorderEllipse,                      ^ /template/ Rectangle#BorderRectangle">
+        <Style Selector="^ /template/ Ellipse#BorderEllipse,^ /template/ Rectangle#BorderRectangle">
             <Setter Property="Stroke" Value="{DynamicResource ColorSpectrumBorderBrush}" />
             <Setter Property="StrokeThickness" Value="1" />
         </Style>
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
index e44dd1b..988e6ec 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
@@ -1,11 +1,9 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:controls="using:Avalonia.Controls"
     xmlns:converters="using:Avalonia.Controls.Converters"
     xmlns:globalization="using:System.Globalization"
     xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
-    xmlns:primitives="using:Avalonia.Controls.Primitives"
     xmlns:cvts="clr-namespace:Semi.Avalonia.ColorPicker.Converters"
     x:CompileBindings="True">
     <pc:ContrastBrushConverter x:Key="ContrastBrushConverter" />
@@ -19,6 +17,15 @@
     <cvts:ToColorModel x:Key="ToColorModel" />
     <globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
 
+    <Design.PreviewWith>
+        <ColorView
+            Theme="{StaticResource SimpleColorView}"
+            IsAlphaVisible="True"
+            IsAlphaEnabled="True"
+            ColorModel="Hsva"
+            HsvColor="hsv(120,7%,90%)" />
+    </Design.PreviewWith>
+
     <VisualBrush
         x:Key="ColorControlCheckeredBackgroundBrush"
         DestinationRect="0,0,8,8"
@@ -116,12 +123,12 @@
     </ControlTheme>
 
     <ControlTheme x:Key="ColorViewRadioButton" TargetType="RadioButton">
-        <Setter Property="RadioButton.Cursor" Value="Hand" />
-        <Setter Property="RadioButton.FontWeight" Value="{DynamicResource ColorViewRadioButtonFontWeight}" />
-        <Setter Property="RadioButton.Padding" Value="{DynamicResource ColorViewRadioButtonPadding}" />
-        <Setter Property="RadioButton.Foreground" Value="{DynamicResource ColorViewRadioButtonForeground}" />
-        <Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonBackground}" />
-        <Setter Property="RadioButton.Template">
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="FontWeight" Value="{DynamicResource ColorViewRadioButtonFontWeight}" />
+        <Setter Property="Padding" Value="{DynamicResource ColorViewRadioButtonPadding}" />
+        <Setter Property="Foreground" Value="{DynamicResource ColorViewRadioButtonForeground}" />
+        <Setter Property="Background" Value="{DynamicResource ColorViewRadioButtonBackground}" />
+        <Setter Property="Template">
             <ControlTemplate TargetType="RadioButton">
                 <ContentPresenter
                     Name="PART_ContentPresenter"
@@ -163,10 +170,10 @@
 
     <ControlTheme x:Key="{x:Type ColorView}" TargetType="ColorView">
         <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
-        <Setter Property="ColorView.Width" Value="300" />
-        <Setter Property="ColorView.Height" Value="300" />
-        <Setter Property="ColorView.Palette">
-            <controls:FluentColorPalette />
+        <Setter Property="Width" Value="300" />
+        <Setter Property="Height" Value="300" />
+        <Setter Property="Palette">
+            <FluentColorPalette />
         </Setter>
         <Setter Property="Template">
             <ControlTemplate TargetType="{x:Type ColorView}">
@@ -222,7 +229,7 @@
                                     <ColumnDefinition Width="*" />
                                     <ColumnDefinition Width="Auto" MinWidth="32" />
                                 </Grid.ColumnDefinitions>
-                                <primitives:ColorSlider
+                                <ColorSlider
                                     Name="ColorSpectrumThirdComponentSlider"
                                     Grid.Column="0"
                                     Margin="0,0,12,0"
@@ -236,8 +243,8 @@
                                     IsPerceptive="False"
                                     IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                     Orientation="Vertical" />
-                                <primitives:ColorSpectrum
-                                    x:Name="ColorSpectrum"
+                                <ColorSpectrum
+                                    Name="ColorSpectrum"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Stretch"
@@ -250,8 +257,8 @@
                                     MinSaturation="{TemplateBinding MinSaturation}"
                                     MinValue="{TemplateBinding MinValue}"
                                     Shape="{TemplateBinding ColorSpectrumShape}" />
-                                <primitives:ColorSlider
-                                    x:Name="ColorSpectrumAlphaSlider"
+                                <ColorSlider
+                                    Name="ColorSpectrumAlphaSlider"
                                     Grid.Column="2"
                                     Margin="12,0,0,0"
                                     HorizontalAlignment="Center"
@@ -262,12 +269,12 @@
                                     HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                     Orientation="Vertical">
-                                    <primitives:ColorSlider.IsVisible>
+                                    <ColorSlider.IsVisible>
                                         <MultiBinding Converter="{x:Static BoolConverters.And}">
                                             <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                         </MultiBinding>
-                                    </primitives:ColorSlider.IsVisible>
-                                </primitives:ColorSlider>
+                                    </ColorSlider.IsVisible>
+                                </ColorSlider>
                             </Grid>
                         </TabItem>
                         <!--  Palette Tab  -->
@@ -323,7 +330,7 @@
                             <Grid
                                 Margin="12"
                                 ColumnDefinitions="Auto,*"
-                                RowDefinitions="Auto,24,1*,1*,1*,1*,12"
+                                RowDefinitions="Auto,24,*,*,*,*,12"
                                 UseLayoutRounding="False">
                                 <Grid.Styles>
                                     <Style Selector="NumericUpDown">
@@ -339,41 +346,41 @@
                                     Grid.Row="0"
                                     Grid.Column="0"
                                     Grid.ColumnSpan="2"
-                                    ColumnDefinitions="1*,12,1*">
+                                    ColumnDefinitions="*,12,*">
                                     <!--  RadioButtonGroup  -->
                                     <Border
                                         Padding="2"
                                         Background="{DynamicResource ColorViewRadioButtonPointeroverBackground}"
                                         CornerRadius="3">
-                                        <Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
+                                        <Grid ColumnDefinitions="*,*" IsVisible="{TemplateBinding IsColorModelVisible}">
                                             <RadioButton
-                                                x:Name="RgbRadioButton"
+                                                Name="RgbRadioButton"
                                                 Grid.Column="0"
                                                 HorizontalContentAlignment="Center"
                                                 VerticalContentAlignment="Center"
                                                 Content="RGB"
                                                 CornerRadius="3,0,0,3"
                                                 IsChecked="{TemplateBinding ColorModel,
-                                                                            Converter={StaticResource EnumToBoolConverter},
-                                                                            ConverterParameter={x:Static controls:ColorModel.Rgba},
-                                                                            Mode=TwoWay}"
+                                                Converter={StaticResource EnumToBoolConverter},
+                                                ConverterParameter={x:Static ColorModel.Rgba},
+                                                Mode=TwoWay}"
                                                 Theme="{DynamicResource ColorViewRadioButton}" />
                                             <RadioButton
-                                                x:Name="HsvRadioButton"
+                                                Name="HsvRadioButton"
                                                 Grid.Column="1"
                                                 HorizontalContentAlignment="Center"
                                                 VerticalContentAlignment="Center"
                                                 Content="HSV"
                                                 CornerRadius="0,3,3,0"
                                                 IsChecked="{TemplateBinding ColorModel,
-                                                                            Converter={StaticResource EnumToBoolConverter},
-                                                                            ConverterParameter={x:Static controls:ColorModel.Hsva},
-                                                                            Mode=TwoWay}"
+                                                Converter={StaticResource EnumToBoolConverter},
+                                                ConverterParameter={x:Static ColorModel.Hsva},
+                                                Mode=TwoWay}"
                                                 Theme="{DynamicResource ColorViewRadioButton}" />
                                         </Grid>
                                     </Border>
                                     <TextBox
-                                        x:Name="PART_HexTextBox"
+                                        Name="PART_HexTextBox"
                                         Grid.Column="2"
                                         Height="32"
                                         HorizontalAlignment="Stretch"
@@ -399,15 +406,14 @@
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component1Slider}" />
-                                <primitives:ColorSlider
-                                    x:Name="Component1Slider"
+                                <ColorSlider
+                                    Name="Component1Slider"
                                     Grid.Row="2"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
                                     ColorComponent="Component1"
-                                    ColorModel="{TemplateBinding ColorModel,
-                                                                 Mode=OneWay}"
+                                    ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
@@ -430,15 +436,14 @@
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component2Slider}" />
-                                <primitives:ColorSlider
-                                    x:Name="Component2Slider"
+                                <ColorSlider
+                                    Name="Component2Slider"
                                     Grid.Row="3"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
                                     ColorComponent="Component2"
-                                    ColorModel="{TemplateBinding ColorModel,
-                                                                 Mode=OneWay}"
+                                    ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
@@ -461,15 +466,14 @@
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component3Slider}" />
-                                <primitives:ColorSlider
-                                    x:Name="Component3Slider"
+                                <ColorSlider
+                                    Name="Component3Slider"
                                     Grid.Row="4"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
                                     ColorComponent="Component3"
-                                    ColorModel="{TemplateBinding ColorModel,
-                                                                 Mode=OneWay}"
+                                    ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
@@ -499,34 +503,33 @@
                                         </MultiBinding>
                                     </NumericUpDown.IsVisible>
                                 </NumericUpDown>
-                                <primitives:ColorSlider
-                                    x:Name="AlphaComponentSlider"
+                                <ColorSlider
+                                    Name="AlphaComponentSlider"
                                     Grid.Row="5"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
                                     ColorComponent="Alpha"
-                                    ColorModel="{TemplateBinding ColorModel,
-                                                                 Mode=OneWay}"
+                                    ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
                                     Orientation="Horizontal"
                                     TickFrequency="1">
-                                    <primitives:ColorSlider.IsVisible>
+                                    <ColorSlider.IsVisible>
                                         <MultiBinding Converter="{x:Static BoolConverters.And}">
                                             <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                             <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                         </MultiBinding>
-                                    </primitives:ColorSlider.IsVisible>
-                                </primitives:ColorSlider>
+                                    </ColorSlider.IsVisible>
+                                </ColorSlider>
                             </Grid>
                         </TabItem>
                     </TabControl>
                     <!--  Previewer  -->
                     <!--  Note that top/bottom margins have -5 to remove for drop shadow padding  -->
-                    <primitives:ColorPreviewer
+                    <ColorPreviewer
                         Grid.Row="1"
                         Margin="12,-5,12,7"
                         HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
@@ -583,8 +586,8 @@
                         Grid.Row="0"
                         CornerRadius="8 8 0 0"
                         ClipToBounds="True">
-                        <primitives:ColorSpectrum
-                            x:Name="ColorSpectrum"
+                        <ColorSpectrum
+                            Name="ColorSpectrum"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Components="{TemplateBinding ColorSpectrumComponents}"
@@ -597,7 +600,7 @@
                             MinValue="{TemplateBinding MinValue}"
                             Shape="{TemplateBinding ColorSpectrumShape}" />
                     </Border>
-                    <primitives:ColorSlider
+                    <ColorSlider
                         Name="ColorSpectrumThirdComponentSlider"
                         Grid.Row="1"
                         HorizontalAlignment="Stretch"
@@ -609,7 +612,7 @@
                         IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                         Orientation="Horizontal" />
 
-                    <primitives:ColorSlider
+                    <ColorSlider
                         x:Name="ColorSpectrumAlphaSlider"
                         Grid.Row="2"
                         HorizontalAlignment="Stretch"
@@ -623,8 +626,7 @@
                         IsRoundingEnabled="True"
                         IsSnapToTickEnabled="True"
                         TickFrequency="1"
-                        Orientation="Horizontal">
-                    </primitives:ColorSlider>
+                        Orientation="Horizontal" />
                     <StackPanel
                         Grid.Row="3"
                         HorizontalAlignment="Stretch"
@@ -693,13 +695,4 @@
             <Setter Property="Width" Value="176" />
         </Style>
     </ControlTheme>
-
-    <Design.PreviewWith>
-        <ColorView
-            Theme="{StaticResource SimpleColorView}"
-            IsAlphaVisible="True"
-            IsAlphaEnabled="True"
-            ColorModel="Hsva"
-            HsvColor="hsv(120,7%,90%)" />
-    </Design.PreviewWith>
-</ResourceDictionary>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/_index.axaml b/src/Semi.Avalonia.ColorPicker/Controls/_index.axaml
new file mode 100644
index 0000000..d18df4d
--- /dev/null
+++ b/src/Semi.Avalonia.ColorPicker/Controls/_index.axaml
@@ -0,0 +1,12 @@
+<ResourceDictionary
+    x:CompileBindings="True"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorView.axaml" />
+    </ResourceDictionary.MergedDictionaries>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia.ColorPicker/Index.axaml b/src/Semi.Avalonia.ColorPicker/Index.axaml
index 32b0f04..2d4da5d 100644
--- a/src/Semi.Avalonia.ColorPicker/Index.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Index.axaml
@@ -6,7 +6,7 @@
                 <ResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.ColorPicker/Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml" />
+                <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/_index.axaml" />
                 <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Shared.axaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>

From 589221bf88ce9ecb05f0811d2bf7e94728d46c3d Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Sun, 9 Mar 2025 22:19:32 +0800
Subject: [PATCH 2/8] feat: index resources.

---
 src/Semi.Avalonia.ColorPicker/Dark.axaml  | 33 ++++++++++-------------
 src/Semi.Avalonia.ColorPicker/Light.axaml | 33 ++++++++++-------------
 2 files changed, 28 insertions(+), 38 deletions(-)

diff --git a/src/Semi.Avalonia.ColorPicker/Dark.axaml b/src/Semi.Avalonia.ColorPicker/Dark.axaml
index f514861..22381db 100644
--- a/src/Semi.Avalonia.ColorPicker/Dark.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Dark.axaml
@@ -1,21 +1,16 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#54A9FF" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="#1C1F23" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonPointeroverBackground" Opacity="0.16" Color="White" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonPressedBackground" Opacity="0.20" Color="White" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedForeground" Color="White" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedBackground" Color="#54A9FF" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPointeroverBackground" Color="#7FC1FF" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPressedBackground" Color="#A9D7FF" />
-
-    <SolidColorBrush x:Key="ColorViewTabItemSelectedForeground" Color="#54A9FF" />
-
-
-    <SolidColorBrush x:Key="ColorSliderDefaultBorderBrush" Color="Black" />
-    <SolidColorBrush x:Key="ColorSliderLightBorderBrush" Color="White" />
-    <SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />
-
-    <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
-
-    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">inset 0 0 0 1 #1AFFFFFF, 0 4 14 #40000000</BoxShadows>
+    <StaticResource x:Key="ColorViewRadioButtonForeground" ResourceKey="SemiColorPrimary" />
+    <StaticResource x:Key="ColorViewRadioButtonBackground" ResourceKey="SemiColorBackground0" />
+    <StaticResource x:Key="ColorViewRadioButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
+    <StaticResource x:Key="ColorViewRadioButtonPressedBackground" ResourceKey="SemiColorFill2" />
+    <StaticResource x:Key="ColorViewRadioButtonCheckedForeground" ResourceKey="SemiColorWhite" />
+    <StaticResource x:Key="ColorViewRadioButtonCheckedBackground" ResourceKey="SemiColorPrimary" />
+    <StaticResource x:Key="ColorViewRadioButtonCheckedPointeroverBackground" ResourceKey="SemiColorPrimaryPointerover" />
+    <StaticResource x:Key="ColorViewRadioButtonCheckedPressedBackground" ResourceKey="SemiColorPrimaryActive" />
+    <StaticResource x:Key="ColorViewTabItemSelectedForeground" ResourceKey="SemiColorPrimary" />
+    <StaticResource x:Key="ColorSliderDefaultBorderBrush" ResourceKey="SemiColorBlack" />
+    <StaticResource x:Key="ColorSliderLightBorderBrush" ResourceKey="SemiColorWhite" />
+    <StaticResource x:Key="ColorSliderDarkBorderBrush" ResourceKey="SemiColorBlack" />
+    <StaticResource x:Key="ColorSpectrumBorderBrush" ResourceKey="SemiColorBorder" />
+    <StaticResource x:Key="ColorPreviewerMainBoxShadow" ResourceKey="SemiShadowElevated" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia.ColorPicker/Light.axaml b/src/Semi.Avalonia.ColorPicker/Light.axaml
index 514b984..22381db 100644
--- a/src/Semi.Avalonia.ColorPicker/Light.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Light.axaml
@@ -1,21 +1,16 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#0077FA" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="White" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonPointeroverBackground" Opacity="0.09" Color="#2E3238" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonPressedBackground" Opacity="0.13" Color="#2E3238" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedForeground" Color="White" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedBackground" Color="#0077FA" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPointeroverBackground" Color="#0062D6" />
-    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPressedBackground" Color="#004FB3" />
-
-    <SolidColorBrush x:Key="ColorViewTabItemSelectedForeground" Color="#0077FA" />
-
-
-    <SolidColorBrush x:Key="ColorSliderDefaultBorderBrush" Color="Black" />
-    <SolidColorBrush x:Key="ColorSliderLightBorderBrush" Color="White" />
-    <SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />
-
-    <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
-
-    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 1 #4A000000, 0 4 14 #1A000000</BoxShadows>
+    <StaticResource x:Key="ColorViewRadioButtonForeground" ResourceKey="SemiColorPrimary" />
+    <StaticResource x:Key="ColorViewRadioButtonBackground" ResourceKey="SemiColorBackground0" />
+    <StaticResource x:Key="ColorViewRadioButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
+    <StaticResource x:Key="ColorViewRadioButtonPressedBackground" ResourceKey="SemiColorFill2" />
+    <StaticResource x:Key="ColorViewRadioButtonCheckedForeground" ResourceKey="SemiColorWhite" />
+    <StaticResource x:Key="ColorViewRadioButtonCheckedBackground" ResourceKey="SemiColorPrimary" />
+    <StaticResource x:Key="ColorViewRadioButtonCheckedPointeroverBackground" ResourceKey="SemiColorPrimaryPointerover" />
+    <StaticResource x:Key="ColorViewRadioButtonCheckedPressedBackground" ResourceKey="SemiColorPrimaryActive" />
+    <StaticResource x:Key="ColorViewTabItemSelectedForeground" ResourceKey="SemiColorPrimary" />
+    <StaticResource x:Key="ColorSliderDefaultBorderBrush" ResourceKey="SemiColorBlack" />
+    <StaticResource x:Key="ColorSliderLightBorderBrush" ResourceKey="SemiColorWhite" />
+    <StaticResource x:Key="ColorSliderDarkBorderBrush" ResourceKey="SemiColorBlack" />
+    <StaticResource x:Key="ColorSpectrumBorderBrush" ResourceKey="SemiColorBorder" />
+    <StaticResource x:Key="ColorPreviewerMainBoxShadow" ResourceKey="SemiShadowElevated" />
 </ResourceDictionary>
\ No newline at end of file

From 2192aabf14dc44ee35ac601c430f38ea7ad144b0 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Mon, 10 Mar 2025 10:52:12 +0800
Subject: [PATCH 3/8] feat: enhance Thumb.

---
 .../Controls/ColorSlider.axaml                         | 10 +++-------
 src/Semi.Avalonia.ColorPicker/Dark.axaml               |  1 +
 src/Semi.Avalonia.ColorPicker/Light.axaml              |  1 +
 src/Semi.Avalonia.ColorPicker/Shared.axaml             |  8 ++++----
 4 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml
index 03c6840..42f22fa 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml
@@ -11,7 +11,7 @@
         <Setter Property="UseLayoutRounding" Value="False" />
         <Setter Property="BorderBrush" Value="{DynamicResource ColorSliderDefaultBorderBrush}" />
         <Setter Property="BorderThickness" Value="{DynamicResource ColorSliderThumbBorderBrush}" />
-        <Setter Property="CornerRadius" Value="999" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ColorSliderThumbCornerRadius}" />
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
@@ -99,10 +99,8 @@
                                 </Track.IncreaseButton>
                                 <Thumb
                                     Name="ColorSliderThumb"
-                                    Width="16"
-                                    Height="16"
-                                    Margin="0"
-                                    Padding="0"
+                                    Width="{TemplateBinding Height}"
+                                    Height="{TemplateBinding Height}"
                                     DataContext="{TemplateBinding Value}"
                                     Theme="{StaticResource ColorSliderThumbTheme}" />
                             </Track>
@@ -187,8 +185,6 @@
                                     Name="ColorSliderThumb"
                                     Width="{TemplateBinding Width}"
                                     Height="{TemplateBinding Width}"
-                                    Margin="0"
-                                    Padding="0"
                                     DataContext="{TemplateBinding Value}"
                                     Theme="{StaticResource ColorSliderThumbTheme}" />
                             </Track>
diff --git a/src/Semi.Avalonia.ColorPicker/Dark.axaml b/src/Semi.Avalonia.ColorPicker/Dark.axaml
index 22381db..4c9530a 100644
--- a/src/Semi.Avalonia.ColorPicker/Dark.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Dark.axaml
@@ -13,4 +13,5 @@
     <StaticResource x:Key="ColorSliderDarkBorderBrush" ResourceKey="SemiColorBlack" />
     <StaticResource x:Key="ColorSpectrumBorderBrush" ResourceKey="SemiColorBorder" />
     <StaticResource x:Key="ColorPreviewerMainBoxShadow" ResourceKey="SemiShadowElevated" />
+    <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia.ColorPicker/Light.axaml b/src/Semi.Avalonia.ColorPicker/Light.axaml
index 22381db..4c9530a 100644
--- a/src/Semi.Avalonia.ColorPicker/Light.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Light.axaml
@@ -13,4 +13,5 @@
     <StaticResource x:Key="ColorSliderDarkBorderBrush" ResourceKey="SemiColorBlack" />
     <StaticResource x:Key="ColorSpectrumBorderBrush" ResourceKey="SemiColorBorder" />
     <StaticResource x:Key="ColorPreviewerMainBoxShadow" ResourceKey="SemiShadowElevated" />
+    <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows>
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia.ColorPicker/Shared.axaml b/src/Semi.Avalonia.ColorPicker/Shared.axaml
index 348f472..0b4d319 100644
--- a/src/Semi.Avalonia.ColorPicker/Shared.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Shared.axaml
@@ -13,10 +13,10 @@
     <!-- <StaticResource x:Key="ColorViewPaletteIconGlyph" ResourceKey="SemiIconColorPalette" /> -->
     <!-- <StaticResource x:Key="ColorViewComponentsIconGlyph" ResourceKey="SemiIconList" /> -->
 
-    <x:Double x:Key="ColorSliderWidth">16</x:Double>
-    <CornerRadius x:Key="ColorSliderCornerRadius">6</CornerRadius>
-    <Thickness x:Key="ColorSliderThumbBorderBrush">2</Thickness>
-    <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows>
+    <StaticResource x:Key="ColorSliderWidth" ResourceKey="SemiSpacingBase" />
+    <StaticResource x:Key="ColorSliderCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
+    <StaticResource x:Key="ColorSliderThumbBorderBrush" ResourceKey="SemiThicknessSuperTight" />
+    <StaticResource x:Key="ColorSliderThumbCornerRadius" ResourceKey="SemiBorderRadiusFull" />
 
     <x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double>
     <x:Double x:Key="ColorPreviewerAccentSectionHeight">20</x:Double>

From af013bf9385debf91c04dcaea4abe006926ed5df Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Mon, 10 Mar 2025 11:04:09 +0800
Subject: [PATCH 4/8] feat: add AssemblyInfo.

---
 demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml | 9 ++++-----
 src/Semi.Avalonia.ColorPicker/AssemblyInfo.cs       | 3 +++
 src/Semi.Avalonia.ColorPicker/Shared.axaml          | 4 ++--
 3 files changed, 9 insertions(+), 7 deletions(-)
 create mode 100644 src/Semi.Avalonia.ColorPicker/AssemblyInfo.cs

diff --git a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
index 3eb407d..9e6f238 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
@@ -2,8 +2,7 @@
     x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker;assembly=Semi.Avalonia.ColorPicker"
-    xmlns:controls="using:Avalonia.Controls"
+    xmlns:semi="https://irihi.tech/semi"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     d:DesignHeight="1450"
@@ -33,12 +32,12 @@
             <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                 <ColorPicker Margin="8" ColorSpectrumShape="Ring">
                     <ColorPicker.Palette>
-                        <controls:FlatHalfColorPalette />
+                        <FlatHalfColorPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
                 <ColorPicker Margin="8" ColorSpectrumShape="Box">
                     <ColorPicker.Palette>
-                        <colorPicker:SemiColorLightPalette />
+                        <semi:SemiColorLightPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
 
@@ -47,7 +46,7 @@
                     ColorSpectrumShape="Box"
                     Theme="{DynamicResource HexColorPicker}">
                     <ColorPicker.Palette>
-                        <colorPicker:SemiColorLightPalette />
+                        <semi:SemiColorLightPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
             </StackPanel>
diff --git a/src/Semi.Avalonia.ColorPicker/AssemblyInfo.cs b/src/Semi.Avalonia.ColorPicker/AssemblyInfo.cs
new file mode 100644
index 0000000..2c1c8f9
--- /dev/null
+++ b/src/Semi.Avalonia.ColorPicker/AssemblyInfo.cs
@@ -0,0 +1,3 @@
+using Avalonia.Metadata;
+
+[assembly: XmlnsDefinition("https://irihi.tech/semi", "Semi.Avalonia.ColorPicker")]
\ No newline at end of file
diff --git a/src/Semi.Avalonia.ColorPicker/Shared.axaml b/src/Semi.Avalonia.ColorPicker/Shared.axaml
index 0b4d319..6c95410 100644
--- a/src/Semi.Avalonia.ColorPicker/Shared.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Shared.axaml
@@ -1,7 +1,7 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker">
+    xmlns:semi="https://irihi.tech/semi">
     <FontWeight x:Key="ColorViewRadioButtonFontWeight">600</FontWeight>
     <Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness>
     <x:Double x:Key="ColorViewNumericUpDownWidth">70</x:Double>
@@ -23,7 +23,7 @@
     <x:Double x:Key="ColorPreviewerHeight">48</x:Double>
     <CornerRadius x:Key="ColorPreviewerCornerRadius">3</CornerRadius>
 
-    <colorPicker:SemiColorDarkPalette x:Key="SemiColorPalette" />
+    <semi:SemiColorDarkPalette x:Key="SemiColorPalette" />
 
     <PlacementMode x:Key="ColorPickerFlyoutPlacement">AnchorAndGravity</PlacementMode>
     <PlacementMode x:Key="SimpleColorPickerFlyoutPlacement">BottomEdgeAlignedLeft</PlacementMode>

From 776ac47a980ec3f4398f55f93039232c527e8544 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Mon, 10 Mar 2025 11:11:24 +0800
Subject: [PATCH 5/8] feat: ColorPicker icon.

---
 .../Controls/ColorPicker.axaml                | 33 +++++++------------
 .../Controls/ColorView.axaml                  | 33 +++++++------------
 src/Semi.Avalonia.ColorPicker/Shared.axaml    |  9 ++---
 3 files changed, 27 insertions(+), 48 deletions(-)

diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
index f3d894a..47f94bb 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
@@ -101,13 +101,10 @@
                                     <!--  Spectrum Tab  -->
                                     <TabItem IsVisible="{TemplateBinding IsColorSpectrumVisible}">
                                         <TabItem.Header>
-                                            <Border Height="{DynamicResource ColorViewTabStripHeight}">
-                                                <PathIcon
-                                                    Width="16"
-                                                    Height="16"
-                                                    Data="{DynamicResource ColorViewSpectrumIconGlyph}"
-                                                    Foreground="{Binding $parent[TabItem].Foreground}" />
-                                            </Border>
+                                            <PathIcon
+                                                Theme="{StaticResource InnerPathIcon}"
+                                                Data="{DynamicResource ColorViewSpectrumIconGlyph}"
+                                                Foreground="{Binding $parent[TabItem].Foreground}" />
                                         </TabItem.Header>
                                         <Grid Margin="12" RowDefinitions="*">
                                             <Grid.ColumnDefinitions>
@@ -166,13 +163,10 @@
                                     <!--  Palette Tab  -->
                                     <TabItem IsVisible="{TemplateBinding IsColorPaletteVisible}">
                                         <TabItem.Header>
-                                            <Border Height="{DynamicResource ColorViewTabStripHeight}">
-                                                <PathIcon
-                                                    Width="16"
-                                                    Height="16"
-                                                    Data="{DynamicResource ColorViewPaletteIconGlyph}"
-                                                    Foreground="{Binding $parent[TabItem].Foreground}" />
-                                            </Border>
+                                            <PathIcon
+                                                Theme="{StaticResource InnerPathIcon}"
+                                                Data="{DynamicResource ColorViewPaletteIconGlyph}"
+                                                Foreground="{Binding $parent[TabItem].Foreground}" />
                                         </TabItem.Header>
                                         <ListBox
                                             Margin="12"
@@ -205,13 +199,10 @@
                                     <!--  Components Tab  -->
                                     <TabItem IsVisible="{TemplateBinding IsColorComponentsVisible}">
                                         <TabItem.Header>
-                                            <Border Height="{DynamicResource ColorViewTabStripHeight}">
-                                                <PathIcon
-                                                    Width="16"
-                                                    Height="16"
-                                                    Data="{DynamicResource ColorViewComponentsIconGlyph}"
-                                                    Foreground="{Binding $parent[TabItem].Foreground}" />
-                                            </Border>
+                                            <PathIcon
+                                                Theme="{StaticResource InnerPathIcon}"
+                                                Data="{DynamicResource ColorViewComponentsIconGlyph}"
+                                                Foreground="{Binding $parent[TabItem].Foreground}" />
                                         </TabItem.Header>
                                         <Grid
                                             Margin="12"
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
index 988e6ec..664dce6 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
@@ -215,13 +215,10 @@
                         <!--  Spectrum Tab  -->
                         <TabItem IsVisible="{TemplateBinding IsColorSpectrumVisible}">
                             <TabItem.Header>
-                                <Border Height="{DynamicResource ColorViewTabStripHeight}">
-                                    <PathIcon
-                                        Width="16"
-                                        Height="16"
-                                        Data="{DynamicResource ColorViewSpectrumIconGlyph}"
-                                        Foreground="{Binding $parent[TabItem].Foreground}" />
-                                </Border>
+                                <PathIcon
+                                    Theme="{StaticResource InnerPathIcon}"
+                                    Data="{DynamicResource ColorViewSpectrumIconGlyph}"
+                                    Foreground="{Binding $parent[TabItem].Foreground}" />
                             </TabItem.Header>
                             <Grid Margin="12" RowDefinitions="*">
                                 <Grid.ColumnDefinitions>
@@ -280,13 +277,10 @@
                         <!--  Palette Tab  -->
                         <TabItem IsVisible="{TemplateBinding IsColorPaletteVisible}">
                             <TabItem.Header>
-                                <Border Height="{DynamicResource ColorViewTabStripHeight}">
-                                    <PathIcon
-                                        Width="16"
-                                        Height="16"
-                                        Data="{DynamicResource ColorViewPaletteIconGlyph}"
-                                        Foreground="{Binding $parent[TabItem].Foreground}" />
-                                </Border>
+                                <PathIcon
+                                    Theme="{StaticResource InnerPathIcon}"
+                                    Data="{DynamicResource ColorViewPaletteIconGlyph}"
+                                    Foreground="{Binding $parent[TabItem].Foreground}" />
                             </TabItem.Header>
                             <ListBox
                                 Margin="12"
@@ -319,13 +313,10 @@
                         <!--  Components Tab  -->
                         <TabItem IsVisible="{TemplateBinding IsColorComponentsVisible}">
                             <TabItem.Header>
-                                <Border Height="{DynamicResource ColorViewTabStripHeight}">
-                                    <PathIcon
-                                        Width="16"
-                                        Height="16"
-                                        Data="{DynamicResource ColorViewComponentsIconGlyph}"
-                                        Foreground="{Binding $parent[TabItem].Foreground}" />
-                                </Border>
+                                <PathIcon
+                                    Theme="{StaticResource InnerPathIcon}"
+                                    Data="{DynamicResource ColorViewComponentsIconGlyph}"
+                                    Foreground="{Binding $parent[TabItem].Foreground}" />
                             </TabItem.Header>
                             <Grid
                                 Margin="12"
diff --git a/src/Semi.Avalonia.ColorPicker/Shared.axaml b/src/Semi.Avalonia.ColorPicker/Shared.axaml
index 6c95410..a544fba 100644
--- a/src/Semi.Avalonia.ColorPicker/Shared.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Shared.axaml
@@ -6,12 +6,9 @@
     <Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness>
     <x:Double x:Key="ColorViewNumericUpDownWidth">70</x:Double>
 
-    <StreamGeometry x:Key="ColorViewSpectrumIconGlyph">M1.22 20.77a4.24 4.24 0 0 1 .02-5.98l9.33-9.28-.94-.95a1.41 1.41 0 0 1 0-1.99 1.39 1.39 0 0 1 1.97 0l.95.97L14.9 1.2a4.16 4.16 0 0 1 5.89.02 4.24 4.24 0 0 1-.02 5.98l-2.3 2.28 1.02 1.02c.54.55.54 1.44 0 1.99-.55.55-1.43.55-1.97 0l-1.03-1.03-9.37 9.32a4.16 4.16 0 0 1-5.89-.02ZM12.54 7.49l1.97 1.99-9.35 9.3c-.55.55-1.42.55-1.97 0a1.41 1.41 0 0 1 .01-2l9.34-9.29Z</StreamGeometry>
-    <StreamGeometry x:Key="ColorViewPaletteIconGlyph">M2 4c0-1.1.9-2 2-2h5a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm6 13.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm11.59-8.91L16.4 5.4a2 2 0 0 0-2.82 0L13 6v12l6.59-6.59a2 2 0 0 0 0-2.82ZM22 16a2 2 0 0 0-2-2l-8 8h8a2 2 0 0 0 2-2v-4Z</StreamGeometry>
-    <StreamGeometry x:Key="ColorViewComponentsIconGlyph">M4 6.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM9.5 3a1.5 1.5 0 1 0 0 3h11a1.5 1.5 0 0 0 0-3h-11ZM8 11.5c0-.83.67-1.5 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11A1.5 1.5 0 0 1 8 11.5Zm0 7c0-.83.67-1.5 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11A1.5 1.5 0 0 1 8 18.5Zm-2-7a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm-2 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z</StreamGeometry>
-    <!-- <StaticResource x:Key="ColorViewSpectrumIconGlyph" ResourceKey="SemiIconEyedropper" /> -->
-    <!-- <StaticResource x:Key="ColorViewPaletteIconGlyph" ResourceKey="SemiIconColorPalette" /> -->
-    <!-- <StaticResource x:Key="ColorViewComponentsIconGlyph" ResourceKey="SemiIconList" /> -->
+    <StaticResource x:Key="ColorViewSpectrumIconGlyph" ResourceKey="SemiIconEyedropper" />
+    <StaticResource x:Key="ColorViewPaletteIconGlyph" ResourceKey="SemiIconColorPalette" />
+    <StaticResource x:Key="ColorViewComponentsIconGlyph" ResourceKey="SemiIconList" />
 
     <StaticResource x:Key="ColorSliderWidth" ResourceKey="SemiSpacingBase" />
     <StaticResource x:Key="ColorSliderCornerRadius" ResourceKey="SemiBorderRadiusMedium" />

From ea182c07f03aac1388c7f4c359597434b26f63b6 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Mon, 10 Mar 2025 11:19:56 +0800
Subject: [PATCH 6/8] feat: enhance ColorPicker & redesign demo.

---
 .../Pages/ColorPickerDemo.axaml               | 51 ++++++++-----------
 .../Controls/ColorPicker.axaml                | 26 ++++------
 src/Semi.Avalonia.ColorPicker/Shared.axaml    |  4 +-
 3 files changed, 33 insertions(+), 48 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
index 9e6f238..21f7804 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
+++ b/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>
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
index 47f94bb..e295427 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
+++ b/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}"
diff --git a/src/Semi.Avalonia.ColorPicker/Shared.axaml b/src/Semi.Avalonia.ColorPicker/Shared.axaml
index a544fba..ad9e132 100644
--- a/src/Semi.Avalonia.ColorPicker/Shared.axaml
+++ b/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" />
 

From 08552cf57ee9931eab7b11195587c73dc4cdb746 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Tue, 11 Mar 2025 16:50:42 +0800
Subject: [PATCH 7/8] feat: some enhancements.

---
 src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml   | 7 +++----
 src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml | 2 +-
 src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml     | 1 -
 src/Semi.Avalonia.ColorPicker/Shared.axaml                 | 4 ++++
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
index e295427..2b8aa8a 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
@@ -8,8 +8,8 @@
 
     <ControlTheme x:Key="{x:Type ColorPicker}" TargetType="ColorPicker">
         <Setter Property="Width" Value="64" />
-        <Setter Property="MinHeight" Value="32" />
-        <Setter Property="CornerRadius" Value="3" />
+        <Setter Property="MinHeight" Value="{DynamicResource ColorPickerMinHeight}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ColorPickerCornerRadius}" />
         <Setter Property="Content">
             <Template>
                 <Panel>
@@ -282,12 +282,11 @@
                                                 <TextBox
                                                     Name="PART_HexTextBox"
                                                     Grid.Column="2"
-                                                    Height="32"
                                                     HorizontalAlignment="Stretch"
                                                     AutomationProperties.Name="Hexadecimal Color"
                                                     InnerLeftContent="#"
                                                     IsVisible="{TemplateBinding IsHexInputVisible}"
-                                                    MaxLength="9" />
+                                                    MaxLength="8" />
                                             </Grid>
                                             <!--  Color component editing controls  -->
                                             <!--  Component 1 RGB:Red HSV:Hue  -->
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml
index bbc1acc..cd764a9 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml
@@ -8,7 +8,7 @@
     <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
 
     <ControlTheme x:Key="{x:Type ColorSpectrum}" TargetType="ColorSpectrum">
-        <Setter Property="CornerRadius" Value="6" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ColorSpectrumCornerRadius}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="{x:Type ColorSpectrum}">
                 <Panel
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
index 664dce6..c5395a9 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
@@ -373,7 +373,6 @@
                                     <TextBox
                                         Name="PART_HexTextBox"
                                         Grid.Column="2"
-                                        Height="32"
                                         HorizontalAlignment="Stretch"
                                         AutomationProperties.Name="Hexadecimal Color"
                                         InnerLeftContent="#"
diff --git a/src/Semi.Avalonia.ColorPicker/Shared.axaml b/src/Semi.Avalonia.ColorPicker/Shared.axaml
index ad9e132..68bff6b 100644
--- a/src/Semi.Avalonia.ColorPicker/Shared.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Shared.axaml
@@ -22,6 +22,10 @@
 
     <semi:SemiColorDarkPalette x:Key="SemiColorPalette" />
 
+    <StaticResource x:Key="ColorSpectrumCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
+
+    <StaticResource x:Key="ColorPickerMinHeight" ResourceKey="SemiHeightControlDefault" />
+    <StaticResource x:Key="ColorPickerCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
     <PlacementMode x:Key="ColorPickerFlyoutPlacement">AnchorAndGravity</PlacementMode>
     <PlacementMode x:Key="SimpleColorPickerFlyoutPlacement">BottomEdgeAlignedLeft</PlacementMode>
 </ResourceDictionary>
\ No newline at end of file

From 7e33078f006d23ac9d3475e4ef42a79aed6b830d Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Wed, 12 Mar 2025 13:59:32 +0800
Subject: [PATCH 8/8] feat: support HorizontalAlignment="Stretch".

---
 demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml   |  2 +-
 .../Controls/ColorPicker.axaml                        | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
index 21f7804..0dc1a33 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
@@ -49,7 +49,7 @@
                 <TextBlock Text="Use Style to customize button" />
                 <ColorPicker
                     Margin="8"
-                    Width="32"
+                    MinWidth="32"
                     HsvColor="hsv(180,80%,70%)">
                     <ColorPicker.Content>
                         <Border
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
index 2b8aa8a..4da77b9 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
@@ -7,7 +7,8 @@
     <converters:ToBrushConverter x:Key="ToBrushConverter" />
 
     <ControlTheme x:Key="{x:Type ColorPicker}" TargetType="ColorPicker">
-        <Setter Property="Width" Value="64" />
+        <Setter Property="MinWidth" Value="64" />
+        <Setter Property="HorizontalAlignment" Value="Center" />
         <Setter Property="MinHeight" Value="{DynamicResource ColorPickerMinHeight}" />
         <Setter Property="CornerRadius" Value="{DynamicResource ColorPickerCornerRadius}" />
         <Setter Property="Content">
@@ -34,6 +35,8 @@
                     Height="{TemplateBinding Height}"
                     MinWidth="{TemplateBinding MinWidth}"
                     MinHeight="{TemplateBinding MinHeight}"
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                     VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                     Content="{TemplateBinding Content}"
@@ -450,7 +453,7 @@
         x:Key="HexColorPicker"
         BasedOn="{StaticResource {x:Type ColorPicker}}"
         TargetType="ColorPicker">
-        <Setter Property="Width" Value="200" />
+        <Setter Property="MinWidth" Value="200" />
         <Setter Property="Content">
             <Template>
                 <Grid ColumnDefinitions="Auto, *">
@@ -495,6 +498,8 @@
                     Height="{TemplateBinding Height}"
                     MinWidth="{TemplateBinding MinWidth}"
                     MinHeight="{TemplateBinding MinHeight}"
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                     VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                     Content="{TemplateBinding Content}"
@@ -643,7 +648,7 @@
         x:Key="HexSimpleColorPicker"
         BasedOn="{StaticResource SimpleColorPicker}"
         TargetType="ColorPicker">
-        <Setter Property="Width" Value="200" />
+        <Setter Property="MinWidth" Value="200" />
         <Setter Property="Content">
             <Template>
                 <Grid ColumnDefinitions="Auto, *">