Optimize button effect

2026-10-22 17:35:30 +08:00 · 2025-08-19 15:39:53 +08:00
parent 63d0d1994a
commit ee501b015b
12 changed files with 389 additions and 145 deletions
@@ -263,52 +263,55 @@ public class Button : AvaloniaButton,
        return new Size(targetWidth, targetHeight);
    }

-    private void SetupShadows()
+    private void SetupShadows(bool force = false)
    {
-        if (ButtonType == ButtonType.Default)
+        if (force || Effect == null)
        {
-            if (IsDanger)
+            if (ButtonType == ButtonType.Default)
            {
-                Effect = new DropShadowEffect
+                if (IsDanger)
                {
-                    OffsetX    = DangerShadow.OffsetX,
-                    OffsetY    = DangerShadow.OffsetY,
-                    Color      = DangerShadow.Color,
-                    BlurRadius = DangerShadow.Blur
-                };
+                    Effect = new DropShadowEffect
+                    {
+                        OffsetX    = DangerShadow.OffsetX,
+                        OffsetY    = DangerShadow.OffsetY,
+                        Color      = DangerShadow.Color,
+                        BlurRadius = DangerShadow.Blur
+                    };
+                }
+                else
+                {
+                    Effect = new DropShadowEffect
+                    {
+                        OffsetX    = DefaultShadow.OffsetX,
+                        OffsetY    = DefaultShadow.OffsetY,
+                        Color      = DefaultShadow.Color,
+                        BlurRadius = DefaultShadow.Blur
+                    };
+                }
            }
-            else
+            else if (ButtonType == ButtonType.Primary)
            {
-                Effect = new DropShadowEffect
+                if (IsDanger)
                {
-                    OffsetX    = DefaultShadow.OffsetX,
-                    OffsetY    = DefaultShadow.OffsetY,
-                    Color      = DefaultShadow.Color,
-                    BlurRadius = DefaultShadow.Blur
-                };
-            }
-        }
-        else if (ButtonType == ButtonType.Primary)
-        {
-            if (IsDanger)
-            {
-                Effect = new DropShadowEffect
+                    Effect = new DropShadowEffect
+                    {
+                        OffsetX    = DangerShadow.OffsetX,
+                        OffsetY    = DangerShadow.OffsetY,
+                        Color      = DangerShadow.Color,
+                        BlurRadius = DangerShadow.Blur
+                    };
+                }
+                else
                {
-                    OffsetX    = DangerShadow.OffsetX,
-                    OffsetY    = DangerShadow.OffsetY,
-                    Color      = DangerShadow.Color,
-                    BlurRadius = DangerShadow.Blur
-                };
-            }
-            else
-            {
-                Effect = new DropShadowEffect
-                {
-                    OffsetX    = PrimaryShadow.OffsetX,
-                    OffsetY    = PrimaryShadow.OffsetY,
-                    Color      = PrimaryShadow.Color,
-                    BlurRadius = PrimaryShadow.Blur
-                };
+                    Effect = new DropShadowEffect
+                    {
+                        OffsetX    = PrimaryShadow.OffsetX,
+                        OffsetY    = PrimaryShadow.OffsetY,
+                        Color      = PrimaryShadow.Color,
+                        BlurRadius = PrimaryShadow.Blur
+                    };
+                }
            }
        }
    }
@@ -372,7 +375,7 @@ public class Button : AvaloniaButton,
                e.Property == IsGhostProperty ||
                e.Property == ButtonTypeProperty)
            {
-                SetupShadows();
+                SetupShadows(true);
            }
            else if (e.Property == IsMotionEnabledProperty ||
                     e.Property == IsWaveSpiritEnabledProperty)
@@ -55,10 +55,16 @@ public class ColorPickerToken : AbstractControlDesignToken
    public Color ColorPickerHandlerDarkColor { get; set; }
    
    /// <summary>
-    /// ColorPicker 滑块高度
+    /// ColorPicker 滑块高度或者宽度
    /// Slider height of ColorPicker
    /// </summary>
-    public double ColorPickerSliderHeight { get; set; }
+    public double ColorPickerSliderSize { get; set; }
+    
+    /// <summary>
+    /// ColorPicker 轨道的大小高度或者宽度
+    /// Slider height of ColorPicker Track
+    /// </summary>
+    public double ColorPickerSliderTrackSize { get; set; }
    
    /// <summary>
    /// ColorPicker 预览尺寸
