Feature: Added support for changing backdrop material (#12534)

src/Files.App/Helpers/AppSystemBackdrop.cs

@@ -0,0 +1,98 @@
+using Microsoft.UI.Composition;
+using Microsoft.UI.Composition.SystemBackdrops;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Media;
+using System;
+using System.Collections.Generic;
+using System.Diagnostics.CodeAnalysis;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Files.App.Helpers
+{
+	internal sealed class AppSystemBackdrop : SystemBackdrop
+	{
+		private bool isSecondaryWindow;
+		private IUserSettingsService userSettingsService;
+		private ISystemBackdropControllerWithTargets? controller;
+		private ICompositionSupportsSystemBackdrop target;
+		private XamlRoot root;
+
+		public AppSystemBackdrop(bool isSecondaryWindow = false)
+		{
+			this.isSecondaryWindow = isSecondaryWindow;
+			userSettingsService = Ioc.Default.GetRequiredService<IUserSettingsService>();
+			userSettingsService.OnSettingChangedEvent += OnSettingChanged;
+		}
+
+		[MemberNotNull(nameof(target), nameof(root))]
+		protected override void OnTargetConnected(ICompositionSupportsSystemBackdrop connectedTarget, XamlRoot xamlRoot)
+		{
+			if (target is not null)
+				throw new InvalidOperationException("AppSystemBackdrop cannot be used with more than one target");
+
+			base.OnTargetConnected(connectedTarget, xamlRoot);
+			this.target = connectedTarget;
+			this.root = xamlRoot;
+			controller = GetSystemBackdropController(userSettingsService.AppearanceSettingsService.AppThemeBackdropMaterial);
+			controller?.SetSystemBackdropConfiguration(GetDefaultSystemBackdropConfiguration(connectedTarget, xamlRoot));
+			controller?.AddSystemBackdropTarget(connectedTarget);
+		}
+
+		protected override void OnTargetDisconnected(ICompositionSupportsSystemBackdrop disconnectedTarget)
+		{
+			base.OnTargetDisconnected(disconnectedTarget);
+			this.target = null!;
+			this.root = null!;
+			controller?.RemoveSystemBackdropTarget(disconnectedTarget);
+			controller?.Dispose();
+			userSettingsService.OnSettingChangedEvent -= OnSettingChanged;
+		}
+
+		private void OnSettingChanged(object? sender, Shared.EventArguments.SettingChangedEventArgs e)
+		{
+			if (target is null)
+				return;
+
+			switch (e.SettingName)
+			{
+				case nameof(IAppearanceSettingsService.AppThemeBackdropMaterial):
+					controller?.RemoveAllSystemBackdropTargets();
+					controller?.Dispose();
+					var newController = GetSystemBackdropController((BackdropMaterialType)e.NewValue!);
+					newController?.SetSystemBackdropConfiguration(GetDefaultSystemBackdropConfiguration(target, root));
+					newController?.AddSystemBackdropTarget(target);
+					controller = newController;
+					break;
+			}
+		}
+
+		private ISystemBackdropControllerWithTargets? GetSystemBackdropController(BackdropMaterialType backdropType)
+		{
+			if (isSecondaryWindow && backdropType == BackdropMaterialType.MicaAlt)
+				backdropType = BackdropMaterialType.Mica;
+
+			switch (backdropType)
+			{
+				case BackdropMaterialType.MicaAlt:
+					return new MicaController()
+					{
+						Kind = MicaKind.BaseAlt
+					};
+
+				case BackdropMaterialType.Mica:
+					return new MicaController()
+					{
+						Kind = MicaKind.Base
+					};
+
+				case BackdropMaterialType.Acrylic:
+					return new DesktopAcrylicController();
+
+				default:
+					return null;
+			}
+		}
+	}
+}

src/Files.App/Helpers/FilePropertiesHelpers.cs

@@ -115,7 +115,7 @@ public static void OpenPropertiesWindow(object item, IShellPage associatedInstan
 			propertiesWindow.Width = 800;
 			propertiesWindow.Height = 550;
 			propertiesWindow.Content = frame;
-			propertiesWindow.SystemBackdrop = new MicaBackdrop();
+			propertiesWindow.SystemBackdrop = new AppSystemBackdrop(true);
 
 			var appWindow = propertiesWindow.AppWindow;
 			appWindow.Title = "Properties".GetLocalizedResource();

src/Files.App/MainWindow.xaml

@@ -6,11 +6,4 @@
 	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 	xmlns:winuiex="using:WinUIEx"
-	mc:Ignorable="d">
-
-	<!--  Mica Alt  -->
-	<winuiex:WindowEx.Backdrop>
-		<winuiex:MicaSystemBackdrop Kind="BaseAlt" />
-	</winuiex:WindowEx.Backdrop>
-
-</winuiex:WindowEx>
+	mc:Ignorable="d" />

src/Files.App/MainWindow.xaml.cs

@@ -1,10 +1,13 @@
 // Copyright (c) 2023 Files Community
 // Licensed under the MIT License. See the LICENSE.
 
+using Files.App.ServicesImplementation.Settings;
 using Files.App.UserControls.MultitaskingControl;
 using Microsoft.UI;
+using Microsoft.UI.Composition.SystemBackdrops;
 using Microsoft.UI.Windowing;
 using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Media;
 using Microsoft.UI.Xaml.Media.Animation;
 using Microsoft.UI.Xaml.Navigation;
 using System.IO;
@@ -158,6 +161,9 @@ private Frame EnsureWindowIsInitialized()
 			//  just ensure that the window is active
 			if (!(App.Window.Content is Frame rootFrame))
 			{
+				// Set system backdrop
+				this.SystemBackdrop = new AppSystemBackdrop();
+
 				// Create a Frame to act as the navigation context and navigate to the first page
 				rootFrame = new Frame();
 				rootFrame.CacheSize = 1;

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

@@ -5,6 +5,7 @@
 using Files.Backend.Services.Settings;
 using Files.Shared.EventArguments;
 using Microsoft.AppCenter.Analytics;
+using Microsoft.UI.Composition.SystemBackdrops;
 using System;
 
 namespace Files.App.ServicesImplementation.Settings
@@ -70,6 +71,13 @@ public String AppThemeFontFamily
 			set => Set(value);
 		}
 
+		/// <inheritdoc/>
+		public BackdropMaterialType AppThemeBackdropMaterial
+		{
+			get => Get(BackdropMaterialType.MicaAlt);
+			set => Set(value);
+		}
+
 		protected override void RaiseOnSettingChangedEvent(object sender, SettingChangedEventArgs e)
 		{
 			switch (e.SettingName)
@@ -79,6 +87,7 @@ protected override void RaiseOnSettingChangedEvent(object sender, SettingChanged
 				case nameof(AppThemeAddressBarBackgroundColor):
 				case nameof(AppThemeSidebarBackgroundColor):
 				case nameof(AppThemeFileAreaBackgroundColor):
+				case nameof(AppThemeBackdropMaterial):
 					Analytics.TrackEvent($"Set {e.SettingName} to {e.NewValue}");
 					break;
 			}

src/Files.App/Strings/en-US/Resources.resw

@@ -3344,4 +3344,19 @@
     <value>(multiple values)</value>
     <comment>Text indicating that multiple selected files have different metadata values.</comment>
   </data>
+  <data name="Acrylic" xml:space="preserve">
+    <value>Acrylic</value>
+  </data>
+  <data name="Mica" xml:space="preserve">
+    <value>Mica</value>
+  </data>
+  <data name="MicaAlt" xml:space="preserve">
+    <value>Mica Alt</value>
+  </data>
+  <data name="BackdropMaterial" xml:space="preserve">
+    <value>Backdrop Material</value>
+  </data>
+  <data name="Solid" xml:space="preserve">
+    <value>Solid</value>
+  </data>
 </root>

src/Files.App/ViewModels/Settings/AppearanceViewModel.cs

@@ -3,6 +3,7 @@
 
 using CommunityToolkit.WinUI.Helpers;
 using Files.Backend.Services;
+using Microsoft.UI.Composition.SystemBackdrops;
 using Microsoft.UI.Xaml;
 
 namespace Files.App.ViewModels.Settings
@@ -13,6 +14,7 @@ public class AppearanceViewModel : ObservableObject
 		private readonly IResourcesService ResourcesService;
 
 		public List<string> Themes { get; private set; }
+		public Dictionary<BackdropMaterialType, string> BackdropMaterialTypes { get; private set; } = new();
 
 		public ObservableCollection<AppThemeResourceItem> AppThemeResources { get; }
 
@@ -28,6 +30,16 @@ public AppearanceViewModel(IUserSettingsService userSettingsService, IResourcesS
 				"DarkTheme".GetLocalizedResource()
 			};
 
+			// TODO: Re-add Solid and regular Mica when theming is revamped
+			//BackdropMaterialTypes.Add(BackdropMaterialType.Solid, "Solid".GetLocalizedResource());
+
+			BackdropMaterialTypes.Add(BackdropMaterialType.Acrylic, "Acrylic".GetLocalizedResource());
+
+			//BackdropMaterialTypes.Add(BackdropMaterialType.Mica, "Mica".GetLocalizedResource());
+			BackdropMaterialTypes.Add(BackdropMaterialType.MicaAlt, "MicaAlt".GetLocalizedResource());
+
+			selectedBackdropMaterial = BackdropMaterialTypes[UserSettingsService.AppearanceSettingsService.AppThemeBackdropMaterial];
+
 			AppThemeResources = AppThemeResourceFactory.AppThemeResources;
 
 			UpdateSelectedResource();
@@ -129,5 +141,19 @@ public string AppThemeBackgroundColor
 				}
 			}
 		}
