From 75a6f57f0f16b360ba8cd06885a33ef1a7f48afd Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Wed, 25 Jan 2023 01:06:37 +0800
Subject: [PATCH 1/2] feat: add Slider infra, add horizontal styles. Add
 tooltip as variation.

---
 .../Semi.Avalonia.Demo/Pages/SliderDemo.axaml |  38 ++
 .../Pages/SliderDemo.axaml.cs                 |  18 +
 demo/Semi.Avalonia.Demo/Views/MainView.axaml  |   3 +
 src/Semi.Avalonia/Controls/Controls.axaml     |   1 +
 src/Semi.Avalonia/Controls/Slider.axaml       | 351 ++++++++++++++++++
 src/Semi.Avalonia/Themes/Light/Light.axaml    |   1 +
 src/Semi.Avalonia/Themes/Light/Slider.axaml   |  23 ++
 7 files changed, 435 insertions(+)
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/SliderDemo.axaml
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/SliderDemo.axaml.cs
 create mode 100644 src/Semi.Avalonia/Controls/Slider.axaml
 create mode 100644 src/Semi.Avalonia/Themes/Light/Slider.axaml

diff --git a/demo/Semi.Avalonia.Demo/Pages/SliderDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/SliderDemo.axaml
new file mode 100644
index 0000000..9dec197
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/SliderDemo.axaml
@@ -0,0 +1,38 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.SliderDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel
+        Margin="20"
+        HorizontalAlignment="Left"
+        Spacing="20">
+        <Slider
+            Width="300"
+            Maximum="100"
+            Minimum="0"
+            TickFrequency="10"
+            Value="0" />
+        <Slider
+            Width="300"
+            IsSnapToTickEnabled="True"
+            Maximum="100"
+            Minimum="0"
+            TickFrequency="10"
+            TickPlacement="Outside"
+            Value="0" />
+        <Slider
+            Width="300"
+            Classes="ToolTip"
+            IsSnapToTickEnabled="True"
+            Maximum="100"
+            Minimum="0"
+            TickFrequency="10"
+            TickPlacement="Outside"
+            Value="0" />
+    </StackPanel>
+</UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/SliderDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/SliderDemo.axaml.cs
new file mode 100644
index 0000000..8bb304a
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/SliderDemo.axaml.cs
@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class SliderDemo : UserControl
+{
+    public SliderDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
index e526ef6..447aba2 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -63,6 +63,9 @@
         <TabItem Header="RepeatButton">
             <pages:RepeatButtonDemo />
         </TabItem>
+        <TabItem Header="Slider">
+            <pages:SliderDemo />
+        </TabItem>
         <TabItem Header="TabControl">
             <pages:TabControlDemo />
         </TabItem>
diff --git a/src/Semi.Avalonia/Controls/Controls.axaml b/src/Semi.Avalonia/Controls/Controls.axaml
index e9deabf..8f0c1f1 100644
--- a/src/Semi.Avalonia/Controls/Controls.axaml
+++ b/src/Semi.Avalonia/Controls/Controls.axaml
@@ -25,6 +25,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/RepeatButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/SelectableTextBlock.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ScrollViewer.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/Slider.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TabControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TabItem.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/TextBlock.axaml" />
diff --git a/src/Semi.Avalonia/Controls/Slider.axaml b/src/Semi.Avalonia/Controls/Slider.axaml
new file mode 100644
index 0000000..3e3674a
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/Slider.axaml
@@ -0,0 +1,351 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="SliderHorizontalRepeatButton" TargetType="RepeatButton">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="RepeatButton">
+                <Grid>
+                    <Border
+                        Name="FocusTarget"
+                        Margin="0,-10"
+                        Background="Transparent" />
+                    <Border
+                        Name="TrackBackground"
+                        Height="{DynamicResource SliderTrackWidth}"
+                        Margin="{TemplateBinding Margin}"
+                        VerticalAlignment="Center"
+                        Background="{TemplateBinding Background}"
+                        CornerRadius="{DynamicResource SliderTrackCornerRadius}" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="SliderVerticalRepeatButton" TargetType="RepeatButton">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="RepeatButton">
+                <Grid>
+                    <Border
+                        Name="FocusTarget"
+                        Margin="0,-10"
+                        Background="Transparent" />
+                    <Border
+                        Name="TrackBackground"
+                        Width="{DynamicResource SliderTrackWidth}"
+                        Margin="{TemplateBinding Margin}"
+                        HorizontalAlignment="Center"
+                        Background="{TemplateBinding Background}"
+                        CornerRadius="{DynamicResource SliderTrackCornerRadius}" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="SliderThumbTheme" TargetType="Thumb">
+        <Setter Property="Thumb.CornerRadius" Value="{DynamicResource SliderThumbCornerRadius}" />
+        <Setter Property="Thumb.Cursor" Value="Hand" />
+        <Setter Property="Thumb.Background" Value="{DynamicResource SliderThumbBackground}" />
+        <Setter Property="Thumb.BorderBrush" Value="{DynamicResource SliderThumbPointeroverBorderBrush}" />
+        <Setter Property="Thumb.BorderThickness" Value="{DynamicResource SliderThumbBorderThickness}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="Thumb">
+                <Border
+                    Width="{TemplateBinding Width}"
+                    Height="{TemplateBinding Height}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}" />
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover /template/ Border">
+            <Setter Property="BorderBrush" Value="{DynamicResource SliderThumbPointeroverBorderBrush}" />
+        </Style>
+        <Style Selector="^:pressed /template/ Border">
+            <Setter Property="BorderBrush" Value="{DynamicResource SliderThumbPressedBorderBrush}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type Slider}" TargetType="Slider">
+        <Setter Property="Background" Value="{DynamicResource SliderTrackBackground}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource SliderBorderThickness}" />
+        <Setter Property="Foreground" Value="{DynamicResource SliderTrackForeground}" />
+        <Style Selector="^:horizontal">
+            <Setter Property="Template">
+                <ControlTemplate TargetType="Slider">
+                    <Border
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid
+                            x:Name="SliderContainer"
+                            Margin="{TemplateBinding Padding}"
+                            Background="Transparent">
+                            <Grid.Styles>
+                                <Style Selector="TickBar">
+                                    <Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
+                                </Style>
+                            </Grid.Styles>
+                            <Grid x:Name="HorizontalTemplate" MinHeight="50">
+                                <Grid.RowDefinitions>
+                                    <RowDefinition Height="15" />
+                                    <RowDefinition Height="Auto" />
+                                    <RowDefinition Height="15" />
+                                </Grid.RowDefinitions>
+                                <TickBar
+                                    Name="TopTickBar"
+                                    Grid.Row="0"
+                                    Height="{DynamicResource SliderTickHorizontalHeight}"
+                                    Margin="0,0,0,4"
+                                    VerticalAlignment="Bottom"
+                                    Fill="{DynamicResource SliderTickForeground}"
+                                    IsVisible="False"
+                                    Maximum="{TemplateBinding Slider.Maximum}"
+                                    Minimum="{TemplateBinding Slider.Minimum}"
+                                    Orientation="{TemplateBinding Slider.Orientation}"
+                                    Placement="Top"
+                                    TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                    Ticks="{TemplateBinding Ticks}" />
+                                <TickBar
+                                    Name="BottomTickBar"
+                                    Grid.Row="2"
+                                    Height="{DynamicResource SliderTickHorizontalHeight}"
+                                    Margin="0,4,0,0"
+                                    VerticalAlignment="Top"
+                                    Fill="{DynamicResource SliderTickForeground}"
+                                    IsVisible="False"
+                                    Maximum="{TemplateBinding Slider.Maximum}"
+                                    Minimum="{TemplateBinding Slider.Minimum}"
+                                    Orientation="{TemplateBinding Slider.Orientation}"
+                                    Placement="Bottom"
+                                    TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                    Ticks="{TemplateBinding Ticks}" />
+                                <Track
+                                    Name="PART_Track"
+                                    Grid.Row="1"
+                                    IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                                    Maximum="{TemplateBinding Maximum}"
+                                    Minimum="{TemplateBinding Minimum}"
+                                    Orientation="Horizontal"
+                                    Value="{TemplateBinding Value,
+                                                            Mode=TwoWay}">
+                                    <Track.DecreaseButton>
+                                        <RepeatButton
+                                            Name="PART_DecreaseButton"
+                                            Background="{TemplateBinding Foreground}"
+                                            Focusable="False"
+                                            Theme="{StaticResource SliderHorizontalRepeatButton}" />
+                                    </Track.DecreaseButton>
+                                    <Track.IncreaseButton>
+                                        <RepeatButton
+                                            Name="PART_IncreaseButton"
+                                            Background="{TemplateBinding Background}"
+                                            Focusable="False"
+                                            Theme="{StaticResource SliderHorizontalRepeatButton}" />
+                                    </Track.IncreaseButton>
+                                    <Thumb
+                                        Name="thumb"
+                                        Width="{DynamicResource SliderThumbWidth}"
+                                        Height="{DynamicResource SliderThumbHeight}"
+                                        DataContext="{TemplateBinding Value}"
+                                        Theme="{StaticResource SliderThumbTheme}" />
+                                </Track>
+                            </Grid>
+                        </Grid>
+                    </Border>
+                </ControlTemplate>
+            </Setter>
+        </Style>
+        <Style Selector="^:vertical">
+            <Setter Property="Template">
+                <ControlTemplate>
+                    <DataValidationErrors>
+                        <Border
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}">
+                            <Grid
+                                x:Name="SliderContainer"
+                                Grid.Row="1"
+                                Margin="{TemplateBinding Padding}"
+                                Background="{DynamicResource SliderContainerBackground}">
+                                <Grid.Styles>
+                                    <Style Selector="TickBar">
+                                        <Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
+                                    </Style>
+                                </Grid.Styles>
+                                <Grid
+                                    x:Name="VerticalTemplate"
+                                    MinWidth="{DynamicResource SliderVerticalWidth}"
+                                    RowDefinitions="*,Auto,Auto">
+                                    <Grid.ColumnDefinitions>
+                                        <ColumnDefinition Width="{DynamicResource SliderPreContentMargin}" />
+                                        <ColumnDefinition Width="Auto" />
+                                        <ColumnDefinition Width="{DynamicResource SliderPostContentMargin}" />
+                                    </Grid.ColumnDefinitions>
+                                    <TickBar
+                                        Name="LeftTickBar"
+                                        Grid.RowSpan="3"
+                                        Width="{DynamicResource SliderOutsideTickBarThemeHeight}"
+                                        Margin="0,0,4,0"
+                                        HorizontalAlignment="Right"
+                                        Fill="{DynamicResource SliderTickBarFill}"
+                                        IsVisible="False"
+                                        Maximum="{TemplateBinding Slider.Maximum}"
+                                        Minimum="{TemplateBinding Slider.Minimum}"
+                                        Orientation="{TemplateBinding Slider.Orientation}"
+                                        Placement="Left"
+                                        TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                        Ticks="{TemplateBinding Ticks}" />
+                                    <TickBar
+                                        Name="RightTickBar"
+                                        Grid.RowSpan="3"
+                                        Grid.Column="2"
+                                        Width="{DynamicResource SliderOutsideTickBarThemeHeight}"
+                                        Margin="4,0,0,0"
+                                        HorizontalAlignment="Left"
+                                        Fill="{DynamicResource SliderTickBarFill}"
+                                        IsVisible="False"
+                                        Maximum="{TemplateBinding Slider.Maximum}"
+                                        Minimum="{TemplateBinding Slider.Minimum}"
+                                        Orientation="{TemplateBinding Slider.Orientation}"
+                                        Placement="Right"
+                                        TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                        Ticks="{TemplateBinding Ticks}" />
+                                    <Track
+                                        Name="PART_Track"
+                                        Grid.RowSpan="3"
+                                        Grid.Column="1"
+                                        Grid.ColumnSpan="1"
+                                        IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                                        Maximum="{TemplateBinding Maximum}"
+                                        Minimum="{TemplateBinding Minimum}"
+                                        Orientation="Vertical"
+                                        Value="{TemplateBinding Value,
+                                                                Mode=TwoWay}">
+                                        <Track.DecreaseButton>
+                                            <RepeatButton
+                                                Name="PART_DecreaseButton"
+                                                Background="{TemplateBinding Foreground}"
+                                                Focusable="False"
+                                                Theme="{StaticResource SliderVerticalRepeatButton}" />
+                                        </Track.DecreaseButton>
+                                        <Track.IncreaseButton>
+                                            <RepeatButton
+                                                Name="PART_IncreaseButton"
+                                                Background="{TemplateBinding Background}"
+                                                Focusable="False"
+                                                Theme="{StaticResource SliderVerticalRepeatButton}" />
+                                        </Track.IncreaseButton>
+                                        <Thumb
+                                            Name="SliderThumb"
+                                            Width="{DynamicResource SliderVerticalThumbWidth}"
+                                            Height="{DynamicResource SliderVerticalThumbHeight}"
+                                            Margin="0"
+                                            Padding="0"
+                                            Background="{DynamicResource SliderThumbBackground}"
+                                            BorderThickness="1"
+                                            DataContext="{TemplateBinding Value}"
+                                            Theme="{StaticResource SliderThumbTheme}" />
+                                    </Track>
+                                </Grid>
+                            </Grid>
+                        </Border>
+                    </DataValidationErrors>
+                </ControlTemplate>
+            </Setter>
+        </Style>
+
+        <Style Selector="^.ToolTip /template/ Thumb">
+            <Setter Property="ToolTip.Tip" Value="{Binding $parent[Slider].Value, Mode=OneWay}" />
+            <Setter Property="ToolTip.Placement" Value="Top" />
+            <Setter Property="ToolTip.VerticalOffset" Value="-10" />
+            <Setter Property="ToolTip.HorizontalOffset" Value="-15" />
+        </Style>
+
+        <!--  TickBar Placement States  -->
+
+        <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>
+
+        <!--  Disabled State  -->
+
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ RepeatButton#PART_DecreaseButton">
+                <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillDisabled}" />
+            </Style>
+
+            <Style Selector="^ /template/ RepeatButton#PART_IncreaseButton">
+                <Setter Property="Background" Value="{DynamicResource SliderTrackFillDisabled}" />
+            </Style>
+
+            <Style Selector="^ /template/ Thumb">
+                <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundDisabled}" />
+            </Style>
+
+            <Style Selector="^ /template/ TickBar">
+                <Setter Property="Fill" Value="{DynamicResource SliderTickBarFillDisabled}" />
+            </Style>
+        </Style>
+
+        <!--  PointerOver State  -->
+        <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ Grid#SliderContainer">
+                <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundDisabled}" />
+            </Style>
+            <Style Selector="^ /template/ RepeatButton#PART_IncreaseButton">
+                <Setter Property="Background" Value="{DynamicResource SliderTrackFillPointerOver}" />
+            </Style>
+
+            <Style Selector="^ /template/ Thumb">
+                <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPointerOver}" />
+            </Style>
+
+            <Style Selector="^ /template/ Grid#SliderContainer">
+                <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundPointerOver}" />
+            </Style>
+
+            <Style Selector="^ /template/ RepeatButton#PART_DecreaseButton">
+                <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPointerOver}" />
+            </Style>
+
+        </Style>
+
+        <!--  Pressed State  -->
+        <Style Selector="^:pressed">
+            <Style Selector="^ /template/ Grid#SliderContainer">
+                <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundPressed}" />
+            </Style>
+            <Style Selector="^ /template/ RepeatButton#PART_DecreaseButton">
+                <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPressed}" />
+            </Style>
+            <Style Selector="^ /template/ RepeatButton#PART_IncreaseButton">
+                <Setter Property="Background" Value="{DynamicResource SliderTrackFillPressed}" />
+            </Style>
+
+            <Style Selector="^ /template/ Thumb">
+                <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPressed}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:error">
+            <Setter Property="Foreground" Value="{DynamicResource SystemControlErrorTextForegroundBrush}" />
+            <Style Selector="^ /template/ Thumb">
+                <Setter Property="Background" Value="{DynamicResource SystemControlErrorTextForegroundBrush}" />
+            </Style>
+        </Style>
+
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/Light.axaml b/src/Semi.Avalonia/Themes/Light/Light.axaml
index 1716221..176a422 100644
--- a/src/Semi.Avalonia/Themes/Light/Light.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Light.axaml
@@ -17,6 +17,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ProgressBar.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/RadioButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ScrollViewer.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Slider.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TabItem.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/TextBlock.axaml" />
diff --git a/src/Semi.Avalonia/Themes/Light/Slider.axaml b/src/Semi.Avalonia/Themes/Light/Slider.axaml
new file mode 100644
index 0000000..c2134b0
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Light/Slider.axaml
@@ -0,0 +1,23 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:sys="clr-namespace:System;assembly=System.Runtime">
+    <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="SliderTrackForeground" Color="#0077FA" />
+    <SolidColorBrush x:Key="SliderTrackBackground" Opacity="0.05" Color="#2E3238" />
+    <sys:Double x:Key="SliderTrackWidth">4</sys:Double>
+    <CornerRadius x:Key="SliderTrackCornerRadius">3</CornerRadius>
+    <sys:Double x:Key="SliderThumbWidth">16</sys:Double>
+    <sys:Double x:Key="SliderThumbHeight">16</sys:Double>
+    <CornerRadius x:Key="SliderThumbCornerRadius">24</CornerRadius>
+    <Thickness x:Key="SliderBorderThickness">0</Thickness>
+    <BoxShadows x:Key="SliderThumbBoxShadow">0 0 1 1 #1A000000</BoxShadows>
+
+    <sys:Double x:Key="SliderTickHorizontalHeight">4</sys:Double>
+    <SolidColorBrush x:Key="SliderTickForeground" Color="#C6CACD" />
+    <SolidColorBrush x:Key="SliderThumbBackground" Color="White" />
+    <SolidColorBrush x:Key="SliderThumbBorderBrush" Color="#0077FA" />
+    <SolidColorBrush x:Key="SliderThumbPointeroverBorderBrush" Color="#0062D6" />
+    <SolidColorBrush x:Key="SliderThumbPressedBorderBrush" Color="#004FB3" />
+    <Thickness x:Key="SliderThumbBorderThickness">4</Thickness>
+</ResourceDictionary>

