[Settings] Mica & modern titlebar (#25936)

* Adding Mica

* Working Mica

* Fluent titlebar

* Modern titlebar

* Fixing OOBE

* Fix build issue

* Add missing entry to NOTICE.md

* Update App.xaml.cs

Directory.Packages.props

@@ -7,6 +7,7 @@
     <PackageVersion Include="CommunityToolkit.Labs.WinUI.SettingsControls" Version="0.0.18" />
     <PackageVersion Include="CommunityToolkit.Mvvm" Version="8.2.0" />
     <PackageVersion Include="CommunityToolkit.WinUI.UI" Version="7.1.2" />
+    <PackageVersion Include="CommunityToolkit.WinUI.UI.Animations" Version="7.1.2" />
     <PackageVersion Include="CommunityToolkit.WinUI.UI.Controls" Version="7.1.2" />
     <PackageVersion Include="ControlzEx" Version="5.0.1" />
     <PackageVersion Include="coverlet.collector" Version="1.3.0" />

NOTICE.md

@@ -284,6 +284,7 @@ SOFTWARE.
 - CommunityToolkit.Labs.WinUI.SettingsControls 0.0.18
 - CommunityToolkit.Mvvm 8.2.0
 - CommunityToolkit.WinUI.UI 7.1.2
+- CommunityToolkit.WinUI.UI.Animations 7.1.2
 - CommunityToolkit.WinUI.UI.Controls 7.1.2
 - ControlzEx 5.0.1
 - HelixToolkit 2.20.2

src/settings-ui/Settings.UI/App.xaml

@@ -3,9 +3,9 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
-    xmlns:local="using:Microsoft.PowerToys.Settings.UI"
     xmlns:converters="using:CommunityToolkit.WinUI.UI.Converters"
-    xmlns:labs="using:CommunityToolkit.Labs.WinUI">
+    xmlns:labs="using:CommunityToolkit.Labs.WinUI"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
@@ -54,14 +54,17 @@
                 <Setter Property="IsTabStop" Value="False" />
             </Style>
 
-            <Style
+            <Style BasedOn="{StaticResource DefaultCheckBoxStyle}" TargetType="controls:CheckBoxWithDescriptionControl" />
-                BasedOn="{StaticResource DefaultCheckBoxStyle}"
-                TargetType="controls:CheckBoxWithDescriptionControl" />
             <!--  Other app resources here  -->
 
+            <SolidColorBrush x:Key="WindowCaptionBackground" Color="Transparent" />
+            <SolidColorBrush x:Key="WindowCaptionBackgroundDisabled" Color="Transparent" />
+
             <TransitionCollection x:Key="SettingsCardsAnimations">
-                <EntranceThemeTransition FromVerticalOffset="50"/> <!-- Animates cards when loaded-->
+                <EntranceThemeTransition FromVerticalOffset="50" /> 
-                <RepositionThemeTransition  IsStaggeringEnabled="False" /><!-- Smoothly animates individual cards upon whenever Expanders are expanded/collapsed -->
+                <!--  Animates cards when loaded  -->
+                <RepositionThemeTransition IsStaggeringEnabled="False" />
+                <!--  Smoothly animates individual cards upon whenever Expanders are expanded/collapsed  -->
             </TransitionCollection>
         </ResourceDictionary>
     </Application.Resources>

src/settings-ui/Settings.UI/App.xaml.cs

@@ -85,6 +85,7 @@ namespace Microsoft.PowerToys.Settings.UI
             }
 
             settingsWindow.Activate();
