Avalonia - Misc changes to UX (#3643)

* Change navbar from compact to default and force text overflow globally

* Fix settings window

* Fix right stick control alignment

* Initialize value and add logging for SDL IDs

* Fix alignment of setting text and improve borders

* Clean up padding and size of buttons on controller settings

* Fix right side trigger alignment and correct styling

* Revert axaml alignment

* Fix alignment of volume widget

* Fix timezone autocompletebox dropdown height

* MainWindow: Line up volume status bar item

* Remove margins and add padding to volume widget

* Make volume text localizable.

Co-authored-by: merry <git@mary.rs>

Ryujinx.Ava/AppHost.cs

@@ -879,7 +879,7 @@ namespace Ryujinx.Ava
 
             StatusUpdatedEvent?.Invoke(this, new StatusUpdatedEventArgs(
                 Device.EnableDeviceVsync,
-                Device.GetVolume(),
+                LocaleManager.Instance["VolumeShort"] + $": {(int)(Device.GetVolume() * 100)}%",
                 Renderer.IsVulkan ? "Vulkan" : "OpenGL",
                 dockedMode,
                 ConfigurationState.Instance.Graphics.AspectRatio.Value.ToText(),

Ryujinx.Ava/Assets/Locales/en_US.json

@@ -588,5 +588,6 @@
   "SettingsTabGraphicsPreferredGpuTooltip": "Select the graphics card that will be used with the Vulkan graphics backend.\n\nDoes not affect the GPU that OpenGL will use.\n\nSet to the GPU flagged as \"dGPU\" if unsure. If there isn't one, leave untouched.",
   "SettingsAppRequiredRestartMessage": "Ryujinx Restart Required",
   "SettingsGpuBackendRestartMessage": "Graphics Backend or Gpu settings have been modified. This will require a restart to be applied",
-  "SettingsGpuBackendRestartSubMessage": "Do you want to restart now?"
+  "SettingsGpuBackendRestartSubMessage": "Do you want to restart now?",
+  "VolumeShort": "Vol"
 }

Ryujinx.Ava/Assets/Styles/Styles.xaml

@@ -54,6 +54,12 @@
     <Style Selector="Border.huge">
         <Setter Property="Width" Value="200" />
     </Style>
+    <Style Selector="Border.settings">
+        <Setter Property="Background" Value="{DynamicResource ThemeDarkColor}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource MenuFlyoutPresenterBorderColor}" />
+        <Setter Property="BorderThickness" Value="2" />
+        <Setter Property="CornerRadius" Value="3" />
+    </Style>
     <Style Selector="Image.small">
         <Setter Property="Width" Value="50" />
     </Style>
@@ -193,6 +199,14 @@
         <Setter Property="Margin" Value="{DynamicResource TextMargin}" />
         <Setter Property="FontSize" Value="{DynamicResource FontSize}" />
         <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="TextWrapping" Value="WrapWithOverflow" />
+    </Style>
+    <Style Selector="TextBlock.h1">
+        <Setter Property="Margin" Value="{DynamicResource TextMargin}" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="FontWeight" Value="Bold" />
+        <Setter Property="FontSize" Value="16" />
+        <Setter Property="TextWrapping" Value="WrapWithOverflow" />
     </Style>
     <Style Selector="Separator">
         <Setter Property="Background" Value="{DynamicResource ThemeControlBorderColor}" />

Ryujinx.Ava/Ui/Models/StatusUpdatedEventArgs.cs

@@ -5,7 +5,7 @@ namespace Ryujinx.Ava.Ui.Models
     internal class StatusUpdatedEventArgs : EventArgs
     {
         public bool VSyncEnabled { get; }
-        public float Volume { get; }
+        public string VolumeStatus { get; }
         public string GpuBackend { get; }
         public string AspectRatio { get; }
         public string DockedMode { get; }
@@ -13,10 +13,10 @@ namespace Ryujinx.Ava.Ui.Models
         public string GameStatus { get; }
         public string GpuName { get; }
 
-        public StatusUpdatedEventArgs(bool vSyncEnabled, float volume, string gpuBackend, string dockedMode, string aspectRatio, string gameStatus, string fifoStatus, string gpuName)
+        public StatusUpdatedEventArgs(bool vSyncEnabled, string volumeStatus, string gpuBackend, string dockedMode, string aspectRatio, string gameStatus, string fifoStatus, string gpuName)
         {
             VSyncEnabled = vSyncEnabled;
-            Volume = volume;
+            VolumeStatus = volumeStatus;
             GpuBackend = gpuBackend;
             DockedMode = dockedMode;
             AspectRatio = aspectRatio;

Ryujinx.Ava/Ui/ViewModels/ControllerSettingsViewModel.cs

@@ -43,6 +43,7 @@ namespace Ryujinx.Ava.Ui.ViewModels
 
         private PlayerIndex _playerId;
         private int _controller;
+        private int _controllerNumber = 0;
         private string _controllerImage;
         private int _device;
         private object _configuration;
@@ -439,6 +440,14 @@ namespace Ryujinx.Ava.Ui.ViewModels
             return str;
         }
 
+        private static string GetShortGamepadId(string str)
+        {
+            const string Hyphen = "-";
+            const int Offset = 1;
+
+            return str.Substring(str.IndexOf(Hyphen) + Offset);
+        }
+
         public void LoadDevices()
         {
             lock (Devices)
@@ -451,9 +460,11 @@ namespace Ryujinx.Ava.Ui.ViewModels
                 {
                     using IGamepad gamepad = _mainWindow.InputManager.KeyboardDriver.GetGamepad(id);
 
+                    Logger.Info?.Print(LogClass.Configuration, $"{GetShortGamepadName(gamepad.Name)} has been connected with ID: {gamepad.Id}");
+
                     if (gamepad != null)
                     {
-                        Devices.Add((DeviceType.Keyboard, id, $"{GetShortGamepadName(gamepad.Name)} ({id})"));
+                        Devices.Add((DeviceType.Keyboard, id, $"{GetShortGamepadName(gamepad.Name)}"));
                     }
                 }
 
@@ -461,12 +472,21 @@ namespace Ryujinx.Ava.Ui.ViewModels
                 {
                     using IGamepad gamepad = _mainWindow.InputManager.GamepadDriver.GetGamepad(id);
 
+                    Logger.Info?.Print(LogClass.Configuration, $"{GetShortGamepadName(gamepad.Name)} has been connected with ID: {gamepad.Id}");
+
                     if (gamepad != null)
                     {
-                        Devices.Add((DeviceType.Controller, id, $"{GetShortGamepadName(gamepad.Name)} ({id})"));
+                        if (Devices.Any(controller => GetShortGamepadId(controller.Id) == GetShortGamepadId(gamepad.Id)))
+                        {
+                            _controllerNumber++;
+                        }
+
+                        Devices.Add((DeviceType.Controller, id, $"{GetShortGamepadName(gamepad.Name)} ({_controllerNumber})"));
                     }
                 }
 
+                _controllerNumber = 0;
+
                 DeviceList.AddRange(Devices.Select(x => x.Name));
                 Device = Math.Min(Device, DeviceList.Count);
             }

Ryujinx.Ava/Ui/ViewModels/MainWindowViewModel.cs

@@ -50,6 +50,7 @@ namespace Ryujinx.Ava.Ui.ViewModels
         private string _dockedStatusText;
         private string _fifoStatusText;
         private string _gameStatusText;
+        private string _volumeStatusText;
         private string _gpuStatusText;
         private bool _isAmiiboRequested;
         private bool _isGameRunning;
@@ -385,11 +386,12 @@ namespace Ryujinx.Ava.Ui.ViewModels
 
         public string VolumeStatusText
         {
-            get
+            get => _volumeStatusText;
+            set
             {
-                string icon = Volume == 0 ? "🔇" : "🔊";
+                _volumeStatusText = value;
 
-                return $"{icon} {(int)(Volume * 100)}%";
+                OnPropertyChanged();
             }
         }
 

Ryujinx.Ava/Ui/Windows/ControllerSettingsWindow.axaml

@@ -35,7 +35,8 @@
                 Grid.Column="0"
                 Margin="0,0,2,0"
                 BorderBrush="{DynamicResource ThemeControlBorderColor}"
-                BorderThickness="1">
+                BorderThickness="1"
+                Padding="2,0">
                 <StackPanel
                     Margin="2"
                     HorizontalAlignment="Center"
@@ -65,7 +66,8 @@
                 Grid.Column="1"
                 Margin="0,0,2,0"
                 BorderBrush="{DynamicResource ThemeControlBorderColor}"
-                BorderThickness="1">
+                BorderThickness="1"
+                Padding="2,0">
                 <StackPanel
                     Margin="2"
                     HorizontalAlignment="Stretch"
@@ -103,7 +105,8 @@
                 Grid.Column="2"
                 Margin="0,0,2,0"
                 BorderBrush="{DynamicResource ThemeControlBorderColor}"
-                BorderThickness="1">
+                BorderThickness="1"
+                Padding="2,0">
                 <Grid
                     Margin="2"
                     HorizontalAlignment="Stretch"
@@ -132,7 +135,8 @@
             <Border
                 Grid.Column="3"
                 BorderBrush="{DynamicResource ThemeControlBorderColor}"
-                BorderThickness="1">
+                BorderThickness="1"
+                Padding="2,0" >
                 <StackPanel
                     Margin="2"
                     HorizontalAlignment="Center"
@@ -151,7 +155,7 @@
                             Items="{Binding ProfilesList}"
                             Text="{Binding ProfileName}" />
                         <Button
-                            MinWidth="60"
+                            MinWidth="0"
                             Margin="5,0,0,0"
                             VerticalAlignment="Center"
                             ToolTip.Tip="{locale:Locale ControllerSettingsLoadProfileToolTip}"
@@ -162,7 +166,7 @@
                                 Height="20" />
                         </Button>
                         <Button
-                            MinWidth="60"
+                            MinWidth="0"
                             Margin="5,0,0,0"
                             VerticalAlignment="Center"
                             ToolTip.Tip="{locale:Locale ControllerSettingsSaveProfileToolTip}"
@@ -173,7 +177,7 @@
                                 Height="20" />
                         </Button>
                         <Button
-                            MinWidth="60"
+                            MinWidth="0"
                             Margin="5,0,0,0"
                             VerticalAlignment="Center"
                             ToolTip.Tip="{locale:Locale ControllerSettingsRemoveProfileToolTip}"
@@ -522,7 +526,7 @@
                                         TextAlignment="Center" />
                                 </ToggleButton>
                             </StackPanel>
-                            
+
                             <!--  Left DPad Down  -->
                             <StackPanel Margin="0,0,0,4" Background="{DynamicResource ThemeDarkColor}" Orientation="Horizontal">
                                 <TextBlock
@@ -583,7 +587,7 @@
                     </StackPanel>
                 </Border>
             </Grid>
-            
+
             <!--  Triggers And Side Buttons-->
             <StackPanel Grid.Column="1" HorizontalAlignment="Stretch">
                 <Border
@@ -717,7 +721,7 @@
                                 MinWidth="0"
                                 Grid.Column="0"
                                 IsChecked="{Binding Configuration.EnableMotion, Mode=TwoWay}">
-                                <TextBlock Text="{locale:Locale ControllerSettingsMotion}" TextWrapping="WrapWithOverflow" />
+                                <TextBlock Text="{locale:Locale ControllerSettingsMotion}" />
                             </CheckBox>
                             <Button Margin="10" Grid.Column="1" Command="{Binding ShowMotionConfig}">
                                 <TextBlock Text="{locale:Locale ControllerSettingsConfigureGeneral}" />
@@ -739,7 +743,7 @@
                                 MinWidth="0"
                                 Grid.Column="0"
                                 IsChecked="{Binding Configuration.EnableRumble, Mode=TwoWay}">
-                                <TextBlock Text="{locale:Locale ControllerSettingsRumble}" TextWrapping="WrapWithOverflow" />
+                                <TextBlock Text="{locale:Locale ControllerSettingsRumble}" />
                             </CheckBox>
                             <Button Margin="10" Grid.Column="1" Command="{Binding ShowRumbleConfig}">
                                 <TextBlock Text="{locale:Locale ControllerSettingsConfigureGeneral}" />
@@ -780,8 +784,6 @@
                                 Margin="0,0,0,4"
                                 Grid.Column="1"
                                 Grid.Row="0"
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center"
                                 Background="{DynamicResource ThemeDarkColor}"
                                 Orientation="Horizontal">
                                 <TextBlock
@@ -822,7 +824,7 @@
                                 </ToggleButton>
                             </StackPanel>
                             <StackPanel
-                                Margin="0,0,0,4"
+                                Margin="0,0,8,4"
                                 Grid.Column="0"
                                 Grid.Row="0"
                                 HorizontalAlignment="Right"
@@ -957,7 +959,6 @@
                 </Border>
                 <Border
                     Grid.Row="2"
-                    Margin="2,0,2,2"
                     Padding="10"
                     BorderBrush="{DynamicResource ThemeControlBorderColor}"
                     BorderThickness="1"
@@ -1139,7 +1140,7 @@
                                         Text="{Binding Configuration.DeadzoneRight, StringFormat=\{0:0.00\}}" />
                                 </StackPanel>
                                 <TextBlock Text="{locale:Locale ControllerSettingsStickRange}" />
-                                <StackPanel 
+                                <StackPanel
                                     HorizontalAlignment="Center"
                                     VerticalAlignment="Center"
                                     Orientation="Horizontal">

Ryujinx.Ava/Ui/Windows/MainWindow.axaml

@@ -177,7 +177,7 @@
                                     Command="{ReflectionBinding ChangeLanguage}"
                                     CommandParameter="zh_TW"
                                     Header="繁體中文" />
-                                <MenuItem                                    
+                                <MenuItem
                                     Command="{ReflectionBinding ChangeLanguage}"
                                     CommandParameter="ja_JP"
                                     Header="日本語" />
@@ -662,12 +662,12 @@
                         IsVisible="{Binding !ShowLoadProgress}" />
                     <ui:ToggleSplitButton
                         Name="VolumeStatus"
-                        Margin="-2,0,-3,0"
-                        Padding="5,0,0,5"
+                        Padding="5"
                         HorizontalAlignment="Left"
                         VerticalAlignment="Center"
+                        VerticalContentAlignment="Center"
                         Background="{DynamicResource ThemeContentBackgroundColor}"
-                        BorderBrush="{DynamicResource ThemeContentBackgroundColor}"
+                        BorderThickness="0"
                         Content="{Binding VolumeStatusText}"
                         IsChecked="{Binding VolumeMuted}"
                         IsVisible="{Binding !ShowLoadProgress}">

Ryujinx.Ava/Ui/Windows/MainWindow.axaml.cs

@@ -138,6 +138,7 @@ namespace Ryujinx.Ava.Ui.Windows
                     ViewModel.DockedStatusText = args.DockedMode;
                     ViewModel.AspectRatioStatusText = args.AspectRatio;
                     ViewModel.GameStatusText = args.GameStatus;
+                    ViewModel.VolumeStatusText = args.VolumeStatus;
                     ViewModel.FifoStatusText = args.FifoStatus;
                     ViewModel.GpuNameText = args.GpuName;
                     ViewModel.BackendText = args.GpuBackend;

Ryujinx.Ava/Ui/Windows/SettingsWindow.axaml

@@ -38,18 +38,18 @@
             KeyboardNavigation.IsTabStop="False"/>
         <Grid Name="Pages" IsVisible="False" Grid.Row="2">
             <ScrollViewer Name="UiPage"
-                          Margin="0,0,10,0"
+                          Margin="0,0,2,0"
                           HorizontalAlignment="Stretch"
                           VerticalAlignment="Stretch"
                           HorizontalScrollBarVisibility="Disabled"
                           VerticalScrollBarVisibility="Auto">
-                <Border>
+                <Border Classes="settings">
                     <StackPanel
                         Margin="10,5"
                         HorizontalAlignment="Stretch"
                         Orientation="Vertical"
                         Spacing="10">
-                        <TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabGeneralGeneral}" />
+                        <TextBlock Classes="h1" Text="{locale:Locale SettingsTabGeneralGeneral}" />
                         <StackPanel Margin="10,0,0,0" Orientation="Vertical">
                             <CheckBox IsChecked="{Binding EnableDiscordIntegration}">
                                 <TextBlock VerticalAlignment="Center"
@@ -67,7 +67,7 @@
                             </CheckBox>
                         </StackPanel>
                         <Separator Height="1" />
-                        <TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabGeneralGameDirectories}" />
+                        <TextBlock Classes="h1" Text="{locale:Locale SettingsTabGeneralGameDirectories}" />
                         <StackPanel
                             Margin="10,0,0,0"
                             HorizontalAlignment="Stretch"
@@ -111,7 +111,7 @@
                             </Grid>
                         </StackPanel>
                         <Separator Height="1" />
-                        <TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabGeneralTheme}" />
+                        <TextBlock Classes="h1" Text="{locale:Locale SettingsTabGeneralTheme}" />
                         <Grid Margin="10,0,0,0">
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="Auto" />
@@ -169,7 +169,7 @@
                           Padding="0,0,2,0"
                           HorizontalScrollBarVisibility="Disabled"
                           VerticalScrollBarVisibility="Auto">