From 79b9b67313bcf6824c3d12716cf5da5a4cf2ea49 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Wed, 25 Jan 2023 11:44:01 +0800
Subject: [PATCH 2/2] feat: update vertical template. update disabled style.

---
 .../Semi.Avalonia.Demo/Pages/SliderDemo.axaml |  43 +++-
 src/Semi.Avalonia/Controls/Slider.axaml       | 236 +++++++-----------
 src/Semi.Avalonia/Themes/Light/Slider.axaml   |   7 +-
 3 files changed, 137 insertions(+), 149 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/SliderDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/SliderDemo.axaml
index 9dec197..9236e51 100644
--- a/demo/Semi.Avalonia.Demo/Pages/SliderDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/SliderDemo.axaml
@@ -4,7 +4,7 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    d:DesignHeight="450"
+    d:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
     <StackPanel
@@ -34,5 +34,46 @@
             TickFrequency="10"
             TickPlacement="Outside"
             Value="0" />
+        <Slider
+            Width="300"
+            IsDirectionReversed="True"
+            Maximum="100"
+            Minimum="0"
+            TickFrequency="10"
+            Value="0" />
+        <Slider
+            Width="300"
+            IsEnabled="False"
+            Maximum="100"
+            Minimum="0"
+            TickFrequency="10"
+            Value="30" />
+        <StackPanel Orientation="Horizontal" Spacing="20">
+            <Slider
+                Height="300"
+                Maximum="100"
+                Minimum="0"
+                Orientation="Vertical"
+                TickFrequency="10"
+                Value="0" />
+            <Slider
+                Height="300"
+                IsSnapToTickEnabled="True"
+                Maximum="100"
+                Minimum="0"
+                Orientation="Vertical"
+                TickFrequency="10"
+                TickPlacement="TopLeft"
+                Value="0" />
+            <Slider
+                Height="300"
+                Classes="ToolTip"
+                Maximum="100"
+                Minimum="0"
+                Orientation="Vertical"
+                TickFrequency="10"
+                TickPlacement="TopLeft"
+                Value="0" />
+        </StackPanel>
     </StackPanel>
 </UserControl>