@@ -99,6 +105,11 @@ public class ColorPickerToken : AbstractControlDesignToken
    /// </summary>
    public Thickness TriggerTextMargin { get; set; }
    
+    /// <summary>
+    /// 颜色滑块外间距
+    /// </summary>
+    public Thickness SliderContainerMargin { get; set; }
+    
    public ColorPickerToken()
        : base(ID)
    {
@@ -114,8 +125,9 @@ public class ColorPickerToken : AbstractControlDesignToken
        ColorPickerAlphaInputWidth        = 44;
        ColorPickerInputNumberHandleWidth = 16;
        ColorPickerPresetColorSize        = 24;
-        ColorPickerSliderHeight           = 8;
-        ColorPickerPreviewSize            = ColorPickerSliderHeight * 2 + SharedToken.UniformlyMarginSM;
+        ColorPickerSliderSize             = ColorPickerHandlerSizeSM;
+        ColorPickerSliderTrackSize        = 8;
+        ColorPickerPreviewSize            = ColorPickerSliderSize * 2 + SharedToken.UniformlyMarginSM;
        ColorPickerInsetShadow            = new BoxShadows(new BoxShadow()
        {
            IsInset = true,
@@ -140,6 +152,7 @@ public class ColorPickerToken : AbstractControlDesignToken

        ColorSpectrumHeight          = SharedToken.ControlHeightLG * 4;
        ColorPickerHandlerLightColor = SharedToken.ColorBgElevated;
-        ColorPickerHandlerDarkColor = Color.Parse("#22075e");
+        ColorPickerHandlerDarkColor  = Color.Parse("#22075e");
+        SliderContainerMargin        = new Thickness(0, 0, SharedToken.UniformlyMarginSM, 0);
    }
 }
@@ -0,0 +1,31 @@
+using Avalonia;
+using Avalonia.Layout;
+
+namespace AtomUI.Controls;
+
+using AvaloniaColorSlider = Avalonia.Controls.Primitives.ColorSlider;
+
+public class ColorSlider : AvaloniaColorSlider
+{
+    protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change)
+    {
+        base.OnPropertyChanged(change);
+        if (change.Property == HeightProperty ||
+            change.Property == WidthProperty)
+        {
+            ConfigureCornerRadius();
+        }
+    }
+
+    protected void ConfigureCornerRadius()
+    {
+        if (Orientation == Orientation.Vertical)
+        {
+            CornerRadius = new CornerRadius(Width / 2);
+        }
+        else
+        {
+            CornerRadius = new CornerRadius(Height / 2);
+        }
+    }
+}
@@ -332,10 +332,10 @@ public class ColorSpectrum : TemplatedControl
        if (_inputTarget != null)
        {
            _inputTarget.PointerEntered  += InputTarget_PointerEntered;
-            _inputTarget.PointerExited   += InputTarget_PointerExited;
-            _inputTarget.PointerPressed  += InputTarget_PointerPressed;
-            _inputTarget.PointerMoved    += InputTarget_PointerMoved;
-            _inputTarget.PointerReleased += InputTarget_PointerReleased;
+            _inputTarget.PointerExited   += HandleInputTargetPointerExited;
+            _inputTarget.PointerPressed  += HandleInputTargetPointerPressed;
+            _inputTarget.PointerMoved    += HandleInputTargetPointerMoved;
+            _inputTarget.PointerReleased += HandleInputTargetPointerReleased;
        }

        if (_layoutRoot != null)
@@ -405,10 +405,10 @@ public class ColorSpectrum : TemplatedControl
        if (_inputTarget != null)
        {
            _inputTarget.PointerEntered  -= InputTarget_PointerEntered;
-            _inputTarget.PointerExited   -= InputTarget_PointerExited;
-            _inputTarget.PointerPressed  -= InputTarget_PointerPressed;
-            _inputTarget.PointerMoved    -= InputTarget_PointerMoved;
-            _inputTarget.PointerReleased -= InputTarget_PointerReleased;
+            _inputTarget.PointerExited   -= HandleInputTargetPointerExited;
+            _inputTarget.PointerPressed  -= HandleInputTargetPointerPressed;
+            _inputTarget.PointerMoved    -= HandleInputTargetPointerMoved;
+            _inputTarget.PointerReleased -= HandleInputTargetPointerReleased;
        }
    }

@@ -1082,14 +1082,14 @@ public class ColorSpectrum : TemplatedControl
    }

    /// <inheritdoc cref="InputElement.PointerExited"/>
