From b4bb22ba06f89168c948e6001c51972575ca968b Mon Sep 17 00:00:00 2001
From: Ahmad Tantowi <ahmadtantowi@outlook.com>
Date: Fri, 20 Oct 2023 21:02:12 +0700
Subject: [PATCH] Avalonia: Make slider scrollable with mouse wheel (#5760)

* Add scrollable custom control based on TickFrequency

* Use custom slider to update value when pointer wheel scrolled

* Remove extra xaml file

* Address formatting issues

* Only scroll one element at a time

* Add OnPointerWheelChanged event to VolumeStatus button

Co-authored-by: Ahmad Tantowi <ahmadtantowi@outlook.com>

---------

Co-authored-by: TSR Berry <20988865+TSRBerry@users.noreply.github.com>
---
 .../UI/Controls/SliderScroll.axaml.cs         | 31 +++++++++++++++++++
 .../UI/Views/Input/ControllerInputView.axaml  | 13 ++++----
 .../UI/Views/Input/MotionInputView.axaml      | 11 ++++---
 .../UI/Views/Input/RumbleInputView.axaml      |  7 +++--
 .../UI/Views/Main/MainStatusBarView.axaml     |  4 ++-
 .../UI/Views/Main/MainStatusBarView.axaml.cs  | 15 +++++++++
 .../UI/Views/Main/MainViewControls.axaml      |  5 +--
 .../UI/Views/Settings/SettingsAudioView.axaml |  9 +++---
 .../Views/Settings/SettingsGraphicsView.axaml |  3 +-
 9 files changed, 76 insertions(+), 22 deletions(-)
 create mode 100644 src/Ryujinx.Ava/UI/Controls/SliderScroll.axaml.cs

diff --git a/src/Ryujinx.Ava/UI/Controls/SliderScroll.axaml.cs b/src/Ryujinx.Ava/UI/Controls/SliderScroll.axaml.cs
new file mode 100644
index 00000000..81d3bc30
--- /dev/null
+++ b/src/Ryujinx.Ava/UI/Controls/SliderScroll.axaml.cs
@@ -0,0 +1,31 @@
+using Avalonia.Controls;
+using Avalonia.Input;
+using System;
+
+namespace Ryujinx.Ava.UI.Controls
+{
+    public class SliderScroll : Slider
+    {
+        protected override Type StyleKeyOverride => typeof(Slider);
+
+        protected override void OnPointerWheelChanged(PointerWheelEventArgs e)
+        {
+            var newValue = Value + e.Delta.Y * TickFrequency;
+
+            if (newValue < Minimum)
+            {
+                Value = Minimum;
+            }
+            else if (newValue > Maximum)
+            {
+                Value = Maximum;
+            }
+            else
+            {
+                Value = newValue;
+            }
+
+            e.Handled = true;
+        }
+    }
+}
diff --git a/src/Ryujinx.Ava/UI/Views/Input/ControllerInputView.axaml b/src/Ryujinx.Ava/UI/Views/Input/ControllerInputView.axaml
index 2ab42e6e..d636873a 100644
--- a/src/Ryujinx.Ava/UI/Views/Input/ControllerInputView.axaml
+++ b/src/Ryujinx.Ava/UI/Views/Input/ControllerInputView.axaml
@@ -5,6 +5,7 @@
     xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:controls="clr-namespace:Ryujinx.Ava.UI.Controls"
     xmlns:models="clr-namespace:Ryujinx.Ava.UI.Models"
     xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels"
     xmlns:helpers="clr-namespace:Ryujinx.Ava.UI.Helpers"
@@ -460,7 +461,7 @@
                                     HorizontalAlignment="Center"
                                     VerticalAlignment="Center"
                                     Orientation="Horizontal">
-                                    <Slider
+                                    <controls:SliderScroll
                                         Width="130"
                                         Maximum="1"
                                         TickFrequency="0.01"
@@ -480,7 +481,7 @@
                                     HorizontalAlignment="Center"
                                     VerticalAlignment="Center"
                                     Orientation="Horizontal">
-                                    <Slider
+                                    <controls:SliderScroll
                                         Width="130"
                                         Maximum="2"
                                         TickFrequency="0.01"
@@ -604,7 +605,7 @@
                         <StackPanel
                             HorizontalAlignment="Center"
                             Orientation="Horizontal">
-                            <Slider
+                            <controls:SliderScroll
                                 Width="130"
                                 Maximum="1"
                                 TickFrequency="0.01"
@@ -1083,7 +1084,7 @@
                                     HorizontalAlignment="Center"
                                     VerticalAlignment="Center"
                                     Orientation="Horizontal">
-                                    <Slider
+                                    <controls:SliderScroll
                                         Width="130"
                                         Maximum="1"
                                         TickFrequency="0.01"
@@ -1105,7 +1106,7 @@
                                     HorizontalAlignment="Center"
                                     VerticalAlignment="Center"
                                     Orientation="Horizontal">
-                                    <Slider
+                                    <controls:SliderScroll
                                         Width="130"
                                         Maximum="2"
                                         TickFrequency="0.01"
@@ -1125,4 +1126,4 @@
             </StackPanel>
         </Grid>
     </StackPanel>
-</UserControl>
\ No newline at end of file
+</UserControl>
diff --git a/src/Ryujinx.Ava/UI/Views/Input/MotionInputView.axaml b/src/Ryujinx.Ava/UI/Views/Input/MotionInputView.axaml
index a98f0882..a6b587f6 100644
--- a/src/Ryujinx.Ava/UI/Views/Input/MotionInputView.axaml
+++ b/src/Ryujinx.Ava/UI/Views/Input/MotionInputView.axaml
@@ -3,6 +3,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"
+    xmlns:controls="clr-namespace:Ryujinx.Ava.UI.Controls"
     xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
     xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
     xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels"
@@ -23,11 +24,11 @@
                     Margin="0"
                     HorizontalAlignment="Center"
                     Text="{locale:Locale ControllerSettingsMotionGyroSensitivity}" />
-                <Slider
+                <controls:SliderScroll
                     Margin="0,-5,0,-5"
                     Width="150"
                     MaxWidth="150"
-                    TickFrequency="0.01"
+                    TickFrequency="1"
                     IsSnapToTickEnabled="True"
                     SmallChange="0.01"
                     Maximum="100"
@@ -45,11 +46,11 @@
                     Margin="0"
                     HorizontalAlignment="Center"
                     Text="{locale:Locale ControllerSettingsMotionGyroDeadzone}" />
-                <Slider
+                <controls:SliderScroll
                     Margin="0,-5,0,-5"
                     Width="150"
                     MaxWidth="150"
-                    TickFrequency="0.01"
+                    TickFrequency="1"
                     IsSnapToTickEnabled="True"
                     SmallChange="0.01"
                     Maximum="100"
@@ -167,4 +168,4 @@
             </Grid>
         </Border>
     </Grid>
-</UserControl>
\ No newline at end of file
+</UserControl>
diff --git a/src/Ryujinx.Ava/UI/Views/Input/RumbleInputView.axaml b/src/Ryujinx.Ava/UI/Views/Input/RumbleInputView.axaml
index f633c0ed..5b7087a4 100644
--- a/src/Ryujinx.Ava/UI/Views/Input/RumbleInputView.axaml
+++ b/src/Ryujinx.Ava/UI/Views/Input/RumbleInputView.axaml
@@ -1,6 +1,7 @@
 <UserControl
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="clr-namespace:Ryujinx.Ava.UI.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
@@ -21,7 +22,7 @@
                     TextWrapping="WrapWithOverflow"
                     HorizontalAlignment="Center"
                     Text="{locale:Locale ControllerSettingsRumbleStrongMultiplier}" />
-                <Slider
+                <controls:SliderScroll
                     Margin="0,-5,0,-5"
                     Width="200"
                     TickFrequency="0.01"
@@ -41,7 +42,7 @@
                     TextWrapping="WrapWithOverflow"
                     HorizontalAlignment="Center"
                     Text="{locale:Locale ControllerSettingsRumbleWeakMultiplier}" />
-                <Slider
+                <controls:SliderScroll
                     Margin="0,-5,0,-5"
                     Width="200"
                     MaxWidth="200"
@@ -58,4 +59,4 @@
             </StackPanel>
         </StackPanel>
     </Grid>
-</UserControl>
\ No newline at end of file
+</UserControl>
diff --git a/src/Ryujinx.Ava/UI/Views/Main/MainStatusBarView.axaml b/src/Ryujinx.Ava/UI/Views/Main/MainStatusBarView.axaml
index 32524740..01133a4b 100644
--- a/src/Ryujinx.Ava/UI/Views/Main/MainStatusBarView.axaml
+++ b/src/Ryujinx.Ava/UI/Views/Main/MainStatusBarView.axaml
@@ -3,6 +3,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"
+    xmlns:controls="clr-namespace:Ryujinx.Ava.UI.Controls"
     xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
     xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
     xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels"
@@ -176,6 +177,7 @@
                 Content="{Binding VolumeStatusText}"
                 IsChecked="{Binding VolumeMuted}"
                 IsVisible="{Binding !ShowLoadProgress}"
+                PointerWheelChanged="VolumeStatus_OnPointerWheelChanged"
                 Background="Transparent"
                 BorderThickness="0"
                 CornerRadius="0">
@@ -192,7 +194,7 @@
                 <ToggleSplitButton.Flyout>
                     <Flyout Placement="Bottom" ShowMode="TransientWithDismissOnPointerMoveAway">
                         <Grid Margin="0">
-                            <Slider
+                            <controls:SliderScroll
                                 MaxHeight="40"
                                 Width="150"
                                 Margin="0"
diff --git a/src/Ryujinx.Ava/UI/Views/Main/MainStatusBarView.axaml.cs b/src/Ryujinx.Ava/UI/Views/Main/MainStatusBarView.axaml.cs
index 44426295..9425d7b5 100644
--- a/src/Ryujinx.Ava/UI/Views/Main/MainStatusBarView.axaml.cs
+++ b/src/Ryujinx.Ava/UI/Views/Main/MainStatusBarView.axaml.cs
@@ -53,5 +53,20 @@ namespace Ryujinx.Ava.UI.Views.Main
         {
             Window.LoadApplications();
         }
+
+        private void VolumeStatus_OnPointerWheelChanged(object sender, PointerWheelEventArgs e)
+        {
+            // Change the volume by 5% at a time
+            float newValue = Window.ViewModel.Volume + (float)e.Delta.Y * 0.05f;
+
+            Window.ViewModel.Volume = newValue switch
+            {
+                < 0 => 0,
+                > 1 => 1,
+                _ => newValue,
+            };
+
+            e.Handled = true;
+        }
     }
 }