diff --git a/src/Semi.Avalonia/Controls/Slider.axaml b/src/Semi.Avalonia/Controls/Slider.axaml
index 3e3674a..3edc98f 100644
--- a/src/Semi.Avalonia/Controls/Slider.axaml
+++ b/src/Semi.Avalonia/Controls/Slider.axaml
@@ -44,7 +44,7 @@
         <Setter Property="Thumb.CornerRadius" Value="{DynamicResource SliderThumbCornerRadius}" />
         <Setter Property="Thumb.Cursor" Value="Hand" />
         <Setter Property="Thumb.Background" Value="{DynamicResource SliderThumbBackground}" />
-        <Setter Property="Thumb.BorderBrush" Value="{DynamicResource SliderThumbPointeroverBorderBrush}" />
+        <Setter Property="Thumb.BorderBrush" Value="{DynamicResource SliderThumbBorderBrush}" />
         <Setter Property="Thumb.BorderThickness" Value="{DynamicResource SliderThumbBorderThickness}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="Thumb">
@@ -158,105 +158,98 @@
         <Style Selector="^:vertical">
             <Setter Property="Template">
                 <ControlTemplate>
-                    <DataValidationErrors>
-                        <Border
-                            BorderBrush="{TemplateBinding BorderBrush}"
-                            BorderThickness="{TemplateBinding BorderThickness}"
-                            CornerRadius="{TemplateBinding CornerRadius}">
+                    <Border
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid
+                            x:Name="SliderContainer"
+                            Margin="{TemplateBinding Padding}"
+                            Background="{DynamicResource SliderContainerBackground}">
+                            <Grid.Styles>
+                                <Style Selector="TickBar">
+                                    <Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
+                                </Style>
+                            </Grid.Styles>
                             <Grid