-                <Border>
+                <Border Classes="settings">
                     <StackPanel Margin="4" Orientation="Vertical">
                         <StackPanel Orientation="Horizontal">
                             <CheckBox Margin="5,0"
@@ -198,9 +198,9 @@
                           VerticalAlignment="Stretch"
                           HorizontalScrollBarVisibility="Disabled"
                           VerticalScrollBarVisibility="Auto">
-                <Border>
+                <Border Classes="settings">
                     <StackPanel Margin="10,5" Orientation="Vertical" Spacing="10">
-                        <TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabHotkeysHotkeys}" />
+                        <TextBlock Classes="h1" Text="{locale:Locale SettingsTabHotkeysHotkeys}" />
                         <StackPanel Margin="10,0,0,0" Orientation="Horizontal">
                             <TextBlock VerticalAlignment="Center" Text="{locale:Locale SettingsTabHotkeysToggleVsyncHotkey}" Width="230" />
                             <ToggleButton Width="90" Height="27" Checked="Button_Checked" Unchecked="Button_Unchecked">
@@ -265,13 +265,13 @@
                           VerticalAlignment="Stretch"
                           HorizontalScrollBarVisibility="Disabled"
                           VerticalScrollBarVisibility="Auto">
-                <Border>
+                <Border Classes="settings">
                     <StackPanel
                         Margin="10,5"
                         HorizontalAlignment="Stretch"
                         Orientation="Vertical"
                         Spacing="10">
