From 4d89b82e169c7e0675adbf39c962962f0f0a8194 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Sat, 10 Aug 2024 13:20:13 +0800
Subject: [PATCH 1/8] fix: fix the issue of RGB & HSV NumericUpDown Tag
 disappearing.

---
 src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml | 2 +-
 src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
index 3498113..002f185 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
@@ -234,7 +234,7 @@
                                             RowDefinitions="Auto,24,1*,1*,1*,1*,12"
                                             Tag="{TemplateBinding ColorModel}">
                                             <Grid.Styles>
-                                                <Style Selector="NumericUpDown /template/ TextBox">
+                                                <Style Selector="NumericUpDown">
                                                     <Setter Property="InnerLeftContent">
                                                         <Template>
                                                             <TextBlock Width="12" Text="{Binding $parent[NumericUpDown].Tag}" />
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
index 34dfa31..f3bb519 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
@@ -322,7 +322,7 @@
                                 RowDefinitions="Auto,24,1*,1*,1*,1*,12"
                                 UseLayoutRounding="False">
                                 <Grid.Styles>
-                                    <Style Selector="NumericUpDown /template/ TextBox">
+                                    <Style Selector="NumericUpDown">
                                         <Setter Property="InnerLeftContent">
                                             <Template>
                                                 <TextBlock Width="12" Text="{Binding $parent[NumericUpDown].Tag}" />

From 3c0497c07aa8f7043dad8f0603d2b587056e793c Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Sat, 10 Aug 2024 13:50:33 +0800
Subject: [PATCH 2/8] fix: set ComboBox icon Width Auto, remove a column of
 CalendarDatePicker

---
 src/Semi.Avalonia/Controls/CalendarDatePicker.axaml | 7 +++----
 src/Semi.Avalonia/Controls/ComboBox.axaml           | 8 ++++----
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/Semi.Avalonia/Controls/CalendarDatePicker.axaml b/src/Semi.Avalonia/Controls/CalendarDatePicker.axaml
index a3755ef..d9deb27 100644
--- a/src/Semi.Avalonia/Controls/CalendarDatePicker.axaml
+++ b/src/Semi.Avalonia/Controls/CalendarDatePicker.axaml
@@ -34,11 +34,10 @@
                         <Grid
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
-                            ColumnDefinitions="*, Auto, Auto">
+                            ColumnDefinitions="*, Auto">
                             <TextBox
                                 Name="PART_TextBox"
                                 Grid.Column="0"
-                                Grid.ColumnSpan="2"
                                 MinHeight="{TemplateBinding MinHeight}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
@@ -76,7 +75,7 @@
                             </TextBox>
                             <Button
                                 Name="ClearButton"
-                                Grid.Column="2"
+                                Grid.Column="1"
                                 Padding="0,0,8,0"
                                 Content="{DynamicResource IconButtonClearData}"
                                 Command="{Binding $parent[CalendarDatePicker].Clear}"
@@ -85,7 +84,7 @@
                                 Theme="{DynamicResource InnerIconButton}" />
                             <Button
                                 Name="PART_Button"
-                                Grid.Column="2"
+                                Grid.Column="1"
                                 Padding="0,0,8,0"
                                 Content="{DynamicResource CalendarDatePickerIconGlyph}"
                                 Focusable="False"
diff --git a/src/Semi.Avalonia/Controls/ComboBox.axaml b/src/Semi.Avalonia/Controls/ComboBox.axaml
index 76af1ae..0068c66 100644
--- a/src/Semi.Avalonia/Controls/ComboBox.axaml
+++ b/src/Semi.Avalonia/Controls/ComboBox.axaml
@@ -46,7 +46,7 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="ComboBox">
                 <DataValidationErrors>
-                    <Grid ColumnDefinitions="*, 32">
+                    <Grid ColumnDefinitions="*, Auto">
                         <Border
                             x:Name="Background"
                             Grid.Column="0"
@@ -80,8 +80,10 @@
                         <Button
                             Name="ClearButton"
                             Grid.Column="1"
+                            Margin="0,0,8,0"
                             Command="{Binding $parent[ComboBox].Clear}"
                             Content="{DynamicResource IconButtonClearData}"
+                            Focusable="False"
                             IsVisible="False"
                             Theme="{DynamicResource InnerIconButton}" />
                         <Border
@@ -98,9 +100,7 @@
                             Grid.Column="1"
                             Width="12"
                             Height="12"
-                            Margin="0,0,10,0"
-                            HorizontalAlignment="Right"
-                            VerticalAlignment="Center"
+                            Margin="0,0,12,0"
                             Data="{DynamicResource ComboBoxIcon}"
                             Foreground="{DynamicResource ComboBoxIconDefaultForeground}"
                             IsHitTestVisible="False"

From d2a1f1e2770c5f8046df8c36ee77b20ae270b5e0 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Sat, 10 Aug 2024 14:54:09 +0800
Subject: [PATCH 3/8] feat: basic SimpleColorView.

---
 .../Controls/ColorView.axaml                  | 144 +++++++++++++++++-
 1 file changed, 142 insertions(+), 2 deletions(-)

diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
index f3bb519..f934c76 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
@@ -7,12 +7,12 @@
     xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
     xmlns:primitives="using:Avalonia.Controls.Primitives"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
     <pc:ContrastBrushConverter x:Key="ContrastBrushConverter" />
     <converters:ColorToDisplayNameConverter x:Key="ColorToDisplayNameConverter" />
     <converters:ColorToHexConverter x:Key="ColorToHexConverter" />
     <converters:DoNothingForNullConverter x:Key="DoNothingForNullConverter" />
     <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
+    <converters:ToBrushConverter x:Key="ToBrushConverter" />
     <globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
 
     <VisualBrush
@@ -376,7 +376,7 @@
                                         AutomationProperties.Name="Hexadecimal Color"
                                         InnerLeftContent="#"
                                         IsVisible="{TemplateBinding IsHexInputVisible}"
