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] 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>