[Settings] Mica & modern titlebar

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" />

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>

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

@@ -85,6 +85,7 @@ public static void OpenSettingsWindow(Type type = null, bool ensurePageIsSelecte
             }
 
             settingsWindow.Activate();
+
             if (type != null)
             {
                 settingsWindow.NavigateToSection(type);
@@ -104,7 +105,6 @@ public static void OpenSettingsWindow(Type type = null, bool ensurePageIsSelecte
         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 @@ protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs ar
                 {
                     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,13 +183,15 @@ protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs ar
                         PowerToysTelemetry.Log.WriteEvent(new OobeStartedEvent());
                         OobeWindow oobeWindow = new OobeWindow(OOBE.Enums.PowerToysModules.Overview, isDark);
                         oobeWindow.Activate();
+                        oobeWindow.ExtendsContentIntoTitleBar = true;
                         SetOobeWindow(oobeWindow);
                     }
                     else if (ShowScoobe)
                     {
                         PowerToysTelemetry.Log.WriteEvent(new ScoobeStartedEvent());
                         OobeWindow scoobeWindow = new OobeWindow(OOBE.Enums.PowerToysModules.WhatsNew, isDark);
                         scoobeWindow.Activate();
+                        oobeWindow.ExtendsContentIntoTitleBar = true;
                         SetOobeWindow(scoobeWindow);
                     }
                     else if (ShowFlyout)
@@ -208,7 +211,9 @@ protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs ar
                 // 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 @@ public static TwoWayPipeMessageIPCManaged GetTwoWayIPCManager()
             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 @@ public static void HandleThemeChange()
             }
         }
 
+        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">
-
-    <Grid>
-        <local:ShellPage />
-    </Grid>
+    <Window.SystemBackdrop>
+        <MicaBackdrop/>
+    </Window.SystemBackdrop>
+    <local:ShellPage x:Name="shellPage" />
 </winuiex:WindowEx>

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

@@ -220,6 +220,8 @@ public MainWindow(bool isDark, bool createHidden = false)
 
             this.InitializeComponent();
 
+            SetTheme(isDark);
+
             // receive IPC Message
             App.IPCMessageReceivedCallback = (string msg) =>
             {
@@ -279,5 +281,10 @@ internal void EnsurePageIsSelected()
         {
             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">
-    <!--
-        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>