+
             if (type != null)
             {
                 settingsWindow.NavigateToSection(type);
@@ -104,7 +105,6 @@ namespace Microsoft.PowerToys.Settings.UI
         protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
         {
             var cmdArgs = Environment.GetCommandLineArgs();
-
             var isDark = IsDarkTheme();
 
             if (cmdArgs != null && cmdArgs.Length >= RequiredArgumentsQty)
@@ -164,6 +164,7 @@ namespace Microsoft.PowerToys.Settings.UI
                 {
                     settingsWindow = new MainWindow(isDark);
                     settingsWindow.Activate();
+                    settingsWindow.ExtendsContentIntoTitleBar = true;
                     settingsWindow.NavigateToSection(StartupPage);
 
                     // https://github.com/microsoft/microsoft-ui-xaml/issues/7595 - Activate doesn't bring window to the foreground
@@ -182,6 +183,7 @@ namespace Microsoft.PowerToys.Settings.UI
                         PowerToysTelemetry.Log.WriteEvent(new OobeStartedEvent());
                         OobeWindow oobeWindow = new OobeWindow(OOBE.Enums.PowerToysModules.Overview, isDark);
                         oobeWindow.Activate();
+                        oobeWindow.ExtendsContentIntoTitleBar = true;
                         SetOobeWindow(oobeWindow);
                     }
                     else if (ShowScoobe)
@@ -189,6 +191,7 @@ namespace Microsoft.PowerToys.Settings.UI
                         PowerToysTelemetry.Log.WriteEvent(new ScoobeStartedEvent());
                         OobeWindow scoobeWindow = new OobeWindow(OOBE.Enums.PowerToysModules.WhatsNew, isDark);
                         scoobeWindow.Activate();
+                        scoobeWindow.ExtendsContentIntoTitleBar = true;
                         SetOobeWindow(scoobeWindow);
                     }
                     else if (ShowFlyout)
@@ -208,7 +211,9 @@ namespace Microsoft.PowerToys.Settings.UI
                 // For debugging purposes
                 // Window is also needed to show MessageDialog
                 settingsWindow = new MainWindow(isDark);
+                settingsWindow.ExtendsContentIntoTitleBar = true;
                 settingsWindow.Activate();
+                settingsWindow.NavigateToSection(StartupPage);
 
 #if !DEBUG
                 ShowMessageDialogAndExit("The application cannot be run as a standalone process. Please start the application through the runner.", "Forbidden");
@@ -248,36 +253,43 @@ namespace Microsoft.PowerToys.Settings.UI
             return ipcmanager;
         }
 
-        public static string SelectedTheme()
+        public static ElementTheme SelectedTheme()
         {
-            return SettingsRepository<GeneralSettings>.GetInstance(settingsUtils).SettingsConfig.Theme.ToUpper(CultureInfo.InvariantCulture);
+            switch (SettingsRepository<GeneralSettings>.GetInstance(settingsUtils).SettingsConfig.Theme.ToUpper(CultureInfo.InvariantCulture))
+            {
+                case "DARK": return ElementTheme.Dark;
+                case "LIGHT": return ElementTheme.Light;
+                default: return ElementTheme.Default;
+            }
         }
 
         public static bool IsDarkTheme()
         {
             var selectedTheme = SelectedTheme();
-            return selectedTheme == "DARK" || (selectedTheme == "SYSTEM" && ThemeHelpers.GetAppTheme() == AppTheme.Dark);
+            return selectedTheme == ElementTheme.Dark || (selectedTheme == ElementTheme.Default && ThemeHelpers.GetAppTheme() == AppTheme.Dark);
         }
 
         public static void HandleThemeChange()
         {
             try
             {
-                var isDark = IsDarkTheme();
+                bool isDark = IsDarkTheme();
+
                 if (settingsWindow != null)
                 {
                     var hWnd = WinRT.Interop.WindowNative.GetWindowHandle(settingsWindow);
                     ThemeHelpers.SetImmersiveDarkMode(hWnd, isDark);
+                    SetContentTheme(isDark, settingsWindow);
                 }
 
                 if (oobeWindow != null)
                 {
                     var hWnd = WinRT.Interop.WindowNative.GetWindowHandle(oobeWindow);
                     ThemeHelpers.SetImmersiveDarkMode(hWnd, isDark);
+                    SetContentTheme(isDark, oobeWindow);
                 }
 
-                var selectedTheme = SelectedTheme();
+                if (SelectedTheme() == ElementTheme.Default)
-                if (selectedTheme == "SYSTEM")
                 {
                     themeListener = new ThemeListener();
                     themeListener.ThemeChanged += (_) => HandleThemeChange();
@@ -298,6 +310,22 @@ namespace Microsoft.PowerToys.Settings.UI
             }
         }
 
+        public static void SetContentTheme(bool isDark, WindowEx window)
+        {
+            var rootGrid = (FrameworkElement)window.Content;
+            if (rootGrid != null)
+            {
+                if (isDark)
+                {
+                    rootGrid.RequestedTheme = ElementTheme.Dark;
+                }
+                else
+                {
+                    rootGrid.RequestedTheme = ElementTheme.Light;
+                }
+            }
+        }
+
         private static ISettingsUtils settingsUtils = new SettingsUtils();
 
         private static MainWindow settingsWindow;

src/settings-ui/Settings.UI/Controls/SettingsPageControl/SettingsPageControl.xaml

@@ -46,7 +46,6 @@
         <TextBlock
             x:Name="Header"
             MaxWidth="{StaticResource PageMaxWidth}"
-            Margin="0,44,0,0"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Stretch"
             AutomationProperties.HeadingLevel="1"

src/settings-ui/Settings.UI/MainWindow.xaml

@@ -10,8 +10,8 @@
     MinHeight="480"
     Closed="Window_Closed"
     mc:Ignorable="d">
-
+    <Window.SystemBackdrop>
-    <Grid>
+        <MicaBackdrop/>
-        <local:ShellPage />
+    </Window.SystemBackdrop>
-    </Grid>
+    <local:ShellPage x:Name="shellPage" />
 </winuiex:WindowEx>

src/settings-ui/Settings.UI/MainWindow.xaml.cs

@@ -220,6 +220,8 @@ namespace Microsoft.PowerToys.Settings.UI
 
             this.InitializeComponent();
 
+            SetTheme(isDark);
+
             // receive IPC Message
             App.IPCMessageReceivedCallback = (string msg) =>
             {
@@ -279,5 +281,10 @@ namespace Microsoft.PowerToys.Settings.UI
         {
             ShellPage.EnsurePageIsSelected();
         }
+
+        private void SetTheme(bool isDark)
+        {
+            shellPage.RequestedTheme = isDark ? ElementTheme.Dark : ElementTheme.Light;
+        }
     }
 }