-                                x:Name="SliderContainer"
-                                Grid.Row="1"
-                                Margin="{TemplateBinding Padding}"
-                                Background="{DynamicResource SliderContainerBackground}">
-                                <Grid.Styles>
-                                    <Style Selector="TickBar">
-                                        <Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
-                                    </Style>
-                                </Grid.Styles>
-                                <Grid
-                                    x:Name="VerticalTemplate"
-                                    MinWidth="{DynamicResource SliderVerticalWidth}"
-                                    RowDefinitions="*,Auto,Auto">
-                                    <Grid.ColumnDefinitions>
-                                        <ColumnDefinition Width="{DynamicResource SliderPreContentMargin}" />
-                                        <ColumnDefinition Width="Auto" />
-                                        <ColumnDefinition Width="{DynamicResource SliderPostContentMargin}" />
-                                    </Grid.ColumnDefinitions>
-                                    <TickBar
-                                        Name="LeftTickBar"
-                                        Grid.RowSpan="3"
-                                        Width="{DynamicResource SliderOutsideTickBarThemeHeight}"
-                                        Margin="0,0,4,0"
-                                        HorizontalAlignment="Right"
-                                        Fill="{DynamicResource SliderTickBarFill}"
-                                        IsVisible="False"
-                                        Maximum="{TemplateBinding Slider.Maximum}"
-                                        Minimum="{TemplateBinding Slider.Minimum}"
-                                        Orientation="{TemplateBinding Slider.Orientation}"
-                                        Placement="Left"
-                                        TickFrequency="{TemplateBinding Slider.TickFrequency}"
-                                        Ticks="{TemplateBinding Ticks}" />
-                                    <TickBar
-                                        Name="RightTickBar"
-                                        Grid.RowSpan="3"
-                                        Grid.Column="2"
-                                        Width="{DynamicResource SliderOutsideTickBarThemeHeight}"
-                                        Margin="4,0,0,0"
-                                        HorizontalAlignment="Left"
-                                        Fill="{DynamicResource SliderTickBarFill}"
-                                        IsVisible="False"
-                                        Maximum="{TemplateBinding Slider.Maximum}"
-                                        Minimum="{TemplateBinding Slider.Minimum}"
-                                        Orientation="{TemplateBinding Slider.Orientation}"
-                                        Placement="Right"
-                                        TickFrequency="{TemplateBinding Slider.TickFrequency}"
-                                        Ticks="{TemplateBinding Ticks}" />
-                                    <Track
-                                        Name="PART_Track"
-                                        Grid.RowSpan="3"
-                                        Grid.Column="1"
-                                        Grid.ColumnSpan="1"
-                                        IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
-                                        Maximum="{TemplateBinding Maximum}"
-                                        Minimum="{TemplateBinding Minimum}"
-                                        Orientation="Vertical"
-                                        Value="{TemplateBinding Value,
-                                                                Mode=TwoWay}">
-                                        <Track.DecreaseButton>
-                                            <RepeatButton
-                                                Name="PART_DecreaseButton"
-                                                Background="{TemplateBinding Foreground}"
-                                                Focusable="False"
-                                                Theme="{StaticResource SliderVerticalRepeatButton}" />
-                                        </Track.DecreaseButton>
-                                        <Track.IncreaseButton>
-                                            <RepeatButton
-                                                Name="PART_IncreaseButton"
-                                                Background="{TemplateBinding Background}"
-                                                Focusable="False"
-                                                Theme="{StaticResource SliderVerticalRepeatButton}" />
-                                        </Track.IncreaseButton>
-                                        <Thumb
-                                            Name="SliderThumb"
-                                            Width="{DynamicResource SliderVerticalThumbWidth}"
-                                            Height="{DynamicResource SliderVerticalThumbHeight}"
-                                            Margin="0"
-                                            Padding="0"
-                                            Background="{DynamicResource SliderThumbBackground}"
-                                            BorderThickness="1"
-                                            DataContext="{TemplateBinding Value}"
-                                            Theme="{StaticResource SliderThumbTheme}" />
-                                    </Track>
-                                </Grid>
+                                x:Name="VerticalTemplate"
+                                MinWidth="{DynamicResource SliderVerticalWidth}"
+                                RowDefinitions="*,Auto,Auto">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="{DynamicResource SliderPreContentMargin}" />
+                                    <ColumnDefinition Width="Auto" />
+                                    <ColumnDefinition Width="{DynamicResource SliderPostContentMargin}" />
+                                </Grid.ColumnDefinitions>
+                                <TickBar
+                                    Name="LeftTickBar"
+                                    Grid.RowSpan="3"
+                                    Width="{DynamicResource SliderTickVerticalWidth}"
+                                    Margin="0,0,4,0"
+                                    HorizontalAlignment="Right"
+                                    Fill="{DynamicResource SliderTickForeground}"
+                                    IsVisible="False"
+                                    Maximum="{TemplateBinding Slider.Maximum}"
+                                    Minimum="{TemplateBinding Slider.Minimum}"
+                                    Orientation="{TemplateBinding Slider.Orientation}"
+                                    Placement="Left"
+                                    TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                    Ticks="{TemplateBinding Ticks}" />
+                                <TickBar
+                                    Name="RightTickBar"
+                                    Grid.RowSpan="3"
+                                    Grid.Column="2"
+                                    Width="{DynamicResource SliderTickVerticalWidth}"
+                                    Margin="4,0,0,0"
+                                    HorizontalAlignment="Left"
+                                    Fill="{DynamicResource SliderTickForeground}"
+                                    IsVisible="False"
+                                    Maximum="{TemplateBinding Slider.Maximum}"
+                                    Minimum="{TemplateBinding Slider.Minimum}"
+                                    Orientation="{TemplateBinding Slider.Orientation}"
+                                    Placement="Right"
+                                    TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                    Ticks="{TemplateBinding Ticks}" />
+                                <Track
+                                    Name="PART_Track"
+                                    Grid.RowSpan="3"
+                                    Grid.Column="1"
+                                    Grid.ColumnSpan="1"
+                                    IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                                    Maximum="{TemplateBinding Maximum}"
+                                    Minimum="{TemplateBinding Minimum}"
+                                    Orientation="Vertical"
+                                    Value="{TemplateBinding Value,
+                                                            Mode=TwoWay}">
+                                    <Track.DecreaseButton>
+                                        <RepeatButton
+                                            Name="PART_DecreaseButton"
+                                            Background="{TemplateBinding Foreground}"
+                                            Focusable="False"
+                                            Theme="{StaticResource SliderVerticalRepeatButton}" />
+                                    </Track.DecreaseButton>
+                                    <Track.IncreaseButton>
+                                        <RepeatButton
+                                            Name="PART_IncreaseButton"
+                                            Background="{TemplateBinding Background}"
+                                            Focusable="False"
+                                            Theme="{StaticResource SliderVerticalRepeatButton}" />
+                                    </Track.IncreaseButton>
+                                    <Thumb
+                                        Name="thumb"
+                                        Width="{DynamicResource SliderThumbWidth}"
+                                        Height="{DynamicResource SliderThumbHeight}"
+                                        DataContext="{TemplateBinding Value}"
+                                        Theme="{StaticResource SliderThumbTheme}" />
+                                </Track>
                             </Grid>
