feat: complete SimpleColorView.

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>

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="*" MinHeight="280" />
-                        <RowDefinition Height="Auto"/>
+                        <RowDefinition Height="Auto" />
-                        <RowDefinition Height="Auto"/>
+                        <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}">
+                            IsVisible="{TemplateBinding IsAlphaVisible}"
-                            <NumericUpDown.IsVisible>
+                            Value="{Binding #ColorSpectrumAlphaSlider.Value}" />
-                                <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"
+                            x:Name="ColorModelComboBox"
                             Width="80"
                             VerticalAlignment="Center"
                             Classes="Small"
-                            SelectedValue="{TemplateBinding ColorModel}">
+                            SelectedValue="Hex">
-                            <ColorModel>Rgba</ColorModel>
+                            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>

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;
+    }
+}

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;
+    }
+}

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();
+    }
+}