+
+		private string selectedBackdropMaterial;
+		public string SelectedBackdropMaterial
+		{
+			get => selectedBackdropMaterial;
+			set
+			{
+				if(SetProperty(ref selectedBackdropMaterial, value))
+				{
+					UserSettingsService.AppearanceSettingsService.AppThemeBackdropMaterial = BackdropMaterialTypes.First(e => e.Value == value).Key;
+				}
+			}
+		}
+
 	}
 }

src/Files.App/Views/Settings/AppearancePage.xaml

@@ -115,6 +115,17 @@
 					SelectedIndex="{x:Bind ViewModel.SelectedThemeIndex, Mode=TwoWay}" />
 			</local:SettingsBlockControl>
 
+			<!--  Backdrop Material  -->
+			<local:SettingsBlockControl Title="{helpers:ResourceString Name=BackdropMaterial}" HorizontalAlignment="Stretch">
+				<local:SettingsBlockControl.Icon>
+					<FontIcon Glyph="&#xEF1F;" />
+				</local:SettingsBlockControl.Icon>
+				<ComboBox
+					AutomationProperties.Name="{helpers:ResourceString Name=BackdropMaterial}"
+					ItemsSource="{x:Bind ViewModel.BackdropMaterialTypes.Values}"
+					SelectedItem="{x:Bind ViewModel.SelectedBackdropMaterial, Mode=TwoWay}" />
+			</local:SettingsBlockControl>
+
 			<!--  App Background  -->
 			<local:SettingsBlockControl
 				Title="{helpers:ResourceString Name=Background}"