-                        </Border>
-                    </DataValidationErrors>
+                        </Grid>
+                    </Border>
                 </ControlTemplate>
             </Setter>
         </Style>
 
         <Style Selector="^.ToolTip /template/ Thumb">
-            <Setter Property="ToolTip.Tip" Value="{Binding $parent[Slider].Value, Mode=OneWay}" />
+            <Setter Property="ToolTip.Tip" Value="{Binding $parent[Slider].Value, Mode=OneWay, StringFormat='\{0:f\}'}" />
             <Setter Property="ToolTip.Placement" Value="Top" />
             <Setter Property="ToolTip.VerticalOffset" Value="-10" />
             <Setter Property="ToolTip.HorizontalOffset" Value="-15" />
@@ -284,66 +277,15 @@
 
         <Style Selector="^:disabled">
             <Style Selector="^ /template/ RepeatButton#PART_DecreaseButton">
-                <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillDisabled}" />
+                <Setter Property="Background" Value="{DynamicResource SliderTrackDisabledForeground}" />
             </Style>
 
             <Style Selector="^ /template/ RepeatButton#PART_IncreaseButton">
-                <Setter Property="Background" Value="{DynamicResource SliderTrackFillDisabled}" />
+                <Setter Property="Background" Value="{DynamicResource SliderTrackDisabledBackground}" />
             </Style>
 
             <Style Selector="^ /template/ Thumb">