-    private void InputTarget_PointerExited(object? sender, PointerEventArgs args)
+    private void HandleInputTargetPointerExited(object? sender, PointerEventArgs args)
    {
        UpdatePseudoClasses();
        args.Handled = true;
    }

    /// <inheritdoc cref="InputElement.PointerPressed"/>
-    private void InputTarget_PointerPressed(object? sender, PointerPressedEventArgs args)
+    private void HandleInputTargetPointerPressed(object? sender, PointerPressedEventArgs args)
    {
        var inputTarget = _inputTarget;

@@ -1110,7 +1110,7 @@ public class ColorSpectrum : TemplatedControl
    }

    /// <inheritdoc cref="InputElement.PointerMoved"/>
-    private void InputTarget_PointerMoved(object? sender, PointerEventArgs args)
+    private void HandleInputTargetPointerMoved(object? sender, PointerEventArgs args)
    {
        if (!_isPointerPressed)
        {
@@ -1122,7 +1122,7 @@ public class ColorSpectrum : TemplatedControl
    }

    /// <inheritdoc cref="InputElement.PointerReleased"/>
-    private void InputTarget_PointerReleased(object? sender, PointerReleasedEventArgs args)
+    private void HandleInputTargetPointerReleased(object? sender, PointerReleasedEventArgs args)
    {
        _isPointerPressed         = false;
        _shouldShowLargeSelection = false;
@@ -16,8 +16,8 @@
                    MinHeight="{TemplateBinding MinHeight}">
                <StackPanel Name="RootLayout"
                            Orientation="Horizontal">
-                    <atom:ColorPickerPaletteGroup Name="PaletteGroup"/>
-                    <StackPanel Orientation="Vertical">
+                    <atom:ColorPickerPaletteGroup Name="PaletteGroup" />
+                    <StackPanel Orientation="Vertical" Name="ColorPickerContainer">
                        <atom:ColorSpectrum
                            Name="ColorSpectrum"
                            Components="SaturationValue"
@@ -28,20 +28,43 @@
                            MinHue="{TemplateBinding MinHue}"
                            MinSaturation="{TemplateBinding MinSaturation}"
                            MinValue="{TemplateBinding MinValue}" />
+                        <DockPanel LastChildFill="True">
+                            <atom:ColorBlock Name="ColorPreview" Background="DarkRed" DockPanel.Dock="Right" />
+                            <DockPanel Name="SliderContainer" LastChildFill="True">
+                                <atom:ColorSlider Name="ColorSpectrumThirdComponentSlider" DockPanel.Dock="Top" />
+                                <atom:ColorSlider Name="ColorSpectrumAlphaSlider" DockPanel.Dock="Bottom" />
+                                <Control />
+                            </DockPanel>
+                        </DockPanel>
                    </StackPanel>
                </StackPanel>
            </Border>
        </ControlTemplate>
    </Setter>
-    
+
    <Style Selector="^:is(atom|AbstractColorPickerView)">
-        <Setter Property="MinWidth" Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerWidth}}"/>
-        <Setter Property="HorizontalAlignment" Value="Left"/>
-        <Setter Property="VerticalAlignment" Value="Top"/>
+        <Setter Property="MinWidth" Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerWidth}}" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="VerticalAlignment" Value="Top" />
        <Style Selector="^ /template/ atom|ColorSpectrum#ColorSpectrum">
-            <Setter Property="MinHeight" Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorSpectrumHeight }}"/>
-            <Setter Property="MinWidth" Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerWidth}}"/>
+            <Setter Property="MinHeight"
+                    Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorSpectrumHeight }}" />
+            <Setter Property="MinWidth" Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerWidth}}" />
+        </Style>
+
+        <Style Selector="^ /template/ atom|ColorBlock#ColorPreview">
+            <Setter Property="Height"
+                    Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerPreviewSize}}" />
+            <Setter Property="Width"
+                    Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerPreviewSize}}" />
+        </Style>
+
+        <Style Selector="^ /template/ StackPanel#ColorPickerContainer">
+            <Setter Property="Spacing" Value="{DynamicResource {x:Static atom:SharedTokenKey.UniformlyMarginSM}}" />
+        </Style>
+
+        <Style Selector="^ /template/ DockPanel#SliderContainer">
+            <Setter Property="Margin" Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.SliderContainerMargin}}" />
        </Style>
-        
    </Style>
 </ControlTheme>