-                                        MaxLength="9" />
+                                        MaxLength="8" />
                                 </Grid>
                                 <!--  Color component editing controls  -->
                                 <!--  Component 1 RGB:Red HSV:Hue  -->
@@ -560,4 +560,144 @@
             </Style>
         </Style>
     </ControlTheme>
+
+    <ControlTheme x:Key="SimpleColorView" TargetType="ColorView">
+        <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="ColorSpectrumComponents" Value="SaturationValue" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="{x:Type ColorView}">
+                <Grid>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="*" MinHeight="280"/>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto"/>
+                    </Grid.RowDefinitions>
+                    <!--  Backgrounds  -->
+                    <Border
+                        x:Name="ContentBackgroundBorder"
+                        Grid.Row="0"
+                        Grid.RowSpan="3"
+                        Height="{TemplateBinding Height}"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{DynamicResource ColorViewContentBackgroundBrush}"
+                        BorderBrush="{DynamicResource ColorViewContentBorderBrush}"
+                        BorderThickness="0,1,0,0"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+
+                    <!--  Spectrum Tab  -->
+                    <Border
+                        Grid.Row="0"
+                        CornerRadius="8 8 0 0"
+                        ClipToBounds="True">
+                        <primitives:ColorSpectrum
+                            x:Name="ColorSpectrum"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Components="{TemplateBinding ColorSpectrumComponents}"
+                            HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                            MaxHue="{TemplateBinding MaxHue}"
+                            MaxSaturation="{TemplateBinding MaxSaturation}"
+                            MaxValue="{TemplateBinding MaxValue}"
+                            MinHue="{TemplateBinding MinHue}"
+                            MinSaturation="{TemplateBinding MinSaturation}"
+                            MinValue="{TemplateBinding MinValue}"
+                            Shape="{TemplateBinding ColorSpectrumShape}" />
+                    </Border>
+                    <primitives:ColorSlider
+                        x:Name="ColorSpectrumThirdComponentSlider"
+                        Grid.Row="1"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Center"
+                        AutomationProperties.Name="Third Component"
+                        ColorComponent="{Binding #ColorSpectrum.ThirdComponent}"
+                        ColorModel="Hsva"
+                        HsvColor="{Binding #ColorSpectrum.HsvColor}"
+                        IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
+                        Orientation="Horizontal" />
+
+                    <primitives:ColorSlider
+                        x:Name="ColorSpectrumAlphaSlider"
+                        Grid.Row="2"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Center"
+                        AutomationProperties.Name="Alpha Component"
+                        ColorComponent="Alpha"
+                        ColorModel="Hsva"
+                        HsvColor="{Binding #ColorSpectrum.HsvColor}"
+                        IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                        IsVisible="{TemplateBinding IsAlphaVisible}"
+                        IsRoundingEnabled="True"
+                        IsSnapToTickEnabled="True"
+                        TickFrequency="1"
+                        Orientation="Horizontal">
+                    </primitives:ColorSlider>
+                    <StackPanel
+                        Grid.Row="3"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Center"
+                        Orientation="Horizontal"
+                        Margin="0 8 0 0">
+                        <Border
+                            Background="{TemplateBinding Color, Converter={StaticResource ToBrushConverter}}"
+                            Width="20"
+                            Height="20"
+                            CornerRadius="4" />
+                        <Panel>
+                            <TextBox
+                                x:Name="PART_HexTextBox"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Center"
+                                Margin="4 0 0 0"
+                                Classes="Small"
+                                AutomationProperties.Name="Hexadecimal Color"
+                                InnerLeftContent="#"
+                                IsVisible="{TemplateBinding IsHexInputVisible}"
+                                MaxLength="8" />
+                        </Panel>
+
+                        <NumericUpDown
+                            x:Name="AlphaComponentNumericUpDown"
+                            Width="70"
+                            VerticalAlignment="Center"
+                            AllowSpin="True"
+                            Classes="Small"
+                            IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                            Maximum="{Binding #ColorSpectrumAlphaSlider.Maximum}"
+                            Minimum="{Binding #ColorSpectrumAlphaSlider.Minimum}"
+                            NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                            ShowButtonSpinner="False"
+                            InnerRightContent="%"
+                            Value="{Binding #ColorSpectrumAlphaSlider.Value}">
+                            <NumericUpDown.IsVisible>
+                                <MultiBinding Converter="{x:Static BoolConverters.And}">
+                                    <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                    <Binding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                </MultiBinding>
+                            </NumericUpDown.IsVisible>
+                        </NumericUpDown>
+                        <ComboBox
+                            x:Name="ColorComponentComboBox"
+                            Width="80"
+                            VerticalAlignment="Center"
+                            Classes="Small"
+                            SelectedValue="{TemplateBinding ColorModel}">
+                            <ColorModel>Rgba</ColorModel>
+                            <ColorModel>Hsva</ColorModel>
+                        </ComboBox>
+                    </StackPanel>
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <Design.PreviewWith>
+        <ColorView
+            Theme="{StaticResource SimpleColorView}"
+            IsAlphaVisible="True"
+            IsAlphaEnabled="True"
+            ColorModel="Hsva"
+            HsvColor="hsv(120,1,1,30)" />
+    </Design.PreviewWith>
 </ResourceDictionary>

From 1cedc77ce19e1701facd14101dfc7e5b832d1167 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Sun, 11 Aug 2024 19:11:11 +0800
Subject: [PATCH 4/8] feat: complete SimpleColorView.