src/settings-ui/Settings.UI/OOBE/Views/OobeShellPage.xaml

@@ -2,22 +2,73 @@
     x:Class="Microsoft.PowerToys.Settings.UI.OOBE.Views.OobeShellPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:animations="using:CommunityToolkit.WinUI.UI.Animations"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
-    xmlns:localModels="using:Microsoft.PowerToys.Settings.UI.OOBE.ViewModel"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:ui="using:CommunityToolkit.WinUI.UI"
     HighContrastAdjustment="None"
+    Loaded="ShellPage_Loaded"
     mc:Ignorable="d">
-    <!--
+    <Grid>
-        todo(Stefan):
+        <Grid.RowDefinitions>
-        BackdropMaterial.ApplyToRootOrPageBackground="True"
+            <RowDefinition Height="48" />
-    -->
+            <RowDefinition Height="*" />
-    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+        </Grid.RowDefinitions>
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="LayoutVisualStates">
+                <VisualState x:Name="WideLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="720" />
+                    </VisualState.StateTriggers>
+                </VisualState>
+                <VisualState x:Name="SmallLayout">
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="600" />
+                        <AdaptiveTrigger MinWindowWidth="0" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="navigationView.PaneDisplayMode" Value="LeftMinimal" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+        <Button
+            x:Name="PaneToggleBtn"
+            Width="48"
+            HorizontalAlignment="Left"
+            VerticalAlignment="Center"
+            Click="PaneToggleBtn_Click"
+            Style="{StaticResource PaneToggleButtonStyle}" />
+        <Grid
+            x:Name="AppTitleBar"
+            Height="{Binding ElementName=navigationView, Path=CompactPaneLength}"
+            Margin="48,0,0,0"
+            VerticalAlignment="Top"
+            IsHitTestVisible="True">
+            <animations:Implicit.Animations>
+                <animations:OffsetAnimation Duration="0:0:0.3" />
+            </animations:Implicit.Animations>
+            <StackPanel Orientation="Horizontal">
+                <Image
+                    Width="16"
+                    Height="16"
+                    HorizontalAlignment="Left"
+                    Source="/icon.ico" />
+                <TextBlock
+                    x:Name="AppTitleBarText"
+                    x:Uid="OobeWindow_TitleTxt"
+                    Margin="12,0,0,0"
+                    VerticalAlignment="Center"
+                    Style="{StaticResource CaptionTextBlockStyle}"
+                    TextWrapping="NoWrap" />
+            </StackPanel>
+        </Grid>
         <NavigationView