@@ -8,5 +8,6 @@
        <ResourceInclude Source="ColorPickerViewTheme.axaml"/>
        <ResourceInclude Source="GradientColorPickerViewTheme.axaml"/>
        <ResourceInclude Source="ColorSpectrumTheme.axaml"/>
+        <ResourceInclude Source="ColorSliderTheme.axaml"/>
    </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>
@@ -0,0 +1,193 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:atom="https://atomui.net"
+    x:ClassModifier="internal">
+
+    <ControlTheme x:Key="ColorSliderThumbTheme" TargetType="Thumb">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="UseLayoutRounding" Value="False" />
+        <Setter Property="BorderBrush" Value="Red" />
+        <Setter Property="Height" Value="20" />
+        <Setter Property="Width" Value="20" />
+        <Setter Property="BorderThickness" Value="2" />
+        <Setter Property="CornerRadius" Value="8" />
+        <Setter Property="ClipToBounds" Value="False" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border
+                    Margin="1"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type atom:ColorSlider}" TargetType="atom:ColorSlider">
+        <Style Selector="^:horizontal">
+            <Setter Property="BorderThickness" Value="0" />
+            <Setter Property="Height" Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerSliderSize}}"/>
+            <Setter Property="Template">
+                <ControlTemplate TargetType="{x:Type ColorSlider}">
+                    <Border BorderThickness="{TemplateBinding BorderThickness}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid Margin="{TemplateBinding Padding}">
+                            <Border HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    Height="{Binding ElementName=PART_Track, Path=Bounds.Height}"
+                                    Background="Red"
+                                    CornerRadius="{TemplateBinding CornerRadius}" />
+                            <Border HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    Height="{Binding ElementName=PART_Track, Path=Bounds.Height}"
+                                    Background="{TemplateBinding Background}"
+                                    CornerRadius="{TemplateBinding CornerRadius}" />
+                            <Track Name="PART_Track"
+                                   Height="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerSliderTrackSize}}"
+                                   HorizontalAlignment="Stretch"
+                                   VerticalAlignment="Center"
+                                   Minimum="{TemplateBinding Minimum}"
+                                   Maximum="{TemplateBinding Maximum}"
+                                   Value="{TemplateBinding Value, Mode=TwoWay}"
+                                   IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                                   Orientation="Horizontal"
+                                   ClipToBounds="False">
+                                <Track.DecreaseButton>
+                                    <RepeatButton Name="PART_DecreaseButton"
+                                                  Background="Transparent"
+                                                  Focusable="False"
+                                                  HorizontalAlignment="Stretch"
+                                                  VerticalAlignment="Stretch">
+                                        <RepeatButton.Template>
+                                            <ControlTemplate>
+                                                <Border Name="FocusTarget"
+                                                        Background="Transparent"
+                                                        Margin="0,-10" />
+                                            </ControlTemplate>
+                                        </RepeatButton.Template>
+                                    </RepeatButton>
+                                </Track.DecreaseButton>
+                                <Track.IncreaseButton>
+                                    <RepeatButton Name="PART_IncreaseButton"
+                                                  Background="Transparent"
+                                                  Focusable="False"
+                                                  HorizontalAlignment="Stretch"
+                                                  VerticalAlignment="Stretch">
+                                        <RepeatButton.Template>
+                                            <ControlTemplate>
+                                                <Border Name="FocusTarget"
+                                                        Background="Transparent"
+                                                        Margin="0,-10" />
+                                            </ControlTemplate>
+                                        </RepeatButton.Template>
+                                    </RepeatButton>
+                                </Track.IncreaseButton>
+                                <Thumb Name="ColorSliderThumb"
+                                       Theme="{DynamicResource ColorSliderThumbTheme}"
+                                       Margin="0"
+                                       Padding="0"
+                                       DataContext="{TemplateBinding Value}"
+                                       Height="{TemplateBinding Height}"
+                                       Width="{TemplateBinding Height}" />
+                            </Track>
+                        </Grid>
+                    </Border>
+                </ControlTemplate>
+            </Setter>
+        </Style>
+
+        <Style Selector="^:vertical">
+            <Setter Property="BorderThickness" Value="0" />
+            <Setter Property="Width" Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerSliderSize}}"/>
+            <Setter Property="Template">
+                <ControlTemplate TargetType="{x:Type ColorSlider}">
+                    <Border BorderThickness="{TemplateBinding BorderThickness}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid Margin="{TemplateBinding Padding}">
+                            <Border HorizontalAlignment="Center"
+                                    VerticalAlignment="Stretch"
+                                    Width="{Binding ElementName=PART_Track, Path=Bounds.Width}"
+                                    Background="Red"
+                                    CornerRadius="{TemplateBinding CornerRadius}" />
+                            <Border HorizontalAlignment="Center"
+                                    VerticalAlignment="Stretch"
+                                    Width="{Binding ElementName=PART_Track, Path=Bounds.Width}"
+                                    Background="{TemplateBinding Background}"
+                                    CornerRadius="{TemplateBinding CornerRadius}" />
+                            <Track Name="PART_Track"
+                                   Width="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerSliderTrackSize}}"
+                                   HorizontalAlignment="Center"
+                                   VerticalAlignment="Stretch"
+                                   Minimum="{TemplateBinding Minimum}"
+                                   Maximum="{TemplateBinding Maximum}"
+                                   Value="{TemplateBinding Value, Mode=TwoWay}"
+                                   IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                                   Orientation="Vertical">
+                                <Track.DecreaseButton>
+                                    <RepeatButton Name="PART_DecreaseButton"
+                                                  Background="Transparent"
+                                                  Focusable="False"
+                                                  HorizontalAlignment="Stretch"
+                                                  VerticalAlignment="Stretch">
+                                        <RepeatButton.Template>
+                                            <ControlTemplate>
+                                                <Border Name="FocusTarget"
+                                                        Background="Transparent"
+                                                        Margin="0,-10" />
+                                            </ControlTemplate>
+                                        </RepeatButton.Template>
+                                    </RepeatButton>
+                                </Track.DecreaseButton>
+                                <Track.IncreaseButton>
+                                    <RepeatButton Name="PART_IncreaseButton"
+                                                  Background="Transparent"
+                                                  Focusable="False"
+                                                  HorizontalAlignment="Stretch"
+                                                  VerticalAlignment="Stretch">
+                                        <RepeatButton.Template>
+                                            <ControlTemplate>
+                                                <Border Name="FocusTarget"
+                                                        Background="Transparent"
+                                                        Margin="0,-10" />
+                                            </ControlTemplate>
+                                        </RepeatButton.Template>
+                                    </RepeatButton>
+                                </Track.IncreaseButton>
+                                <Thumb Name="ColorSliderThumb"
+                                       Theme="{DynamicResource ColorSliderThumbTheme}"
+                                       Margin="0"
+                                       Padding="0"
+                                       DataContext="{TemplateBinding Value}"
+                                       Height="{TemplateBinding Width}"
+                                       Width="{TemplateBinding Width}" />
+                            </Track>
+                        </Grid>
+                    </Border>
+                </ControlTemplate>
+            </Setter>
+        </Style>
+
+        <!-- Selector/Thumb Color -->
+        <Style Selector="^:pointerover /template/ Thumb#ColorSliderThumb">
+            <Setter Property="Opacity" Value="0.75" />
+        </Style>
+        <Style Selector="^:pointerover:dark-selector /template/ Thumb#ColorSliderThumb">
+            <Setter Property="Opacity" Value="0.7" />
+        </Style>
+        <Style Selector="^:pointerover:light-selector /template/ Thumb#ColorSliderThumb">
+            <Setter Property="Opacity" Value="0.8" />
+        </Style>
+
+        <Style Selector="^:dark-selector /template/ Thumb#ColorSliderThumb">
+            <Setter Property="BorderBrush" Value="Red" />
+        </Style>
+        <Style Selector="^:light-selector /template/ Thumb#ColorSliderThumb">
+            <Setter Property="BorderBrush" Value="FloralWhite" />
+        </Style>
+
+    </ControlTheme>
+</ResourceDictionary>
@@ -10,15 +10,15 @@
    <ControlTheme x:Key="{x:Type atom:ColorSpectrum}" TargetType="atom:ColorSpectrum">
        <Setter Property="Template">
            <ControlTemplate TargetType="{x:Type atom:ColorSpectrum}">
