Feature: Updated the design of the Preview Pane (files-community#15456)

src/Files.App/App.xaml

@@ -50,6 +50,7 @@
 							<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" />
+							<SolidColorBrush x:Key="App.Theme.InfoPane.BackgroundBrush" Color="{StaticResource LayerFillColorDefault}" />
 
 							<SolidColorBrush x:Key="TabViewItemHeaderBackground" Color="{StaticResource SubtleFillColorTransparent}" />
 							<SolidColorBrush x:Key="TabViewItemHeaderBackgroundSelected" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
@@ -62,9 +63,10 @@
 						<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.Toolbar.BackgroundBrush" Color="{StaticResource CardBackgroundFillColorSecondary}" />
 							<SolidColorBrush x:Key="App.Theme.Sidebar.BackgroundBrush" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
-							<SolidColorBrush x:Key="App.Theme.FileArea.BackgroundBrush" Color="#10f9f9f9" />
+							<SolidColorBrush x:Key="App.Theme.FileArea.BackgroundBrush" Color="{StaticResource CardBackgroundFillColorDefault}" />
+							<SolidColorBrush x:Key="App.Theme.InfoPane.BackgroundBrush" Color="{StaticResource CardBackgroundFillColorSecondary}" />
 
 							<SolidColorBrush x:Key="TabViewItemHeaderBackground" Color="{StaticResource SubtleFillColorTransparent}" />
 							<SolidColorBrush x:Key="TabViewItemHeaderBackgroundSelected" Color="{StaticResource LayerOnMicaBaseAltFillColorDefault}" />
@@ -80,6 +82,7 @@
 							<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" />
+							<SolidColorBrush x:Key="App.Theme.InfoPane.BackgroundBrush" Color="Transparent" />
 
 							<SolidColorBrush x:Key="TabViewItemHeaderBackground" Color="{StaticResource SystemColorWindowColor}" />
 							<SolidColorBrush x:Key="TabViewItemHeaderBackgroundSelected" Color="{StaticResource SystemColorHighlightColor}" />

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

@@ -45,6 +45,12 @@ public interface IResourcesService
 		/// <param name="appThemeFileAreaBackgroundColor"></param>
 		void SetAppThemeFileAreaBackgroundColor(Color appThemeFileAreaBackgroundColor);
 
+		/// <summary>
+		/// Overrides the XAML resource for App.Theme.InfoPane.BackgroundBrush
+		/// </summary>
+		/// <param name="appThemeInfoPaneBackgroundColor"></param>
+		void SetAppThemeInfoPaneBackgroundColor(Color appThemeInfoPaneBackgroundColor);
+
 		/// <summary>
 		/// Overrides the XAML resource for ContentControlThemeFontFamily
 		/// </summary>

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

@@ -20,6 +20,7 @@ public static void LoadAppResources(this IResourcesService service, IAppearanceS
 			var appThemeToolbarBackgroundColor = appearance.AppThemeToolbarBackgroundColor;
 			var appThemeSidebarBackgroundColor = appearance.AppThemeSidebarBackgroundColor;
 			var appThemeFileAreaBackgroundColor = appearance.AppThemeFileAreaBackgroundColor;
+			var appThemeInfoPaneBackgroundColor = appearance.AppThemeInfoPaneBackgroundColor;
 			var appThemeFontFamily = appearance.AppThemeFontFamily;
 
 			try
@@ -80,6 +81,18 @@ public static void LoadAppResources(this IResourcesService service, IAppearanceS
 				}
 			}
 
+			if (!string.IsNullOrWhiteSpace(appThemeInfoPaneBackgroundColor))
+			{
+				try
+				{
+					service.SetAppThemeInfoPaneBackgroundColor(ColorHelper.ToColor(appThemeInfoPaneBackgroundColor).FromWindowsColor());
+				}
+				catch
+				{
+					appearance.AppThemeInfoPaneBackgroundColor = ""; //reset to default
+				}
+			}
+
 			if (appThemeFontFamily != Constants.Appearance.StandardFont)
 				service.SetAppThemeFontFamily(appThemeFontFamily);
 

src/Files.App/Services/ResourcesService.cs

@@ -44,6 +44,12 @@ public void SetAppThemeFileAreaBackgroundColor(Color appThemeFileAreaBackgroundC
 			Application.Current.Resources["App.Theme.FileArea.BackgroundBrush"] = appThemeFileAreaBackgroundColor.ToWindowsColor();
 		}
 
+		/// <inheritdoc/>
+		public void SetAppThemeInfoPaneBackgroundColor(Color appThemeInfoPaneBackgroundColor)
+		{
+			Application.Current.Resources["App.Theme.InfoPane.BackgroundBrush"] = appThemeInfoPaneBackgroundColor.ToWindowsColor();
+		}
+
 		/// <inheritdoc/>
 		public void SetAppThemeFontFamily(string contentControlThemeFontFamily)
 		{

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

@@ -69,6 +69,13 @@ public String AppThemeFileAreaBackgroundColor
 			set => Set(value);
 		}
 
+		/// <inheritdoc/>
+		public String AppThemeInfoPaneBackgroundColor
+		{
+			get => Get("");
+			set => Set(value);
+		}
+
 		/// <inheritdoc/>
 		public String AppThemeFontFamily
 		{
@@ -127,6 +134,7 @@ protected override void RaiseOnSettingChangedEvent(object sender, SettingChanged
 				case nameof(AppThemeToolbarBackgroundColor):
 				case nameof(AppThemeSidebarBackgroundColor):
 				case nameof(AppThemeFileAreaBackgroundColor):
+				case nameof(AppThemeInfoPaneBackgroundColor):
 				case nameof(AppThemeBackdropMaterial):
 				case nameof(AppThemeBackgroundImageFit):
 				case nameof(AppThemeBackgroundImageOpacity):

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

@@ -52,6 +52,11 @@ public interface IAppearanceSettingsService : IBaseSettingsService, INotifyPrope
 		/// </summary>
 		String AppThemeFileAreaBackgroundColor { get; set; }
 
+		/// <summary>
+		/// Gets or sets a value for the app theme info pane background color.
+		/// </summary>
+		String AppThemeInfoPaneBackgroundColor { get; set; }
+
 		/// <summary>
 		/// Gets or sets a value for the app theme font family.
 		/// </summary>

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

@@ -15,29 +15,13 @@ 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); }
 			set { SetValue(InnerContentProperty, value); }
 		}
 		public static readonly DependencyProperty InnerContentProperty =
 			DependencyProperty.Register(nameof(InnerContent), typeof(UIElement), typeof(SidebarView), new PropertyMetadata(null));
