[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
2024-11-24 04:12:32 +08:00 · 2023-06-11 17:54:01 +02:00 · 2023-06-11 17:54:01 +02:00 · 852778daa5
commit 852778daa5
parent 56cdd6dd40
16 changed files with 272 additions and 74 deletions
--- a/Directory.Packages.props
+++ b/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" />
--- a/NOTICE.md
+++ b/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
--- a/src/settings-ui/Settings.UI/App.xaml
+++ b/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
-                BasedOn="{StaticResource DefaultCheckBoxStyle}"
-                TargetType="controls:CheckBoxWithDescriptionControl" />
+            <Style 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-->
-                <RepositionThemeTransition  IsStaggeringEnabled="False" /><!-- Smoothly animates individual cards upon whenever Expanders are expanded/collapsed -->
+                <EntranceThemeTransition FromVerticalOffset="50" /> 
+                <!--  Animates cards when loaded  -->
+                <RepositionThemeTransition IsStaggeringEnabled="False" />
+                <!--  Smoothly animates individual cards upon whenever Expanders are expanded/collapsed  -->
            </TransitionCollection>
        </ResourceDictionary>
    </Application.Resources>
--- a/src/settings-ui/Settings.UI/App.xaml.cs
+++ b/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 == "SYSTEM")
+                if (SelectedTheme() == ElementTheme.Default)
                {
                    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;
--- a/src/settings-ui/Settings.UI/Controls/SettingsPageControl/SettingsPageControl.xaml
+++ b/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"
--- a/src/settings-ui/Settings.UI/MainWindow.xaml
+++ b/src/settings-ui/Settings.UI/MainWindow.xaml
@ -10,8 +10,8 @@
    MinHeight="480"
    Closed="Window_Closed"
    mc:Ignorable="d">
-
-    <Grid>
-        <local:ShellPage />
-    </Grid>
+    <Window.SystemBackdrop>
+        <MicaBackdrop/>
+    </Window.SystemBackdrop>
+    <local:ShellPage x:Name="shellPage" />
 </winuiex:WindowEx>
--- a/src/settings-ui/Settings.UI/MainWindow.xaml.cs
+++ b/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;
+        }
    }
 }
--- a/src/settings-ui/Settings.UI/OOBE/Views/OobeShellPage.xaml
+++ b/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">
-    <!--
-        todo(Stefan):
-        BackdropMaterial.ApplyToRootOrPageBackground="True"
-    -->
-    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="48" />
+            <RowDefinition Height="*" />
+        </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>
--- a/src/settings-ui/Settings.UI/OOBE/Views/OobeShellPage.xaml.cs
+++ b/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":
-                    this.RequestedTheme = ElementTheme.Light;
-                    break;
-                case "DARK":
-                    this.RequestedTheme = ElementTheme.Dark;
-                    break;
-                case "SYSTEM":
-                    this.RequestedTheme = ElementTheme.Default;
-                    break;
+                // 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);
            }
        }
+
+        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;
+        }
    }
 }
--- a/src/settings-ui/Settings.UI/OobeWindow.xaml
+++ b/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">
-
-    <Grid>
-        <local:OobeShellPage x:Name="shellPage" />
-    </Grid>
+    <Window.SystemBackdrop>
+        <MicaBackdrop />
+    </Window.SystemBackdrop>
+    <local:OobeShellPage x:Name="shellPage" />
 </winuiex:WindowEx>
--- a/src/settings-ui/Settings.UI/OobeWindow.xaml.cs
+++ b/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;
+        }
    }
 }
--- a/src/settings-ui/Settings.UI/PowerToys.Settings.csproj
+++ b/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" />
--- a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
+++ b/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>
--- a/src/settings-ui/Settings.UI/Views/GeneralPage.xaml.cs
+++ b/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:
--- a/src/settings-ui/Settings.UI/Views/ShellPage.xaml
+++ b/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"
--- a/src/settings-ui/Settings.UI/Views/ShellPage.xaml.cs
+++ b/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;
+        }
    }
 }