-            x:Name="NavigationView"
+            Grid.Row="1"
+            x:Name="navigationView"
             IsBackButtonVisible="Collapsed"
             IsPaneOpen="True"
+            DisplayModeChanged="NavigationView_DisplayModeChanged"
             IsPaneToggleButtonVisible="False"
             IsSettingsVisible="False"
             OpenPaneLength="296"
@@ -116,31 +167,13 @@
             <NavigationView.FooterMenuItems>
                 <NavigationViewItem
                     x:Uid="Shell_WhatsNew"
-                    Icon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily}, Glyph=&#xF133;}"
+                    Icon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily},
+                                       Glyph=&#xF133;}"
                     Tag="WhatsNew" />
             </NavigationView.FooterMenuItems>
             <NavigationView.Content>
                 <Frame x:Name="NavigationFrame" />
             </NavigationView.Content>
         </NavigationView>
-        <VisualStateManager.VisualStateGroups>
-            <VisualStateGroup x:Name="LayoutVisualStates">
-                <VisualState x:Name="WideLayout">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="720" />
-                    </VisualState.StateTriggers>
-                </VisualState>
-                <VisualState x:Name="SmallLayout">
-                    <VisualState.StateTriggers>
-                        <AdaptiveTrigger MinWindowWidth="600" />
-                        <AdaptiveTrigger MinWindowWidth="0" />
-                    </VisualState.StateTriggers>
-                    <VisualState.Setters>
-                        <Setter Target="NavigationView.PaneDisplayMode" Value="LeftMinimal" />
-                        <Setter Target="NavigationView.IsPaneToggleButtonVisible" Value="True" />
-                    </VisualState.Setters>
-                </VisualState>
-            </VisualStateGroup>
-        </VisualStateManager.VisualStateGroups>
     </Grid>
 </UserControl>

src/settings-ui/Settings.UI/OOBE/Views/OobeShellPage.xaml.cs

@@ -59,10 +59,9 @@ namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
             InitializeComponent();
 
             ExperimentationToggleSwitchEnabled = SettingsRepository<GeneralSettings>.GetInstance(settingsUtils).SettingsConfig.EnableExperimentation;
-
+            SetTitleBar();
             DataContext = ViewModel;
             OobeShellHandler = this;
