Feature: Updated the Toolbar design

src/Files.App/App.xaml

@@ -47,6 +47,7 @@
 						<ResourceDictionary x:Key="Light">
 							<SolidColorBrush x:Key="App.Theme.BackgroundBrush" Color="Transparent" />
 							<SolidColorBrush x:Key="App.Theme.AddressBar.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
+							<SolidColorBrush x:Key="App.Theme.Toolbar.BackgroundBrush" Color="{StaticResource LayerFillColorDefault}" />
 							<SolidColorBrush x:Key="App.Theme.Sidebar.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
 							<SolidColorBrush x:Key="App.Theme.FileArea.BackgroundBrush" Color="#C0FCFCFC" />
 
@@ -61,6 +62,7 @@
 						<ResourceDictionary x:Key="Dark">
 							<SolidColorBrush x:Key="App.Theme.BackgroundBrush" Color="Transparent" />
 							<SolidColorBrush x:Key="App.Theme.AddressBar.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
+							<SolidColorBrush x:Key="App.Theme.Toolbar.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
 							<SolidColorBrush x:Key="App.Theme.Sidebar.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
 							<SolidColorBrush x:Key="App.Theme.FileArea.BackgroundBrush" Color="#10f9f9f9" />
 
@@ -75,6 +77,7 @@
 						<ResourceDictionary x:Key="HighContrast">
 							<SolidColorBrush x:Key="App.Theme.BackgroundBrush" Color="Transparent" />
 							<SolidColorBrush x:Key="App.Theme.AddressBar.BackgroundBrush" Color="Transparent" />
+							<SolidColorBrush x:Key="App.Theme.Toolbar.BackgroundBrush" Color="Transparent" />
 							<SolidColorBrush x:Key="App.Theme.Sidebar.BackgroundBrush" Color="Transparent" />
 							<SolidColorBrush x:Key="App.Theme.FileArea.BackgroundBrush" Color="Transparent" />
 

src/Files.App/Data/Contracts/IResourcesService.cs

@@ -26,6 +26,12 @@ public interface IResourcesService
 		/// </summary>
 		/// <param name="appThemeAddressBarBackgroundColor"></param>
 		void SetAppThemeAddressBarBackgroundColor(Color appThemeAddressBarBackgroundColor);
+
+		/// <summary>
+		/// Overrides the XAML resource for App.Theme.Toolbar.BackgroundBrush
+		/// </summary>
+		/// <param name="appThemeToolbarBackgroundColor"></param>
+		void SetAppThemeToolbarBackgroundColor(Color appThemeToolbarBackgroundColor);
 
 		/// <summary>
 		/// Overrides the XAML resource for App.Theme.Sidebar.BackgroundBrush

src/Files.App/Helpers/UI/AppThemeResourcesHelper.cs