---
 .../Pages/ColorPickerDemo.axaml               | 10 ++-
 .../Controls/ColorView.axaml                  | 73 ++++++++++---------
 .../Converters/ColorToTextConverter.cs        | 33 +++++++++
 .../Converters/HsvColorToTextConverter.cs     | 35 +++++++++
 .../Converters/ToColorModel.cs                | 21 ++++++
 5 files changed, 136 insertions(+), 36 deletions(-)
 create mode 100644 src/Semi.Avalonia.ColorPicker/Converters/ColorToTextConverter.cs
 create mode 100644 src/Semi.Avalonia.ColorPicker/Converters/HsvColorToTextConverter.cs
 create mode 100644 src/Semi.Avalonia.ColorPicker/Converters/ToColorModel.cs

diff --git a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
index 1172cd4..ee27171 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
@@ -6,7 +6,7 @@
     xmlns:controls="using:Avalonia.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    d:DesignHeight="450"
+    d:DesignHeight="1450"
     d:DesignWidth="800"
     mc:Ignorable="d">
     <StackPanel Spacing="20">
@@ -18,6 +18,14 @@
             <ColorView ColorSpectrumShape="Box" />
             <ColorView Palette="{DynamicResource SemiColorPalette}" />
         </StackPanel>
+        <StackPanel
+            VerticalAlignment="Top"
+            Orientation="Horizontal">
+            <ColorView
+                Theme="{StaticResource SimpleColorView}"
+                IsAlphaVisible="True"
+                HsvColor="hsv(120,11%,10%)" />
+        </StackPanel>
         <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
             <ColorPicker ColorSpectrumShape="Ring">
                 <ColorPicker.Palette>
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
index f934c76..d5ba8df 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
@@ -6,6 +6,7 @@
     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" />
     <converters:ColorToDisplayNameConverter x:Key="ColorToDisplayNameConverter" />
@@ -13,6 +14,9 @@
     <converters:DoNothingForNullConverter x:Key="DoNothingForNullConverter" />
     <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
     <converters:ToBrushConverter x:Key="ToBrushConverter" />
+    <cvts:HsvColorToTextConverter x:Key="HsvColorToTextConverter" />
+    <cvts:ColorToTextConverter x:Key="ColorToTextConverter" />
+    <cvts:ToColorModel x:Key="ToColorModel" />
     <globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
 
     <VisualBrush
@@ -562,30 +566,18 @@
     </ControlTheme>
 
     <ControlTheme x:Key="SimpleColorView" TargetType="ColorView">
+        <Setter Property="Width" Value="280" />
         <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
         <Setter Property="ColorSpectrumComponents" Value="SaturationValue" />
         <Setter Property="Template">
             <ControlTemplate TargetType="{x:Type ColorView}">
                 <Grid>
                     <Grid.RowDefinitions>
-                        <RowDefinition Height="*" MinHeight="280"/>
-                        <RowDefinition Height="Auto"/>
-                        <RowDefinition Height="Auto"/>
-                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="*" MinHeight="280" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
                     </Grid.RowDefinitions>
-                    <!--  Backgrounds  -->
-                    <Border
-                        x:Name="ContentBackgroundBorder"
-                        Grid.Row="0"
-                        Grid.RowSpan="3"
-                        Height="{TemplateBinding Height}"
-                        HorizontalAlignment="Stretch"
-                        VerticalAlignment="Stretch"
-                        Background="{DynamicResource ColorViewContentBackgroundBrush}"
-                        BorderBrush="{DynamicResource ColorViewContentBorderBrush}"
-                        BorderThickness="0,1,0,0"
-                        CornerRadius="{TemplateBinding CornerRadius}" />
-
                     <!--  Spectrum Tab  -->
                     <Border
                         Grid.Row="0"
@@ -596,7 +588,7 @@
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Components="{TemplateBinding ColorSpectrumComponents}"
-                            HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
+                            HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                             MaxHue="{TemplateBinding MaxHue}"
                             MaxSaturation="{TemplateBinding MaxSaturation}"
                             MaxValue="{TemplateBinding MaxValue}"
@@ -644,22 +636,36 @@
                             Width="20"
                             Height="20"
                             CornerRadius="4" />
-                        <Panel>
+                        <Panel
+                            x:Name="PART_TextBoxPanel"
+                            Width="106"
+                            Margin="4 0 0 0"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Center">
                             <TextBox
                                 x:Name="PART_HexTextBox"
-                                HorizontalAlignment="Stretch"
-                                VerticalAlignment="Center"
-                                Margin="4 0 0 0"
                                 Classes="Small"
                                 AutomationProperties.Name="Hexadecimal Color"
                                 InnerLeftContent="#"
-                                IsVisible="{TemplateBinding IsHexInputVisible}"
+                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
+                                Text="{Binding  #ColorSpectrum.Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
                                 MaxLength="8" />
+                            <TextBox
+                                x:Name="PART_HsvaTextBox"
+                                Classes="Small"
+                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
+                                Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
+                            <TextBox
+                                x:Name="PART_RgbaTextBox"
+                                Classes="Small"
+                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Rgba}"
+                                Text="{TemplateBinding Color, Converter={StaticResource ColorToTextConverter}, Mode=TwoWay}" />
                         </Panel>
 
                         <NumericUpDown
                             x:Name="AlphaComponentNumericUpDown"
                             Width="70"
+                            HorizontalAlignment="Right"
                             VerticalAlignment="Center"
                             AllowSpin="True"
                             Classes="Small"
@@ -669,27 +675,24 @@
                             NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                             ShowButtonSpinner="False"
                             InnerRightContent="%"
-                            Value="{Binding #ColorSpectrumAlphaSlider.Value}">
-                            <NumericUpDown.IsVisible>
-                                <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                    <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                    <Binding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                </MultiBinding>
-                            </NumericUpDown.IsVisible>
-                        </NumericUpDown>
+                            IsVisible="{TemplateBinding IsAlphaVisible}"
+                            Value="{Binding #ColorSpectrumAlphaSlider.Value}" />
                         <ComboBox
-                            x:Name="ColorComponentComboBox"
+                            x:Name="ColorModelComboBox"
                             Width="80"
                             VerticalAlignment="Center"
                             Classes="Small"
