From b4734cda5fdd7784908bd6c370d0b9dba691c8d4 Mon Sep 17 00:00:00 2001
From: NaBian <836904362@qq.com>
Date: Sun, 15 Dec 2024 00:53:50 +0800
Subject: [PATCH] chore: add avalonia Slider demo.

---
 .../UserControl/Styles/SliderDemo.axaml       |  90 ++++
 .../UserControl/Styles/SliderDemo.axaml.cs    |   9 +
 .../Controls/Attach/ContentControlAttach.cs   |  49 ++
 .../Controls/Attach/TipElement.cs             |  30 ++
 .../Controls/Panel/AxleCanvas.cs              |  73 +++
 .../Data/Enum/PlacementType.cs                |  17 +
 .../Themes/Basic/Effects.axaml                |   2 +-
 .../Themes/Styles/Slider.axaml                | 449 ++++++++++++++++++
 .../Themes/Styles/Style.axaml                 |   1 +
 .../Themes/Styles/ToggleButton.axaml          |   5 +-
 10 files changed, 723 insertions(+), 2 deletions(-)
 create mode 100644 src/Avalonia/HandyControlDemo_Avalonia/UserControl/Styles/SliderDemo.axaml
 create mode 100644 src/Avalonia/HandyControlDemo_Avalonia/UserControl/Styles/SliderDemo.axaml.cs
 create mode 100644 src/Avalonia/HandyControl_Avalonia/Controls/Attach/ContentControlAttach.cs
 create mode 100644 src/Avalonia/HandyControl_Avalonia/Controls/Attach/TipElement.cs
 create mode 100644 src/Avalonia/HandyControl_Avalonia/Controls/Panel/AxleCanvas.cs
 create mode 100644 src/Avalonia/HandyControl_Avalonia/Data/Enum/PlacementType.cs
 create mode 100644 src/Avalonia/HandyControl_Avalonia/Themes/Styles/Slider.axaml