@@ -17,6 +17,7 @@ public static void LoadAppResources(this IResourcesService service, IAppearanceS
 		{
 			var appThemeBackgroundColor = appearance.AppThemeBackgroundColor;
 			var appThemeAddressBarBackgroundColor = appearance.AppThemeAddressBarBackgroundColor;
+			var appThemeToolbarBackgroundColor = appearance.AppThemeToolbarBackgroundColor;
 			var appThemeSidebarBackgroundColor = appearance.AppThemeSidebarBackgroundColor;
 			var appThemeFileAreaBackgroundColor = appearance.AppThemeFileAreaBackgroundColor;
 			var appThemeFontFamily = appearance.AppThemeFontFamily;
@@ -27,51 +28,57 @@ public static void LoadAppResources(this IResourcesService service, IAppearanceS
 			}
 			catch
 			{
-				appearance.AppThemeBackgroundColor = "#00000000"; //migrate to new default
+				appearance.AppThemeBackgroundColor = "#00000000"; // reset to default
 				service.SetAppThemeBackgroundColor(ColorHelper.ToColor("#00000000").FromWindowsColor());
 			}
 
-			if (!string.IsNullOrWhiteSpace(appThemeAddressBarBackgroundColor) && appThemeAddressBarBackgroundColor != "#00000000")
+			if (!string.IsNullOrWhiteSpace(appThemeAddressBarBackgroundColor))
 			{
 				try
 				{
 					service.SetAppThemeAddressBarBackgroundColor(ColorHelper.ToColor(appThemeAddressBarBackgroundColor).FromWindowsColor());
 				}
 				catch
 				{
-					appearance.AppThemeAddressBarBackgroundColor = ""; //migrate to new default
+					appearance.AppThemeAddressBarBackgroundColor = ""; // reset to default
 				}
 			}
-			else
-				appearance.AppThemeAddressBarBackgroundColor = ""; //migrate to new default
 
-			if (!string.IsNullOrWhiteSpace(appThemeSidebarBackgroundColor) && appThemeSidebarBackgroundColor != "#00000000")
+			if (!string.IsNullOrWhiteSpace(appThemeToolbarBackgroundColor))
+			{
+				try
+				{
+					service.SetAppThemeToolbarBackgroundColor(ColorHelper.ToColor(appThemeToolbarBackgroundColor).FromWindowsColor());
+				}
+				catch
+				{
+					appearance.AppThemeAddressBarBackgroundColor = ""; //reset to default
+				}
+			}
+
+			if (!string.IsNullOrWhiteSpace(appThemeSidebarBackgroundColor))
 			{
 				try
 				{
 					service.SetAppThemeSidebarBackgroundColor(ColorHelper.ToColor(appThemeSidebarBackgroundColor).FromWindowsColor());
 				}
 				catch
 				{
-					appearance.AppThemeSidebarBackgroundColor = ""; //migrate to new default
+					appearance.AppThemeSidebarBackgroundColor = ""; //reset to default
 				}
 			}
-			else
-				appearance.AppThemeSidebarBackgroundColor = ""; //migrate to new default
 
-			if (!string.IsNullOrWhiteSpace(appThemeFileAreaBackgroundColor) && appThemeFileAreaBackgroundColor != "#00000000")
+			if (!string.IsNullOrWhiteSpace(appThemeFileAreaBackgroundColor))
 			{
 				try
 				{
 					service.SetAppThemeFileAreaBackgroundColor(ColorHelper.ToColor(appThemeFileAreaBackgroundColor).FromWindowsColor());
 				}
 				catch
 				{
-					appearance.AppThemeFileAreaBackgroundColor = ""; //migrate to new default
+					appearance.AppThemeFileAreaBackgroundColor = ""; //reset to default
 				}
 			}
-			else
-				appearance.AppThemeFileAreaBackgroundColor = ""; //migrate to new default
 
 			if (appThemeFontFamily != Constants.Appearance.StandardFont)
 				service.SetAppThemeFontFamily(appThemeFontFamily);

src/Files.App/Services/ResourcesService.cs

@@ -26,6 +26,12 @@ public void SetAppThemeAddressBarBackgroundColor(Color appThemeAddressBarBackgro
 			Application.Current.Resources["TabViewItemHeaderBackgroundSelected"] = appThemeAddressBarBackgroundColor.ToWindowsColor();
 		}
 
+		/// <inheritdoc/>
+		public void SetAppThemeToolbarBackgroundColor(Color appThemeToolbarBackgroundColor)
+		{
+			Application.Current.Resources["App.Theme.Toolbar.BackgroundBrush"] = appThemeToolbarBackgroundColor.ToWindowsColor();
+		}
+
 		/// <inheritdoc/>
 		public void SetAppThemeSidebarBackgroundColor(Color appThemeSidebarBackgroundColor)
 		{

src/Files.App/Services/Settings/AppearanceSettingsService.cs

@@ -48,6 +48,13 @@ public String AppThemeAddressBarBackgroundColor
 			set => Set(value);
 		}
 
+		/// <inheritdoc/>
+		public String AppThemeToolbarBackgroundColor
+		{
+			get => Get("");
+			set => Set(value);
+		}
+
 		/// <inheritdoc/>
 		public String AppThemeSidebarBackgroundColor
 		{
@@ -117,6 +124,7 @@ protected override void RaiseOnSettingChangedEvent(object sender, SettingChanged
 			{
 				case nameof(AppThemeBackgroundColor):
 				case nameof(AppThemeAddressBarBackgroundColor):
+				case nameof(AppThemeToolbarBackgroundColor):
 				case nameof(AppThemeSidebarBackgroundColor):
 				case nameof(AppThemeFileAreaBackgroundColor):
 				case nameof(AppThemeBackdropMaterial):

src/Files.App/Services/Settings/IAppearanceSettingsService.cs

@@ -37,6 +37,11 @@ public interface IAppearanceSettingsService : IBaseSettingsService, INotifyPrope
 		/// </summary>
 		String AppThemeAddressBarBackgroundColor { get; set; }
 
+		/// <summary>
+		/// Gets or sets a value for the app theme toolbar background color.
+		/// </summary>
+		String AppThemeToolbarBackgroundColor { get; set; }
+
 		/// <summary>
 		/// Gets or sets a value for the app theme sidebar background color.
 		/// </summary>

src/Files.App/UserControls/InnerNavigationToolbar.xaml

@@ -54,10 +54,7 @@
 		</ResourceDictionary>
 	</UserControl.Resources>
 
-	<Grid
-		x:Name="RootGrid"
-		BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
-		BorderThickness="0,0,0,1">
+	<Grid x:Name="RootGrid">
 		<Grid.ColumnDefinitions>
 			<ColumnDefinition Width="*" />
 			<ColumnDefinition Width="Auto" />

src/Files.App/UserControls/SideBar/SideBarView.properties.cs

@@ -15,6 +15,14 @@ public SidebarDisplayMode DisplayMode
 		public static readonly DependencyProperty DisplayModeProperty =
 			DependencyProperty.Register(nameof(DisplayMode), typeof(SidebarDisplayMode), typeof(SidebarView), new PropertyMetadata(SidebarDisplayMode.Expanded, OnPropertyChanged));
 
+		public UIElement ContentHeader
+		{
+			get { return (UIElement)GetValue(ContentHeaderProperty); }
+			set { SetValue(ContentHeaderProperty, value); }
+		}
+		public static readonly DependencyProperty ContentHeaderProperty =
+			DependencyProperty.Register(nameof(ContentHeader), typeof(UIElement), typeof(SidebarView), new PropertyMetadata(null));
+
 		public UIElement InnerContent
 		{
 			get { return (UIElement)GetValue(InnerContentProperty); }

src/Files.App/UserControls/SideBar/SideBarView.xaml

@@ -99,7 +99,7 @@
 			Grid.RowSpan="2"
 			Grid.Column="2"
 			MinWidth="4"
-			Margin="0,8,0,40"
+			Margin="0,60,0,40"
 			HorizontalAlignment="Left"
 			AllowFocusOnInteraction="True"
 			Background="Transparent"
@@ -128,24 +128,39 @@
 			x:Name="ContentPresenter"
 			Grid.Row="1"
 			Grid.Column="2"
-			Margin="2,0,0,0"
+			Margin="2,0,8,0"
 			HorizontalAlignment="Stretch">
 			<Grid.RowDefinitions>
+				<RowDefinition Height="Auto" />
 				<RowDefinition Height="*" />
 				<RowDefinition Height="Auto" />
 			</Grid.RowDefinitions>
 
+			<!--  Header  -->
+			<Border
+				x:Name="ContentHeaderPresenter"
+				Grid.Row="0"
+				Margin="0,0,0,4"
+				VerticalAlignment="Stretch"
+				Background="{ThemeResource App.Theme.Toolbar.BackgroundBrush}"
+				BackgroundSizing="InnerBorderEdge"
+				BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+				BorderThickness="1"
+				Child="{x:Bind ContentHeader, Mode=OneWay}"
+				CornerRadius="8"
+				TabFocusNavigation="Local" />
+
 			<!--  Content  -->
 			<Border
 				x:Name="Content"
-				Grid.Row="0"
+				Grid.Row="1"
 				VerticalAlignment="Stretch"
 				Background="{ThemeResource App.Theme.FileArea.BackgroundBrush}"
 				BackgroundSizing="InnerBorderEdge"
 				BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
-				BorderThickness="1,1,0,1"
+				BorderThickness="1"
 				Child="{x:Bind InnerContent, Mode=OneWay}"
-				CornerRadius="8,0,0,8"
+				CornerRadius="8"
 				TabFocusNavigation="Local"
 				Translation="0,0,8">
 				<Border.Shadow>
@@ -156,7 +171,7 @@
 			<!--  Footer  -->
 			<Border
 				x:Name="ContentFooterPresenter"
-				Grid.Row="1"
+				Grid.Row="2"
 				VerticalAlignment="Stretch"
 				Child="{x:Bind ContentFooter, Mode=OneWay}"
 				TabFocusNavigation="Local" />
@@ -180,10 +195,8 @@
 						<Setter Target="PaneColumnGrid.CornerRadius" Value="0,8,0,8" />
 						<Setter Target="ContentPresenter.(Grid.Column)" Value="0" />
 						<Setter Target="ContentPresenter.(Grid.ColumnSpan)" Value="3" />
-						<Setter Target="Content.CornerRadius" Value="0" />
-						<Setter Target="Content.BorderThickness" Value="0,1,0,1" />
 						<Setter Target="SidebarResizer.Visibility" Value="Collapsed" />
-						<Setter Target="ContentPresenter.Margin" Value="0,0,0,0" />
+						<Setter Target="ContentPresenter.Margin" Value="8,0,8,0" />
 						<!--  Specific to collapsed pane  -->
 						<Setter Target="PaneColumnGridTransform.TranslateX" Value="{StaticResource SidebarNegativeOpenPaneLength}" />
 						<Setter Target="PaneColumnGrid.Visibility" Value="Collapsed" />
@@ -199,10 +212,8 @@
 						<Setter Target="PaneColumnGrid.CornerRadius" Value="0,8,0,8" />
 						<Setter Target="ContentPresenter.(Grid.Column)" Value="0" />
 						<Setter Target="ContentPresenter.(Grid.ColumnSpan)" Value="3" />
-						<Setter Target="Content.CornerRadius" Value="0" />
-						<Setter Target="Content.BorderThickness" Value="0,1,0,1" />
 						<Setter Target="SidebarResizer.Visibility" Value="Collapsed" />
-						<Setter Target="ContentPresenter.Margin" Value="0,0,0,0" />
+						<Setter Target="ContentPresenter.Margin" Value="8,0,8,0" />
 						<!--  Specific to expanded pane  -->
 						<Setter Target="PaneLightDismissLayer.Visibility" Value="Visible" />
 						<Setter Target="PaneColumnGrid.Shadow">

src/Files.App/UserControls/StatusBar.xaml

@@ -101,7 +101,7 @@
 		</Style>
 	</UserControl.Resources>
 
-	<Grid Padding="8,0">
+	<Grid Padding="8,0,0,0">
 		<Grid.ColumnDefinitions>
 			<ColumnDefinition />
 			<ColumnDefinition Width="Auto" />

src/Files.App/Views/MainPage.xaml

@@ -215,13 +215,27 @@
 			SelectedItem="{x:Bind SidebarAdaptiveViewModel.SidebarSelectedItem, Mode=TwoWay}"
 			ViewModel="{x:Bind SidebarAdaptiveViewModel}">
 
+			<!--  Content Header  -->
+			<sidebar:SidebarView.ContentHeader>
+				<Border>
+					<!--  File Navigation Toolbar  -->
+					<uc:InnerNavigationToolbar
+						x:Name="InnerNavigationToolbar"
+						x:Load="False"
+						Loaded="NavToolbar_Loaded"
+						ShowPreviewPaneButton="{x:Bind ViewModel.ShouldPreviewPaneBeDisplayed, Mode=OneWay}"
+						ShowViewControlButton="{x:Bind ViewModel.ShouldViewControlBeDisplayed, Mode=OneWay}"
+						TabIndex="2" />
+				</Border>
+			</sidebar:SidebarView.ContentHeader>
+
+			<!--  Inner Content  -->
 			<sidebar:SidebarView.InnerContent>
 				<Grid
 					x:Name="RootGrid"
 					PreviewKeyDown="RootGrid_PreviewKeyDown"
 					SizeChanged="RootGrid_SizeChanged">
 					<Grid.RowDefinitions>
-						<RowDefinition Height="Auto" />
 						<RowDefinition
 							x:Name="ContentRow"
 							Height="*"
@@ -238,19 +252,9 @@
 						<ColumnDefinition x:Name="PaneColumn" Width="Auto" />
 					</Grid.ColumnDefinitions>
 
-					<!--  File Navigation Toolbar  -->
-					<uc:InnerNavigationToolbar
-						x:Name="InnerNavigationToolbar"
-						Grid.ColumnSpan="3"
-						x:Load="False"
-						Loaded="NavToolbar_Loaded"
-						ShowPreviewPaneButton="{x:Bind ViewModel.ShouldPreviewPaneBeDisplayed, Mode=OneWay}"
-						ShowViewControlButton="{x:Bind ViewModel.ShouldViewControlBeDisplayed, Mode=OneWay}"
-						TabIndex="2" />
-
 					<!--  Page Content  -->
 					<ContentPresenter
-						Grid.Row="1"
+						Grid.Row="0"
 						Grid.Column="0"
 						HorizontalAlignment="Stretch"
 						HorizontalContentAlignment="Stretch"
@@ -259,7 +263,7 @@
 					<!--  Preview Pane Splitter  -->
 					<toolkit:GridSplitter
 						x:Name="PaneSplitter"
-						Grid.Row="1"
+						Grid.Row="0"
 						Grid.Column="1"
 						x:Load="{x:Bind ViewModel.ShouldPreviewPaneBeActive, Mode=OneWay}"
 						ManipulationCompleted="PaneSplitter_ManipulationCompleted"
@@ -270,7 +274,7 @@
 					<!--  Preview Pane  -->
 					<uc:InfoPane
 						x:Name="PreviewPane"
-						Grid.Row="1"
+						Grid.Row="0"
 						Grid.Column="2"
 						HorizontalContentAlignment="Stretch"
 						x:Load="{x:Bind ViewModel.ShouldPreviewPaneBeActive, Mode=OneWay}"
@@ -279,7 +283,7 @@
 				</Grid>
 			</sidebar:SidebarView.InnerContent>
 
-			<!--  Footer Content  -->
+			<!--  Content Footer  -->
 			<sidebar:SidebarView.ContentFooter>
 				<Border>
 					<!--  Status Bar  -->

src/Files.App/Views/MainPage.xaml.cs

@@ -390,9 +390,9 @@ private void UpdatePositioning()
 						PaneColumn.Width = new GridLength(0);
 						break;
 					case PreviewPanePositions.Right:
-						PreviewPane.SetValue(Grid.RowProperty, 1);
+						PreviewPane.SetValue(Grid.RowProperty, 0);
 						PreviewPane.SetValue(Grid.ColumnProperty, 2);
-						PaneSplitter.SetValue(Grid.RowProperty, 1);
+						PaneSplitter.SetValue(Grid.RowProperty, 0);
 						PaneSplitter.SetValue(Grid.ColumnProperty, 1);
 						PaneSplitter.Width = 2;
 						PaneSplitter.Height = RootGrid.ActualHeight;
@@ -406,9 +406,9 @@ private void UpdatePositioning()
 						PaneRow.Height = new GridLength(0);
 						break;
 					case PreviewPanePositions.Bottom:
-						PreviewPane.SetValue(Grid.RowProperty, 3);
+						PreviewPane.SetValue(Grid.RowProperty, 2);
 						PreviewPane.SetValue(Grid.ColumnProperty, 0);
-						PaneSplitter.SetValue(Grid.RowProperty, 2);
+						PaneSplitter.SetValue(Grid.RowProperty, 1);
 						PaneSplitter.SetValue(Grid.ColumnProperty, 0);
 						PaneSplitter.Height = 2;
 						PaneSplitter.Width = RootGrid.ActualWidth;