-                            SelectedValue="{TemplateBinding ColorModel}">
-                            <ColorModel>Rgba</ColorModel>
+                            SelectedValue="Hex">
+                            Hex<ColorModel>Rgba</ColorModel>
                             <ColorModel>Hsva</ColorModel>
                         </ComboBox>
                     </StackPanel>
                 </Grid>
             </ControlTemplate>
         </Setter>
+        <Style Selector="^[IsAlphaVisible=False] /template/ Panel#PART_TextBoxPanel">
+            <Setter Property="Width" Value="176" />
+        </Style>
     </ControlTheme>
 
     <Design.PreviewWith>
@@ -698,6 +701,6 @@
             IsAlphaVisible="True"
             IsAlphaEnabled="True"
             ColorModel="Hsva"
-            HsvColor="hsv(120,1,1,30)" />
+            HsvColor="hsv(120,7%,90%)" />
     </Design.PreviewWith>
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia.ColorPicker/Converters/ColorToTextConverter.cs b/src/Semi.Avalonia.ColorPicker/Converters/ColorToTextConverter.cs
new file mode 100644
index 0000000..7e4364c
--- /dev/null
+++ b/src/Semi.Avalonia.ColorPicker/Converters/ColorToTextConverter.cs
@@ -0,0 +1,33 @@
+using System;
+using System.Globalization;
+using System.Linq;
+using Avalonia;
+using Avalonia.Data;
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+
+namespace Semi.Avalonia.ColorPicker.Converters;
+
+public class ColorToTextConverter : IValueConverter
+{
+    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        return value is Color color ? $"{color.R},{color.G},{color.B}" : AvaloniaProperty.UnsetValue;
+    }
+
+    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is not string str) return BindingOperations.DoNothing;
+        var parts = str.Split(',');
+        if (parts.Length != 3 || parts.Any(string.IsNullOrWhiteSpace)) return BindingOperations.DoNothing;
+
+        if (byte.TryParse(parts[0], NumberStyles.Integer, CultureInfo.InvariantCulture, out var r) &&
+            byte.TryParse(parts[1], NumberStyles.Integer, CultureInfo.InvariantCulture, out var g) &&
+            byte.TryParse(parts[2], NumberStyles.Integer, CultureInfo.InvariantCulture, out var b))
+        {
+            return new Color(0xFF, r, g, b);
+        }
+
+        return BindingOperations.DoNothing;
+    }
+}
\ No newline at end of file
diff --git a/src/Semi.Avalonia.ColorPicker/Converters/HsvColorToTextConverter.cs b/src/Semi.Avalonia.ColorPicker/Converters/HsvColorToTextConverter.cs
new file mode 100644
index 0000000..4fd9a85
--- /dev/null
+++ b/src/Semi.Avalonia.ColorPicker/Converters/HsvColorToTextConverter.cs
@@ -0,0 +1,35 @@
+using System;
+using System.Globalization;
+using System.Linq;
+using Avalonia;
+using Avalonia.Data;
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+
+namespace Semi.Avalonia.ColorPicker.Converters;
+
+public class HsvColorToTextConverter : IValueConverter
+{
+    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        return value is HsvColor hsvColor
+            ? $"{Math.Round(hsvColor.H)},{Math.Round(hsvColor.S * 100)},{Math.Round(hsvColor.V * 100)}"
+            : AvaloniaProperty.UnsetValue;
+    }
+
+    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is not string str) return BindingOperations.DoNothing;
+        var parts = str.Split(',');
+        if (parts.Length != 3 || parts.Any(string.IsNullOrWhiteSpace)) return BindingOperations.DoNothing;
+
+        if (double.TryParse(parts[0], NumberStyles.Float, CultureInfo.InvariantCulture, out var h) &&
+            double.TryParse(parts[1], NumberStyles.Float, CultureInfo.InvariantCulture, out var s) &&
+            double.TryParse(parts[2], NumberStyles.Float, CultureInfo.InvariantCulture, out var v))
+        {
+            return new HsvColor(1, h, s / 100, v / 100);
+        }
+
+        return BindingOperations.DoNothing;
+    }
+}
\ No newline at end of file
diff --git a/src/Semi.Avalonia.ColorPicker/Converters/ToColorModel.cs b/src/Semi.Avalonia.ColorPicker/Converters/ToColorModel.cs
new file mode 100644
index 0000000..d7f21a5
--- /dev/null
+++ b/src/Semi.Avalonia.ColorPicker/Converters/ToColorModel.cs
@@ -0,0 +1,21 @@
+using System;
+using System.Globalization;
+using Avalonia.Controls;
+using Avalonia.Data.Converters;
+
+namespace Semi.Avalonia.ColorPicker.Converters;
+
+public class ToColorModel : IValueConverter
+{
+    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        return parameter is "Hex" && value is "Hex" ||
+               parameter is "Rgba" && value is ColorModel.Rgba ||
+               parameter is "Hsva" && value is ColorModel.Hsva;
+    }
+
+    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
+    }
+}
\ No newline at end of file

From e8d28c02332d2ebfc978c019175ac1ebde212ac2 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Mon, 12 Aug 2024 14:42:47 +0800
Subject: [PATCH 5/8] feat: add SimpleColorPicker & HexSimpleColorPicker.

---
 .../Pages/ColorPickerDemo.axaml               |   6 +
 .../Controls/ColorPicker.axaml                | 196 ++++++++++++++++++
 2 files changed, 202 insertions(+)

diff --git a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
index ee27171..29451c7 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
@@ -44,5 +44,11 @@
                 </ColorPicker.Palette>
             </ColorPicker>
         </StackPanel>
+        <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
+            <ColorPicker Theme="{StaticResource SimpleColorPicker}"
+                HsvColor="hsv(120,11%,10%)" />
+            <ColorPicker Theme="{StaticResource HexSimpleColorPicker}"
+                HsvColor="hsv(120,11%,10%)" />
+        </StackPanel>
     </StackPanel>
 </UserControl>
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
index 002f185..165a426 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
@@ -514,4 +514,200 @@
         </Setter>
     </ControlTheme>
 
