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>
This commit is contained in:
Ahmad Tantowi 2023-10-20 21:02:12 +07:00 committed by GitHub
parent 6fdf774845
commit b4bb22ba06
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 76 additions and 22 deletions

View file

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

View file

@ -5,6 +5,7 @@
xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale" xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 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:models="clr-namespace:Ryujinx.Ava.UI.Models"
xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels" xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels"
xmlns:helpers="clr-namespace:Ryujinx.Ava.UI.Helpers" xmlns:helpers="clr-namespace:Ryujinx.Ava.UI.Helpers"
@ -460,7 +461,7 @@
HorizontalAlignment="Center" HorizontalAlignment="Center"
VerticalAlignment="Center" VerticalAlignment="Center"
Orientation="Horizontal"> Orientation="Horizontal">
<Slider <controls:SliderScroll
Width="130" Width="130"
Maximum="1" Maximum="1"
TickFrequency="0.01" TickFrequency="0.01"
@ -480,7 +481,7 @@
HorizontalAlignment="Center" HorizontalAlignment="Center"
VerticalAlignment="Center" VerticalAlignment="Center"
Orientation="Horizontal"> Orientation="Horizontal">
<Slider <controls:SliderScroll
Width="130" Width="130"
Maximum="2" Maximum="2"
TickFrequency="0.01" TickFrequency="0.01"
@ -604,7 +605,7 @@
<StackPanel <StackPanel
HorizontalAlignment="Center" HorizontalAlignment="Center"
Orientation="Horizontal"> Orientation="Horizontal">
<Slider <controls:SliderScroll
Width="130" Width="130"
Maximum="1" Maximum="1"
TickFrequency="0.01" TickFrequency="0.01"
@ -1083,7 +1084,7 @@
HorizontalAlignment="Center" HorizontalAlignment="Center"
VerticalAlignment="Center" VerticalAlignment="Center"
Orientation="Horizontal"> Orientation="Horizontal">
<Slider <controls:SliderScroll
Width="130" Width="130"
Maximum="1" Maximum="1"
TickFrequency="0.01" TickFrequency="0.01"
@ -1105,7 +1106,7 @@
HorizontalAlignment="Center" HorizontalAlignment="Center"
VerticalAlignment="Center" VerticalAlignment="Center"
Orientation="Horizontal"> Orientation="Horizontal">
<Slider <controls:SliderScroll
Width="130" Width="130"
Maximum="2" Maximum="2"
TickFrequency="0.01" TickFrequency="0.01"
@ -1125,4 +1126,4 @@
</StackPanel> </StackPanel>
</Grid> </Grid>
</StackPanel> </StackPanel>
</UserControl> </UserControl>

View file

@ -3,6 +3,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 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:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale" xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels" xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels"
@ -23,11 +24,11 @@
Margin="0" Margin="0"
HorizontalAlignment="Center" HorizontalAlignment="Center"
Text="{locale:Locale ControllerSettingsMotionGyroSensitivity}" /> Text="{locale:Locale ControllerSettingsMotionGyroSensitivity}" />
<Slider <controls:SliderScroll
Margin="0,-5,0,-5" Margin="0,-5,0,-5"
Width="150" Width="150"
MaxWidth="150" MaxWidth="150"
TickFrequency="0.01" TickFrequency="1"
IsSnapToTickEnabled="True" IsSnapToTickEnabled="True"
SmallChange="0.01" SmallChange="0.01"
Maximum="100" Maximum="100"
@ -45,11 +46,11 @@
Margin="0" Margin="0"
HorizontalAlignment="Center" HorizontalAlignment="Center"
Text="{locale:Locale ControllerSettingsMotionGyroDeadzone}" /> Text="{locale:Locale ControllerSettingsMotionGyroDeadzone}" />
<Slider <controls:SliderScroll
Margin="0,-5,0,-5" Margin="0,-5,0,-5"
Width="150" Width="150"
MaxWidth="150" MaxWidth="150"
TickFrequency="0.01" TickFrequency="1"
IsSnapToTickEnabled="True" IsSnapToTickEnabled="True"
SmallChange="0.01" SmallChange="0.01"
Maximum="100" Maximum="100"
@ -167,4 +168,4 @@
</Grid> </Grid>
</Border> </Border>
</Grid> </Grid>
</UserControl> </UserControl>

View file

@ -1,6 +1,7 @@
<UserControl <UserControl
xmlns="https://github.com/avaloniaui" xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale" xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
@ -21,7 +22,7 @@
TextWrapping="WrapWithOverflow" TextWrapping="WrapWithOverflow"
HorizontalAlignment="Center" HorizontalAlignment="Center"
Text="{locale:Locale ControllerSettingsRumbleStrongMultiplier}" /> Text="{locale:Locale ControllerSettingsRumbleStrongMultiplier}" />
<Slider <controls:SliderScroll
Margin="0,-5,0,-5" Margin="0,-5,0,-5"
Width="200" Width="200"
TickFrequency="0.01" TickFrequency="0.01"
@ -41,7 +42,7 @@
TextWrapping="WrapWithOverflow" TextWrapping="WrapWithOverflow"
HorizontalAlignment="Center" HorizontalAlignment="Center"
Text="{locale:Locale ControllerSettingsRumbleWeakMultiplier}" /> Text="{locale:Locale ControllerSettingsRumbleWeakMultiplier}" />
<Slider <controls:SliderScroll
Margin="0,-5,0,-5" Margin="0,-5,0,-5"
Width="200" Width="200"
MaxWidth="200" MaxWidth="200"
@ -58,4 +59,4 @@
</StackPanel> </StackPanel>
</StackPanel> </StackPanel>
</Grid> </Grid>
</UserControl> </UserControl>