-            UpdateUITheme();
             Modules = new ObservableCollection<OobePowerToysModule>();
 
             Modules.Insert((int)PowerToysModules.Overview, new OobePowerToysModule()
@@ -190,7 +189,7 @@ namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
 
         public void OnClosing()
         {
-            Microsoft.UI.Xaml.Controls.NavigationViewItem selectedItem = this.NavigationView.SelectedItem as Microsoft.UI.Xaml.Controls.NavigationViewItem;
+            Microsoft.UI.Xaml.Controls.NavigationViewItem selectedItem = this.navigationView.SelectedItem as Microsoft.UI.Xaml.Controls.NavigationViewItem;
             if (selectedItem != null)
             {
                 Modules[(int)(PowerToysModules)Enum.Parse(typeof(PowerToysModules), (string)selectedItem.Tag, true)].LogClosingModuleEvent();
@@ -201,11 +200,11 @@ namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
         {
             if (selectedModule == PowerToysModules.WhatsNew)
             {
-                NavigationView.SelectedItem = NavigationView.FooterMenuItems[0];
+                navigationView.SelectedItem = navigationView.FooterMenuItems[0];
             }
             else
             {
-                NavigationView.SelectedItem = NavigationView.MenuItems[(int)selectedModule];
+                navigationView.SelectedItem = navigationView.MenuItems[(int)selectedModule];
             }
         }
 
@@ -264,20 +263,42 @@ namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
             }
         }
 
-        public void UpdateUITheme()
+        private void SetTitleBar()
         {
-            switch (SettingsRepository<GeneralSettings>.GetInstance(new SettingsUtils()).SettingsConfig.Theme.ToUpperInvariant())
+            var u = App.GetOobeWindow();
+            if (u != null)
             {
-                case "LIGHT":
+                // A custom title bar is required for full window theme and Mica support.
-                    this.RequestedTheme = ElementTheme.Light;
+                // https://docs.microsoft.com/windows/apps/develop/title-bar?tabs=winui3#full-customization
-                    break;
+                u.ExtendsContentIntoTitleBar = true;
-                case "DARK":
+                u.SetTitleBar(AppTitleBar);
-                    this.RequestedTheme = ElementTheme.Dark;
-                    break;
-                case "SYSTEM":
-                    this.RequestedTheme = ElementTheme.Default;
-                    break;
             }
         }
+
+        private void ShellPage_Loaded(object sender, RoutedEventArgs e)
+        {
+            SetTitleBar();
+        }
+
+        private void NavigationView_DisplayModeChanged(NavigationView sender, NavigationViewDisplayModeChangedEventArgs args)
+        {
+            if (args.DisplayMode == NavigationViewDisplayMode.Compact || args.DisplayMode == NavigationViewDisplayMode.Minimal)
+            {
+                PaneToggleBtn.Visibility = Visibility.Visible;
+                AppTitleBar.Margin = new Thickness(48, 0, 0, 0);
+                AppTitleBarText.Margin = new Thickness(12, 0, 0, 0);
+            }
+            else
+            {
+                PaneToggleBtn.Visibility = Visibility.Collapsed;
+                AppTitleBar.Margin = new Thickness(16, 0, 0, 0);
+                AppTitleBarText.Margin = new Thickness(16, 0, 0, 0);
+            }
+        }
+
+        private void PaneToggleBtn_Click(object sender, RoutedEventArgs e)
+        {
+            navigationView.IsPaneOpen = !navigationView.IsPaneOpen;
+        }
     }
 }

src/settings-ui/Settings.UI/OobeWindow.xaml

@@ -1,17 +1,17 @@
 <winuiex:WindowEx
-    xmlns:winuiex="using:WinUIEx"
     x:Class="Microsoft.PowerToys.Settings.UI.OobeWindow"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:winuiex="using:WinUIEx"
     MinWidth="480"
     MinHeight="480"
     Closed="Window_Closed"
     mc:Ignorable="d">
-
+    <Window.SystemBackdrop>
-    <Grid>
+        <MicaBackdrop />
-        <local:OobeShellPage x:Name="shellPage" />
+    </Window.SystemBackdrop>
-    </Grid>
+    <local:OobeShellPage x:Name="shellPage" />
 </winuiex:WindowEx>

src/settings-ui/Settings.UI/OobeWindow.xaml.cs

@@ -48,6 +48,8 @@ namespace Microsoft.PowerToys.Settings.UI
                 ThemeHelpers.SetImmersiveDarkMode(_hWnd, isDark);
             }
 
+            SetTheme(isDark);
+
             OverlappedPresenter presenter = _appWindow.Presenter as OverlappedPresenter;
             presenter.IsMinimizable = false;
             presenter.IsMaximizable = false;
@@ -118,5 +120,10 @@ namespace Microsoft.PowerToys.Settings.UI
                 mainWindow.CloseHiddenWindow();
             }
         }
+
+        private void SetTheme(bool isDark)
+        {
+            shellPage.RequestedTheme = isDark ? ElementTheme.Dark : ElementTheme.Light;
+        }
     }
 }

src/settings-ui/Settings.UI/PowerToys.Settings.csproj

@@ -82,6 +82,7 @@
 
   <ItemGroup>
     <PackageReference Include="CommunityToolkit.Labs.WinUI.SettingsControls" />
+    <PackageReference Include="CommunityToolkit.WinUI.UI.Animations" />
     <PackageReference Include="Microsoft.Windows.CsWinRT" />
     <PackageReference Include="CommunityToolkit.WinUI.UI" />
     <PackageReference Include="CommunityToolkit.WinUI.UI.Controls" />