diff --git a/src/Avalonia/HandyControlDemo_Avalonia/UserControl/Styles/SliderDemo.axaml b/src/Avalonia/HandyControlDemo_Avalonia/UserControl/Styles/SliderDemo.axaml
new file mode 100644
index 00000000..1ce718e0
--- /dev/null
+++ b/src/Avalonia/HandyControlDemo_Avalonia/UserControl/Styles/SliderDemo.axaml
@@ -0,0 +1,90 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             x:Class="HandyControlDemo.UserControl.SliderDemo"
+             xmlns:hc="https://handyorg.github.io/handycontrol"
+             Background="{DynamicResource RegionBrush}">
+    <ScrollViewer>
+        <hc:UniformSpacingPanel Margin="32"
+                                Orientation="Horizontal"
+                                Spacing="32"
+                                ClipToBounds="False"
+                                ChildWrapping="Wrap">
+            <hc:UniformSpacingPanel Orientation="Vertical"
+                                    Spacing="32">
+                <Slider Width="400"
+                        IsSnapToTickEnabled="True"
+                        TickFrequency="1"
+                        Maximum="10"
+                        Value="8" />
+                <Slider Width="400"
+                        IsSnapToTickEnabled="True"
+                        TickFrequency="1"
+                        Maximum="10"
+                        Value="3"
+                        IsEnabled="False" />
+                <Slider Width="400"
+                        IsSnapToTickEnabled="True"
+                        TickFrequency="5"
+                        Maximum="100"
+                        TickPlacement="TopLeft"
+                        Value="10" />
+                <Slider Width="400"
+                        hc:TipElement.IsVisible="True"
+                        hc:TipElement.Placement="Top"
+                        IsSnapToTickEnabled="True"
+                        Maximum="100"
+                        Value="60"
+                        TickFrequency="10"
+                        TickPlacement="BottomRight" />
+                <Slider Width="400"
+                        hc:TipElement.IsVisible="True"
+                        hc:TipElement.Placement="Bottom"
+                        hc:TipElement.StringFormat="N2"
+                        TickFrequency="1"
+                        Maximum="10"
+                        Value="5"
+                        TickPlacement="Outside" />
+            </hc:UniformSpacingPanel>
+            <hc:UniformSpacingPanel Spacing="32">
+                <Slider Height="400"
+                        IsSnapToTickEnabled="True"
+                        TickFrequency="1"
+                        Maximum="10"
+                        Value="8"
+                        Orientation="Vertical" />
+                <Slider Height="400"
+                        IsSnapToTickEnabled="True"
+                        TickFrequency="1"
+                        Maximum="10"
+                        Value="3"
+                        IsEnabled="False"
+                        Orientation="Vertical" />
+                <Slider Height="400"
+                        IsSnapToTickEnabled="True"
+                        TickFrequency="5"
+                        Maximum="100"
+                        TickPlacement="TopLeft"
+                        Value="10"
+                        Orientation="Vertical" />
+                <Slider Height="400"
+                        hc:TipElement.IsVisible="True"
+                        hc:TipElement.Placement="Right"
+                        IsSnapToTickEnabled="True"
+                        Maximum="100"
+                        Value="60"
+                        TickFrequency="10"
+                        TickPlacement="BottomRight"
+                        Orientation="Vertical" />
+                <Slider Height="400"
+                        hc:TipElement.IsVisible="True"
+                        hc:TipElement.Placement="Left"
+                        hc:TipElement.StringFormat="N2"
+                        TickFrequency="1"
+                        Maximum="10"
+                        Value="5"
+                        TickPlacement="Outside"
+                        Orientation="Vertical" />
+            </hc:UniformSpacingPanel>
+        </hc:UniformSpacingPanel>
+    </ScrollViewer>
+</UserControl>
diff --git a/src/Avalonia/HandyControlDemo_Avalonia/UserControl/Styles/SliderDemo.axaml.cs b/src/Avalonia/HandyControlDemo_Avalonia/UserControl/Styles/SliderDemo.axaml.cs
new file mode 100644
index 00000000..8483efa2
--- /dev/null
+++ b/src/Avalonia/HandyControlDemo_Avalonia/UserControl/Styles/SliderDemo.axaml.cs
@@ -0,0 +1,9 @@
+namespace HandyControlDemo.UserControl;
+
+public partial class SliderDemo : Avalonia.Controls.UserControl
+{
+    public SliderDemo()
+    {
+        InitializeComponent();
+    }
+}
diff --git a/src/Avalonia/HandyControl_Avalonia/Controls/Attach/ContentControlAttach.cs b/src/Avalonia/HandyControl_Avalonia/Controls/Attach/ContentControlAttach.cs
new file mode 100644
index 00000000..6bdbbe91
--- /dev/null
+++ b/src/Avalonia/HandyControl_Avalonia/Controls/Attach/ContentControlAttach.cs
@@ -0,0 +1,49 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Data;
+
+namespace HandyControl.Controls;
+
+public class ContentControlAttach
+{
+    public static readonly AttachedProperty<string> ContentStringFormatProperty =
+        AvaloniaProperty.RegisterAttached<ContentControlAttach, AvaloniaObject, string>("ContentStringFormat");
+
+    public static void SetContentStringFormat(AvaloniaObject element, string value) =>
+        element.SetValue(ContentStringFormatProperty, value);
+
+    public static string GetContentStringFormat(AvaloniaObject element) =>
+        element.GetValue(ContentStringFormatProperty);
+
+    public static readonly AttachedProperty<object?> ContentProperty =
+        AvaloniaProperty.RegisterAttached<ContentControlAttach, AvaloniaObject, object?>("Content");
+
+    public static void SetContent(AvaloniaObject element, object? value) => element.SetValue(ContentProperty, value);
+
+    public static object? GetContent(AvaloniaObject element) => element.GetValue(ContentProperty);
+
+    static ContentControlAttach()
+    {
+        ContentStringFormatProperty.Changed.AddClassHandler<AvaloniaObject>(OnContentChanged);
+        ContentProperty.Changed.AddClassHandler<AvaloniaObject>(OnContentChanged);
+    }
+
+    private static void OnContentChanged(AvaloniaObject element, AvaloniaPropertyChangedEventArgs e)
+    {
+        if (element is not ContentControl contentControl)
+        {
+            return;
+        }
+
+        contentControl.ClearValue(ContentControl.ContentProperty);
+
+        var binding = new Binding("(ContentControlAttach.Content)")
+        {
+            Source = contentControl,
+            StringFormat = contentControl.GetValue(ContentStringFormatProperty),
+            TypeResolver = (_, _) => typeof(ContentControlAttach)
+        };
+
+        contentControl.Bind(ContentControl.ContentProperty, binding);
+    }
+}
diff --git a/src/Avalonia/HandyControl_Avalonia/Controls/Attach/TipElement.cs b/src/Avalonia/HandyControl_Avalonia/Controls/Attach/TipElement.cs
new file mode 100644
index 00000000..3ad3622b
--- /dev/null
+++ b/src/Avalonia/HandyControl_Avalonia/Controls/Attach/TipElement.cs
@@ -0,0 +1,30 @@
+using Avalonia;
+using HandyControl.Data;
+
+namespace HandyControl.Controls;
+
+public class TipElement
+{
+    public static readonly AttachedProperty<bool> IsVisibleProperty =
+        AvaloniaProperty.RegisterAttached<TipElement, AvaloniaObject, bool>("IsVisible");
+
+    public static void SetIsVisible(AvaloniaObject element, bool value) => element.SetValue(IsVisibleProperty, value);
+
+    public static bool GetIsVisible(AvaloniaObject element) => element.GetValue(IsVisibleProperty);
+
+    public static readonly AttachedProperty<PlacementType> PlacementProperty =
+        AvaloniaProperty.RegisterAttached<TipElement, AvaloniaObject, PlacementType>("Placement");
+
+    public static void SetPlacement(AvaloniaObject element, PlacementType value) =>
+        element.SetValue(PlacementProperty, value);
+
+    public static PlacementType GetPlacement(AvaloniaObject element) => element.GetValue(PlacementProperty);
+
+    public static readonly AttachedProperty<string> StringFormatProperty =
+        AvaloniaProperty.RegisterAttached<TipElement, AvaloniaObject, string>("StringFormat", defaultValue: "N1");
+
+    public static void SetStringFormat(AvaloniaObject element, string value) =>
+        element.SetValue(StringFormatProperty, value);
+
+    public static string GetStringFormat(AvaloniaObject element) => element.GetValue(StringFormatProperty);
+}
diff --git a/src/Avalonia/HandyControl_Avalonia/Controls/Panel/AxleCanvas.cs b/src/Avalonia/HandyControl_Avalonia/Controls/Panel/AxleCanvas.cs
new file mode 100644
index 00000000..95ad2198
--- /dev/null
+++ b/src/Avalonia/HandyControl_Avalonia/Controls/Panel/AxleCanvas.cs
@@ -0,0 +1,73 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Layout;
+
+namespace HandyControl.Controls;
+
+public class AxleCanvas : Canvas
+{
+    public static readonly StyledProperty<Orientation> OrientationProperty =
+        StackPanel.OrientationProperty.AddOwner<AxleCanvas>(new StyledPropertyMetadata<Orientation>(
+            defaultValue: Orientation.Horizontal));
+
+    public Orientation Orientation
+    {
+        get => GetValue(OrientationProperty);
+        set => SetValue(OrientationProperty, value);
+    }
+
+    protected override Size ArrangeOverride(Size finalSize)
+    {
+        foreach (Control? internalChild in Children)
+        {
+            if (internalChild == null)
+            {
+                continue;
+            }
+
+            double x = 0.0;
+            double y = 0.0;
+
+            if (Orientation == Orientation.Horizontal)
+            {
+                x = (finalSize.Width - internalChild.DesiredSize.Width) / 2;
+
+                double top = GetTop(internalChild);
+                if (!double.IsNaN(top))
+                {
+                    y = top;
+                }
+                else
+                {
+                    double bottom = GetBottom(internalChild);
+                    if (!double.IsNaN(bottom))
+                    {
+                        y = finalSize.Height - internalChild.DesiredSize.Height - bottom;
+                    }
+                }
+            }
+            else
+            {
+                y = (finalSize.Height - internalChild.DesiredSize.Height) / 2;
+
+                double left = GetLeft(internalChild);
+                if (!double.IsNaN(left))
+                {
+                    x = left;
+                }
+                else
+                {
+                    double right = GetRight(internalChild);
+                    if (!double.IsNaN(right))
+                    {
+                        x = finalSize.Width - internalChild.DesiredSize.Width - right;
+                    }
+                }
+            }
+
+            internalChild.Arrange(new Rect(new Point(x, y), internalChild.DesiredSize));
+        }
+
+        return finalSize;
+    }
+}
diff --git a/src/Avalonia/HandyControl_Avalonia/Data/Enum/PlacementType.cs b/src/Avalonia/HandyControl_Avalonia/Data/Enum/PlacementType.cs
new file mode 100644
index 00000000..8c66ef8e
--- /dev/null
+++ b/src/Avalonia/HandyControl_Avalonia/Data/Enum/PlacementType.cs
@@ -0,0 +1,17 @@
+namespace HandyControl.Data;
+
+public enum PlacementType
+{
+    LeftTop,
+    Left,
+    LeftBottom,
+    TopLeft,
+    Top,
+    TopRight,
+    RightTop,
+    Right,
+    RightBottom,
+    BottomLeft,
+    Bottom,
+    BottomRight,
+}
diff --git a/src/Avalonia/HandyControl_Avalonia/Themes/Basic/Effects.axaml b/src/Avalonia/HandyControl_Avalonia/Themes/Basic/Effects.axaml
index 9af2a111..0685f0a6 100644
--- a/src/Avalonia/HandyControl_Avalonia/Themes/Basic/Effects.axaml
+++ b/src/Avalonia/HandyControl_Avalonia/Themes/Basic/Effects.axaml
@@ -1,7 +1,7 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
-    <Color x:Key="EffectShadowColor">#88000000</Color>
+    <Color x:Key="EffectShadowColor">Black</Color>
 
     <DropShadowEffect x:Key="EffectShadow1"
                       BlurRadius="5"
