Feature: Introduce NavigationViewItemButtonStyle to Settings dialog

src/Files.App/App.xaml

@@ -37,6 +37,7 @@
 			<ResourceDictionary.MergedDictionaries>
 				<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
 				<ResourceDictionary Source="/ResourceDictionaries/PathIcons.xaml" />
+				<ResourceDictionary Source="/ResourceDictionaries/SettingsControlsStyle.xaml" />
 				<ResourceDictionary>
 					<ResourceDictionary.ThemeDictionaries>
 						<ResourceDictionary x:Key="Light">

src/Files.App/Dialogs/SettingsDialog.xaml

@@ -6,11 +6,17 @@
 	xmlns:helpers="using:Files.App.Helpers"
 	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 	Closing="ContentDialog_Closing"
+	DataContext="{x:Bind ViewModel, Mode=OneWay}"
 	RequestedTheme="{x:Bind RootAppElement.RequestedTheme, Mode=OneWay}"
 	Style="{StaticResource DefaultContentDialogStyle}"
 	mc:Ignorable="d">
+
 	<ContentDialog.Resources>
 		<ResourceDictionary>
+			<ResourceDictionary.MergedDictionaries>
+				<ResourceDictionary Source="ms-appx:///ResourceDictionaries/NavigationViewItemButtonStyle.xaml" />
+			</ResourceDictionary.MergedDictionaries>
+
 			<x:Double x:Key="ContentDialogMaxWidth">1100</x:Double>
 			<Thickness x:Key="ContentDialogPadding">0</Thickness>
 		</ResourceDictionary>
@@ -20,18 +26,14 @@
 		<Grid
 			x:Name="ContainerGrid"
 			MaxHeight="790"
-			HorizontalAlignment="Stretch"
-			VerticalAlignment="Stretch"
 			Background="{ThemeResource App.Theme.ContentDialog.BackgroundBrush}">
 			<Grid.RowDefinitions>
 				<RowDefinition Height="44" />
 				<RowDefinition Height="*" />
 			</Grid.RowDefinitions>
 
-			<Grid
-				Grid.Row="0"
-				Padding="8,0"
-				HorizontalAlignment="Stretch">
+			<!--  Titlebar  -->
+			<Grid Padding="8,0">
 				<TextBlock
 					Padding="8,0,0,0"
 					HorizontalAlignment="Left"
@@ -40,36 +42,39 @@
 					Text="{helpers:ResourceString Name=Settings}" />
 
 				<Button
-					x:Name="ButtonClose"
+					x:Name="CloseSettingsDialogButton"
 					Width="36"
 					Height="36"
 					HorizontalAlignment="Right"
 					VerticalAlignment="Center"
 					AutomationProperties.Name="{helpers:ResourceString Name=Close}"
 					Background="Transparent"
 					BorderBrush="Transparent"
-					Click="ButtonClose_Click"
+					Click="CloseSettingsDialogButton_Click"
+					CornerRadius="{StaticResource OverlayCornerRadius}"
 					ToolTipService.ToolTip="{helpers:ResourceString Name=Close}">
 					<FontIcon FontSize="12" Glyph="&#xE8BB;" />
 				</Button>
 			</Grid>
 
+			<!--  Settings Navigation View  -->
 			<NavigationView
-				x:Name="SettingsPane"
+				x:Name="MainSettingsNavigationView"
 				Grid.Row="1"
 				IsBackButtonVisible="Collapsed"
 				IsBackEnabled="False"
 				IsPaneToggleButtonVisible="False"
 				IsSettingsVisible="False"
 				IsTitleBarAutoPaddingEnabled="False"
-				OpenPaneLength="260"
+				OpenPaneLength="224"
 				PaneDisplayMode="Left"
-				SelectionChanged="SettingsPane_SelectionChanged">
+				SelectionChanged="MainSettingsNavigationView_SelectionChanged">
 
+				<!--  Menu Items  -->
 				<NavigationView.MenuItems>
 					<NavigationViewItem
 						AccessKey="A"
-						AutomationProperties.AutomationId="SettingsItemAppearance"
+						AutomationProperties.AutomationId="MainSettingsNavigationViewItemAppearance"
 						Content="{helpers:ResourceString Name=Appearance}"
 						IsSelected="True"
 						Tag="0">
@@ -79,7 +84,7 @@
 					</NavigationViewItem>
 					<NavigationViewItem
 						AccessKey="P"
-						AutomationProperties.AutomationId="SettingsItemPreferences"
+						AutomationProperties.AutomationId="MainSettingsNavigationViewItemPreferences"
 						Content="{helpers:ResourceString Name=SettingsNavPreferences/Content}"
 						Tag="1">
 						<NavigationViewItem.Icon>
@@ -88,7 +93,7 @@
 					</NavigationViewItem>
 					<NavigationViewItem
 						AccessKey="F"
-						AutomationProperties.AutomationId="SettingsItemFolders"
+						AutomationProperties.AutomationId="MainSettingsNavigationViewItemFolders"
 						Content="{helpers:ResourceString Name=Folders}"
 						Tag="2">
 						<NavigationViewItem.Icon>