diff --git a/src/Ryujinx.Ava/UI/Views/Main/MainViewControls.axaml b/src/Ryujinx.Ava/UI/Views/Main/MainViewControls.axaml
index 34624b22..cc21b5c6 100644
--- a/src/Ryujinx.Ava/UI/Views/Main/MainViewControls.axaml
+++ b/src/Ryujinx.Ava/UI/Views/Main/MainViewControls.axaml
@@ -3,6 +3,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"
+    xmlns:controls="clr-namespace:Ryujinx.Ava.UI.Controls"
     xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
     xmlns:helpers="clr-namespace:Ryujinx.Ava.UI.Helpers"
     xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
@@ -50,7 +51,7 @@
             VerticalAlignment="Center"
             Text="{locale:Locale IconSize}"
             ToolTip.Tip="{locale:Locale IconSizeTooltip}" />
-        <Slider
+        <controls:SliderScroll
             Width="150"
             Height="35"
             Margin="5,-10,5,0"
@@ -173,4 +174,4 @@
             DockPanel.Dock="Right"
             Text="{locale:Locale CommonSort}" />
     </DockPanel>
-</UserControl>
\ No newline at end of file
+</UserControl>
diff --git a/src/Ryujinx.Ava/UI/Views/Settings/SettingsAudioView.axaml b/src/Ryujinx.Ava/UI/Views/Settings/SettingsAudioView.axaml
index 5dc0fef5..657e07ee 100644
--- a/src/Ryujinx.Ava/UI/Views/Settings/SettingsAudioView.axaml
+++ b/src/Ryujinx.Ava/UI/Views/Settings/SettingsAudioView.axaml
@@ -4,6 +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"
+    xmlns:controls="clr-namespace:Ryujinx.Ava.UI.Controls"
     xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
     xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
     xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels"
