From dedc9c9f8967ab58c39b37e16fa461f6f9ab213a Mon Sep 17 00:00:00 2001
From: Steven Kirk <grokys@gmail.com>
Date: Tue, 23 Feb 2021 15:12:04 +0100
Subject: [PATCH 1/5] Fix Slider focus.

Previously the `Slider` itself was not focusable but the repeat buttons were - instead make the slider focusable and the repeat buttons unfocusable.
---
 src/Avalonia.Controls/Slider.cs                 | 1 +
 src/Avalonia.Themes.Default/Slider.xaml         | 1 +
 src/Avalonia.Themes.Fluent/Controls/Slider.xaml | 8 ++++----
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/Avalonia.Controls/Slider.cs b/src/Avalonia.Controls/Slider.cs
index 74de33529a..849b768221 100644
--- a/src/Avalonia.Controls/Slider.cs
+++ b/src/Avalonia.Controls/Slider.cs
@@ -93,6 +93,7 @@ namespace Avalonia.Controls
         static Slider()
         {
             PressedMixin.Attach<Slider>();
+            FocusableProperty.OverrideDefaultValue<Slider>(true);
             OrientationProperty.OverrideDefaultValue(typeof(Slider), Orientation.Horizontal);
             Thumb.DragStartedEvent.AddClassHandler<Slider>((x, e) => x.OnThumbDragStarted(e), RoutingStrategies.Bubble);
             Thumb.DragCompletedEvent.AddClassHandler<Slider>((x, e) => x.OnThumbDragCompleted(e),
diff --git a/src/Avalonia.Themes.Default/Slider.xaml b/src/Avalonia.Themes.Default/Slider.xaml
index ba4b1ee998..be698608c4 100644
--- a/src/Avalonia.Themes.Default/Slider.xaml
+++ b/src/Avalonia.Themes.Default/Slider.xaml
@@ -80,6 +80,7 @@
   </Style>
   <Style Selector="Slider /template/ RepeatButton.repeattrack">
     <Setter Property="Background" Value="Transparent"/>
+    <Setter Property="Focusable" Value="False"/>
     <Setter Property="Foreground" Value="{DynamicResource ThemeBorderLowBrush}"/>
     <Setter Property="Template">
         <ControlTemplate>
diff --git a/src/Avalonia.Themes.Fluent/Controls/Slider.xaml b/src/Avalonia.Themes.Fluent/Controls/Slider.xaml
index d70eb1abe3..1f25b7d90d 100644
--- a/src/Avalonia.Themes.Fluent/Controls/Slider.xaml
+++ b/src/Avalonia.Themes.Fluent/Controls/Slider.xaml
@@ -64,7 +64,7 @@
                   <TickBar Name="BottomTickBar" Placement="Bottom" 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}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                      <RepeatButton Name="PART_DecreaseButton" Background="{TemplateBinding Foreground}" Focusable="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                         <RepeatButton.Template>
                           <ControlTemplate>
                             <Grid>
@@ -76,7 +76,7 @@
                       </RepeatButton>
                     </Track.DecreaseButton>
                     <Track.IncreaseButton>
-                      <RepeatButton Name="PART_IncreaseButton" Background="{TemplateBinding Background}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                      <RepeatButton Name="PART_IncreaseButton" Background="{TemplateBinding Background}" Focusable="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                         <RepeatButton.Template>
                           <ControlTemplate>
                             <Grid>
@@ -126,7 +126,7 @@
                   <TickBar Name="RightTickBar" Placement="Right" Width="{DynamicResource 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}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
+                      <RepeatButton Name="PART_DecreaseButton" Background="{TemplateBinding Foreground}" Focusable="False" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                         <RepeatButton.Template>
                           <ControlTemplate>
                             <Grid>
@@ -138,7 +138,7 @@
                       </RepeatButton>
                     </Track.DecreaseButton>
                     <Track.IncreaseButton>
-                      <RepeatButton Name="PART_IncreaseButton" Background="{TemplateBinding Background}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
+                      <RepeatButton Name="PART_IncreaseButton" Background="{TemplateBinding Background}" Focusable="False" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                         <RepeatButton.Template>
                           <ControlTemplate>
                             <Grid>

From 4327c36c664cec13e639eaf680e60e8bf45c0148 Mon Sep 17 00:00:00 2001
From: Steven Kirk <grokys@gmail.com>
Date: Tue, 23 Feb 2021 15:42:06 +0100
Subject: [PATCH 2/5] Fix slider keyboard interaction.

- Now `Slider` can be itself focused, handle the key events from the control, not the `Track`.
- Reverse the direction in which the page up/down keys move the slider in order to work as expected
- Make up/down arrows work as well as left/right

Fixes #4205
---
 src/Avalonia.Controls/Slider.cs | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/Avalonia.Controls/Slider.cs b/src/Avalonia.Controls/Slider.cs
index 849b768221..b3dfcf3228 100644
--- a/src/Avalonia.Controls/Slider.cs
+++ b/src/Avalonia.Controls/Slider.cs
@@ -83,7 +83,6 @@ namespace Avalonia.Controls
         private IDisposable _increaseButtonSubscription;
         private IDisposable _increaseButtonReleaseDispose;
         private IDisposable _pointerMovedDispose;
-        private IDisposable _trackOnKeyDownDispose;
 
         private const double Tolerance = 0.0001;
 
@@ -166,7 +165,6 @@ namespace Avalonia.Controls
             _increaseButtonSubscription?.Dispose();
             _increaseButtonReleaseDispose?.Dispose();
             _pointerMovedDispose?.Dispose();
-            _trackOnKeyDownDispose?.Dispose();
             
             _decreaseButton = e.NameScope.Find<Button>("PART_DecreaseButton");
             _track = e.NameScope.Find<Track>("PART_Track");
@@ -175,7 +173,6 @@ namespace Avalonia.Controls
             if (_track != null)
             {
                 _track.IsThumbDragHandled = true;
-                _trackOnKeyDownDispose = _track.AddDisposableHandler(KeyDownEvent, TrackOnKeyDown);
             }
 
             if (_decreaseButton != null)
@@ -193,26 +190,32 @@ namespace Avalonia.Controls
             _pointerMovedDispose = this.AddDisposableHandler(PointerMovedEvent, TrackMoved, RoutingStrategies.Tunnel);
         }
 