-                <Panel Name="{x:Static atom:ColorSpectrumThemeConstants.LayoutRootPart}"
-                       HorizontalAlignment="Stretch"
-                       VerticalAlignment="Stretch">
-                    <Border Name="Frame" ClipToBounds="True"
-                            CornerRadius="{TemplateBinding CornerRadius}">
+                <Border Name="Frame" ClipToBounds="True"
+                        Padding="0.5"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                    <Panel Name="{x:Static atom:ColorSpectrumThemeConstants.LayoutRootPart}"
+                           HorizontalAlignment="Stretch"
+                           VerticalAlignment="Stretch">
                        <Panel x:Name="PART_SizingPanel"
                               HorizontalAlignment="Center"
-                               VerticalAlignment="Center"
-                               ClipToBounds="True">
+                               VerticalAlignment="Center">
                            <Rectangle Name="{x:Static atom:ColorSpectrumThemeConstants.SpectrumRectanglePart}"
                                       IsHitTestVisible="False"
                                       HorizontalAlignment="Stretch"
@@ -51,13 +51,17 @@
                                </Panel>
                            </Canvas>
                        </Panel>
-                    </Border>
-                </Panel>
+                    </Panel>
+                </Border>
            </ControlTemplate>
        </Setter>

        <Setter Property="CornerRadius" Value="{DynamicResource {x:Static atom:SharedTokenKey.BorderRadiusSM}}" />