@@ -63,13 +64,13 @@
                             Maximum="100" />
                 </StackPanel>
                 <StackPanel Margin="10,0,0,0" Orientation="Horizontal">
-                    <Slider Value="{Binding Volume}"
+                    <controls:SliderScroll Value="{Binding Volume}"
                             Margin="250,0,0,0"
                             ToolTip.Tip="{locale:Locale AudioVolumeTooltip}"
                             Minimum="0"
                             Maximum="100"
-                            SmallChange="5"
-                            TickFrequency="5"
+                            SmallChange="1"
+                            TickFrequency="1"
                             IsSnapToTickEnabled="True"
                             LargeChange="10"
                             Width="350" />
@@ -77,4 +78,4 @@
             </StackPanel>
         </Border>
     </ScrollViewer>
-</UserControl>
\ No newline at end of file
+</UserControl>
diff --git a/src/Ryujinx.Ava/UI/Views/Settings/SettingsGraphicsView.axaml b/src/Ryujinx.Ava/UI/Views/Settings/SettingsGraphicsView.axaml
index f6ba0a4c..22449478 100644
--- a/src/Ryujinx.Ava/UI/Views/Settings/SettingsGraphicsView.axaml
+++ b/src/Ryujinx.Ava/UI/Views/Settings/SettingsGraphicsView.axaml
@@ -4,6 +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"
+    xmlns:controls="clr-namespace:Ryujinx.Ava.UI.Controls"
     xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
     xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
     xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels"
@@ -173,7 +174,7 @@
                                     <TextBlock Text="FSR" />
                                 </ComboBoxItem>
                             </ComboBox>
-                            <Slider Value="{Binding ScalingFilterLevel}"
+                            <controls:SliderScroll Value="{Binding ScalingFilterLevel}"
                                     ToolTip.Tip="{locale:Locale GraphicsScalingFilterLevelTooltip}"
                                     MinWidth="150"
                                     Margin="10,-3,0,0"