From 5c411f625868894863d750b582a127b3ebd5456a Mon Sep 17 00:00:00 2001
From: leo <longshuang@msn.cn>
Date: Fri, 25 Aug 2023 17:08:50 +0800
Subject: [PATCH] style<Slider>: customize slider style

---
 src/Resources/Controls.xaml      |   1 +
 src/Resources/Styles/Slider.xaml | 125 +++++++++++++++++++++++++++++++
 src/Views/Preference.xaml        |  11 ++-
 3 files changed, 131 insertions(+), 6 deletions(-)
 create mode 100644 src/Resources/Styles/Slider.xaml

diff --git a/src/Resources/Controls.xaml b/src/Resources/Controls.xaml
index a4ff0461..30a338bc 100644
--- a/src/Resources/Controls.xaml
+++ b/src/Resources/Controls.xaml
@@ -13,6 +13,7 @@
         <ResourceDictionary Source="pack://application:,,,/Resources/Styles/RadioButton.xaml"/>
         <ResourceDictionary Source="pack://application:,,,/Resources/Styles/ScrollBar.xaml"/>
         <ResourceDictionary Source="pack://application:,,,/Resources/Styles/ScrollViewer.xaml"/>
+        <ResourceDictionary Source="pack://application:,,,/Resources/Styles/Slider.xaml"/>
         <ResourceDictionary Source="pack://application:,,,/Resources/Styles/TabControl.xaml"/>
         <ResourceDictionary Source="pack://application:,,,/Resources/Styles/TextBlock.xaml"/>
         <ResourceDictionary Source="pack://application:,,,/Resources/Styles/TextBox.xaml"/>
