From abce7e9d79cf452bd8ea74f335e16cc8de0cf436 Mon Sep 17 00:00:00 2001
From: Jumar Macato <hikari.netto23@gmail.com>
Date: Fri, 29 May 2020 11:12:58 +0800
Subject: [PATCH] add vertical style

---
 src/Avalonia.Controls/Slider.cs        |  15 +--
 src/Avalonia.Themes.Fluent/Slider.xaml | 169 ++++++++++++++-----------
 2 files changed, 99 insertions(+), 85 deletions(-)

diff --git a/src/Avalonia.Controls/Slider.cs b/src/Avalonia.Controls/Slider.cs
index 0155ff211a..b218c003c2 100644
--- a/src/Avalonia.Controls/Slider.cs
+++ b/src/Avalonia.Controls/Slider.cs
@@ -97,18 +97,9 @@ namespace Avalonia.Controls
                 _increaseButton.Click -= IncreaseClick;
             }
 
-            // _decreaseButton = e.NameScope.Find<Button>("PART_DecreaseButton");
-
-            if (Orientation == Orientation.Horizontal)
-            {
-                // _track = e.NameScope.Find<Track>("HorizontalThumb");
-            }
-            else
-            {
-                // _track = e.NameScope.Find<Track>("VerticalThumb");
-            }
-
-            // _increaseButton = e.NameScope.Find<Button>("PART_IncreaseButton");
+            _decreaseButton = e.NameScope.Find<Button>("PART_DecreaseButton");
+            _track = e.NameScope.Find<Track>("PART_Track");        
+            _increaseButton = e.NameScope.Find<Button>("PART_IncreaseButton");
 
             if (_decreaseButton != null)
             {
diff --git a/src/Avalonia.Themes.Fluent/Slider.xaml b/src/Avalonia.Themes.Fluent/Slider.xaml
index 13080e6212..75f3e97367 100644
--- a/src/Avalonia.Themes.Fluent/Slider.xaml
+++ b/src/Avalonia.Themes.Fluent/Slider.xaml
@@ -1,4 +1,5 @@
-<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<Styles xmlns="https://github.com/avaloniaui" 
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Design.PreviewWith>
     <Border Margin="20" Width="200" Height="200">
       <DockPanel LastChildFill="True">
@@ -7,7 +8,7 @@
           <Slider IsEnabled="False" Value="50" />
         </StackPanel>
         <StackPanel Spacing="10" Orientation="Horizontal">
-          <Slider Value="50"  Orientation="Vertical" />
+          <Slider Value="50" Orientation="Vertical" />
           <Slider IsEnabled="False" Orientation="Vertical" Value="50" />
         </StackPanel>
       </DockPanel>
@@ -25,6 +26,18 @@
     <x:Double x:Key="SliderVerticalThumbWidth">20</x:Double>
     <x:Double x:Key="SliderVerticalThumbHeight">20</x:Double>
   </Styles.Resources>
+
+  <Style Selector="Thumb.SliderThumbStyle">
+    <Setter Property="BorderThickness" Value="0" />
+    <Setter Property="Template">
+      <Setter.Value>
+        <ControlTemplate>
+          <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{DynamicResource SliderThumbCornerRadius}" />
+        </ControlTemplate>
+      </Setter.Value>
+    </Setter>
+  </Style>
+
   <Style Selector="Slider:horizontal">
     <Setter Property="Background" Value="{DynamicResource SliderTrackFill}" />
     <Setter Property="BorderThickness" Value="{DynamicResource SliderBorderThemeThickness}" />
@@ -33,41 +46,11 @@
     <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
     <Setter Property="Template">
       <ControlTemplate>
-        <Border BorderThickness="{TemplateBinding BorderThickness}"
-                BorderBrush="{TemplateBinding BorderBrush}"
-                CornerRadius="{DynamicResource ControlCornerRadius}">
-
+        <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{DynamicResource ControlCornerRadius}">
           <Grid Name="grid" Margin="{TemplateBinding Padding}" RowDefinitions="Auto, *">
-            <Grid.Styles>
-              <Style Selector="Thumb.SliderThumbStyle">
-                <Setter Property="BorderThickness" Value="0" />
-                <Setter Property="Template">
-                  <Setter.Value>
-                    <ControlTemplate>
-                      <Border Background="{TemplateBinding Background}"
-                              BorderBrush="{TemplateBinding BorderBrush}"
-                              BorderThickness="{TemplateBinding BorderThickness}"
-                              CornerRadius="{DynamicResource SliderThumbCornerRadius}" />
-                    </ControlTemplate>
-                  </Setter.Value>
-                </Setter>
-              </Style>
-            </Grid.Styles>
-            <ContentPresenter x:Name="HeaderContentPresenter"
-                             Grid.Row="0"
-                           
-                             TextBlock.FontWeight="{DynamicResource SliderHeaderThemeFontWeight}"
-                             TextBlock.Foreground="{DynamicResource SliderHeaderForeground}"
-                             Margin="{DynamicResource SliderTopHeaderMargin}" />
-            <Grid x:Name="SliderContainer"
-                              Grid.Row="1">
-              <Grid x:Name="HorizontalTemplate" MinHeight="{DynamicResource SliderHorizontalHeight}">
-
-                <Grid.ColumnDefinitions>
-                  <ColumnDefinition Width="Auto" />
-                  <ColumnDefinition Width="Auto" />
-                  <ColumnDefinition Width="*" />
-                </Grid.ColumnDefinitions>
+            <ContentPresenter x:Name="HeaderContentPresenter" Grid.Row="0" TextBlock.FontWeight="{DynamicResource SliderHeaderThemeFontWeight}" TextBlock.Foreground="{DynamicResource SliderHeaderForeground}" Margin="{DynamicResource SliderTopHeaderMargin}" />
+            <Grid x:Name="SliderContainer" Grid.Row="1">
+              <Grid x:Name="HorizontalTemplate" ColumnDefinitions="Auto,Auto,*" MinHeight="{DynamicResource SliderHorizontalHeight}">
 
                 <Grid.RowDefinitions>
                   <RowDefinition Height="{DynamicResource SliderPreContentMargin}" />
@@ -76,58 +59,98 @@
                 </Grid.RowDefinitions>
 
                 <!--
-              <TickBar x:Name="TopTickBar"
-                  Visibility="Collapsed"
-                  Fill="{DynamicResource SliderTickBarFill}"
-                  Height="{DynamicResource SliderOutsideTickBarThemeHeight}"
-                  VerticalAlignment="Bottom"
-                  Margin="0,0,0,4"
-                  Grid.ColumnSpan="3" />
-              <TickBar x:Name="HorizontalInlineTickBar"
-                  Visibility="Collapsed"
-                  Fill="{DynamicResource SliderInlineTickBarFill}"
-                  Height="{DynamicResource SliderTrackThemeHeight}"
-                  Grid.Row="1"
-                  Grid.ColumnSpan="3" />
-              <TickBar x:Name="BottomTickBar"
-                  Visibility="Collapsed"
-                  Fill="{DynamicResource SliderTickBarFill}"
-                  Height="{DynamicResource SliderOutsideTickBarThemeHeight}"
-                  VerticalAlignment="Top"
-                  Margin="0,4,0,0"
-                  Grid.Row="2"
-                  Grid.ColumnSpan="3" /> -->
-
-                <Track Name="PART_Track"
-                       Grid.Row="1"
-                       Grid.ColumnSpan="3"
-                       
-                       Orientation="Horizontal">
+                <TickBar x:Name="TopTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Height="{DynamicResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Bottom" Margin="0,0,0,4" Grid.ColumnSpan="3" />
+                <TickBar x:Name="HorizontalInlineTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderInlineTickBarFill}" Height="{DynamicResource SliderTrackThemeHeight}" Grid.Row="1" Grid.ColumnSpan="3" />
+                <TickBar x:Name="BottomTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Height="{DynamicResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Top" Margin="0,4,0,0" Grid.Row="2" Grid.ColumnSpan="3" />
+                -->
+
+                <Track Name="PART_Track" Grid.Row="1" Grid.ColumnSpan="3" Orientation="Horizontal">
+                  <Track.DecreaseButton>
+                    <RepeatButton Name="PART_DecreaseButton" Background="{TemplateBinding Foreground}">
+                      <RepeatButton.Template>
+                        <ControlTemplate>
+                          <Grid>
+                            <Border Name="FocusTarget" Background="Transparent" Margin="0,-10"/>
+                            <Border Name="TrackBackground" Background="{TemplateBinding Background}" CornerRadius="{DynamicResource ControlCornerRadius}" Height="{DynamicResource SliderTrackThemeHeight}" VerticalAlignment="Center"/>
+                          </Grid>
+                        </ControlTemplate>
+                      </RepeatButton.Template>
+                    </RepeatButton>
+                  </Track.DecreaseButton>
+                  <Track.IncreaseButton>
+                    <RepeatButton Name="PART_IncreaseButton" Background="{TemplateBinding Background}">
+                      <RepeatButton.Template>
+                        <ControlTemplate>
+                          <Grid>
+                            <Border Name="FocusTarget" Background="Transparent" Margin="0,-10"/>
+                            <Border Name="TrackBackground" Background="{TemplateBinding Background}" CornerRadius="{DynamicResource ControlCornerRadius}" Height="{DynamicResource SliderTrackThemeHeight}" VerticalAlignment="Center"/>
+                          </Grid>
+                        </ControlTemplate>
+                      </RepeatButton.Template>
+                    </RepeatButton>
+                  </Track.IncreaseButton>
+                  <Thumb Classes="SliderThumbStyle" Name="thumb" Margin="0" Padding="0" DataContext="{TemplateBinding Value}" Height="{DynamicResource SliderHorizontalThumbHeight}" Width="{DynamicResource SliderHorizontalThumbWidth}" />
+                </Track>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+
+  <Style Selector="Slider:vertical">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackFill}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource SliderBorderThemeThickness}" />
+    <Setter Property="Foreground" Value="{DynamicResource SliderTrackValueFill}" />
+    <Setter Property="FontFamily" Value="{DynamicResource ContentControlThemeFontFamily}" />
+    <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{DynamicResource ControlCornerRadius}">
+          <Grid Name="grid" Margin="{TemplateBinding Padding}" RowDefinitions="Auto, *">
+            <ContentPresenter x:Name="HeaderContentPresenter" Grid.Row="0" TextBlock.FontWeight="{DynamicResource SliderHeaderThemeFontWeight}" TextBlock.Foreground="{DynamicResource SliderHeaderForeground}" Margin="{DynamicResource SliderTopHeaderMargin}" />
+            <Grid x:Name="SliderContainer" Grid.Row="1">
+              <Grid x:Name="VerticalTemplate" RowDefinitions="*,Auto,Auto" MinWidth="{DynamicResource SliderVerticalWidth}">
+
+                <Grid.ColumnDefinitions>
+                  <ColumnDefinition Width="{DynamicResource SliderPreContentMargin}" />
+                  <ColumnDefinition Width="Auto" />
+                  <ColumnDefinition Width="{DynamicResource SliderPostContentMargin}" />
+                </Grid.ColumnDefinitions>
+
+                <!-- 
+                <TickBar x:Name="LeftTickBar" Visibility="Collapsed" Fill="{ThemeResource SliderTickBarFill}" Width="{ThemeResource SliderOutsideTickBarThemeHeight}" HorizontalAlignment="Right" Margin="0,0,4,0" Grid.RowSpan="3" />
+                <TickBar x:Name="VerticalInlineTickBar" Visibility="Collapsed" Fill="{ThemeResource SliderInlineTickBarFill}" Width="{ThemeResource SliderTrackThemeHeight}" Grid.Column="1" Grid.RowSpan="3" />
+                <TickBar x:Name="RightTickBar" Visibility="Collapsed" Fill="{ThemeResource SliderTickBarFill}" Width="{ThemeResource SliderOutsideTickBarThemeHeight}" HorizontalAlignment="Left" Margin="4,0,0,0" Grid.Column="2" Grid.RowSpan="3" /> 
+                -->
+
+                <Track Name="PART_Track" Grid.Column="1" Grid.ColumnSpan="1" Grid.RowSpan="3" Orientation="Vertical">
                   <Track.DecreaseButton>
                     <RepeatButton Name="PART_DecreaseButton" Background="{TemplateBinding Foreground}">
                       <RepeatButton.Template>
                         <ControlTemplate>
-                          <Border Name="TrackBackground" Background="{TemplateBinding Background}" CornerRadius="{DynamicResource ControlCornerRadius}" Height="{DynamicResource SliderTrackThemeHeight}" VerticalAlignment="Center"/>
+                          <Grid>
+                            <Border Name="FocusTarget" Background="Transparent" Margin="0,-10"/>
+                            <Border Name="TrackBackground" Background="{TemplateBinding Background}" CornerRadius="{DynamicResource ControlCornerRadius}" Width="{DynamicResource SliderTrackThemeHeight}" HorizontalAlignment="Center"/>
+                          </Grid>
                         </ControlTemplate>
                       </RepeatButton.Template>
                     </RepeatButton>
                   </Track.DecreaseButton>
                   <Track.IncreaseButton>
-                    <RepeatButton Name="PART_IncreaseButton" Margin="0" Padding="0" Background="{TemplateBinding Background}"
-                                  Classes="repeattrack">
+                    <RepeatButton Name="PART_IncreaseButton" Background="{TemplateBinding Background}">
                       <RepeatButton.Template>
                         <ControlTemplate>
-                          <Border Name="TrackBackground" Background="{TemplateBinding Background}" CornerRadius="{DynamicResource ControlCornerRadius}" Height="{DynamicResource SliderTrackThemeHeight}" VerticalAlignment="Center"/>
+                          <Grid>
+                            <Border Name="FocusTarget" Background="Transparent" Margin="0,-10"/>
+                            <Border Name="TrackBackground" Background="{TemplateBinding Background}" CornerRadius="{DynamicResource ControlCornerRadius}" Width="{DynamicResource SliderTrackThemeHeight}" HorizontalAlignment="Center"/>
+                          </Grid>
                         </ControlTemplate>
                       </RepeatButton.Template>
                     </RepeatButton>
                   </Track.IncreaseButton>
-                  <Thumb Classes="SliderThumbStyle"
-                         Name="thumb"
-                         Margin="0" Padding="0"
-                         DataContext="{TemplateBinding Value}"
-                         Height="{DynamicResource SliderHorizontalThumbHeight}"
-                         Width="{DynamicResource SliderHorizontalThumbWidth}" />
+                  <Thumb Classes="SliderThumbStyle" Name="thumb" Margin="0" Padding="0" DataContext="{TemplateBinding Value}" Height="{DynamicResource SliderVerticalThumbHeight}" Width="{DynamicResource SliderVerticalThumbWidth}" />
                 </Track>
               </Grid>
             </Grid>