-                        <TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabSystemCore}" />
+                        <TextBlock Classes="h1" Text="{locale:Locale SettingsTabSystemCore}" />
                         <StackPanel Margin="10,0,0,0" Orientation="Vertical">
                             <StackPanel Margin="0,0,0,10" Orientation="Horizontal">
                                 <TextBlock VerticalAlignment="Center"
@@ -384,6 +384,7 @@
                                 <AutoCompleteBox
                                     Name="TimeZoneBox"
                                     Width="350"
+                                    MaxDropDownHeight="500"
                                     FilterMode="Contains"
                                     Items="{Binding TimeZones}"
                                     SelectionChanged="TimeZoneBox_OnSelectionChanged"
@@ -420,7 +421,7 @@
                         </StackPanel>
                         <Separator Height="1" />
                         <StackPanel Orientation="Horizontal">
-                            <TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabSystemHacks}" />
+                            <TextBlock Classes="h1" Text="{locale:Locale SettingsTabSystemHacks}" />
                             <TextBlock Text="{locale:Locale SettingsTabSystemHacksNote}" />
                         </StackPanel>
                         <StackPanel
@@ -445,13 +446,13 @@
                 VerticalAlignment="Stretch"
                 HorizontalScrollBarVisibility="Disabled"
                 VerticalScrollBarVisibility="Auto">