diff --git a/src/Resources/Styles/Slider.xaml b/src/Resources/Styles/Slider.xaml
new file mode 100644
index 00000000..c54077e5
--- /dev/null
+++ b/src/Resources/Styles/Slider.xaml
@@ -0,0 +1,125 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Style x:Key="Style.Slider.RepeatButton" TargetType="{x:Type RepeatButton}">
+        <Setter Property="SnapsToDevicePixels" Value="true" />
+        <Setter Property="OverridesDefaultStyle" Value="true" />
+        <Setter Property="IsTabStop" Value="false" />
+        <Setter Property="Focusable" Value="false" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type RepeatButton}">
+                    <Border Background="Transparent">
+                        <Border Background="{TemplateBinding Background}" Height="2"/>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="Style.Slider.Thumb" TargetType="{x:Type Thumb}">
+        <Setter Property="SnapsToDevicePixels" Value="true" />
+        <Setter Property="OverridesDefaultStyle" Value="true" />
+        <Setter Property="Height" Value="12" />
+        <Setter Property="Width" Value="12" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type Thumb}">
+                    <Ellipse x:Name="Ellipse" StrokeThickness="1" Fill="{DynamicResource Brush.Accent1}"/>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <ControlTemplate x:Key="Slider.Horizontal" TargetType="{x:Type Slider}">
+        <Grid>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
+                <RowDefinition Height="Auto" />
+            </Grid.RowDefinitions>
+
+            <TickBar Grid.Row="0" x:Name="TopTick" SnapsToDevicePixels="True" Fill="{DynamicResource Brush.FG2}" Placement="Top" Height="4" Visibility="Collapsed"/>
+
+            <Track Grid.Row="1" x:Name="PART_Track">
+                <Track.DecreaseRepeatButton>
+                    <RepeatButton Style="{StaticResource Style.Slider.RepeatButton}" Command="Slider.DecreaseLarge" Background="{DynamicResource Brush.Accent1}"/>
+                </Track.DecreaseRepeatButton>
+                <Track.Thumb>
+                    <Thumb Style="{StaticResource Style.Slider.Thumb}" />
+                </Track.Thumb>
+                <Track.IncreaseRepeatButton>
+                    <RepeatButton Style="{StaticResource Style.Slider.RepeatButton}" Command="Slider.IncreaseLarge" Background="Gray" />
+                </Track.IncreaseRepeatButton>
+            </Track>
+
+            <TickBar Grid.Row="2" x:Name="BottomTick" SnapsToDevicePixels="True" Fill="{DynamicResource Brush.FG2}" Placement="Bottom" Height="4" Visibility="Collapsed" />
+        </Grid>
+        <ControlTemplate.Triggers>
+            <Trigger Property="TickPlacement" Value="TopLeft">
+                <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
+            </Trigger>
+            <Trigger Property="TickPlacement" Value="BottomRight">
+                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
+            </Trigger>
+            <Trigger Property="TickPlacement" Value="Both">
+                <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
+                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
+            </Trigger>
+        </ControlTemplate.Triggers>
+    </ControlTemplate>
+
+    <ControlTemplate x:Key="Slider.Vertical" TargetType="{x:Type Slider}">
+        <Grid>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" MinWidth="{TemplateBinding MinWidth}" />
+                <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+            
+            <TickBar Grid.Column="0" x:Name="TopTick" SnapsToDevicePixels="True" Fill="{DynamicResource Brush.FG2}" Placement="Left" Width="4" Visibility="Collapsed"/>
+
+            <Track Grid.Column="1" x:Name="PART_Track">
+                <Track.DecreaseRepeatButton>
+                    <RepeatButton Style="{StaticResource Style.Slider.RepeatButton}" Command="Slider.DecreaseLarge" Background="{DynamicResource Brush.Accent1}"/>
+                </Track.DecreaseRepeatButton>
+                <Track.Thumb>
+                    <Thumb Style="{StaticResource Style.Slider.Thumb}" />
+                </Track.Thumb>
+                <Track.IncreaseRepeatButton>
+                    <RepeatButton Style="{StaticResource Style.Slider.RepeatButton}" Command="Slider.IncreaseLarge" Background="Gray" />
+                </Track.IncreaseRepeatButton>
+            </Track>
+
+            <TickBar Grid.Column="2" x:Name="BottomTick" SnapsToDevicePixels="True" Fill="{DynamicResource Brush.FG2}" Placement="Right" Width="4" Visibility="Collapsed" />
+        </Grid>
+        <ControlTemplate.Triggers>
+            <Trigger Property="TickPlacement" Value="TopLeft">
+                <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
+            </Trigger>
+            <Trigger Property="TickPlacement" Value="BottomRight">
+                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
+            </Trigger>
+            <Trigger Property="TickPlacement" Value="Both">
+                <Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
+                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
+            </Trigger>
+        </ControlTemplate.Triggers>
+    </ControlTemplate>
+
+    <Style TargetType="{x:Type Slider}">
+        <Setter Property="SnapsToDevicePixels" Value="true" />
+        <Setter Property="OverridesDefaultStyle" Value="true" />
+        <Style.Triggers>
+            <Trigger Property="Orientation" Value="Horizontal">
+                <Setter Property="MinWidth" Value="104" />
+                <Setter Property="MinHeight" Value="21" />
+                <Setter Property="Template" Value="{StaticResource Slider.Horizontal}" />
+            </Trigger>
+            <Trigger Property="Orientation" Value="Vertical">
+                <Setter Property="MinWidth" Value="21" />
+                <Setter Property="MinHeight" Value="104" />
+                <Setter Property="Template" Value="{StaticResource Slider.Vertical}" />
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Views/Preference.xaml b/src/Views/Preference.xaml
index 26fd6b03..eb4e075b 100644
--- a/src/Views/Preference.xaml
+++ b/src/Views/Preference.xaml
@@ -140,8 +140,7 @@
                     <Grid Grid.Row="3" Grid.Column="1">
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="*"/>
-                            <ColumnDefinition Width="4"/>
-                            <ColumnDefinition Width="56"/>
+                            <ColumnDefinition Width="48"/>
                         </Grid.ColumnDefinitions>
 
                         <Slider
@@ -152,10 +151,10 @@
                             Value="{Binding Source={x:Static models:Preference.Instance}, Path=General.MaxHistoryCommits, Mode=TwoWay}">
                         </Slider>
 
-                        <controls:TextEdit
-                            Grid.Column="2"
-                            Height="24"
-                            IsReadOnly="True"
+                        <TextBlock 
+                            Grid.Column="1" 
+                            HorizontalAlignment="Right" VerticalAlignment="Center" 
+                            Foreground="{DynamicResource Brush.FG1}"
                             Text="{Binding Source={x:Static models:Preference.Instance}, Path=General.MaxHistoryCommits}"/>
                     </Grid>