-        
+
+        <Style Selector="^ /template/ Border#Frame">
+            <Setter Property="BoxShadow"
+                    Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerInsetShadow}}" />
+        </Style>

        <!-- Focus -->
        <Style Selector="^ /template/ Ellipse#FocusEllipse">
@@ -69,24 +73,30 @@

        <!-- Selector Color -->
        <Style Selector="^ /template/ Ellipse#SelectionEllipse">
-            <Setter Property="Stroke" Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerHandlerDarkColor}}" />
+            <Setter Property="Stroke"
+                    Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerHandlerDarkColor}}" />
        </Style>
-        
+
        <Style Selector="^:light-selector /template/ Ellipse#SelectionEllipse">
-            <Setter Property="Stroke" Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerHandlerLightColor}}" />
+            <Setter Property="Stroke"
+                    Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerHandlerLightColor}}" />
        </Style>

        <!-- Selector Size -->
        <Style Selector="^ /template/ Panel#PART_SelectionEllipsePanel">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Cursor" Value="Hand" />
-            <Setter Property="Width" Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerHandlerSize}}" />
-            <Setter Property="Height" Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerHandlerSize}}" />
+            <Setter Property="Width"
+                    Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerHandlerSize}}" />
+            <Setter Property="Height"
+                    Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerHandlerSize}}" />
        </Style>
-        
+
        <Style Selector="^:large-selector /template/ Panel#PART_SelectionEllipsePanel">
-            <Setter Property="Width" Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerHandlerSizeLG}}" />
-            <Setter Property="Height" Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerHandlerSizeLG}}" />
+            <Setter Property="Width"
+                    Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerHandlerSizeLG}}" />
+            <Setter Property="Height"
+                    Value="{DynamicResource {x:Static atom:ColorPickerTokenKey.ColorPickerHandlerSizeLG}}" />
        </Style>
    </ControlTheme>
 </ResourceDictionary>
@@ -247,9 +247,11 @@ namespace AtomUI.Theme.Styling
        public static readonly TokenResourceKey ColorPickerInsetShadow = new TokenResourceKey("ColorPicker.ColorPickerInsetShadow");
        public static readonly TokenResourceKey ColorPickerPresetColorSize = new TokenResourceKey("ColorPicker.ColorPickerPresetColorSize");
        public static readonly TokenResourceKey ColorPickerPreviewSize = new TokenResourceKey("ColorPicker.ColorPickerPreviewSize");
-        public static readonly TokenResourceKey ColorPickerSliderHeight = new TokenResourceKey("ColorPicker.ColorPickerSliderHeight");
+        public static readonly TokenResourceKey ColorPickerSliderSize = new TokenResourceKey("ColorPicker.ColorPickerSliderSize");
+        public static readonly TokenResourceKey ColorPickerSliderTrackSize = new TokenResourceKey("ColorPicker.ColorPickerSliderTrackSize");
        public static readonly TokenResourceKey ColorPickerWidth = new TokenResourceKey("ColorPicker.ColorPickerWidth");
        public static readonly TokenResourceKey ColorSpectrumHeight = new TokenResourceKey("ColorPicker.ColorSpectrumHeight");
+        public static readonly TokenResourceKey SliderContainerMargin = new TokenResourceKey("ColorPicker.SliderContainerMargin");
        public static readonly TokenResourceKey TriggerPadding = new TokenResourceKey("ColorPicker.TriggerPadding");
        public static readonly TokenResourceKey TriggerTextMargin = new TokenResourceKey("ColorPicker.TriggerTextMargin");
    }