-
-		public UIElement ContentFooter
-		{
-			get { return (UIElement)GetValue(ContentFooterProperty); }
-			set { SetValue(ContentFooterProperty, value); }
-		}
-		public static readonly DependencyProperty ContentFooterProperty =
-			DependencyProperty.Register(nameof(ContentFooter), typeof(UIElement), typeof(SidebarView), new PropertyMetadata(null));
 
 		public UIElement Footer
 		{

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

@@ -130,44 +130,12 @@
 			Grid.Column="2"
 			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"
-				VerticalAlignment="Stretch"				
-				Child="{x:Bind ContentHeader, Mode=OneWay}"				
-				TabFocusNavigation="Local" />
 
 			<!--  Content  -->
 			<Border
 				x:Name="Content"
-				Grid.Row="1"
 				VerticalAlignment="Stretch"
-				Background="{ThemeResource App.Theme.FileArea.BackgroundBrush}"
-				BackgroundSizing="InnerBorderEdge"
-				BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
-				BorderThickness="1"
 				Child="{x:Bind InnerContent, Mode=OneWay}"
-				CornerRadius="8"
-				TabFocusNavigation="Local"
-				Translation="0,0,8">
-				<Border.Shadow>
-					<ThemeShadow x:Name="ContentThemeShadow" />
-				</Border.Shadow>
-			</Border>
-
-			<!--  Footer  -->
-			<Border
-				x:Name="ContentFooterPresenter"
-				Grid.Row="2"
-				VerticalAlignment="Stretch"
-				Child="{x:Bind ContentFooter, Mode=OneWay}"
 				TabFocusNavigation="Local" />
 
 		</Grid>

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

@@ -119,9 +119,6 @@ private void SidebarView_Loaded(object sender, RoutedEventArgs e)
 			UpdateDisplayMode();
 			UpdateOpenPaneLengthColumn();
 			PaneColumnGrid.Translation = new System.Numerics.Vector3(0, 0, 32);
-
-			// Cast shadow on the footer
-			ContentThemeShadow.Receivers.Add(ContentFooterPresenter);
 		}
 
 		private void SidebarResizer_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)

