From fb6bdc1705dac2296b54b107d41e3b848da2a650 Mon Sep 17 00:00:00 2001
From: Dan Walmsley <dan@walms.co.uk>
Date: Thu, 28 May 2020 21:40:29 -0300
Subject: [PATCH] working horizontal slider.

---
 src/Avalonia.Themes.Fluent/Slider.xaml | 312 +++++++++++--------------
 1 file changed, 133 insertions(+), 179 deletions(-)

diff --git a/src/Avalonia.Themes.Fluent/Slider.xaml b/src/Avalonia.Themes.Fluent/Slider.xaml
index bb7a4cda8e..1bb76b1606 100644
--- a/src/Avalonia.Themes.Fluent/Slider.xaml
+++ b/src/Avalonia.Themes.Fluent/Slider.xaml
@@ -1,4 +1,9 @@
 <Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <Border Margin="20" Width="200">
+      <Slider Value="50" />
+    </Border>
+  </Design.PreviewWith>
   <Styles.Resources>
     <Thickness x:Key="SliderTopHeaderMargin">0,0,0,4</Thickness>
     <GridLength x:Key="SliderPreContentMargin">15</GridLength>
@@ -11,202 +16,151 @@
     <x:Double x:Key="SliderVerticalThumbWidth">20</x:Double>
     <x:Double x:Key="SliderVerticalThumbHeight">20</x:Double>
   </Styles.Resources>