+    <ControlTheme
+        x:Key="SimpleColorPicker"
+        BasedOn="{StaticResource {x:Type ColorPicker}}"
+        TargetType="ColorPicker">
+        <Setter Property="ColorSpectrumComponents" Value="SaturationValue" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="{x:Type ColorPicker}">
+                <DropDownButton
+                    Width="{TemplateBinding Width}"
+                    Height="{TemplateBinding Height}"
+                    Padding="0,0,10,0"
+                    HorizontalContentAlignment="Stretch"
+                    VerticalContentAlignment="Stretch"
+                    ClipToBounds="True"
+                    Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    UseLayoutRounding="False">
+                    <DropDownButton.Styles>
+                        <Style Selector="FlyoutPresenter.nopadding">
+                            <Setter Property="Padding" Value="0" />
+                        </Style>
+                    </DropDownButton.Styles>
+                    <DropDownButton.Flyout>
+                        <Flyout FlyoutPresenterClasses="nopadding" Placement="{DynamicResource ColorPickerFlyoutPlacement}">
+
+                            <!--
+                                The following is copy-pasted from the ColorView's control template.
+                                It MUST always be kept in sync with the ColorView (which is master).
+                                Note the only changes are resources specific to the ColorPicker.
+                            -->
+                            <Grid Width="280">
+                                <Grid.RowDefinitions>
+                                    <RowDefinition Height="*" MinHeight="280" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="Auto" />
+                                </Grid.RowDefinitions>
+                                <!--  Spectrum Tab  -->
+                                <Border
+                                    Grid.Row="0"
+                                    CornerRadius="8 8 0 0"
+                                    ClipToBounds="True">
+                                    <primitives:ColorSpectrum
+                                        x:Name="ColorSpectrum"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        Components="{TemplateBinding ColorSpectrumComponents}"
+                                        HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
+                                        MaxHue="{TemplateBinding MaxHue}"
+                                        MaxSaturation="{TemplateBinding MaxSaturation}"
+                                        MaxValue="{TemplateBinding MaxValue}"
+                                        MinHue="{TemplateBinding MinHue}"
+                                        MinSaturation="{TemplateBinding MinSaturation}"
+                                        MinValue="{TemplateBinding MinValue}"
+                                        Shape="{TemplateBinding ColorSpectrumShape}" />
+                                </Border>
+                                <primitives:ColorSlider
+                                    x:Name="ColorSpectrumThirdComponentSlider"
+                                    Grid.Row="1"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    AutomationProperties.Name="Third Component"
+                                    ColorComponent="{Binding #ColorSpectrum.ThirdComponent}"
+                                    ColorModel="Hsva"
+                                    HsvColor="{Binding #ColorSpectrum.HsvColor}"
+                                    IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
+                                    Orientation="Horizontal" />
+
+                                <primitives:ColorSlider
+                                    x:Name="ColorSpectrumAlphaSlider"
+                                    Grid.Row="2"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    AutomationProperties.Name="Alpha Component"
+                                    ColorComponent="Alpha"
+                                    ColorModel="Hsva"
+                                    HsvColor="{Binding #ColorSpectrum.HsvColor}"
+                                    IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                                    IsVisible="{TemplateBinding IsAlphaVisible}"
+                                    IsRoundingEnabled="True"
+                                    IsSnapToTickEnabled="True"
+                                    TickFrequency="1"
+                                    Orientation="Horizontal">
+                                </primitives:ColorSlider>
+                                <StackPanel
+                                    Grid.Row="3"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    Orientation="Horizontal"
+                                    Margin="0 8 0 0">
+                                    <Border
+                                        Background="{TemplateBinding Color, Converter={StaticResource ToBrushConverter}}"
+                                        Width="20"
+                                        Height="20"
+                                        CornerRadius="4" />
+                                    <Panel
+                                        x:Name="PART_TextBoxPanel"
+                                        Width="106"
+                                        Margin="4 0 0 0"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Center">
+                                        <TextBox
+                                            x:Name="PART_HexTextBox"
+                                            Classes="Small"
+                                            AutomationProperties.Name="Hexadecimal Color"
+                                            InnerLeftContent="#"
+                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
+                                            Text="{Binding  #ColorSpectrum.Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
+                                            MaxLength="8" />
+                                        <TextBox
+                                            x:Name="PART_HsvaTextBox"
+                                            Classes="Small"
+                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
+                                            Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
+                                        <TextBox
+                                            x:Name="PART_RgbaTextBox"
+                                            Classes="Small"
+                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Rgba}"
+                                            Text="{TemplateBinding Color, Converter={StaticResource ColorToTextConverter}, Mode=TwoWay}" />
+                                    </Panel>
+
+                                    <NumericUpDown
+                                        x:Name="AlphaComponentNumericUpDown"
+                                        Width="70"
+                                        HorizontalAlignment="Right"
+                                        VerticalAlignment="Center"
+                                        AllowSpin="True"
+                                        Classes="Small"
+                                        IsEnabled="{TemplateBinding IsAlphaEnabled}"
+                                        Maximum="{Binding #ColorSpectrumAlphaSlider.Maximum}"
+                                        Minimum="{Binding #ColorSpectrumAlphaSlider.Minimum}"
+                                        NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
+                                        ShowButtonSpinner="False"
+                                        InnerRightContent="%"
+                                        IsVisible="{TemplateBinding IsAlphaVisible}"
+                                        Value="{Binding #ColorSpectrumAlphaSlider.Value}" />
+                                    <ComboBox
+                                        x:Name="ColorModelComboBox"
+                                        Width="80"
+                                        VerticalAlignment="Center"
+                                        Classes="Small"
+                                        SelectedValue="Hex">
+                                        Hex<ColorModel>Rgba</ColorModel>
+                                        <ColorModel>Hsva</ColorModel>
+                                    </ComboBox>
+                                </StackPanel>
+                            </Grid>
+                        </Flyout>
+                    </DropDownButton.Flyout>
+                </DropDownButton>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^[IsAlphaVisible=False] /template/ Panel#PART_TextBoxPanel">
+            <Setter Property="Width" Value="176" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="HexSimpleColorPicker"
+        BasedOn="{StaticResource SimpleColorPicker}"
+        TargetType="ColorPicker">
+        <Setter Property="Width" Value="200" />
+        <Setter Property="Content">
+            <Template>
+                <Grid ColumnDefinitions="Auto, *">
+                    <Border
+                        Grid.Column="0"
+                        Width="{Binding $self.Bounds.Height}"
+                        Margin="1,1,0,1"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                    <Border
+                        Grid.Column="0"
+                        Width="{Binding $self.Bounds.Height}"
+                        Margin="1,1,0,1"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{TemplateBinding HsvColor,
+                                                     Converter={StaticResource ToBrushConverter}}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                    <TextBlock
+                        Grid.Column="1"
+                        Margin="8,0,0,0"
+                        HorizontalAlignment="Left"
+                        VerticalAlignment="Center"
+                        FontWeight="Regular"
+                        Foreground="{DynamicResource TextBlockDefaultForeground}"
+                        Text="{Binding $parent[ColorPicker].Color}" />
+                </Grid>
+            </Template>
+        </Setter>
+    </ControlTheme>
+
 </ResourceDictionary>