-                <Border>
+                <Border Classes="settings">
                     <StackPanel
                         Margin="10,5"
                         HorizontalAlignment="Stretch"
                         Orientation="Vertical"
                         Spacing="10">
-                        <TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabCpuCache}" />
+                        <TextBlock Classes="h1" Text="{locale:Locale SettingsTabCpuCache}" />
                         <StackPanel
                             Margin="10,0,0,0"
                             HorizontalAlignment="Stretch"
@@ -462,7 +463,7 @@
                             </CheckBox>
                         </StackPanel>
                         <Separator Height="1" />
-                        <TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabCpuMemory}" />
+                        <TextBlock Classes="h1" Text="{locale:Locale SettingsTabCpuMemory}" />
                         <StackPanel
                             Margin="10,0,0,0"
                             HorizontalAlignment="Stretch"
@@ -502,44 +503,46 @@
                 VerticalAlignment="Stretch"
                 HorizontalScrollBarVisibility="Disabled"
                 VerticalScrollBarVisibility="Auto">
-                <Border>
+                <Border Classes="settings">
                     <StackPanel
                         Margin="10,5"
                         HorizontalAlignment="Stretch"
                         Orientation="Vertical"
                         Spacing="10">
-                        <TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabGraphicsAPI}" />
+                        <TextBlock Classes="h1" Text="{locale:Locale SettingsTabGraphicsAPI}" />
                         <StackPanel Margin="10,0,0,0" Orientation="Vertical" Spacing="10">
                             <StackPanel Orientation="Horizontal">