src/settings-ui/Settings.UI/Strings/en-us/Resources.resw

@@ -2149,6 +2149,9 @@ From there, simply click on one of the supported files in the File Explorer and
   </data>
   <data name="OobeWindow_Title" xml:space="preserve">
     <value>Welcome to PowerToys</value>
+  </data>
+	<data name="OobeWindow_TitleTxt.Text" xml:space="preserve">
+    <value>Welcome to PowerToys</value>
   </data>
   <data name="SettingsWindow_Title" xml:space="preserve">
     <value>PowerToys Settings</value>
@@ -3529,6 +3532,9 @@ Activate by holding the key for the character you want to add an accent to, then
     <value>Maximum width (px)</value>
     <comment>px = pixels</comment>
   </data>
+	<data name="SettingsWindow_TitleTxt.Text" xml:space="preserve">
+    <value>PowerToys Settings</value>
+	  </data>
   <data name="Oobe_Peek.Description" xml:space="preserve">
     <value>A lightning fast file preview feature for Windows.</value>
   </data>

src/settings-ui/Settings.UI/Views/GeneralPage.xaml.cs

@@ -8,6 +8,7 @@ using System.Threading.Tasks;
 using ManagedCommon;
 using Microsoft.PowerToys.Settings.UI.Helpers;
 using Microsoft.PowerToys.Settings.UI.Library;
+using Microsoft.PowerToys.Settings.UI.OOBE.Views;
 using Microsoft.PowerToys.Settings.UI.ViewModels;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
@@ -94,12 +95,15 @@ namespace Microsoft.PowerToys.Settings.UI.Views
             switch (themeName?.ToUpperInvariant())
             {
                 case "LIGHT":
+                    // OobeShellPage.OobeShellHandler.RequestedTheme = ElementTheme.Light;
                     ShellPage.ShellHandler.RequestedTheme = ElementTheme.Light;
                     break;
                 case "DARK":
+                    // OobeShellPage.OobeShellHandler.RequestedTheme = ElementTheme.Dark;
                     ShellPage.ShellHandler.RequestedTheme = ElementTheme.Dark;
                     break;
                 case "SYSTEM":
+                    // OobeShellPage.OobeShellHandler.RequestedTheme = ElementTheme.Default;
                     ShellPage.ShellHandler.RequestedTheme = ElementTheme.Default;
                     break;
                 default:

src/settings-ui/Settings.UI/Views/ShellPage.xaml

@@ -2,6 +2,7 @@
     x:Class="Microsoft.PowerToys.Settings.UI.Views.ShellPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:animations="using:CommunityToolkit.WinUI.UI.Animations"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:helpers="using:Microsoft.PowerToys.Settings.UI.Helpers"
     xmlns:i="using:Microsoft.Xaml.Interactivity"
@@ -10,11 +11,8 @@
     xmlns:ui="using:CommunityToolkit.WinUI.UI"
     xmlns:views="using:Microsoft.PowerToys.Settings.UI.Views"
     HighContrastAdjustment="None"
+    Loaded="ShellPage_Loaded"
     mc:Ignorable="d">
-    <!--
-        TODO(stefan): Bring back Should be available in v1.1
-        BackdropMaterial.ApplyToRootOrPageBackground="True"
-    -->
 
     <i:Interaction.Behaviors>
         <ic:EventTriggerBehavior EventName="Loaded">
@@ -22,14 +20,61 @@
         </ic:EventTriggerBehavior>
     </i:Interaction.Behaviors>
 
-    <Grid x:Name="RootGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+    <Grid x:Name="RootGrid">
-
+        <Grid.RowDefinitions>
+            <RowDefinition Height="48" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+        <Button
+            x:Name="PaneToggleBtn"
+            Width="48"
+            HorizontalAlignment="Left"
+            VerticalAlignment="Center"
+            Click="PaneToggleBtn_Click"
+            Style="{StaticResource PaneToggleButtonStyle}" />
+        <Grid
+            x:Name="AppTitleBar"
+            Height="{Binding ElementName=navigationView, Path=CompactPaneLength}"
+            Margin="48,0,0,0"
+            VerticalAlignment="Top"
+            IsHitTestVisible="True">
+            <animations:Implicit.Animations>
+                <animations:OffsetAnimation Duration="0:0:0.3" />
+            </animations:Implicit.Animations>
+            <StackPanel Orientation="Horizontal">
+                <Image
+                    Width="16"
+                    Height="16"
+                    HorizontalAlignment="Left"
+                    Source="/icon.ico" />
+                <TextBlock
+                    x:Name="AppTitleBarText"
+                    x:Uid="SettingsWindow_TitleTxt"
+                    Margin="12,0,0,0"
+                    VerticalAlignment="Center"
+                    Style="{StaticResource CaptionTextBlockStyle}"
+                    TextWrapping="NoWrap" />
+                <TextBlock
+                    x:Name="DebugMessage"
+                    Margin="8,0,0,0"
+                    VerticalAlignment="Center"
+                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                    Style="{StaticResource CaptionTextBlockStyle}"
+                    Text="Debug"
+                    TextWrapping="NoWrap"
+                    Visibility="Collapsed" />
+            </StackPanel>
+        </Grid>
         <NavigationView
             x:Name="navigationView"
+            Grid.Row="1"
+            Canvas.ZIndex="0"
             CompactModeThresholdWidth="1007"
+            DisplayModeChanged="NavigationView_DisplayModeChanged"
             ExpandedModeThresholdWidth="1007"
             IsBackButtonVisible="Collapsed"
             IsBackEnabled="{x:Bind ViewModel.IsBackEnabled, Mode=OneWay}"
+            IsPaneToggleButtonVisible="False"
             IsSettingsVisible="False"
             IsTitleBarAutoPaddingEnabled="False"
             PaneClosed="NavigationView_PaneClosed"

src/settings-ui/Settings.UI/Views/ShellPage.xaml.cs

@@ -126,6 +126,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
             // NL moved navigation to general page to the moment when the window is first activated (to not make flyout window disappear)
             // shellFrame.Navigate(typeof(GeneralPage));
             IPCResponseHandleList.Add(ReceiveMessage);
+            SetTitleBar();
         }
 
         public static int SendDefaultIPCMessage(string msg)