@@ -97,7 +102,7 @@
 					</NavigationViewItem>
 					<NavigationViewItem
 						AccessKey="T"
-						AutomationProperties.AutomationId="SettingsItemTags"
+						AutomationProperties.AutomationId="MainSettingsNavigationViewItemTags"
 						Content="{helpers:ResourceString Name=FileTags}"
 						Tag="3">
 						<NavigationViewItem.Icon>
@@ -106,7 +111,7 @@
 					</NavigationViewItem>
 					<NavigationViewItem
 						AccessKey="E"
-						AutomationProperties.AutomationId="SettingsItemAdvanced"
+						AutomationProperties.AutomationId="MainSettingsNavigationViewItemAdvanced"
 						Content="{helpers:ResourceString Name=Advanced}"
 						CornerRadius="0"
 						Tag="4">
@@ -116,7 +121,7 @@
 					</NavigationViewItem>
 					<NavigationViewItem
 						AccessKey="B"
-						AutomationProperties.AutomationId="SettingsItemAbout"
+						AutomationProperties.AutomationId="MainSettingsNavigationViewItemAbout"
 						Content="{helpers:ResourceString Name=About}"
 						Tag="5">
 						<NavigationViewItem.Icon>
@@ -125,13 +130,11 @@
 					</NavigationViewItem>
 				</NavigationView.MenuItems>
 
-				<ScrollViewer
-					x:Name="SettingsScrollViewer"
-					VerticalAlignment="Stretch"
-					VerticalScrollBarVisibility="Visible"
-					VerticalScrollMode="Enabled">
-					<Frame x:Name="SettingsContentFrame" Padding="12" />
+				<!--  Content Frame  -->
+				<ScrollViewer x:Name="SettingsContentScrollViewer">
+					<Frame x:Name="SettingsContentFrame" />
 				</ScrollViewer>
+
 			</NavigationView>
 		</Grid>
 	</Border>

src/Files.App/Dialogs/SettingsDialog.xaml.cs

@@ -1,4 +1,4 @@
-using Files.App.Settings;
+using Files.App.Views.Settings;
 using Files.Backend.ViewModels.Dialogs;
 using Files.Shared.Enums;
 using Microsoft.UI.Xaml;
@@ -10,38 +10,33 @@ namespace Files.App.Dialogs
 {
 	public sealed partial class SettingsDialog : ContentDialog, IDialog<SettingsDialogViewModel>
 	{
-		public SettingsDialogViewModel ViewModel
-		{
-			get => (SettingsDialogViewModel)DataContext;
-			set => DataContext = value;
-		}
+		public SettingsDialogViewModel ViewModel { get; set; }
 
-		// for some reason the requested theme wasn't being set on the content dialog, so this is used to manually bind to the requested app theme
-		private FrameworkElement RootAppElement => App.Window.Content as FrameworkElement;
+		private FrameworkElement RootAppElement
+			=> (FrameworkElement)App.Window.Content;
 
 		public SettingsDialog()
 		{
 			InitializeComponent();
-			SettingsPane.SelectedItem = SettingsPane.MenuItems[0];
+
 			App.Window.SizeChanged += Current_SizeChanged;
 			UpdateDialogLayout();
 		}
 
-		public new async Task<DialogResult> ShowAsync() => (DialogResult)await base.ShowAsync();
+		public new async Task<DialogResult> ShowAsync()
+			=> (DialogResult)await base.ShowAsync();
 
 		private void Current_SizeChanged(object sender, WindowSizeChangedEventArgs e)
-		{
-			UpdateDialogLayout();
-		}
+			=> UpdateDialogLayout();
 
 		private void UpdateDialogLayout()
 		{
 			ContainerGrid.Height = App.Window.Bounds.Height <= 760 ? App.Window.Bounds.Height - 70 : 690;
 			ContainerGrid.Width = App.Window.Bounds.Width <= 1100 ? App.Window.Bounds.Width : 1100;
-			SettingsPane.PaneDisplayMode = App.Window.Bounds.Width < 700 ? NavigationViewPaneDisplayMode.LeftCompact : NavigationViewPaneDisplayMode.Left;
+			MainSettingsNavigationView.PaneDisplayMode = App.Window.Bounds.Width < 700 ? NavigationViewPaneDisplayMode.LeftCompact : NavigationViewPaneDisplayMode.Left;
 		}
 
-		private void SettingsPane_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
+		private void MainSettingsNavigationView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
 		{
 			var selectedItem = (NavigationViewItem)args.SelectedItem;
 			int selectedItemTag = Convert.ToInt32(selectedItem.Tag);
@@ -63,9 +58,7 @@ private void ContentDialog_Closing(ContentDialog sender, ContentDialogClosingEve
 			App.Window.SizeChanged -= Current_SizeChanged;
 		}
 
-		private void ButtonClose_Click(object sender, RoutedEventArgs e)
-		{
-			Hide();
-		}
+		private void CloseSettingsDialogButton_Click(object sender, RoutedEventArgs e)
+			=> Hide();
 	}
-}
+}