View file

@ -3,6 +3,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 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:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia" xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels" xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels"
@ -176,6 +177,7 @@
Content="{Binding VolumeStatusText}" Content="{Binding VolumeStatusText}"
IsChecked="{Binding VolumeMuted}" IsChecked="{Binding VolumeMuted}"
IsVisible="{Binding !ShowLoadProgress}" IsVisible="{Binding !ShowLoadProgress}"
PointerWheelChanged="VolumeStatus_OnPointerWheelChanged"
Background="Transparent" Background="Transparent"
BorderThickness="0" BorderThickness="0"
CornerRadius="0"> CornerRadius="0">
@ -192,7 +194,7 @@
<ToggleSplitButton.Flyout> <ToggleSplitButton.Flyout>
<Flyout Placement="Bottom" ShowMode="TransientWithDismissOnPointerMoveAway"> <Flyout Placement="Bottom" ShowMode="TransientWithDismissOnPointerMoveAway">
<Grid Margin="0"> <Grid Margin="0">
<Slider <controls:SliderScroll
MaxHeight="40" MaxHeight="40"
Width="150" Width="150"
Margin="0" Margin="0"

View file

@ -53,5 +53,20 @@ namespace Ryujinx.Ava.UI.Views.Main
{ {
Window.LoadApplications(); 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;
}
} }
} }

View file

@ -3,6 +3,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 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:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
xmlns:helpers="clr-namespace:Ryujinx.Ava.UI.Helpers" xmlns:helpers="clr-namespace:Ryujinx.Ava.UI.Helpers"
xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale" xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
@ -50,7 +51,7 @@
VerticalAlignment="Center" VerticalAlignment="Center"
Text="{locale:Locale IconSize}" Text="{locale:Locale IconSize}"
ToolTip.Tip="{locale:Locale IconSizeTooltip}" /> ToolTip.Tip="{locale:Locale IconSizeTooltip}" />
<Slider <controls:SliderScroll
Width="150" Width="150"
Height="35" Height="35"
Margin="5,-10,5,0" Margin="5,-10,5,0"
@ -173,4 +174,4 @@
DockPanel.Dock="Right" DockPanel.Dock="Right"
Text="{locale:Locale CommonSort}" /> Text="{locale:Locale CommonSort}" />
</DockPanel> </DockPanel>
</UserControl> </UserControl>

View file

@ -4,6 +4,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 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:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale" xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels" xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels"
@ -63,13 +64,13 @@
Maximum="100" /> Maximum="100" />
</StackPanel> </StackPanel>
<StackPanel Margin="10,0,0,0" Orientation="Horizontal"> <StackPanel Margin="10,0,0,0" Orientation="Horizontal">
<Slider Value="{Binding Volume}" <controls:SliderScroll Value="{Binding Volume}"
Margin="250,0,0,0" Margin="250,0,0,0"
ToolTip.Tip="{locale:Locale AudioVolumeTooltip}" ToolTip.Tip="{locale:Locale AudioVolumeTooltip}"
Minimum="0" Minimum="0"
Maximum="100" Maximum="100"
SmallChange="5" SmallChange="1"
TickFrequency="5" TickFrequency="1"
IsSnapToTickEnabled="True" IsSnapToTickEnabled="True"
LargeChange="10" LargeChange="10"
Width="350" /> Width="350" />
@ -77,4 +78,4 @@
</StackPanel> </StackPanel>
</Border> </Border>
</ScrollViewer> </ScrollViewer>
</UserControl> </UserControl>

View file

@ -4,6 +4,7 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 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:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale" xmlns:locale="clr-namespace:Ryujinx.Ava.Common.Locale"
xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels" xmlns:viewModels="clr-namespace:Ryujinx.Ava.UI.ViewModels"
@ -173,7 +174,7 @@
<TextBlock Text="FSR" /> <TextBlock Text="FSR" />
</ComboBoxItem> </ComboBoxItem>
</ComboBox> </ComboBox>
<Slider Value="{Binding ScalingFilterLevel}" <controls:SliderScroll Value="{Binding ScalingFilterLevel}"
ToolTip.Tip="{locale:Locale GraphicsScalingFilterLevelTooltip}" ToolTip.Tip="{locale:Locale GraphicsScalingFilterLevelTooltip}"
MinWidth="150" MinWidth="150"
Margin="10,-3,0,0" Margin="10,-3,0,0"