@@ -1,11 +1,7 @@
 using System.Globalization;
-using System.Reactive.Disposables;
 using AtomUI.Animations;
 using AtomUI.Controls.Utils;
 using AtomUI.Media;
-using AtomUI.Theme;
-using AtomUI.Theme.Data;
-using AtomUI.Theme.Styling;
 using AtomUI.Utils;
 using Avalonia;
 using Avalonia.Animation;
@@ -18,7 +14,6 @@ using Avalonia.Input;
 using Avalonia.Input.Raw;
 using Avalonia.Interactivity;
 using Avalonia.Layout;
-using Avalonia.LogicalTree;
 using Avalonia.Media;
 using Avalonia.Utilities;
 using Avalonia.VisualTree;
@@ -26,8 +21,7 @@ using Avalonia.VisualTree;
 namespace AtomUI.Controls;

 [PseudoClasses(StdPseudoClass.Vertical, StdPseudoClass.Horizontal)]
-public class SliderTrack : Control,
-                           IResourceBindingManager
+public class SliderTrack : TemplatedControl
 {
    #region 公共属性定义

@@ -210,9 +204,6 @@ public class SliderTrack : Control,
    internal static readonly StyledProperty<double> SliderMarkSizeProperty =
        AvaloniaProperty.Register<SliderTrack, double>(nameof(SliderMarkSize));

-    internal static readonly StyledProperty<Thickness> PaddingProperty =
-        Decorator.PaddingProperty.AddOwner<SliderTrack>();
-
    internal static readonly StyledProperty<IBrush?> MarkBorderBrushProperty =
        AvaloniaProperty.Register<SliderTrack, IBrush?>(nameof(MarkBorderBrush));

@@ -231,8 +222,8 @@ public class SliderTrack : Control,
    internal static readonly RoutedEvent<PointerReleasedEventArgs> TrailReleasedEvent =
        RoutedEvent.Register<SliderTrack, PointerReleasedEventArgs>(nameof(TrailReleased), RoutingStrategies.Bubble);

-    internal static readonly StyledProperty<bool> IsMotionEnabledProperty
-        = MotionAwareControlProperty.IsMotionEnabledProperty.AddOwner<SliderTrack>();
+    internal static readonly StyledProperty<bool> IsMotionEnabledProperty =
+        MotionAwareControlProperty.IsMotionEnabledProperty.AddOwner<SliderTrack>();

    internal double SliderTrackSize
    {
@@ -252,12 +243,6 @@ public class SliderTrack : Control,
        set => SetValue(SliderMarkSizeProperty, value);
    }

-    public Thickness Padding
-    {
-        get => GetValue(PaddingProperty);
-        set => SetValue(PaddingProperty, value);
-    }
-
    internal IBrush? MarkBorderBrush
    {
        get => GetValue(MarkBorderBrushProperty);
@@ -287,12 +272,7 @@ public class SliderTrack : Control,
        get => GetValue(IsMotionEnabledProperty);
        set => SetValue(IsMotionEnabledProperty, value);
    }
-
-    CompositeDisposable? IResourceBindingManager.ResourceBindingsDisposable
-    {
-        get => _resourceBindingsDisposable;
-        set => _resourceBindingsDisposable = value;
-    }
+    
    #endregion

    #region 事件定义
@@ -310,13 +290,11 @@ public class SliderTrack : Control,
    }

    #endregion
-
-    private CompositeDisposable? _resourceBindingsDisposable;
+    
    private VectorEventArgs? _deferredThumbDrag;
    private Vector _lastDrag;
    private RenderContextData? _renderContextData;
-
-
+    
    /// <summary>
    /// Gets the value of the <see cref="SliderThumb" />'s current position. This can differ from <see cref="Value" /> when
    /// <see cref="ScrollViewer.IsDeferredScrollingEnabled" /> is true.