src/Files.App/Views/MainPage.xaml

@@ -215,39 +215,22 @@
 			SelectedItem="{x:Bind SidebarAdaptiveViewModel.SidebarSelectedItem, Mode=TwoWay}"
 			ViewModel="{x:Bind SidebarAdaptiveViewModel}">
 
-			<!--  Content Header  -->
-			<sidebar:SidebarView.ContentHeader>
-				<Border
-					Margin="0,0,0,4"
-					Background="{ThemeResource App.Theme.Toolbar.BackgroundBrush}"
-					BackgroundSizing="InnerBorderEdge"
-					BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
-					BorderThickness="1"
-					CornerRadius="8">
-					<!--  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"
+					Loaded="RootGrid_Loaded"
 					PreviewKeyDown="RootGrid_PreviewKeyDown"
 					SizeChanged="RootGrid_SizeChanged">
 					<Grid.RowDefinitions>
+						<RowDefinition Height="Auto" />
 						<RowDefinition
 							x:Name="ContentRow"
 							Height="*"
 							MinHeight="100" />
 						<RowDefinition Height="Auto" />
 						<RowDefinition x:Name="PaneRow" Height="Auto" />
+						<RowDefinition Height="Auto" MinHeight="8" />
 					</Grid.RowDefinitions>
 					<Grid.ColumnDefinitions>
 						<ColumnDefinition
@@ -258,48 +241,84 @@
 						<ColumnDefinition x:Name="PaneColumn" Width="Auto" />
 					</Grid.ColumnDefinitions>
 
+					<!--  File Navigation Toolbar  -->
+					<Border
+						Grid.Row="0"
+						Grid.ColumnSpan="3"
+						Margin="0,0,0,4"
+						Background="{ThemeResource App.Theme.Toolbar.BackgroundBrush}"
+						BackgroundSizing="InnerBorderEdge"
+						BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+						BorderThickness="1"
+						CornerRadius="8">
+						<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>
+
 					<!--  Page Content  -->
 					<ContentPresenter
-						Grid.Row="0"
+						x:Name="PageContent"
+						Grid.Row="1"
 						Grid.Column="0"
 						HorizontalAlignment="Stretch"
 						HorizontalContentAlignment="Stretch"
-						Content="{x:Bind ((viewmodels:MainPageViewModel)DataContext).SelectedTabItem.ContentFrame, Mode=OneWay}" />
+						Background="{ThemeResource App.Theme.FileArea.BackgroundBrush}"
+						BackgroundSizing="InnerBorderEdge"
+						BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+						BorderThickness="1"
+						Content="{x:Bind ((viewmodels:MainPageViewModel)DataContext).SelectedTabItem.ContentFrame, Mode=OneWay}"
+						CornerRadius="8"
+						Translation="0,0,8">
+						<ContentPresenter.Shadow>
+							<ThemeShadow x:Name="PageContentThemeShadow" />
+						</ContentPresenter.Shadow>
+					</ContentPresenter>
 
 					<!--  Preview Pane Splitter  -->
 					<toolkit:GridSplitter
 						x:Name="PaneSplitter"
-						Grid.Row="0"
+						Grid.Row="1"
 						Grid.Column="1"
 						x:Load="{x:Bind ViewModel.ShouldPreviewPaneBeActive, Mode=OneWay}"
 						ManipulationCompleted="PaneSplitter_ManipulationCompleted"
 						ManipulationStarted="PaneSplitter_ManipulationStarted"