-                                    <TextBlock VerticalAlignment="Center"
-                                            ToolTip.Tip="{locale:Locale SettingsTabGraphicsBackendTooltip}"
-                                            Text="{locale:Locale SettingsTabGraphicsBackend}"
-                                            Width="250" />
-                                    <ComboBox Width="350"
-                                            HorizontalContentAlignment="Left"
-                                            ToolTip.Tip="{locale:Locale SettingsTabGraphicsBackendTooltip}"
-                                            SelectedIndex="{Binding GraphicsBackendIndex}">
-                                        <ComboBoxItem IsVisible="{Binding IsVulkanAvailable}">
-                                            <TextBlock Text="Vulkan" />
-                                        </ComboBoxItem>
-                                        <ComboBoxItem>
-                                            <TextBlock Text="OpenGL" />
-                                        </ComboBoxItem>
-                                    </ComboBox>
-                                </StackPanel>
-                                <StackPanel Orientation="Horizontal" IsVisible="{Binding IsVulkanSelected}">
-                                    <TextBlock VerticalAlignment="Center"
-                                            ToolTip.Tip="{locale:Locale SettingsTabGraphicsPreferredGpuTooltip}"
-                                            Text="{locale:Locale SettingsTabGraphicsPreferredGpu}"
-                                            Width="250" />
-                                    <ComboBox Width="350"
-                                            HorizontalContentAlignment="Left"
-                                            ToolTip.Tip="{locale:Locale SettingsTabGraphicsPreferredGpuTooltip}"
-                                            SelectedIndex="{Binding PreferredGpuIndex}"
-                                            Items="{Binding AvailableGpus}"/>
-                                </StackPanel>
-                                <Separator Height="1" />
-                            <TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabGraphicsFeatures}" />
+                                <TextBlock VerticalAlignment="Center"
+                                        ToolTip.Tip="{locale:Locale SettingsTabGraphicsBackendTooltip}"
+                                        Text="{locale:Locale SettingsTabGraphicsBackend}"
+                                        Width="250" />
+                                <ComboBox Width="350"
+                                        HorizontalContentAlignment="Left"
+                                        ToolTip.Tip="{locale:Locale SettingsTabGraphicsBackendTooltip}"
+                                        SelectedIndex="{Binding GraphicsBackendIndex}">
+                                    <ComboBoxItem IsVisible="{Binding IsVulkanAvailable}">
+                                        <TextBlock Text="Vulkan" />
+                                    </ComboBoxItem>
+                                    <ComboBoxItem>
+                                        <TextBlock Text="OpenGL" />
+                                    </ComboBoxItem>
+                                </ComboBox>
+                            </StackPanel>
+                            <StackPanel Orientation="Horizontal" IsVisible="{Binding IsVulkanSelected}">
+                                <TextBlock VerticalAlignment="Center"
+                                        ToolTip.Tip="{locale:Locale SettingsTabGraphicsPreferredGpuTooltip}"
+                                        Text="{locale:Locale SettingsTabGraphicsPreferredGpu}"
+                                        Width="250" />
+                                <ComboBox Width="350"
+                                        HorizontalContentAlignment="Left"
+                                        ToolTip.Tip="{locale:Locale SettingsTabGraphicsPreferredGpuTooltip}"
+                                        SelectedIndex="{Binding PreferredGpuIndex}"
+                                        Items="{Binding AvailableGpus}"/>
+                            </StackPanel>
+                        </StackPanel>
+                        <Separator Height="1" />
+                        <TextBlock Classes="h1" Text="{locale:Locale SettingsTabGraphicsFeatures}" />
+                        <StackPanel Margin="10,0,0,0" Orientation="Vertical" Spacing="10">
                             <StackPanel Orientation="Vertical">
                                 <CheckBox IsChecked="{Binding EnableShaderCache}"
                                     ToolTip.Tip="{locale:Locale ShaderCacheToggleTooltip}">