@@ -363,5 +364,46 @@ namespace Microsoft.PowerToys.Settings.UI.Views
         {
             NavigationService.EnsurePageIsSelected(typeof(GeneralPage));
         }
+
+        private void SetTitleBar()
+        {
+            var u = App.GetSettingsWindow();
+            if (u != null)
+            {
+                // A custom title bar is required for full window theme and Mica support.
+                // https://docs.microsoft.com/windows/apps/develop/title-bar?tabs=winui3#full-customization
+                u.ExtendsContentIntoTitleBar = true;
+                u.SetTitleBar(AppTitleBar);
+#if DEBUG
+                DebugMessage.Visibility = Visibility.Visible;
+#endif
+            }
+        }
+
+        private void ShellPage_Loaded(object sender, RoutedEventArgs e)
+        {
+            SetTitleBar();
+        }
+
+        private void NavigationView_DisplayModeChanged(NavigationView sender, NavigationViewDisplayModeChangedEventArgs args)
+        {
+            if (args.DisplayMode == NavigationViewDisplayMode.Compact || args.DisplayMode == NavigationViewDisplayMode.Minimal)
+            {
+                PaneToggleBtn.Visibility = Visibility.Visible;
+                AppTitleBar.Margin = new Thickness(48, 0, 0, 0);
+                AppTitleBarText.Margin = new Thickness(12, 0, 0, 0);
+            }
+            else
+            {
+                PaneToggleBtn.Visibility = Visibility.Collapsed;
+                AppTitleBar.Margin = new Thickness(16, 0, 0, 0);
+                AppTitleBarText.Margin = new Thickness(16, 0, 0, 0);
+            }
+        }
+
+        private void PaneToggleBtn_Click(object sender, RoutedEventArgs e)
+        {
+            navigationView.IsPaneOpen = !navigationView.IsPaneOpen;
+        }
     }
 }