diff --git a/src/Avalonia/HandyControl_Avalonia/Themes/Styles/Slider.axaml b/src/Avalonia/HandyControl_Avalonia/Themes/Styles/Slider.axaml
new file mode 100644
index 00000000..f0ccc191
--- /dev/null
+++ b/src/Avalonia/HandyControl_Avalonia/Themes/Styles/Slider.axaml
@@ -0,0 +1,449 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:hc="clr-namespace:HandyControl.Controls">
+    <ControlTheme x:Key="SliderRepeatButtonStyle"
+                  TargetType="RepeatButton">
+        <Setter Property="Background"
+                Value="Transparent" />
+        <Setter Property="Focusable"
+                Value="False" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border Background="{TemplateBinding Background}" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="SliderThumb"
+                  TargetType="Thumb">
+        <Setter Property="Height"
+                Value="18" />
+        <Setter Property="Width"
+                Value="18" />
+        <Setter Property="ClipToBounds"
+                Value="False" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <hc:AxleCanvas>
+                    <Ellipse Width="18"
+                             Height="18"
+                             Fill="White"
+                             Effect="{StaticResource EffectShadow1}"
+                             StrokeThickness="0"
+                             Stroke="{DynamicResource PrimaryBrush}">
+                        <Ellipse.Transitions>
+                            <Transitions>
+                                <DoubleTransition Property="StrokeThickness"
+                                                  Duration="0:0:0.1" />
+                            </Transitions>
+                        </Ellipse.Transitions>
+                    </Ellipse>
+                </hc:AxleCanvas>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ Ellipse">
+                <Setter Property="Effect"
+                        Value="{StaticResource EffectShadow2}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:pressed /template/ Ellipse">
+            <Setter Property="StrokeThickness"
+                    Value="2" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="TipSliderThumbHorizontalTop"
+                  TargetType="Thumb">
+        <Setter Property="Height"
+                Value="18" />
+        <Setter Property="Width"
+                Value="18" />
+        <Setter Property="ClipToBounds"
+                Value="False" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <hc:AxleCanvas>
+                    <Label Name="LabelValue"
+                           IsHitTestVisible="False"
+                           IsVisible="False"
+                           Canvas.Bottom="28"
+                           Theme="{StaticResource LabelPrimary}"
+                           hc:ContentControlAttach.Content="{Binding Value,RelativeSource={RelativeSource AncestorType=Slider}}"
+                           hc:ContentControlAttach.ContentStringFormat="{Binding Path=(hc:TipElement.StringFormat),RelativeSource={RelativeSource AncestorType=Slider}}" />
+                    <Ellipse Width="18"
+                             Height="18"
+                             Fill="White"
+                             Effect="{StaticResource EffectShadow1}"
+                             StrokeThickness="0"
+                             Stroke="{DynamicResource PrimaryBrush}">
+                        <Ellipse.Transitions>
+                            <Transitions>
+                                <DoubleTransition Property="StrokeThickness"
+                                                  Duration="0:0:0.1" />
+                            </Transitions>
+                        </Ellipse.Transitions>
+                    </Ellipse>
+                </hc:AxleCanvas>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ Ellipse">
+                <Setter Property="Effect"
+                        Value="{StaticResource EffectShadow2}" />
+            </Style>
+            <Style Selector="^ /template/ Label#LabelValue">
+                <Setter Property="IsVisible"
+                        Value="True" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:pressed /template/ Ellipse">
+            <Setter Property="StrokeThickness"
+                    Value="2" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="TipSliderThumbHorizontalBottom"
+                  TargetType="Thumb">
+        <Setter Property="Height"
+                Value="18" />
+        <Setter Property="Width"
+                Value="18" />
+        <Setter Property="ClipToBounds"
+                Value="False" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <hc:AxleCanvas>
+                    <Label Name="LabelValue"
+                           IsHitTestVisible="False"
+                           IsVisible="False"
+                           Canvas.Top="28"
+                           Theme="{StaticResource LabelPrimary}"
+                           hc:ContentControlAttach.Content="{Binding Value,RelativeSource={RelativeSource AncestorType=Slider}}"
+                           hc:ContentControlAttach.ContentStringFormat="{Binding Path=(hc:TipElement.StringFormat),RelativeSource={RelativeSource AncestorType=Slider}}" />
+                    <Ellipse Width="18"
+                             Height="18"
+                             Fill="White"
+                             Effect="{StaticResource EffectShadow1}"
+                             StrokeThickness="0"
+                             Stroke="{DynamicResource PrimaryBrush}">
+                        <Ellipse.Transitions>
+                            <Transitions>
+                                <DoubleTransition Property="StrokeThickness"
+                                                  Duration="0:0:0.1" />
+                            </Transitions>
+                        </Ellipse.Transitions>
+                    </Ellipse>
+                </hc:AxleCanvas>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ Ellipse">
+                <Setter Property="Effect"
+                        Value="{StaticResource EffectShadow2}" />
+            </Style>
+            <Style Selector="^ /template/ Label#LabelValue">
+                <Setter Property="IsVisible"
+                        Value="True" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:pressed /template/ Ellipse">
+            <Setter Property="StrokeThickness"
+                    Value="2" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="TipSliderThumbVerticalLeft"
+                  TargetType="Thumb">
+        <Setter Property="Height"
+                Value="18" />
+        <Setter Property="Width"
+                Value="18" />
+        <Setter Property="ClipToBounds"
+                Value="False" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <hc:AxleCanvas Orientation="Vertical">
+                    <Label Name="LabelValue"
+                           IsHitTestVisible="False"
+                           IsVisible="False"
+                           Canvas.Right="28"
+                           Theme="{StaticResource LabelPrimary}"
+                           hc:ContentControlAttach.Content="{Binding Value,RelativeSource={RelativeSource AncestorType=Slider}}"
+                           hc:ContentControlAttach.ContentStringFormat="{Binding Path=(hc:TipElement.StringFormat),RelativeSource={RelativeSource AncestorType=Slider}}" />
+                    <Ellipse Width="18"
+                             Height="18"
+                             Fill="White"
+                             Effect="{StaticResource EffectShadow1}"
+                             StrokeThickness="0"
+                             Stroke="{DynamicResource PrimaryBrush}">
+                        <Ellipse.Transitions>
+                            <Transitions>
+                                <DoubleTransition Property="StrokeThickness"
+                                                  Duration="0:0:0.1" />
+                            </Transitions>
+                        </Ellipse.Transitions>
+                    </Ellipse>
+                </hc:AxleCanvas>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ Ellipse">
+                <Setter Property="Effect"
+                        Value="{StaticResource EffectShadow2}" />
+            </Style>
+            <Style Selector="^ /template/ Label#LabelValue">
+                <Setter Property="IsVisible"
+                        Value="True" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:pressed /template/ Ellipse">
+            <Setter Property="StrokeThickness"
+                    Value="2" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="TipSliderThumbVerticalRight"
+                  TargetType="Thumb">
+        <Setter Property="Height"
+                Value="18" />
+        <Setter Property="Width"
+                Value="18" />
+        <Setter Property="ClipToBounds"
+                Value="False" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <hc:AxleCanvas Orientation="Vertical">
+                    <Label Name="LabelValue"
+                           IsHitTestVisible="False"
+                           IsVisible="False"
+                           Canvas.Left="28"
+                           Theme="{StaticResource LabelPrimary}"
+                           hc:ContentControlAttach.Content="{Binding Value,RelativeSource={RelativeSource AncestorType=Slider}}"
+                           hc:ContentControlAttach.ContentStringFormat="{Binding Path=(hc:TipElement.StringFormat),RelativeSource={RelativeSource AncestorType=Slider}}" />
+                    <Ellipse Width="18"
+                             Height="18"
+                             Fill="White"
+                             Effect="{StaticResource EffectShadow1}"
+                             StrokeThickness="0"
+                             Stroke="{DynamicResource PrimaryBrush}">
+                        <Ellipse.Transitions>
+                            <Transitions>
+                                <DoubleTransition Property="StrokeThickness"
+                                                  Duration="0:0:0.1" />
+                            </Transitions>
+                        </Ellipse.Transitions>
+                    </Ellipse>
+                </hc:AxleCanvas>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ Ellipse">
+                <Setter Property="Effect"
+                        Value="{StaticResource EffectShadow2}" />
+            </Style>
+            <Style Selector="^ /template/ Label#LabelValue">
+                <Setter Property="IsVisible"
+                        Value="True" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:pressed /template/ Ellipse">
+            <Setter Property="StrokeThickness"
+                    Value="2" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type Slider}"
+                  TargetType="Slider">
+        <Setter Property="Background"
+                Value="{DynamicResource SecondaryRegionBrush}" />
+        <Setter Property="BorderBrush"
+                Value="{DynamicResource BorderBrush}" />
+        <Setter Property="Foreground"
+                Value="{DynamicResource DarkPrimaryBrush}" />
+        <Setter Property="ClipToBounds"
+                Value="False" />
+
+        <Style Selector="^:horizontal">
+            <Setter Property="Template">
+                <ControlTemplate>
+                    <Grid x:Name="rootGrid"
+                          Margin="9,0"
+                          RenderOptions.RequiresFullOpacityHandling="True">
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="Auto"
+                                           MinHeight="{TemplateBinding MinHeight}" />
+                            <RowDefinition Height="Auto" />
+                        </Grid.RowDefinitions>
+                        <TickBar x:Name="TopTickBar"
+                                 Fill="{TemplateBinding Foreground}"
+                                 Ticks="{TemplateBinding Ticks}"
+                                 TickFrequency="{TemplateBinding TickFrequency}"
+                                 Minimum="{TemplateBinding Slider.Minimum}"
+                                 Maximum="{TemplateBinding Slider.Maximum}"
+                                 Height="4"
+                                 Margin="0,0,0,2"
+                                 Placement="Top"
+                                 Grid.Row="0"
+                                 IsVisible="False" />
+                        <TickBar x:Name="BottomTickBar"
+                                 Fill="{TemplateBinding Foreground}"
+                                 Ticks="{TemplateBinding Ticks}"
+                                 TickFrequency="{TemplateBinding TickFrequency}"
+                                 Minimum="{TemplateBinding Slider.Minimum}"
+                                 Maximum="{TemplateBinding Slider.Maximum}"
+                                 Height="4"
+                                 Margin="0,2,0,0"
+                                 Placement="Bottom"
+                                 Grid.Row="2"
+                                 IsVisible="False" />
+                        <Border Grid.Row="1"
+                                Height="2"
+                                Background="{TemplateBinding Background}"
+                                VerticalAlignment="Center" />
+                        <Track Name="PART_Track"
+                               Grid.Row="1"
+                               Minimum="{TemplateBinding Minimum}"
+                               Maximum="{TemplateBinding Maximum}"
+                               Value="{TemplateBinding Value}"
+                               IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                               Orientation="Horizontal">
+                            <Track.DecreaseButton>
+                                <RepeatButton Name="PART_DecreaseButton"
+                                              Background="{DynamicResource PrimaryBrush}"
+                                              Theme="{StaticResource SliderRepeatButtonStyle}"
+                                              Height="2" />
+                            </Track.DecreaseButton>
+                            <Track.IncreaseButton>
+                                <RepeatButton Name="PART_IncreaseButton"
+                                              Theme="{StaticResource SliderRepeatButtonStyle}"
+                                              Height="2" />
+                            </Track.IncreaseButton>
+                            <Thumb Margin="-9,0"
+                                   Theme="{StaticResource SliderThumb}" />
+                        </Track>
+                    </Grid>
+                </ControlTemplate>
+            </Setter>
+        </Style>
+
+        <Style Selector="^:vertical">
+            <Setter Property="Template">
+                <ControlTemplate>
+                    <Grid x:Name="rootGrid"
+                          Margin="0,9"
+                          RenderOptions.RequiresFullOpacityHandling="True">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto" />
+                            <ColumnDefinition MinWidth="{TemplateBinding MinWidth}"
+                                              Width="Auto" />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
+                        <TickBar x:Name="LeftTickBar"
+                                 Grid.Column="0"
+                                 Fill="{TemplateBinding Foreground}"
+                                 Ticks="{TemplateBinding Ticks}"
+                                 TickFrequency="{TemplateBinding TickFrequency}"
+                                 Minimum="{TemplateBinding Slider.Minimum}"
+                                 Maximum="{TemplateBinding Slider.Maximum}"
+                                 Margin="0,0,2,0"
+                                 Placement="Left"
+                                 IsVisible="False"
+                                 Width="4" />
+                        <TickBar x:Name="RightTickBar"
+                                 Grid.Column="2"
+                                 Fill="{TemplateBinding Foreground}"
+                                 Ticks="{TemplateBinding Ticks}"
+                                 TickFrequency="{TemplateBinding TickFrequency}"
+                                 Minimum="{TemplateBinding Slider.Minimum}"
+                                 Maximum="{TemplateBinding Slider.Maximum}"
+                                 Margin="2,0,0,0"
+                                 Placement="Right"
+                                 IsVisible="False"
+                                 Width="4" />
+                        <Border Grid.Column="1"
+                                Width="2"
+                                Background="{TemplateBinding Background}"
+                                HorizontalAlignment="Center" />
+                        <Track Name="PART_Track"
+                               Grid.Column="1"
+                               Minimum="{TemplateBinding Minimum}"
+                               Maximum="{TemplateBinding Maximum}"
+                               Value="{TemplateBinding Value}"
+                               IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                               Orientation="Vertical">
+                            <Track.DecreaseButton>
+                                <RepeatButton Name="PART_DecreaseButton"
+                                              Background="{DynamicResource PrimaryBrush}"
+                                              Theme="{StaticResource SliderRepeatButtonStyle}"
+                                              Width="2" />
+                            </Track.DecreaseButton>
+                            <Track.IncreaseButton>
+                                <RepeatButton Name="PART_IncreaseButton"
+                                              Theme="{StaticResource SliderRepeatButtonStyle}"
+                                              Width="2" />
+                            </Track.IncreaseButton>
+                            <Thumb Margin="0,-9"
+                                   Theme="{StaticResource SliderThumb}" />
+                        </Track>
+                    </Grid>
+                </ControlTemplate>
+            </Setter>
+        </Style>
+
+        <Style Selector="^[TickPlacement=TopLeft] /template/ TickBar#LeftTickBar, ^[TickPlacement=Outside] /template/ TickBar#LeftTickBar">
+            <Setter Property="IsVisible"
+                    Value="True" />
+        </Style>
+
+        <Style Selector="^[TickPlacement=TopLeft] /template/ TickBar#TopTickBar, ^[TickPlacement=Outside] /template/ TickBar#TopTickBar">
+            <Setter Property="IsVisible"
+                    Value="True" />
+        </Style>
+
+        <Style Selector="^[TickPlacement=BottomRight] /template/ TickBar#BottomTickBar, ^[TickPlacement=Outside] /template/ TickBar#BottomTickBar">
+            <Setter Property="IsVisible"
+                    Value="True" />
+        </Style>
+
+        <Style Selector="^[TickPlacement=BottomRight] /template/ TickBar#RightTickBar, ^[TickPlacement=Outside] /template/ TickBar#RightTickBar">
+            <Setter Property="IsVisible"
+                    Value="True" />
+        </Style>
+
+        <Style Selector="^[(hc|TipElement.IsVisible)=True]">
+            <Style Selector="^[(hc|TipElement.Placement)=Top] /template/ Thumb">
+                <Setter Property="Theme"
+                        Value="{StaticResource TipSliderThumbHorizontalTop}" />
+            </Style>
+            <Style Selector="^[(hc|TipElement.Placement)=Bottom] /template/ Thumb">
+                <Setter Property="Theme"
+                        Value="{StaticResource TipSliderThumbHorizontalBottom}" />
+            </Style>
+            <Style Selector="^[(hc|TipElement.Placement)=Left] /template/ Thumb">
+                <Setter Property="Theme"
+                        Value="{StaticResource TipSliderThumbVerticalLeft}" />
+            </Style>
+            <Style Selector="^[(hc|TipElement.Placement)=Right] /template/ Thumb">
+                <Setter Property="Theme"
+                        Value="{StaticResource TipSliderThumbVerticalRight}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:disabled /template/ Grid#rootGrid">
+            <Setter Property="Opacity"
+                    Value="0.2" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Avalonia/HandyControl_Avalonia/Themes/Styles/Style.axaml b/src/Avalonia/HandyControl_Avalonia/Themes/Styles/Style.axaml
index c4579693..ee6af5b5 100644
--- a/src/Avalonia/HandyControl_Avalonia/Themes/Styles/Style.axaml
+++ b/src/Avalonia/HandyControl_Avalonia/Themes/Styles/Style.axaml
@@ -26,6 +26,7 @@
                 <MergeResourceInclude Source="avares://HandyControl/Themes/Styles/ScrollViewer.axaml" />
                 <MergeResourceInclude Source="avares://HandyControl/Themes/Styles/ListBox.axaml" />
                 <MergeResourceInclude Source="avares://HandyControl/Themes/Styles/Label.axaml" />