From 73687eb72f066ce551fcb5c171c0e0d978210713 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Mon, 12 Aug 2024 15:50:55 +0800
Subject: [PATCH 6/8] fix: fix the shake of ColorSpectrum's thumb.

---
 src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml | 1 -
 src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml   | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
index 165a426..aca0643 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
@@ -622,7 +622,6 @@
                                             AutomationProperties.Name="Hexadecimal Color"
                                             InnerLeftContent="#"
                                             IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
-                                            Text="{Binding  #ColorSpectrum.Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
                                             MaxLength="8" />
                                         <TextBox
                                             x:Name="PART_HsvaTextBox"
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
index d5ba8df..fb7429f 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
@@ -648,7 +648,6 @@
                                 AutomationProperties.Name="Hexadecimal Color"
                                 InnerLeftContent="#"
                                 IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
-                                Text="{Binding  #ColorSpectrum.Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
                                 MaxLength="8" />
                             <TextBox
                                 x:Name="PART_HsvaTextBox"

From 4d3c9630c3adca1d7426bd1d12af27ccd23b3df0 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Mon, 12 Aug 2024 16:35:51 +0800
Subject: [PATCH 7/8] fix: fix Flyout Placement.

---
 .../Pages/ColorPickerDemo.axaml               | 86 ++++++++++---------
 .../Controls/ColorPicker.axaml                |  2 +-
 src/Semi.Avalonia.ColorPicker/Shared.axaml    |  1 +
 3 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
index 29451c7..65a3b2f 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
@@ -9,46 +9,48 @@
     d:DesignHeight="1450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel Spacing="20">
-        <StackPanel
-            VerticalAlignment="Top"
-            Orientation="Horizontal"
-            Spacing="20">
-            <ColorView ColorSpectrumShape="Ring" />
-            <ColorView ColorSpectrumShape="Box" />
-            <ColorView Palette="{DynamicResource SemiColorPalette}" />
+    <ScrollViewer>
+        <StackPanel Spacing="20">
+            <StackPanel
+                VerticalAlignment="Top"
+                Orientation="Horizontal"
+                Spacing="20">
+                <ColorView ColorSpectrumShape="Ring" />
+                <ColorView ColorSpectrumShape="Box" />
+                <ColorView Palette="{DynamicResource SemiColorPalette}" />
+            </StackPanel>
+            <StackPanel
+                VerticalAlignment="Top"
+                Orientation="Horizontal">
+                <ColorView
+                    Theme="{StaticResource SimpleColorView}"
+                    IsAlphaVisible="True"
+                    HsvColor="hsv(120,11%,10%)" />
+            </StackPanel>
+            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
+                <ColorPicker ColorSpectrumShape="Ring">
+                    <ColorPicker.Palette>
+                        <controls:FlatHalfColorPalette />
+                    </ColorPicker.Palette>
+                </ColorPicker>
+                <ColorPicker ColorSpectrumShape="Box">
+                    <ColorPicker.Palette>
+                        <colorPicker:SemiColorLightPalette />
+                    </ColorPicker.Palette>
+                </ColorPicker>
+
+                <ColorPicker ColorSpectrumShape="Box" Theme="{DynamicResource HexColorPicker}">
+                    <ColorPicker.Palette>
+                        <colorPicker:SemiColorLightPalette />
+                    </ColorPicker.Palette>
+                </ColorPicker>
+            </StackPanel>
+            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
+                <ColorPicker Theme="{StaticResource SimpleColorPicker}"
+                             HsvColor="hsv(120,11%,10%)" />
+                <ColorPicker Theme="{StaticResource HexSimpleColorPicker}"
+                             HsvColor="hsv(120,11%,10%)" />
+            </StackPanel>
         </StackPanel>