-  <!-- Disabled State -->
-  <!-- <Style Selector="Slider:disabled /template/ ContentPresenter#HeaderContentPresenter">
-    <Setter Property="Foreground" Value="{DynamicResource SliderHeaderForegroundDisabled}" />
-  </Style> -->
-  <Style Selector="Slider:disabled /template/ Border#HorizontalDecreaseRect">
-    <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillDisabled}" />
-  </Style>
-  <Style Selector="Slider:disabled /template/ Border#HorizontalTrackRect">
-    <Setter Property="Background" Value="{DynamicResource SliderTrackFillDisabled}" />
-  </Style>
-  <Style Selector="Slider:disabled /template/ Border#VerticalDecreaseRect">
-    <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillDisabled}" />
-  </Style>
-  <Style Selector="Slider:disabled /template/ Border#VerticalTrackRect">
-    <Setter Property="Background" Value="{DynamicResource SliderTrackFillDisabled}" />
-  </Style>
-  <Style Selector="Slider:disabled /template/ Thumb#HorizontalThumb /template/ Border">
-    <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundDisabled}" />
-  </Style>
-  <Style Selector="Slider:disabled /template/ Thumb#VerticalThumb /template/ Border">
-    <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundDisabled}" />
-  </Style>
-  <!-- <Style Selector="Slider:disabled /template/ TickBar#TopTickBar">
-    <Setter Property="Background" Value="{DynamicResource SliderTickBarFillDisabled}" />
-  </Style>
-  <Style Selector="Slider:disabled /template/ TickBar#BottomTickBar">
-    <Setter Property="Background" Value="{DynamicResource SliderTickBarFillDisabled}" />
-  </Style>
-  <Style Selector="Slider:disabled /template/ TickBar#LeftTickBar">
-    <Setter Property="Background" Value="{DynamicResource SliderTickBarFillDisabled}" />
-  </Style>
-  <Style Selector="Slider:disabled /template/ TickBar#RightTickBar">
-    <Setter Property="Background" Value="{DynamicResource SliderTickBarFillDisabled}" />
-  </Style> -->
-  <Style Selector="Slider:disabled /template/ Grid#SliderContainer">
-    <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundDisabled}" />
-  </Style>
-  <!-- Pressed State -->
-  <Style Selector="Slider:pressed /template/ Border#HorizontalTrackRect">
-    <Setter Property="Background" Value="{DynamicResource SliderTrackFillPressed}" />
-  </Style>
-  <Style Selector="Slider:pressed /template/ Border#HorizontalTrackRect">
-    <Setter Property="Background" Value="{DynamicResource SliderTrackFillPressed}" />
-  </Style>
-  <Style Selector="Slider:pressed /template/ Border#VerticalTrackRect">
-    <Setter Property="Background" Value="{DynamicResource SliderTrackFillPressed}" />
-  </Style>
-  <Style Selector="Slider:pressed /template/ Thumb#HorizontalThumb /template/ Border">
-    <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPressed}" />
-  </Style>
-  <Style Selector="Slider:pressed /template/ Thumb#VerticalThumb /template/ Border">
-    <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPressed}" />
-  </Style>
-  <Style Selector="Slider:pressed /template/ Grid#SliderContainer">
-    <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundPressed}" />
-  </Style>
-  <Style Selector="Slider:pressed /template/ Border#HorizontalDecreaseRect">
-    <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPressed}" />
-  </Style>
-  <Style Selector="Slider:pressed /template/ Border#VerticalDecreaseRect">
-    <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPressed}" />
-  </Style>
-  <!-- PointerOver State -->
-  <Style Selector="Slider:pointerover /template/ Border#HorizontalTrackRect">
-    <Setter Property="Background" Value="{DynamicResource SliderTrackFillPointerOver}" />
-  </Style>
-  <Style Selector="Slider:pointerover /template/ Border#VerticalTrackRect">
-    <Setter Property="Background" Value="{DynamicResource SliderTrackFillPointerOver}" />
-  </Style>
-  <Style Selector="Slider:pointerover /template/ Thumb#HorizontalThumb /template/ Border">
-    <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPointerOver}" />
-  </Style>
-  <Style Selector="Slider:pointerover /template/ Thumb#VerticalThumb /template/ Border">
-    <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPointerOver}" />
-  </Style>
-  <Style Selector="Slider:pointerover /template/ Grid#SliderContainer">
-    <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundPointerOver}" />
-  </Style>
-  <Style Selector="Slider:pointerover /template/ Border#HorizontalDecreaseRect">
-    <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPointerOver}" />
-  </Style>
-  <Style Selector="Slider:pointerover /template/ Border#VerticalDecreaseRect">
-    <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPointerOver}" />
-  </Style>
-  
-  <!-- TODO: We don't have an equivalent for this afaik. -->
-  <!-- <VisualState Name="FocusDisengaged" />
-  <VisualState Name="FocusEngagedHorizontal">
-    <Storyboard>
-      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
-        <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
-      </ObjectAnimationUsingKeyFrames>
-      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HorizontalThumb" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
-        <DiscreteObjectKeyFrame KeyTime="0" Value="True" />
-      </ObjectAnimationUsingKeyFrames>
-    </Storyboard>
-  </VisualState>
-  <VisualState Name="FocusEngagedVertical">
-    <Storyboard>
-      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SliderContainer" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
-        <DiscreteObjectKeyFrame KeyTime="0" Value="False" />
-      </ObjectAnimationUsingKeyFrames>
-      <ObjectAnimationUsingKeyFrames Storyboard.TargetName="VerticalThumb" Storyboard.TargetProperty="(Control.IsTemplateFocusTarget)">
-        <DiscreteObjectKeyFrame KeyTime="0" Value="True" />
-      </ObjectAnimationUsingKeyFrames>
-    </Storyboard>
-     --> 
-    
-  <Style Selector="Slider:vertical /template/ Grid#VerticalTemplate">
-    <Setter Property="IsVisible" Value="True" />
-  </Style>
-  <Style Selector="Slider:vertical /template/ Grid#HorizontalTemplate">
-    <Setter Property="IsVisible" Value="False" />
-  </Style>
-  <Style Selector="Slider:horizontal /template/ Grid#HorizontalTemplate">
-    <Setter Property="IsVisible" Value="True" />
-  </Style>
-  <Style Selector="Slider:horizontal /template/ Grid#VerticalTemplate">
-    <Setter Property="IsVisible" Value="False" />
-  </Style>
-
-  <Style Selector="Slider">
+  <Style Selector="Slider:horizontal">
     <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}" />
-    <!-- TODO Non-existent properties in avalonia. -->
-    <!-- <Setter Property="ManipulationMode" Value="None" />
-    <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
-    <Setter Property="FocusVisualMargin" Value="-7,0,-7,0" />
-    <Setter Property="IsFocusEngagementEnabled" Value="True" /> -->
     <Setter Property="Template">