-        private void TrackOnKeyDown(object sender, KeyEventArgs e)
+        protected override void OnKeyDown(KeyEventArgs e)
         {
-            if (e.KeyModifiers != KeyModifiers.None) return;
+            base.OnKeyDown(e);
+
+            if (e.Handled || e.KeyModifiers != KeyModifiers.None) return;
+
+            var handled = true;
 
             switch (e.Key)
             {
+                case Key.Down:
                 case Key.Left:
                     MoveToNextTick(-SmallChange);
                     break;
 
+                case Key.Up:
                 case Key.Right:
                     MoveToNextTick(SmallChange);
                     break;
 
                 case Key.PageUp:
-                    MoveToNextTick(-LargeChange);
+                    MoveToNextTick(LargeChange);
                     break;
 
                 case Key.PageDown:
-                    MoveToNextTick(LargeChange);
+                    MoveToNextTick(-LargeChange);
                     break;
 
                 case Key.Home:
@@ -222,7 +225,13 @@ namespace Avalonia.Controls
                 case Key.End:
                     Value = Maximum;
                     break;
+
+                default:
+                    handled = false;
+                    break;
             }
+
+            e.Handled = handled;
         }
             
         private void MoveToNextTick(double direction)

From 012e28f52bde95e82b052516691752e0524e3af0 Mon Sep 17 00:00:00 2001
From: Steven Kirk <grokys@gmail.com>
Date: Tue, 23 Feb 2021 16:14:32 +0100
Subject: [PATCH 3/5] Add IsDirectionReversed to Slider.

Fixes #3617.
---
 src/Avalonia.Controls/Slider.cs               | 27 ++++++++++++++++---
 src/Avalonia.Themes.Default/Slider.xaml       |  4 +--
 .../Controls/Slider.xaml                      |  4 +--
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/Avalonia.Controls/Slider.cs b/src/Avalonia.Controls/Slider.cs
index b3dfcf3228..e02efc2bd2 100644
--- a/src/Avalonia.Controls/Slider.cs
+++ b/src/Avalonia.Controls/Slider.cs
@@ -49,6 +49,12 @@ namespace Avalonia.Controls
         public static readonly StyledProperty<Orientation> OrientationProperty =
             ScrollBar.OrientationProperty.AddOwner<Slider>();
 
+        /// <summary>
+        /// Defines the <see cref="IsDirectionReversed"/> property.
+        /// </summary>
+        public static readonly StyledProperty<bool> IsDirectionReversedProperty =
+            Track.IsDirectionReversedProperty.AddOwner<Slider>();
+
         /// <summary>
         /// Defines the <see cref="IsSnapToTickEnabled"/> property.
         /// </summary>
@@ -127,6 +133,19 @@ namespace Avalonia.Controls
             set { SetValue(OrientationProperty, value); }
         }
 
