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>

Directory.Packages.props

@@ -3,13 +3,13 @@
     <ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
   </PropertyGroup>
   <ItemGroup>
-    <PackageVersion Include="Avalonia" Version="11.0.4" />
-    <PackageVersion Include="Avalonia.Controls.DataGrid" Version="11.0.4" />
-    <PackageVersion Include="Avalonia.Desktop" Version="11.0.4" />
-    <PackageVersion Include="Avalonia.Diagnostics" Version="11.0.4" />
-    <PackageVersion Include="Avalonia.Markup.Xaml.Loader" Version="11.0.4" />
-    <PackageVersion Include="Avalonia.Svg" Version="11.0.0.2" />
-    <PackageVersion Include="Avalonia.Svg.Skia" Version="11.0.0.2" />
+    <PackageVersion Include="Avalonia" Version="11.0.5" />
+    <PackageVersion Include="Avalonia.Controls.DataGrid" Version="11.0.5" />
+    <PackageVersion Include="Avalonia.Desktop" Version="11.0.5" />
+    <PackageVersion Include="Avalonia.Diagnostics" Version="11.0.5" />
+    <PackageVersion Include="Avalonia.Markup.Xaml.Loader" Version="11.0.5" />
+    <PackageVersion Include="Avalonia.Svg" Version="11.0.0.3" />
+    <PackageVersion Include="Avalonia.Svg.Skia" Version="11.0.0.3" />
     <PackageVersion Include="CommandLineParser" Version="2.9.1" />
     <PackageVersion Include="Concentus" Version="1.1.7" />
     <PackageVersion Include="DiscordRichPresence" Version="1.2.1.24" />

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;
+        }
+    }
+}

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>
+</UserControl>

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>
+</UserControl>

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>
+</UserControl>

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"

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;
+        }
     }
 }

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>
+</UserControl>

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>
+</UserControl>

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"