@@ -673,7 +676,7 @@
                             </StackPanel>
                         </StackPanel>
                         <Separator Height="1" />
-                        <TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabGraphicsDeveloperOptions}" />
+                        <TextBlock Classes="h1" Text="{locale:Locale SettingsTabGraphicsDeveloperOptions}" />
                         <StackPanel
                             Margin="10,0,0,0"
                             HorizontalAlignment="Stretch"
@@ -698,13 +701,13 @@
                 VerticalAlignment="Stretch"
                 HorizontalScrollBarVisibility="Disabled"
                 VerticalScrollBarVisibility="Auto">
-                <Border>
+                <Border Classes="settings">
                     <StackPanel
                         Margin="10,5"
                         HorizontalAlignment="Stretch"
                         Orientation="Vertical"
                         Spacing="10">
-                        <TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabAudio}" />
+                        <TextBlock Classes="h1" Text="{locale:Locale SettingsTabAudio}" />
                         <StackPanel Margin="10,0,0,0" Orientation="Horizontal">
                             <TextBlock VerticalAlignment="Center"
                                        Text="{locale:Locale SettingsTabSystemAudioBackend}"
@@ -763,13 +766,13 @@
                 VerticalAlignment="Stretch"
                 HorizontalScrollBarVisibility="Disabled"
                 VerticalScrollBarVisibility="Auto">