-        <StackPanel
-            VerticalAlignment="Top"
-            Orientation="Horizontal">
-            <ColorView
-                Theme="{StaticResource SimpleColorView}"
-                IsAlphaVisible="True"
-                HsvColor="hsv(120,11%,10%)" />
-        </StackPanel>
-        <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
-            <ColorPicker ColorSpectrumShape="Ring">
-                <ColorPicker.Palette>
-                    <controls:FlatHalfColorPalette />
-                </ColorPicker.Palette>
-            </ColorPicker>
-            <ColorPicker ColorSpectrumShape="Box">
-                <ColorPicker.Palette>
-                    <colorPicker:SemiColorLightPalette />
-                </ColorPicker.Palette>
-            </ColorPicker>
-            
-            <ColorPicker ColorSpectrumShape="Box" Theme="{DynamicResource HexColorPicker}">
-                <ColorPicker.Palette>
-                    <colorPicker:SemiColorLightPalette />
-                </ColorPicker.Palette>
-            </ColorPicker>
-        </StackPanel>
-        <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
-            <ColorPicker Theme="{StaticResource SimpleColorPicker}"
-                HsvColor="hsv(120,11%,10%)" />
-            <ColorPicker Theme="{StaticResource HexSimpleColorPicker}"
-                HsvColor="hsv(120,11%,10%)" />
-        </StackPanel>
-    </StackPanel>
-</UserControl>
+    </ScrollViewer>
+</UserControl>
\ No newline at end of file
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
index aca0643..c4a05e4 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
@@ -538,7 +538,7 @@
                         </Style>
                     </DropDownButton.Styles>
                     <DropDownButton.Flyout>
-                        <Flyout FlyoutPresenterClasses="nopadding" Placement="{DynamicResource ColorPickerFlyoutPlacement}">
+                        <Flyout FlyoutPresenterClasses="nopadding" Placement="{DynamicResource SimpleColorPickerFlyoutPlacement}">
 
                             <!--
                                 The following is copy-pasted from the ColorView's control template.
diff --git a/src/Semi.Avalonia.ColorPicker/Shared.axaml b/src/Semi.Avalonia.ColorPicker/Shared.axaml
index 08bc9af..a85aaf9 100644
--- a/src/Semi.Avalonia.ColorPicker/Shared.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Shared.axaml
@@ -29,4 +29,5 @@
     <colorPicker:SemiColorDarkPalette x:Key="SemiColorPalette" />
     
     <PlacementMode x:Key="ColorPickerFlyoutPlacement">AnchorAndGravity</PlacementMode>
+    <PlacementMode x:Key="SimpleColorPickerFlyoutPlacement">BottomEdgeAlignedLeft</PlacementMode>
 </ResourceDictionary>
\ No newline at end of file

From 9b9c05773b2c3f95344627f39af342f9ca1c2d1e Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Tue, 13 Aug 2024 14:45:10 +0800
Subject: [PATCH 8/8] fix: fix issues.

---
 .../Pages/ColorPickerDemo.axaml                  |  7 ++++++-
 .../Controls/ColorPicker.axaml                   | 16 ++++++++--------
 .../Controls/ColorView.axaml                     | 16 ++++++++--------
 .../Converters/ColorToTextConverter.cs           |  9 +++++----
 .../Converters/HsvColorToTextConverter.cs        |  9 +++++----
 5 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
index 65a3b2f..cb5dfaf 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml
@@ -15,7 +15,7 @@
                 VerticalAlignment="Top"
                 Orientation="Horizontal"
                 Spacing="20">
-                <ColorView ColorSpectrumShape="Ring" />
+                <ColorView Name="Test" ColorSpectrumShape="Ring" />
                 <ColorView ColorSpectrumShape="Box" />
                 <ColorView Palette="{DynamicResource SemiColorPalette}" />
             </StackPanel>
@@ -23,9 +23,14 @@
                 VerticalAlignment="Top"
                 Orientation="Horizontal">
                 <ColorView
+                    Name="SimpleColorViewTest"
                     Theme="{StaticResource SimpleColorView}"
                     IsAlphaVisible="True"
                     HsvColor="hsv(120,11%,10%)" />
+                <StackPanel>
+                    <TextBlock Text="{Binding #SimpleColorViewTest.HsvColor}" />
+                    <TextBlock Text="{Binding #SimpleColorViewTest.Color}" />
+                </StackPanel>
             </StackPanel>
             <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                 <ColorPicker ColorSpectrumShape="Ring">
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
index c4a05e4..514af34 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml
@@ -579,7 +579,7 @@
                                     AutomationProperties.Name="Third Component"
                                     ColorComponent="{Binding #ColorSpectrum.ThirdComponent}"
                                     ColorModel="Hsva"
-                                    HsvColor="{Binding #ColorSpectrum.HsvColor}"
+                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                     IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                     Orientation="Horizontal" />
 
@@ -591,7 +591,7 @@
                                     AutomationProperties.Name="Alpha Component"
                                     ColorComponent="Alpha"
                                     ColorModel="Hsva"
-                                    HsvColor="{Binding #ColorSpectrum.HsvColor}"
+                                    HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                     IsVisible="{TemplateBinding IsAlphaVisible}"
                                     IsRoundingEnabled="True"
@@ -619,20 +619,20 @@
                                         <TextBox
                                             x:Name="PART_HexTextBox"
                                             Classes="Small"
-                                            AutomationProperties.Name="Hexadecimal Color"
                                             InnerLeftContent="#"
                                             IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
+                                            Text="{TemplateBinding Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
                                             MaxLength="8" />
-                                        <TextBox
-                                            x:Name="PART_HsvaTextBox"
-                                            Classes="Small"
-                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
-                                            Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
                                         <TextBox
                                             x:Name="PART_RgbaTextBox"
                                             Classes="Small"
                                             IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Rgba}"
                                             Text="{TemplateBinding Color, Converter={StaticResource ColorToTextConverter}, Mode=TwoWay}" />
+                                        <TextBox
+                                            x:Name="PART_HsvaTextBox"
+                                            Classes="Small"
+                                            IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
+                                            Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
                                     </Panel>
 
                                     <NumericUpDown
diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
index fb7429f..f0805f6 100644
--- a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
+++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml
@@ -605,7 +605,7 @@
                         AutomationProperties.Name="Third Component"
                         ColorComponent="{Binding #ColorSpectrum.ThirdComponent}"
                         ColorModel="Hsva"