-                <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundDisabled}" />
-            </Style>
-
-            <Style Selector="^ /template/ TickBar">
-                <Setter Property="Fill" Value="{DynamicResource SliderTickBarFillDisabled}" />
-            </Style>
-        </Style>
-
-        <!--  PointerOver State  -->
-        <Style Selector="^:pointerover">
-            <Style Selector="^ /template/ Grid#SliderContainer">
-                <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundDisabled}" />
-            </Style>
-            <Style Selector="^ /template/ RepeatButton#PART_IncreaseButton">
-                <Setter Property="Background" Value="{DynamicResource SliderTrackFillPointerOver}" />
-            </Style>
-
-            <Style Selector="^ /template/ Thumb">
-                <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPointerOver}" />
-            </Style>
-
-            <Style Selector="^ /template/ Grid#SliderContainer">
-                <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundPointerOver}" />
-            </Style>
-
-            <Style Selector="^ /template/ RepeatButton#PART_DecreaseButton">
-                <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPointerOver}" />
-            </Style>
-
-        </Style>
-
-        <!--  Pressed State  -->
-        <Style Selector="^:pressed">
-            <Style Selector="^ /template/ Grid#SliderContainer">
-                <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundPressed}" />
-            </Style>
-            <Style Selector="^ /template/ RepeatButton#PART_DecreaseButton">
-                <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPressed}" />
-            </Style>
-            <Style Selector="^ /template/ RepeatButton#PART_IncreaseButton">
-                <Setter Property="Background" Value="{DynamicResource SliderTrackFillPressed}" />
-            </Style>
-
-            <Style Selector="^ /template/ Thumb">
-                <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPressed}" />
-            </Style>
-        </Style>
-
-        <Style Selector="^:error">
-            <Setter Property="Foreground" Value="{DynamicResource SystemControlErrorTextForegroundBrush}" />
-            <Style Selector="^ /template/ Thumb">
-                <Setter Property="Background" Value="{DynamicResource SystemControlErrorTextForegroundBrush}" />
+                <Setter Property="Thumb.BorderBrush" Value="{DynamicResource SliderThumbDisabledBorderBrush}" />
             </Style>
         </Style>
 