-                <Border>
+                <Border Classes="settings">
                     <StackPanel
                         Margin="10,5"
                         HorizontalAlignment="Stretch"
                         Orientation="Vertical"
                         Spacing="10">
-                        <TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabNetworkConnection}" />
+                        <TextBlock Classes="h1" Text="{locale:Locale SettingsTabNetworkConnection}" />
                         <CheckBox Margin="10,0,0,0" IsChecked="{Binding EnableInternetAccess}">
                             <TextBlock Text="{locale:Locale SettingsTabSystemEnableInternetAccess}"
                                        ToolTip.Tip="{locale:Locale EnableInternetAccessTooltip}" />
@@ -783,13 +786,13 @@
                 VerticalAlignment="Stretch"
                 HorizontalScrollBarVisibility="Disabled"
                 VerticalScrollBarVisibility="Auto">
-                <Border>
+                <Border Classes="settings">
                     <StackPanel
                         Margin="10,5"
                         HorizontalAlignment="Stretch"
                         Orientation="Vertical"
                         Spacing="10">
-                        <TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabLoggingLogging}" />
+                        <TextBlock Classes="h1" Text="{locale:Locale SettingsTabLoggingLogging}" />
                         <StackPanel Margin="10,0,0,0" Orientation="Vertical">
                             <CheckBox IsChecked="{Binding EnableFileLog}"
                                       ToolTip.Tip="{locale:Locale FileLogTooltip}">
@@ -821,7 +824,7 @@
                             </CheckBox>
                         </StackPanel>
                         <Separator Height="1" />
-                        <TextBlock FontWeight="Bold" Text="{locale:Locale SettingsTabLoggingDeveloperOptions}" />
+                        <TextBlock Classes="h1" Text="{locale:Locale SettingsTabLoggingDeveloperOptions}" />
                         <StackPanel
                             Margin="10,0,0,0"
                             HorizontalAlignment="Stretch"
@@ -880,10 +883,15 @@
                 </Border>
             </ScrollViewer>
         </Grid>
-        <ui:NavigationView Grid.Row="1" IsSettingsVisible="False" Name="NavPanel" IsBackEnabled="False"
-                           PaneDisplayMode="LeftCompact"
+        <ui:NavigationView Grid.Row="1"
+                           IsSettingsVisible="False"
+                           Name="NavPanel"
+                           IsBackEnabled="False"
+                           PaneDisplayMode="Left"
                            Margin="2,10,10,0"
-                           VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
+                           VerticalAlignment="Stretch"
+                           HorizontalAlignment="Stretch"
+                           OpenPaneLength="200">
             <ui:NavigationView.MenuItems>
                 <ui:NavigationViewItem IsSelected="True"
                                        Content="{locale:Locale SettingsTabGeneral}"