+                <MergeResourceInclude Source="avares://HandyControl/Themes/Styles/Slider.axaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>
     </Styles.Resources>
diff --git a/src/Avalonia/HandyControl_Avalonia/Themes/Styles/ToggleButton.axaml b/src/Avalonia/HandyControl_Avalonia/Themes/Styles/ToggleButton.axaml
index 8b4a014f..44730a49 100644
--- a/src/Avalonia/HandyControl_Avalonia/Themes/Styles/ToggleButton.axaml
+++ b/src/Avalonia/HandyControl_Avalonia/Themes/Styles/ToggleButton.axaml
@@ -505,11 +505,13 @@
                 Value="6,0,0,0" />
         <Setter Property="Height"
                 Value="24" />
+        <Setter Property="ClipToBounds"
+                Value="False" />
         <Setter Property="Template">
             <ControlTemplate>
                 <Grid Background="Transparent"
                       ColumnDefinitions="Auto, *">
-                    <Viewbox>
+                    <Viewbox ClipToBounds="False">
                         <Panel Width="80"
                                Height="48">
                             <Border BorderBrush="{TemplateBinding BorderBrush}"
@@ -575,6 +577,7 @@
                                       IsVisible="{Binding $self.Content, Converter={x:Static ObjectConverters.IsNotNull}}"
                                       Grid.Column="1"
                                       Focusable="False"
+                                      ClipToBounds="True"
                                       HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                       Margin="{TemplateBinding Padding}"
                                       RecognizesAccessKey="True"