+        /// <summary>
+        /// Gets or sets the direction of increasing value.
+        /// </summary>
+        /// <value>
+        /// true if the direction of increasing value is to the left for a horizontal slider or
+        /// down for a vertical slider; otherwise, false. The default is false.
+        /// </value>
+        public bool IsDirectionReversed
+        {
+            get { return GetValue(IsDirectionReversedProperty); }
+            set { SetValue(IsDirectionReversedProperty, value); }
+        }
+
         /// <summary>
         /// Gets or sets a value that indicates whether the <see cref="Slider"/> automatically moves the <see cref="Thumb"/> to the closest tick mark.
         /// </summary>
@@ -202,20 +221,20 @@ namespace Avalonia.Controls
             {
                 case Key.Down:
                 case Key.Left:
-                    MoveToNextTick(-SmallChange);
+                    MoveToNextTick(IsDirectionReversed ? SmallChange : -SmallChange);
                     break;
 
                 case Key.Up:
                 case Key.Right:
-                    MoveToNextTick(SmallChange);
+                    MoveToNextTick(IsDirectionReversed ? -SmallChange : SmallChange);
                     break;
 
                 case Key.PageUp:
-                    MoveToNextTick(LargeChange);
+                    MoveToNextTick(IsDirectionReversed ? -LargeChange : LargeChange);
                     break;
 
                 case Key.PageDown:
-                    MoveToNextTick(-LargeChange);
+                    MoveToNextTick(IsDirectionReversed ? LargeChange : -LargeChange);
                     break;
 
                 case Key.Home:
diff --git a/src/Avalonia.Themes.Default/Slider.xaml b/src/Avalonia.Themes.Default/Slider.xaml
index be698608c4..bcb330f188 100644
--- a/src/Avalonia.Themes.Default/Slider.xaml
+++ b/src/Avalonia.Themes.Default/Slider.xaml
@@ -11,7 +11,7 @@
             <RowDefinition Height="Auto"/>
           </Grid.RowDefinitions>
           <Border Name="TrackBackground" Grid.Row="1" Height="4" Margin="6,0" VerticalAlignment="Center"/>
-          <Track Name="PART_Track" Grid.Row="1" Orientation="Horizontal">
+          <Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="{TemplateBinding IsDirectionReversed}" Orientation="Horizontal">
             <Track.DecreaseButton>
                <RepeatButton Name="PART_DecreaseButton"
                              Classes="repeattrack" />
@@ -46,7 +46,7 @@
             <ColumnDefinition Width="Auto"/>
           </Grid.ColumnDefinitions>
           <Border Name="TrackBackground" Grid.Column="1" Width="4" Margin="0,6" HorizontalAlignment="Center"/>
-          <Track Name="PART_Track" Grid.Column="1" Orientation="Vertical">
+          <Track Name="PART_Track" Grid.Column="1" IsDirectionReversed="{TemplateBinding IsDirectionReversed}" Orientation="Vertical">
             <Track.DecreaseButton>
                <RepeatButton Name="PART_DecreaseButton"
                              Classes="repeattrack" />
diff --git a/src/Avalonia.Themes.Fluent/Controls/Slider.xaml b/src/Avalonia.Themes.Fluent/Controls/Slider.xaml
index 1f25b7d90d..33f0a76423 100644
--- a/src/Avalonia.Themes.Fluent/Controls/Slider.xaml
+++ b/src/Avalonia.Themes.Fluent/Controls/Slider.xaml
@@ -62,7 +62,7 @@
                   <TickBar Name="TopTickBar" Placement="Top" Height="{DynamicResource SliderOutsideTickBarThemeHeight}" VerticalAlignment="Bottom" Margin="0,0,0,4" Grid.ColumnSpan="3" />
                   <!-- <TickBar Name="HorizontalInlineTickBar" Placement="Top" Fill="{DynamicResource SliderInlineTickBarFill}" Height="{DynamicResource SliderTrackThemeHeight}" Grid.Row="1" Grid.ColumnSpan="3" /> -->
                   <TickBar Name="BottomTickBar" Placement="Bottom" 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 Name="PART_Track" Grid.Row="1" Grid.ColumnSpan="3" IsDirectionReversed="{TemplateBinding IsDirectionReversed}" Orientation="Horizontal">
                     <Track.DecreaseButton>
                       <RepeatButton Name="PART_DecreaseButton" Background="{TemplateBinding Foreground}" Focusable="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                         <RepeatButton.Template>
@@ -124,7 +124,7 @@
                   <TickBar Name="LeftTickBar" Placement="Left" Width="{DynamicResource SliderOutsideTickBarThemeHeight}" HorizontalAlignment="Right" Margin="0,0,4,0" Grid.RowSpan="3" />
                   <!-- <TickBar Name="VerticalInlineTickBar" Placement="Inline" Fill="{DynamicResource SliderInlineTickBarFill}" Width="{DynamicResource SliderTrackThemeHeight}" Grid.Column="1" Grid.RowSpan="3" /> -->
                   <TickBar Name="RightTickBar" Placement="Right" Width="{DynamicResource 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 Name="PART_Track" Grid.Column="1" Grid.ColumnSpan="1" Grid.RowSpan="3" IsDirectionReversed="{TemplateBinding IsDirectionReversed}" Orientation="Vertical">
                     <Track.DecreaseButton>
                       <RepeatButton Name="PART_DecreaseButton" Background="{TemplateBinding Foreground}" Focusable="False" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                         <RepeatButton.Template>

From f7aa342f222ec0e88164c7b92a786ffc591cb02f Mon Sep 17 00:00:00 2001
From: Steven Kirk <grokys@gmail.com>
Date: Tue, 23 Feb 2021 16:25:29 +0100
Subject: [PATCH 4/5] Added reversed direction sliders to ControlCatalog.

---
 samples/ControlCatalog/Pages/SliderPage.xaml | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/samples/ControlCatalog/Pages/SliderPage.xaml b/samples/ControlCatalog/Pages/SliderPage.xaml
index eeb198976b..b4901ec780 100644
--- a/samples/ControlCatalog/Pages/SliderPage.xaml
+++ b/samples/ControlCatalog/Pages/SliderPage.xaml
@@ -45,6 +45,12 @@
             <sys:Exception /> 
           </DataValidationErrors.Error>
         </Slider>
+        <Slider Value="0"
+                IsDirectionReversed="True"
+                Minimum="0"
+                Maximum="100"
+                TickFrequency="10"
+                Width="300" />
       </StackPanel>
       <Slider Value="0"
               Minimum="0"
@@ -54,6 +60,15 @@
               TickPlacement="Outside"
               TickFrequency="10"
               Height="300"/>
+      <Slider Value="0"
+              IsDirectionReversed="True"
+              Minimum="0"
+              Maximum="100"
+              Orientation="Vertical"
+              IsSnapToTickEnabled="True"
+              TickPlacement="Outside"
+              TickFrequency="10"
+              Height="300"/>
     </StackPanel>
 
   </StackPanel>

From d5e6171ddd45dab9626827981f271f0e9a57b1fe Mon Sep 17 00:00:00 2001
From: Steven Kirk <grokys@gmail.com>
Date: Tue, 23 Feb 2021 16:26:04 +0100
Subject: [PATCH 5/5] Improve slider interaction in AcrylicPage.

- Add small/large change
- Display to 1 decimal place
---
 samples/ControlCatalog/Pages/AcrylicPage.xaml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/samples/ControlCatalog/Pages/AcrylicPage.xaml b/samples/ControlCatalog/Pages/AcrylicPage.xaml
index 96cfcc5288..7635e1ccc3 100644
--- a/samples/ControlCatalog/Pages/AcrylicPage.xaml
+++ b/samples/ControlCatalog/Pages/AcrylicPage.xaml
@@ -16,13 +16,13 @@
         <StackPanel Spacing="5" Margin="40 10">
           <StackPanel Orientation="Horizontal">
             <TextBlock Text="TintOpacity" Foreground="Black" />
-            <Slider Name="TintOpacitySlider" Minimum="0" Maximum="1" Value="0.9" Width="400" />
-            <TextBlock Text="{Binding #TintOpacitySlider.Value}" Foreground="Black" />
+            <Slider Name="TintOpacitySlider" Minimum="0" Maximum="1" Value="0.9" SmallChange="0.1" LargeChange="0.2" Width="400" />
+            <TextBlock Text="{Binding #TintOpacitySlider.Value, StringFormat=\{0:0.#\}}" Foreground="Black" />
           </StackPanel>
           <StackPanel Orientation="Horizontal">
             <TextBlock Text="MaterialOpacity" Foreground="Black" />
-            <Slider Name="MaterialOpacitySlider" Minimum="0" Maximum="1" Value="0.8" Width="400" />
-            <TextBlock Text="{Binding #MaterialOpacitySlider.Value}" Foreground="Black" />
+            <Slider Name="MaterialOpacitySlider" Minimum="0" Maximum="1" Value="0.8" SmallChange="0.1" LargeChange="0.2" Width="400" />
+            <TextBlock Text="{Binding #MaterialOpacitySlider.Value, StringFormat=\{0:0.#\}}" Foreground="Black" />
           </StackPanel>
         </StackPanel>
       </ExperimentalAcrylicBorder>