diff --git a/src/Semi.Avalonia/Themes/Light/Slider.axaml b/src/Semi.Avalonia/Themes/Light/Slider.axaml
index c2134b0..01d5543 100644
--- a/src/Semi.Avalonia/Themes/Light/Slider.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Slider.axaml
@@ -14,10 +14,15 @@
     <BoxShadows x:Key="SliderThumbBoxShadow">0 0 1 1 #1A000000</BoxShadows>
 
     <sys:Double x:Key="SliderTickHorizontalHeight">4</sys:Double>
+    <sys:Double x:Key="SliderTickVerticalWidth">4</sys:Double>
     <SolidColorBrush x:Key="SliderTickForeground" Color="#C6CACD" />
     <SolidColorBrush x:Key="SliderThumbBackground" Color="White" />
     <SolidColorBrush x:Key="SliderThumbBorderBrush" Color="#0077FA" />
     <SolidColorBrush x:Key="SliderThumbPointeroverBorderBrush" Color="#0062D6" />
     <SolidColorBrush x:Key="SliderThumbPressedBorderBrush" Color="#004FB3" />
-    <Thickness x:Key="SliderThumbBorderThickness">4</Thickness>
+    <Thickness x:Key="SliderThumbBorderThickness">2</Thickness>
+
+    <SolidColorBrush x:Key="SliderTrackDisabledForeground" Color="#CBE7FE" />
+    <SolidColorBrush x:Key="SliderThumbDisabledBorderBrush" Color="#CBE7FE" />
+    <SolidColorBrush x:Key="SliderTrackDisabledBackground" Color="#F9F9F9" />
 </ResourceDictionary>