+						Opacity="0"
 						ResizeBehavior="BasedOnAlignment"
 						Style="{StaticResource DefaultGridSplitterStyle}" />
 
 					<!--  Preview Pane  -->
-					<uc:InfoPane
-						x:Name="PreviewPane"
-						Grid.Row="0"
+					<Border
+						x:Name="InfoPaneContainer"
+						Grid.Row="1"
 						Grid.Column="2"
-						HorizontalContentAlignment="Stretch"
 						x:Load="{x:Bind ViewModel.ShouldPreviewPaneBeActive, Mode=OneWay}"
-						Loaded="PreviewPane_Loaded"
-						Unloaded="PreviewPane_Unloaded" />
-				</Grid>
-			</sidebar:SidebarView.InnerContent>
+						Background="{ThemeResource App.Theme.InfoPane.BackgroundBrush}"
+						BackgroundSizing="InnerBorderEdge"
+						BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+						BorderThickness="1"
+						CornerRadius="8">
+						<uc:InfoPane
+							x:Name="PreviewPane"
+							HorizontalContentAlignment="Stretch"
+							Loaded="PreviewPane_Loaded"
+							Unloaded="PreviewPane_Unloaded" />
+					</Border>
 
-			<!--  Content Footer  -->
-			<sidebar:SidebarView.ContentFooter>
-				<Border>
 					<!--  Status Bar  -->
 					<uc:StatusBar
 						x:Name="StatusBar"
-						Height="32"
+						Grid.Row="4"
+						Grid.ColumnSpan="3"
 						x:Load="False"
-						ShowInfoText="{x:Bind SidebarAdaptiveViewModel.PaneHolder.ActivePaneOrColumn.InstanceViewModel.IsPageTypeNotHome, Mode=OneWay}" />
-				</Border>
-			</sidebar:SidebarView.ContentFooter>
+						ShowInfoText="{x:Bind SidebarAdaptiveViewModel.PaneHolder.ActivePaneOrColumn.InstanceViewModel.IsPageTypeNotHome, Mode=OneWay}"
+						Visibility="{x:Bind SidebarAdaptiveViewModel.PaneHolder.ActivePaneOrColumn.InstanceViewModel.IsPageTypeNotHome, Mode=OneWay}" />
+				</Grid>
+			</sidebar:SidebarView.InnerContent>
 		</sidebar:SidebarView>
 
 		<VisualStateManager.VisualStateGroups>

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, 0);
-						PreviewPane.SetValue(Grid.ColumnProperty, 2);
-						PaneSplitter.SetValue(Grid.RowProperty, 0);
+						InfoPaneContainer.SetValue(Grid.RowProperty, 1);
+						InfoPaneContainer.SetValue(Grid.ColumnProperty, 2);
+						PaneSplitter.SetValue(Grid.RowProperty, 1);
 						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, 2);
-						PreviewPane.SetValue(Grid.ColumnProperty, 0);
-						PaneSplitter.SetValue(Grid.RowProperty, 1);
+						InfoPaneContainer.SetValue(Grid.RowProperty, 3);
+						InfoPaneContainer.SetValue(Grid.ColumnProperty, 0);
+						PaneSplitter.SetValue(Grid.RowProperty, 2);
 						PaneSplitter.SetValue(Grid.ColumnProperty, 0);
 						PaneSplitter.Height = 2;
 						PaneSplitter.Width = RootGrid.ActualWidth;
@@ -554,5 +554,11 @@ private void TogglePaneButton_Click(object sender, RoutedEventArgs e)
 				SidebarControl.IsPaneOpen = !SidebarControl.IsPaneOpen;
 			}
 		}
+
+		private void RootGrid_Loaded(object sender, RoutedEventArgs e)
+		{
+			// Cast shadow on the status bar
+			PageContentThemeShadow.Receivers.Add(StatusBar);
+		}
 	}
 }