@@ -425,18 +403,6 @@ public class SliderTrack : Control,
    protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
    {
        base.OnAttachedToVisualTree(e);
-        _resourceBindingsDisposable = new CompositeDisposable();
-        this.AddResourceBindingDisposable(
-            TokenResourceBinder.CreateTokenBinding(this, SliderTrackSizeProperty, SliderTokenKey.SliderTrackSize));
-        this.AddResourceBindingDisposable(
-            TokenResourceBinder.CreateTokenBinding(this, SliderMarkSizeProperty, SliderTokenKey.MarkSize));
-        this.AddResourceBindingDisposable(
-            TokenResourceBinder.CreateTokenBinding(this, SliderRailSizeProperty, SliderTokenKey.RailSize));
-        this.AddResourceBindingDisposable(TokenResourceBinder.CreateTokenBinding(this, MarkBackgroundBrushProperty,
-            SharedTokenKey.ColorBgElevated));
-        this.AddResourceBindingDisposable(TokenResourceBinder.CreateTokenBinding(this, MarkBorderThicknessProperty,
-            SliderTokenKey.ThumbCircleBorderThickness));
-        
        var inputManager = AvaloniaLocator.Current.GetService<IInputManager>()!;
        _focusProcessDisposable = inputManager.Process.Subscribe(args =>
        {
@@ -456,7 +422,6 @@ public class SliderTrack : Control,
            }
        });
        HandleRangeModeChanged();
-        SetupMarkLabelBrush();
        CalculateMaxMarkSize();
        ConfigureTransitions();
    }
@@ -465,21 +430,6 @@ public class SliderTrack : Control,
    {
        base.OnDetachedFromVisualTree(e);
        _focusProcessDisposable?.Dispose();
-        this.DisposeTokenBindings();
-    }
-
-    private void SetupMarkLabelBrush()
-    {
-        if (IsEnabled)
-        {
-            this.AddResourceBindingDisposable(
-                TokenResourceBinder.CreateTokenBinding(this, MarkLabelBrushProperty, SharedTokenKey.ColorText));
-        }
-        else
-        {
-            this.AddResourceBindingDisposable(TokenResourceBinder.CreateTokenBinding(this, MarkLabelBrushProperty,
-                SharedTokenKey.ColorTextDisabled));
-        }
    }

    private void HandleGlobalMousePressed(Point point)
@@ -599,10 +549,7 @@ public class SliderTrack : Control,
        var isVertical = Orientation == Orientation.Vertical;

        ComputeDensity(arrangeSize, isVertical);
-
-        // Layout the pieces of track
-        var isDirectionReversed = IsDirectionReversed;
-
+        
        var thumbCenterPoints = CalculateThumbCenterOffset(arrangeSize);
        StartThumbCenterOffset = thumbCenterPoints.Item1;
        EndThumbCenterOffset   = thumbCenterPoints.Item2;
@@ -735,7 +682,6 @@ public class SliderTrack : Control,
        {
            if (change.Property == IsEnabledProperty)
            {
-                SetupMarkLabelBrush();
                CalculateMaxMarkSize(true);
            }
            else if (change.Property == MarksProperty)
@@ -4,5 +4,6 @@
    <ResourceDictionary.MergedDictionaries>
        <ResourceInclude Source="SliderTheme.axaml"/>
        <ResourceInclude Source="SliderThumbTheme.axaml"/>
+        <ResourceInclude Source="SliderTrackTheme.axaml"/>
    </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>
@@ -0,0 +1,21 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:atom="https://atomui.net"
+    x:ClassModifier="internal">
+    <ControlTheme x:Key="{x:Type atom:SliderTrack}" TargetType="atom:SliderTrack">
+        <Setter Property="SliderTrackSize" Value="{DynamicResource {x:Static atom:SliderTokenKey.SliderTrackSize}}" />
+        <Setter Property="SliderMarkSize" Value="{DynamicResource {x:Static atom:SliderTokenKey.MarkSize}}" />
+        <Setter Property="SliderRailSize" Value="{DynamicResource {x:Static atom:SliderTokenKey.RailSize}}" />
+        <Setter Property="MarkBackgroundBrush" Value="{DynamicResource {x:Static atom:SharedTokenKey.ColorBgElevated}}" />
+        <Setter Property="MarkBorderThickness"
+                Value="{DynamicResource {x:Static atom:SliderTokenKey.ThumbCircleBorderThickness}}" />
+        <Setter Property="MarkLabelBrush" Value="{DynamicResource {x:Static atom:SharedTokenKey.ColorText}}" />
+        <Setter Property="IsMotionEnabled" Value="{DynamicResource {x:Static atom:SharedTokenKey.EnableMotion}}" />
+
+        <Style Selector="^:disabled">
+            <Setter Property="MarkLabelBrush"
+                    Value="{DynamicResource {x:Static atom:SharedTokenKey.ColorTextDisabled}}" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>