-      <Setter.Value>
-        <ControlTemplate>
-          <Border Margin="{TemplateBinding Padding}" CornerRadius="{DynamicResource ControlCornerRadius}">
-            <Border.Styles>
+      <ControlTemplate>
+        <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="Background" Value="{DynamicResource SliderThumbBackground}" />
+                <Setter Property="BorderThickness" Value="0" />                
                 <Setter Property="Template">
                   <Setter.Value>
                     <ControlTemplate>
-                      <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{DynamicResource SliderThumbCornerRadius}" />
+                      <Border Background="{TemplateBinding Background}"
+                              BorderBrush="{TemplateBinding BorderBrush}"
+                              BorderThickness="{TemplateBinding BorderThickness}"
+                              CornerRadius="{DynamicResource SliderThumbCornerRadius}" />
                     </ControlTemplate>
                   </Setter.Value>
                 </Setter>
               </Style>
-            </Border.Styles>
-            <Grid RowDefinitions="Auto,*">
-              <!-- TODO removed TextBlock.TextWrapping; bind Content -> Header and ContentTemplate -> HeaderTemplate -->
-              <ContentPresenter Name="HeaderContentPresenter" Grid.Row="0" TextBlock.FontWeight="{DynamicResource SliderHeaderThemeFontWeight}" TextBlock.Foreground="{DynamicResource SliderHeaderForeground}" Margin="{DynamicResource SliderTopHeaderMargin}"
-              IsVisible="False" />
-              <!-- TODO removed Control.IsTemplateFocusTarget -->
-              <Grid Name="SliderContainer" Grid.Row="1" Background="{DynamicResource SliderContainerBackground}">
-                <Grid Name="HorizontalTemplate" ColumnDefinitions="Auto,Auto,*" MinHeight="{DynamicResource SliderHorizontalHeight}">
-                  <Grid.RowDefinitions>
-                    <RowDefinition Height="{DynamicResource SliderPreContentMargin}" />
-                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="{DynamicResource SliderPostContentMargin}" />
-                  </Grid.RowDefinitions>
-                  <Border Name="HorizontalTrackRect" Background="{TemplateBinding Background}" Height="{DynamicResource SliderTrackThemeHeight}" Grid.Row="1" Grid.ColumnSpan="3" CornerRadius="{Binding CornerRadius}" />
-                  <Border Name="HorizontalDecreaseRect" Background="{TemplateBinding Foreground}" Grid.Row="1" CornerRadius="{Binding CornerRadius}" />
-                  <!-- TODO TickBars are not implemented yet. -->
-                  <!--
-                <TickBar Name="TopTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Height="{DynamicResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Bottom" Margin="0,0,0,4" Grid.ColumnSpan="3" />
-                <TickBar Name="HorizontalInlineTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderInlineTickBarFill}" Height="{DynamicResource SliderTrackThemeHeight}" Grid.Row="1" Grid.ColumnSpan="3" />
-                <TickBar Name="BottomTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Height="{DynamicResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Top" Margin="0,4,0,0" Grid.Row="2" Grid.ColumnSpan="3" />
-                -->
-                  <!-- TODO Removed FocusVisualMargin and AutomationProperties.AccessibilityView -->
-                  <Thumb Name="HorizontalThumb" Classes="SliderThumbStyle" DataContext="{TemplateBinding Value}" Height="{DynamicResource SliderHorizontalThumbHeight}" Width="{DynamicResource SliderHorizontalThumbWidth}" Grid.Row="0"
-                  Grid.RowSpan="3" Grid.Column="1" />
-                </Grid>
-                <Grid Name="VerticalTemplate" RowDefinitions="*,Auto,Auto" MinWidth="{DynamicResource SliderVerticalWidth}">
-                  <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="{DynamicResource SliderPreContentMargin}" />
-                    <ColumnDefinition Width="Auto" />
-                    <ColumnDefinition Width="{DynamicResource SliderPostContentMargin}" />
-                  </Grid.ColumnDefinitions>
-                  <Border Name="VerticalTrackRect" Background="{TemplateBinding Background}" Width="{DynamicResource SliderTrackThemeHeight}" Grid.Column="1" Grid.RowSpan="3" CornerRadius="{Binding CornerRadius}" />
-                  <Border Name="VerticalDecreaseRect" Background="{TemplateBinding Foreground}" Grid.Column="1" Grid.Row="2" CornerRadius="{Binding CornerRadius}" />
-                  <!-- TODO TickBars are not implemented yet. -->
-                  <!-- 
-                <TickBar Name="LeftTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Width="{DynamicResource SliderOutsideTickBarThemeHeight}" HorizontalAlignment="Right" Margin="0,0,4,0" Grid.RowSpan="3" />
-                <TickBar Name="VerticalInlineTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderInlineTickBarFill}" Width="{DynamicResource SliderTrackThemeHeight}" Grid.Column="1" Grid.RowSpan="3" />
-                <TickBar Name="RightTickBar" Visibility="Collapsed" Fill="{DynamicResource SliderTickBarFill}" Width="{DynamicResource SliderOutsideTickBarThemeHeight}" HorizontalAlignment="Left" Margin="4,0,0,0" Grid.Column="2" Grid.RowSpan="3" /> 
-                -->
-                  <!-- TODO Removed FocusVisualMargin and AutomationProperties.AccessibilityView-->
-                  <Thumb Name="VerticalThumb" Classes="SliderThumbStyle" DataContext="{TemplateBinding Value}" Width="{DynamicResource SliderVerticalThumbWidth}" Height="{DynamicResource SliderVerticalThumbHeight}" Grid.Row="1" Grid.Column="0"
+            </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>
+
+                <Grid.RowDefinitions>
+                  <RowDefinition Height="{DynamicResource SliderPreContentMargin}" />
+                  <RowDefinition Height="Auto" />
+                  <RowDefinition Height="{DynamicResource SliderPostContentMargin}" />
+                </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" />
-                </Grid>
+              <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>
+                          <Border Name="TrackBackground" Background="{TemplateBinding Background}" CornerRadius="{DynamicResource ControlCornerRadius}" Height="{DynamicResource SliderTrackThemeHeight}" VerticalAlignment="Center"/>
+                        </ControlTemplate>
+                      </RepeatButton.Template>
+                    </RepeatButton>
+                  </Track.DecreaseButton>
+                  <Track.IncreaseButton>
+                    <RepeatButton Name="PART_IncreaseButton" Margin="0" Padding="0" Background="{TemplateBinding Background}"
+                                  Classes="repeattrack">
+                      <RepeatButton.Template>
+                        <ControlTemplate>
+                          <Border Name="TrackBackground" Background="{TemplateBinding Background}" CornerRadius="{DynamicResource ControlCornerRadius}" Height="{DynamicResource SliderTrackThemeHeight}" VerticalAlignment="Center"/>
+                        </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>
-          </Border>
-        </ControlTemplate>
-      </Setter.Value>
+          </Grid>
+        </Border>
+      </ControlTemplate>
     </Setter>
   </Style>
+
+  <Style Selector="Slider /template/ Track#PART_Track">
+    <Setter Property="Minimum" Value="{TemplateBinding Minimum}"/>
+    <Setter Property="Maximum" Value="{TemplateBinding Maximum}"/>
+    <Setter Property="Value" Value="{TemplateBinding Value, Mode=TwoWay}"/>
+  </Style>
+
+  <!-- Normal State -->
+  <Style Selector="Slider /template/ Thumb.SliderThumbStyle">
+    <Setter Property="Background" Value="{DynamicResource SliderThumbBackground}" />
+  </Style>
+  
+  <Style Selector="Slider /template/ Grid#SliderContainer">
+    <Setter Property="Background" Value="{DynamicResource SliderContainerBackground}" />
+  </Style>  
+
+  <!-- Pressed State -->
+
+  <!-- Disabled State -->
+
+  <!-- PointerOver State -->
+  <Style Selector="Slider:pointerover /template/ RepeatButton#PART_IncreaseButton">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackFillPointerOver}" />
+  </Style>  
+
+  <Style Selector="Slider:pointerover /template/ Thumb.SliderThumbStyle">
+    <Setter Property="Background" Value="{DynamicResource SliderThumbBackgroundPointerOver}" />
+  </Style>
+
+  <Style Selector="Slider:pointerover /template/ Grid#SliderContainer">
+    <Setter Property="Background" Value="{DynamicResource SliderContainerBackgroundPointerOver}" />
+  </Style>
+
+  <Style Selector="Slider:pointerover /template/ RepeatButton#PART_DecreaseButton">
+    <Setter Property="Background" Value="{DynamicResource SliderTrackValueFillPointerOver}" />
+  </Style>
 </Styles>