src/Files.App/Views/Settings/GeneralPage.xaml

@@ -57,33 +57,6 @@
 					</ComboBox.ItemTemplate>
 				</ComboBox>
 			</local:SettingsBlockControl>
-			<!--  Restart Teaching Tip  -->
-			<TeachingTip
-				IsLightDismissEnabled="True"
-				IsOpen="{x:Bind ViewModel.ShowRestartControl, Mode=TwoWay}"
-				Subtitle="{helpers:ResourceString Name=RestartNotificationText/Text}"
-				Target="{x:Bind AppLanguagesComboBox}">
-				<StackPanel
-					x:Name="ButtonsStackPanel"
-					Padding="0,8,0,0"
-					HorizontalAlignment="Right"
-					Orientation="Horizontal"
-					Spacing="8">
-
-					<Button
-						x:Name="YesButton"
-						MinWidth="140"
-						Command="{x:Bind ViewModel.RestartCommand, Mode=OneWay}"
-						Content="{helpers:ResourceString Name=Yes}"
-						Style="{ThemeResource AccentButtonStyle}" />
-
-					<Button
-						x:Name="NoButton"
-						MinWidth="140"
-						Command="{x:Bind ViewModel.CancelRestartCommand, Mode=OneWay}"
-						Content="{helpers:ResourceString Name=No}" />
-				</StackPanel>
-			</TeachingTip>
 
 			<!--  Date settings  -->
 			<local:SettingsBlockControl
@@ -348,5 +321,33 @@
 					Style="{StaticResource RightAlignedToggleSwitchStyle}" />
 			</local:SettingsBlockControl>
 		</StackPanel>
+
+		<!--  Restart Teaching Tip  -->
+		<TeachingTip
+			IsLightDismissEnabled="True"
+			IsOpen="{x:Bind ViewModel.ShowRestartControl, Mode=TwoWay}"
+			Subtitle="{helpers:ResourceString Name=RestartNotificationText/Text}"
+			Target="{x:Bind AppLanguagesComboBox}">
+			<StackPanel
+				x:Name="ButtonsStackPanel"
+				Padding="0,8,0,0"
+				HorizontalAlignment="Right"
+				Orientation="Horizontal"
+				Spacing="8">
+
+				<Button
+					x:Name="YesButton"
+					MinWidth="140"
+					Command="{x:Bind ViewModel.RestartCommand, Mode=OneWay}"
+					Content="{helpers:ResourceString Name=Yes}"
+					Style="{ThemeResource AccentButtonStyle}" />
+
+				<Button
+					x:Name="NoButton"
+					MinWidth="140"
+					Command="{x:Bind ViewModel.CancelRestartCommand, Mode=OneWay}"
+					Content="{helpers:ResourceString Name=No}" />
+			</StackPanel>
+		</TeachingTip>
 	</Grid>
 </Page>

src/Files.Backend/Enums/BackdropMaterialType.cs

@@ -0,0 +1,10 @@
+namespace Files.Backend.Enums
+{
+	public enum BackdropMaterialType
+	{
+		Solid,
+		Mica,
+		MicaAlt,
+		Acrylic
+	}
+}

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

@@ -1,6 +1,7 @@
 // Copyright (c) 2023 Files Community
 // Licensed under the MIT License. See the LICENSE.
 
+using Files.Backend.Enums;
 using System;
 using System.ComponentModel;
 
@@ -51,5 +52,10 @@ public interface IAppearanceSettingsService : IBaseSettingsService, INotifyPrope
 		/// Gets or sets a value for the app theme font family.
 		/// </summary>
 		String AppThemeFontFamily { get; set; }
+
+		/// <summary>
+		/// Gets or sets a value for the theme system backdrop.
+		/// </summary>
+		BackdropMaterialType AppThemeBackdropMaterial { get; set; }
 	}
 }