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>

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>