-                        HsvColor="{Binding #ColorSpectrum.HsvColor}"
+                        HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                         IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                         Orientation="Horizontal" />
 
@@ -617,7 +617,7 @@
                         AutomationProperties.Name="Alpha Component"
                         ColorComponent="Alpha"
                         ColorModel="Hsva"
-                        HsvColor="{Binding #ColorSpectrum.HsvColor}"
+                        HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}"
                         IsEnabled="{TemplateBinding IsAlphaEnabled}"
                         IsVisible="{TemplateBinding IsAlphaVisible}"
                         IsRoundingEnabled="True"
@@ -645,20 +645,20 @@
                             <TextBox
                                 x:Name="PART_HexTextBox"
                                 Classes="Small"
-                                AutomationProperties.Name="Hexadecimal Color"
                                 InnerLeftContent="#"
                                 IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hex}"
+                                Text="{TemplateBinding Color, Converter={StaticResource ColorToHexConverter}, Mode=TwoWay}"
                                 MaxLength="8" />
-                            <TextBox
-                                x:Name="PART_HsvaTextBox"
-                                Classes="Small"
-                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
-                                Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
                             <TextBox
                                 x:Name="PART_RgbaTextBox"
                                 Classes="Small"
                                 IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Rgba}"
                                 Text="{TemplateBinding Color, Converter={StaticResource ColorToTextConverter}, Mode=TwoWay}" />
+                            <TextBox
+                                x:Name="PART_HsvaTextBox"
+                                Classes="Small"
+                                IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={StaticResource ToColorModel}, ConverterParameter=Hsva}"
+                                Text="{TemplateBinding HsvColor, Converter={StaticResource HsvColorToTextConverter}, Mode=TwoWay}" />
                         </Panel>
 
                         <NumericUpDown
diff --git a/src/Semi.Avalonia.ColorPicker/Converters/ColorToTextConverter.cs b/src/Semi.Avalonia.ColorPicker/Converters/ColorToTextConverter.cs
index 7e4364c..18badbe 100644
--- a/src/Semi.Avalonia.ColorPicker/Converters/ColorToTextConverter.cs
+++ b/src/Semi.Avalonia.ColorPicker/Converters/ColorToTextConverter.cs
@@ -12,20 +12,21 @@ public class ColorToTextConverter : IValueConverter
 {
     public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
-        return value is Color color ? $"{color.R},{color.G},{color.B}" : AvaloniaProperty.UnsetValue;
+        return value is Color color ? $"{color.R},{color.G},{color.B},{color.A}" : AvaloniaProperty.UnsetValue;
     }
 
     public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
         if (value is not string str) return BindingOperations.DoNothing;
         var parts = str.Split(',');
-        if (parts.Length != 3 || parts.Any(string.IsNullOrWhiteSpace)) return BindingOperations.DoNothing;
+        if (parts.Length != 4 || parts.Any(string.IsNullOrWhiteSpace)) return BindingOperations.DoNothing;
 
         if (byte.TryParse(parts[0], NumberStyles.Integer, CultureInfo.InvariantCulture, out var r) &&
             byte.TryParse(parts[1], NumberStyles.Integer, CultureInfo.InvariantCulture, out var g) &&
-            byte.TryParse(parts[2], NumberStyles.Integer, CultureInfo.InvariantCulture, out var b))
+            byte.TryParse(parts[2], NumberStyles.Integer, CultureInfo.InvariantCulture, out var b) &&
+            byte.TryParse(parts[3], NumberStyles.Integer, CultureInfo.InvariantCulture, out var a))
         {
-            return new Color(0xFF, r, g, b);
+            return new Color(a, r, g, b);
         }
 
         return BindingOperations.DoNothing;
diff --git a/src/Semi.Avalonia.ColorPicker/Converters/HsvColorToTextConverter.cs b/src/Semi.Avalonia.ColorPicker/Converters/HsvColorToTextConverter.cs
index 4fd9a85..6c37588 100644
--- a/src/Semi.Avalonia.ColorPicker/Converters/HsvColorToTextConverter.cs
+++ b/src/Semi.Avalonia.ColorPicker/Converters/HsvColorToTextConverter.cs
@@ -13,7 +13,7 @@ public class HsvColorToTextConverter : IValueConverter
     public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
         return value is HsvColor hsvColor
-            ? $"{Math.Round(hsvColor.H)},{Math.Round(hsvColor.S * 100)},{Math.Round(hsvColor.V * 100)}"
+            ? $"{Math.Round(hsvColor.H)},{Math.Round(hsvColor.S * 100)},{Math.Round(hsvColor.V * 100)},{Math.Round(hsvColor.A * 100)}"
             : AvaloniaProperty.UnsetValue;
     }
 
@@ -21,13 +21,14 @@ public class HsvColorToTextConverter : IValueConverter
     {
         if (value is not string str) return BindingOperations.DoNothing;
         var parts = str.Split(',');
-        if (parts.Length != 3 || parts.Any(string.IsNullOrWhiteSpace)) return BindingOperations.DoNothing;
+        if (parts.Length != 4 || parts.Any(string.IsNullOrWhiteSpace)) return BindingOperations.DoNothing;
 
         if (double.TryParse(parts[0], NumberStyles.Float, CultureInfo.InvariantCulture, out var h) &&
             double.TryParse(parts[1], NumberStyles.Float, CultureInfo.InvariantCulture, out var s) &&
-            double.TryParse(parts[2], NumberStyles.Float, CultureInfo.InvariantCulture, out var v))
+            double.TryParse(parts[2], NumberStyles.Float, CultureInfo.InvariantCulture, out var v) &&
+            double.TryParse(parts[3], NumberStyles.Float, CultureInfo.InvariantCulture, out var a))
         {
-            return new HsvColor(1, h, s / 100, v / 100);
+            return new HsvColor(a / 100, h, s / 100, v / 100);
         }
 
         return BindingOperations.DoNothing;