From e53e744d1faa487174c7e2395d7763242b2f2c3b Mon Sep 17 00:00:00 2001 From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com> Date: Wed, 8 Apr 2026 00:55:03 +0800 Subject: [PATCH] Refactor ColorPicker components and improve UI consistency (#795) * feat: add converters and update bindings in ColorPicker components. * feat: simplify ColorPicker layout by replacing complex structure with ColorView component. * feat: remove CornerRadiusToDoubleConverter. * feat: replace EnumToBoolConverter & ToColorModel with ObjectConverters.Equal. * feat: set HexInputAlphaPosition to Trailing. * feat: update ColorView layout and styling for improved UI consistency. * feat: bind Increment property of ColorSliders to respective TickFrequency and Slider values. * feat: update ColorView bindings to use new syntax and adjust CornerRadius for improved styling. * feat: update ColorPicker SelectedIndex Mode to TwoWay. * feat: sync upstream changes. * feat: update ColorPicker and ColorView to use SemiColorPalette for improved color selection. * feat: update ControlTemplate TargetType. * feat: add AIPurple colors to Palette. * refactor: display real Hex in HexColorPicker. * fix: update ColorView bindings to handle null values with a converter. * refactor: refactor ColorPicker demo. * refactor: replace RelativeSource bindings with TemplateBinding in ColorView. * chore: copy ColorView Template to ColorPicker. * fix: update AlphaEnabled ToggleSwitch content to reflect correct label. * fix: fix index order in ColorPicker. --- .../Pages/ColorPickerDemo.axaml | 144 ++++---- .../Controls/ColorPicker.axaml | 319 +++++++++--------- .../Controls/ColorPreviewer.axaml | 6 +- .../Controls/ColorSlider.axaml | 64 ++-- .../Controls/ColorSpectrum.axaml | 32 +- .../Controls/ColorView.axaml | 208 ++++++------ .../Controls/Converters.axaml | 17 + .../Controls/_index.axaml | 1 + .../Converters/ColorToTextConverter.cs | 8 +- .../Converters/HsvColorToTextConverter.cs | 8 +- .../Converters/ToColorModel.cs | 21 -- src/Semi.Avalonia.ColorPicker/Index.axaml | 1 + .../Properties/AssemblyInfo.cs | 4 +- .../SemiColorDarkPalette.cs | 21 +- .../SemiColorLightPalette.cs | 19 +- 15 files changed, 448 insertions(+), 425 deletions(-) create mode 100644 src/Semi.Avalonia.ColorPicker/Controls/Converters.axaml delete 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 0dc1a33..e46c763 100644 --- a/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml +++ b/demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml @@ -2,80 +2,90 @@ x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo" xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" - 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" d:DesignWidth="800" mc:Ignorable="d"> - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - + + + + + + + + + + + + + + + + + + + + + - - + + \ 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 5e6dbdc..1294a3b 100644 --- a/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml +++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml @@ -2,38 +2,48 @@ xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:iri="https://irihi.tech/shared" - xmlns:converters="using:Avalonia.Controls.Converters"> - + xmlns:semi="https://irihi.tech/semi"> + + + + + + + + - + + + + - - - - + - + @@ -81,7 +92,7 @@ Padding="0" VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" - SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"> + SelectedIndex="{TemplateBinding SelectedIndex, Mode=TwoWay}"> - - - - - - - - - - @@ -302,11 +285,11 @@ AllowSpin="True" Classes="Small" IsVisible="{TemplateBinding IsComponentTextInputVisible}" - Maximum="{Binding Maximum, ElementName=Component1Slider}" - Minimum="{Binding Minimum, ElementName=Component1Slider}" + Maximum="{Binding #Component1Slider.Maximum}" + Minimum="{Binding #Component1Slider.Minimum}" NumberFormat="{StaticResource ColorViewComponentNumberFormat}" ShowButtonSpinner="False" - Value="{Binding Value, ElementName=Component1Slider}" /> + Value="{Binding #Component1Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" /> + Value="{Binding #Component2Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" /> + Value="{Binding #Component3Slider.Value,Converter={StaticResource DoNothingForNullConverter}}" /> + Value="{Binding #AlphaComponentSlider.Value,Converter={StaticResource DoNothingForNullConverter}}"> - - + + @@ -412,7 +395,7 @@ VerticalAlignment="Center" ColorComponent="Alpha" ColorModel="{TemplateBinding ColorModel,Mode=OneWay}" - HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" + HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}" IsEnabled="{TemplateBinding IsAlphaEnabled}" IsRoundingEnabled="True" IsSnapToTickEnabled="True" @@ -420,8 +403,8 @@ TickFrequency="1"> - - + + @@ -429,11 +412,11 @@ - + @@ -442,9 +425,33 @@ - - + + + + + + + + @@ -452,38 +459,34 @@ x:Key="HexColorPicker" BasedOn="{StaticResource {x:Type ColorPicker}}" TargetType="ColorPicker"> - - - - + + + - + - - + + - + @@ -534,6 +540,7 @@ Name="ColorSpectrum" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" + CornerRadius="8 8 0 0" Components="{TemplateBinding ColorSpectrumComponents}" HsvColor="{TemplateBinding HsvColor, Mode=TwoWay}" MaxHue="{TemplateBinding MaxHue}" @@ -584,35 +591,43 @@ CornerRadius="4" /> + IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter=Hex}" + MaxLength="8"> + + 0 0 4 0 + + + CornerRadius="3 0 0 3" + IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter={x:Static ColorModel.Rgba}}" + Text="{TemplateBinding Color, Converter={semi:ColorToTextConverter}, Mode=TwoWay}" /> + CornerRadius="3 0 0 3" + IsVisible="{Binding #ColorModelComboBox.SelectedValue, Converter={x:Static ObjectConverters.Equal}, ConverterParameter={x:Static ColorModel.Hsva}}" + Text="{TemplateBinding HsvColor, Converter={semi:HsvColorToTextConverter}, Mode=TwoWay}" /> + Value="{Binding #ColorSpectrumAlphaSlider.Value,Converter={StaticResource DoNothingForNullConverter}}"> + + 12 0 4 0 + 4 0 0 0 + + - HexRgba + Hex + Rgba Hsva @@ -647,37 +669,8 @@ x:Key="HexSimpleColorPicker" BasedOn="{StaticResource SimpleColorPicker}" TargetType="ColorPicker"> - - - - + + \ 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 f554485..4d0eef1 100644 --- a/src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml +++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml @@ -1,15 +1,13 @@ - + xmlns:iri="https://irihi.tech/shared"> - + diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml index 6096327..e2cd8b7 100644 --- a/src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml +++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml @@ -1,9 +1,6 @@ - - + xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> @@ -12,7 +9,7 @@ - + - + - - + + VerticalAlignment="Center" + Height="{Binding #PART_Track.Bounds.Height}" + Background="{TemplateBinding Background}" + CornerRadius="{DynamicResource ColorSliderCornerRadius}" /> + + Theme="{DynamicResource ColorSliderThumbTheme}" /> @@ -114,32 +108,28 @@ - + - - + + Width="{Binding #PART_Track.Bounds.Width}" + Background="{TemplateBinding Background}" + CornerRadius="{DynamicResource ColorSliderCornerRadius}" /> + Theme="{DynamicResource ColorSliderThumbTheme}" /> diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml index 0df128a..146b55b 100644 --- a/src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml +++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml @@ -1,15 +1,11 @@ - - - + xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> - + + RadiusX="{Binding CornerRadius.TopLeft,RelativeSource={RelativeSource TemplatedParent}}" + RadiusY="{Binding CornerRadius.BottomRight,RelativeSource={RelativeSource TemplatedParent}}" /> + RadiusX="{Binding CornerRadius.TopLeft,RelativeSource={RelativeSource TemplatedParent}}" + RadiusY="{Binding CornerRadius.BottomRight,RelativeSource={RelativeSource TemplatedParent}}" /> + RadiusX="{Binding CornerRadius.TopLeft,RelativeSource={RelativeSource TemplatedParent}}" + RadiusY="{Binding CornerRadius.BottomRight,RelativeSource={RelativeSource TemplatedParent}}" /> diff --git a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml index b8031f2..f23e2db 100644 --- a/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml +++ b/src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml @@ -1,28 +1,23 @@ - - - - - - - - - - + xmlns:semi="https://irihi.tech/semi"> - + + + + - - - - - - - - - - + + + + + + @@ -61,11 +52,11 @@ CornerRadius="{TemplateBinding CornerRadius}"> + AllowAutoHide="{TemplateBinding ScrollViewer.AllowAutoHide}" + HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" + IsScrollChainingEnabled="{TemplateBinding ScrollViewer.IsScrollChainingEnabled}" + IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" + VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"> - - + + - + @@ -141,12 +132,14 @@ Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" CornerRadius="{TemplateBinding CornerRadius}" - RecognizesAccessKey="True" TextElement.FontSize="{TemplateBinding FontSize}" TextElement.FontWeight="{TemplateBinding FontWeight}" UseLayoutRounding="False" /> +