Update NOTICE.md

.github/actions/spell-check/expect.txt

@@ -49,6 +49,7 @@ ALPHATYPE
 AModifier
 amr
 ANDSCANS
+animatedvisuals
 Animnate
 ANull
 AOC

Directory.Packages.props

@@ -23,7 +23,6 @@
     <PackageVersion Include="CommunityToolkit.WinUI.UI.Controls.DataGrid" Version="7.1.2" />
     <PackageVersion Include="CommunityToolkit.WinUI.UI.Controls.Markdown" Version="7.1.2" />
     <PackageVersion Include="CommunityToolkit.Labs.WinUI.Controls.MarkdownTextBlock" Version="0.1.250703-build.2173" />
-    <PackageVersion Include="CommunityToolkit.Labs.WinUI.TitleBar" Version="0.0.1-build.2206" />
     <PackageVersion Include="ControlzEx" Version="6.0.0" />
     <PackageVersion Include="HelixToolkit" Version="2.24.0" />
     <PackageVersion Include="HelixToolkit.Core.Wpf" Version="2.24.0" />

NOTICE.md

@@ -1499,7 +1499,6 @@ SOFTWARE.
 - CoenM.ImageSharp.ImageHash
 - CommunityToolkit.Common
 - CommunityToolkit.Labs.WinUI.Controls.MarkdownTextBlock
-- CommunityToolkit.Labs.WinUI.TitleBar
 - CommunityToolkit.Mvvm
 - CommunityToolkit.WinUI.Animations
 - CommunityToolkit.WinUI.Collections

src/settings-ui/Settings.UI/Helpers/NavigatablePage.cs

@@ -10,13 +10,14 @@ using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Hosting;
 using Microsoft.UI.Xaml.Media;
+using Windows.UI;
 
 namespace Microsoft.PowerToys.Settings.UI.Helpers;
 
 public abstract partial class NavigatablePage : Page
 {
     private const int ExpandWaitDuration = 500;
-    private const int AnimationDuration = 1000;
+    private const int AnimationDuration = 2000;
 
     private NavigationParams _pendingNavigationParams;
 
@@ -85,15 +86,15 @@ public abstract partial class NavigatablePage : Page
 
         // Create a subtle glow effect using drop shadow
         var dropShadow = compositor.CreateDropShadow();
-        dropShadow.Color = Microsoft.UI.Colors.Gray;
-        dropShadow.BlurRadius = 8f;
+        dropShadow.Color = (Color)Application.Current.Resources["SystemAccentColorLight2"];
+        dropShadow.BlurRadius = 16f;
         dropShadow.Opacity = 0f;
         dropShadow.Offset = new Vector3(0, 0, 0);
 
         var spriteVisual = compositor.CreateSpriteVisual();
-        spriteVisual.Size = new Vector2((float)target.ActualWidth + 16, (float)target.ActualHeight + 16);
+        spriteVisual.Size = new Vector2((float)target.ActualWidth, (float)target.ActualHeight);
         spriteVisual.Shadow = dropShadow;
-        spriteVisual.Offset = new Vector3(-8, -8, 0);
+        spriteVisual.Offset = new Vector3(0, 0, 0);
 
         // Insert the shadow visual behind the target element
         ElementCompositionPreview.SetElementChildVisual(target, spriteVisual);
@@ -106,31 +107,7 @@ public abstract partial class NavigatablePage : Page
         fadeAnimation.Duration = TimeSpan.FromMilliseconds(AnimationDuration);
 
         dropShadow.StartAnimation("Opacity", fadeAnimation);
-
-        if (target is Control ctrl)
-        {
-            // TODO: ability to adjust brush color and animation from settings.
-            var originalBackground = ctrl.Background;
-
-            var highlightBrush = new SolidColorBrush();
-            var grayColor = Microsoft.UI.Colors.Gray;
-            grayColor.A = 50; // Very subtle transparency
-            highlightBrush.Color = grayColor;
-
-            // Apply the highlight
-            ctrl.Background = highlightBrush;
-
-            // Wait for animation to complete
-            await Task.Delay(AnimationDuration);
-
-            // Restore original background
-            ctrl.Background = originalBackground;
-        }
-        else
-        {
-            // For non-control elements, just wait for the glow animation
-            await Task.Delay(AnimationDuration);
-        }
+        await Task.Delay(AnimationDuration);
 
         // Clean up the shadow visual
         ElementCompositionPreview.SetElementChildVisual(target, null);

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

@@ -25,6 +25,7 @@
 		<None Remove="SettingsXAML\Controls\Dashboard\CheckUpdateControl.xaml" />
 		<None Remove="SettingsXAML\Controls\Dashboard\ShortcutConflictControl.xaml" />
 		<None Remove="SettingsXAML\Controls\KeyVisual\KeyCharPresenter.xaml" />
+		<None Remove="SettingsXAML\Controls\TitleBar\TitleBar.xaml" />
 	</ItemGroup>
 	<ItemGroup>
 		<Page Remove="SettingsXAML\App.xaml" />
@@ -63,7 +64,6 @@
 		<PackageReference Include="CommunityToolkit.WinUI.Extensions" />
 		<PackageReference Include="CommunityToolkit.WinUI.Converters" />
 		<PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Markdown" />
-		<PackageReference Include="CommunityToolkit.Labs.WinUI.TitleBar" />
 		<PackageReference Include="System.Net.Http" />
 		<PackageReference Include="System.Private.Uri" />
 		<PackageReference Include="System.Text.RegularExpressions" />
@@ -156,7 +156,8 @@
 		</None>
 		<None Update="Assets\Settings\Scripts\DisableModule.ps1">
 			<CopyToOutputDirectory>Always</CopyToOutputDirectory>
-		</None>
+		</None>		<Page Update="SettingsXAML\Controls\TitleBar\TitleBar.xaml">
+		</Page>
 		<Page Update="SettingsXAML\Controls\KeyVisual\KeyCharPresenter.xaml">
 			<Generator>MSBuild:Compile</Generator>
 		</Page>
@@ -185,9 +186,6 @@
 	<!-- Build XamlIndexBuilder before compiling Settings to ensure the search index exists without taking a project reference. -->
 	<Target Name="BuildXamlIndexBeforeSettings" BeforeTargets="CoreCompile">
 		<Message Importance="high" Text="[Settings] Building XamlIndexBuilder prior to compile. Views='$(MSBuildProjectDirectory)\SettingsXAML\Views' Out='$(GeneratedJsonFile)'" />
-		<MSBuild
-			Projects="..\Settings.UI.XamlIndexBuilder\Settings.UI.XamlIndexBuilder.csproj"
-			Targets="Build"
-			Properties="Configuration=$(Configuration);Platform=Any CPU;TargetFramework=net9.0;XamlViewsDir=$(MSBuildProjectDirectory)\SettingsXAML\Views;GeneratedJsonFile=$(GeneratedJsonFile)" />
+		<MSBuild Projects="..\Settings.UI.XamlIndexBuilder\Settings.UI.XamlIndexBuilder.csproj" Targets="Build" Properties="Configuration=$(Configuration);Platform=Any CPU;TargetFramework=net9.0;XamlViewsDir=$(MSBuildProjectDirectory)\SettingsXAML\Views;GeneratedJsonFile=$(GeneratedJsonFile)" />
 	</Target>
 </Project>

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

@@ -11,6 +11,7 @@
                 <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                 <ResourceDictionary Source="/SettingsXAML/Controls/KeyVisual/KeyVisual.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Controls/KeyVisual/KeyCharPresenter.xaml" />
+                <ResourceDictionary Source="/SettingsXAML/Controls/TitleBar/TitleBar.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Styles/TextBlock.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Styles/Button.xaml" />
                 <ResourceDictionary Source="/SettingsXAML/Styles/InfoBadge.xaml" />

src/settings-ui/Settings.UI/SettingsXAML/Controls/TitleBar/TitleBar.Properties.cs

@@ -0,0 +1,229 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+
+namespace Microsoft.PowerToys.Settings.UI.Controls;
+
+public partial class TitleBar : Control
+{
+    /// <summary>
+    /// The backing <see cref="DependencyProperty"/> for the <see cref="Icon"/> property.
+    /// </summary>
+    public static readonly DependencyProperty IconProperty = DependencyProperty.Register(nameof(Icon), typeof(IconElement), typeof(TitleBar), new PropertyMetadata(null, IconChanged));
+
+    /// <summary>
+    /// The backing <see cref="DependencyProperty"/> for the <see cref="Title"/> property.
+    /// </summary>
+    public static readonly DependencyProperty TitleProperty = DependencyProperty.Register(nameof(Title), typeof(string), typeof(TitleBar), new PropertyMetadata(default(string)));
+
+    /// <summary>
+    /// The backing <see cref="DependencyProperty"/> for the <see cref="Subtitle"/> property.
+    /// </summary>
+    public static readonly DependencyProperty SubtitleProperty = DependencyProperty.Register(nameof(Subtitle), typeof(string), typeof(TitleBar), new PropertyMetadata(default(string)));
+
+    /// <summary>
+    /// The backing <see cref="DependencyProperty"/> for the <see cref="Content"/> property.
+    /// </summary>
+    public static readonly DependencyProperty ContentProperty = DependencyProperty.Register(nameof(Content), typeof(object), typeof(TitleBar), new PropertyMetadata(null, ContentChanged));
+
+    /// <summary>
+    /// The backing <see cref="DependencyProperty"/> for the <see cref="Footer"/> property.
+    /// </summary>
+    public static readonly DependencyProperty FooterProperty = DependencyProperty.Register(nameof(Footer), typeof(object), typeof(TitleBar), new PropertyMetadata(null, FooterChanged));
+
+    /// <summary>
+    /// The backing <see cref="DependencyProperty"/> for the <see cref="IsBackButtonVisible"/> property.
+    /// </summary>
+    public static readonly DependencyProperty IsBackButtonVisibleProperty = DependencyProperty.Register(nameof(IsBackButtonVisible), typeof(bool), typeof(TitleBar), new PropertyMetadata(false, IsBackButtonVisibleChanged));
+
+    /// <summary>
+    /// The backing <see cref="DependencyProperty"/> for the <see cref="IsPaneButtonVisible"/> property.
+    /// </summary>
+    public static readonly DependencyProperty IsPaneButtonVisibleProperty = DependencyProperty.Register(nameof(IsPaneButtonVisible), typeof(bool), typeof(TitleBar), new PropertyMetadata(false, IsPaneButtonVisibleChanged));
+
+    /// <summary>
+    /// The backing <see cref="DependencyProperty"/> for the <see cref="DisplayMode"/> property.
+    /// </summary>
+    public static readonly DependencyProperty DisplayModeProperty = DependencyProperty.Register(nameof(DisplayMode), typeof(DisplayMode), typeof(TitleBar), new PropertyMetadata(DisplayMode.Standard, DisplayModeChanged));
+
+    /// <summary>
+    /// The backing <see cref="DependencyProperty"/> for the <see cref="CompactStateBreakpoint
+    /// "/> property.
+    /// </summary>
+    public static readonly DependencyProperty CompactStateBreakpointProperty = DependencyProperty.Register(nameof(CompactStateBreakpoint), typeof(int), typeof(TitleBar), new PropertyMetadata(850));
+
+    /// <summary>
+    /// The backing <see cref="DependencyProperty"/> for the <see cref="AutoConfigureCustomTitleBar"/> property.
+    /// </summary>
+    public static readonly DependencyProperty AutoConfigureCustomTitleBarProperty = DependencyProperty.Register(nameof(AutoConfigureCustomTitleBar), typeof(bool), typeof(TitleBar), new PropertyMetadata(true, AutoConfigureCustomTitleBarChanged));
+
+    /// <summary>
+    /// The backing <see cref="DependencyProperty"/> for the <see cref="Window"/> property.
+    /// </summary>
+    public static readonly DependencyProperty WindowProperty = DependencyProperty.Register(nameof(Window), typeof(Window), typeof(TitleBar), new PropertyMetadata(null));
+
+    /// <summary>
+    /// The event that gets fired when the back button is clicked
+    /// </summary>
+#pragma warning disable CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.
+    public event EventHandler<RoutedEventArgs>? BackButtonClick;
+#pragma warning restore CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.
+
+    /// <summary>
+    /// The event that gets fired when the pane toggle button is clicked
+    /// </summary>
+#pragma warning disable CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.
+    public event EventHandler<RoutedEventArgs>? PaneButtonClick;
+#pragma warning restore CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.
+
+    /// <summary>
+    /// Gets or sets the Icon
+    /// </summary>
+    public IconElement Icon
+    {
+        get => (IconElement)GetValue(IconProperty);
+        set => SetValue(IconProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the Title
+    /// </summary>
+    public string Title
+    {
+        get => (string)GetValue(TitleProperty);
+        set => SetValue(TitleProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the Subtitle
+    /// </summary>
+    public string Subtitle
+    {
+        get => (string)GetValue(SubtitleProperty);
+        set => SetValue(SubtitleProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the content shown at the center of the TitleBar. When setting this, using DisplayMode=Tall is recommended.
+    /// </summary>
+    public object Content
+    {
+        get => (object)GetValue(ContentProperty);
+        set => SetValue(ContentProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the content shown at the right of the TitleBar, next to the caption buttons. When setting this, using DisplayMode=Tall is recommended.
+    /// </summary>
+    public object Footer
+    {
+        get => (object)GetValue(FooterProperty);
+        set => SetValue(FooterProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets DisplayMode. Compact is default (32px), Tall is recommended when setting the Content or Footer.
+    /// </summary>
+    public DisplayMode DisplayMode
+    {
+        get => (DisplayMode)GetValue(DisplayModeProperty);
+        set => SetValue(DisplayModeProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets a value indicating whether gets or sets the visibility of the back button.
+    /// </summary>
+    public bool IsBackButtonVisible
+    {
+        get => (bool)GetValue(IsBackButtonVisibleProperty);
+        set => SetValue(IsBackButtonVisibleProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets a value indicating whether gets or sets the visibility of the pane toggle button.
+    /// </summary>
+    public bool IsPaneButtonVisible
+    {
+        get => (bool)GetValue(IsPaneButtonVisibleProperty);
+        set => SetValue(IsPaneButtonVisibleProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the breakpoint of when the compact state is triggered.
+    /// </summary>
+    public int CompactStateBreakpoint
+    {
+        get => (int)GetValue(CompactStateBreakpointProperty);
+        set => SetValue(CompactStateBreakpointProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets a value indicating whether gets or sets if the TitleBar should auto configure ExtendContentIntoTitleBar and CaptionButton background colors.
+    /// </summary>
+    public bool AutoConfigureCustomTitleBar
+    {
+        get => (bool)GetValue(AutoConfigureCustomTitleBarProperty);
+        set => SetValue(AutoConfigureCustomTitleBarProperty, value);
+    }
+
+    /// <summary>
+    /// Gets or sets the window the TitleBar should configure.
+    /// </summary>
+    public Window Window
+    {
+        get => (Window)GetValue(WindowProperty);
+        set => SetValue(WindowProperty, value);
+    }
+
+    private static void IsBackButtonVisibleChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        ((TitleBar)d).Update();
+    }
+
+    private static void IsPaneButtonVisibleChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        ((TitleBar)d).Update();
+    }
+
+    private static void DisplayModeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        ((TitleBar)d).Update();
+    }
+
+    private static void ContentChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        ((TitleBar)d).Update();
+    }
+
+    private static void FooterChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        ((TitleBar)d).Update();
+    }
+
+    private static void IconChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        ((TitleBar)d).Update();
+    }
+
+    private static void AutoConfigureCustomTitleBarChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        if (((TitleBar)d).AutoConfigureCustomTitleBar)
+        {
+            ((TitleBar)d).Configure();
+        }
+        else
+        {
+            ((TitleBar)d).Reset();
+        }
+    }
+}
+
+public enum DisplayMode
+{
+    Standard,
+    Tall,
+}

src/settings-ui/Settings.UI/SettingsXAML/Controls/TitleBar/TitleBar.WASDK.cs

@@ -0,0 +1,195 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using Microsoft.UI;
+using Microsoft.UI.Input;
+using Microsoft.UI.Windowing;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Media;
+using Windows.Foundation;
+using Windows.Graphics;
+
+namespace Microsoft.PowerToys.Settings.UI.Controls;
+
+[TemplatePart(Name = nameof(PART_FooterPresenter), Type = typeof(ContentPresenter))]
+[TemplatePart(Name = nameof(PART_ContentPresenter), Type = typeof(ContentPresenter))]
+
+public partial class TitleBar : Control
+{
+#pragma warning disable SA1306 // Field names should begin with lower-case letter
+#pragma warning disable SA1310 // Field names should not contain underscore
+#pragma warning disable SA1400 // Access modifier should be declared
+#pragma warning disable CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.
+    ContentPresenter? PART_ContentPresenter;
+    ContentPresenter? PART_FooterPresenter;
+    #pragma warning restore CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.
+#pragma warning restore SA1400 // Access modifier should be declared
+#pragma warning restore SA1306 // Field names should begin with lower-case letter
+#pragma warning restore SA1310 // Field names should not contain underscore
+
+    private void SetWASDKTitleBar()
+    {
+        if (this.Window == null)
+        {
+            return;
+        }
+
+        if (AutoConfigureCustomTitleBar)
+        {
+            Window.AppWindow.TitleBar.ExtendsContentIntoTitleBar = true;
+
+            this.Window.SizeChanged -= Window_SizeChanged;
+            this.Window.SizeChanged += Window_SizeChanged;
+            this.Window.Activated -= Window_Activated;
+            this.Window.Activated += Window_Activated;
+
+            if (Window.Content is FrameworkElement rootElement)
+            {
+                UpdateCaptionButtons(rootElement);
+                rootElement.ActualThemeChanged += (s, e) =>
+                {
+                    UpdateCaptionButtons(rootElement);
+                };
+            }
+
+            PART_ContentPresenter = GetTemplateChild(nameof(PART_ContentPresenter)) as ContentPresenter;
+            PART_FooterPresenter = GetTemplateChild(nameof(PART_FooterPresenter)) as ContentPresenter;
+
+            // Get caption button occlusion information.
+            int captionButtonOcclusionWidthRight = Window.AppWindow.TitleBar.RightInset;
+            int captionButtonOcclusionWidthLeft = Window.AppWindow.TitleBar.LeftInset;
+            PART_LeftPaddingColumn!.Width = new GridLength(captionButtonOcclusionWidthLeft);
+            PART_RightPaddingColumn!.Width = new GridLength(captionButtonOcclusionWidthRight);
+
+            if (DisplayMode == DisplayMode.Tall)
+            {
+                // Choose a tall title bar to provide more room for interactive elements
+                // like search box or person picture controls.
+                Window.AppWindow.TitleBar.PreferredHeightOption = TitleBarHeightOption.Tall;
+            }
+            else
+            {
+                Window.AppWindow.TitleBar.PreferredHeightOption = TitleBarHeightOption.Standard;
+            }
+
+            // Recalculate the drag region for the custom title bar
+            // if you explicitly defined new draggable areas.
+            SetDragRegionForCustomTitleBar();
+
+            _isAutoConfigCompleted = true;
+        }
+    }
+
+    private void Window_SizeChanged(object sender, WindowSizeChangedEventArgs args)
+    {
+        UpdateVisualStateAndDragRegion(args.Size);
+    }
+
+    private void UpdateCaptionButtons(FrameworkElement rootElement)
+    {
+        Window.AppWindow.TitleBar.ButtonBackgroundColor = Colors.Transparent;
+        Window.AppWindow.TitleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
+        if (rootElement.ActualTheme == ElementTheme.Dark)
+        {
+            Window.AppWindow.TitleBar.ButtonForegroundColor = Colors.White;
+            Window.AppWindow.TitleBar.ButtonInactiveForegroundColor = Colors.DarkGray;
+        }
+        else
+        {
+            Window.AppWindow.TitleBar.ButtonForegroundColor = Colors.Black;
+            Window.AppWindow.TitleBar.ButtonInactiveForegroundColor = Colors.DarkGray;
+        }
+    }
+
+    private void ResetWASDKTitleBar()
+    {
+        if (this.Window == null)
+        {
+            return;
+        }
+
+        // Only reset if we were the ones who configured
+        if (_isAutoConfigCompleted)
+        {
+            Window.AppWindow.TitleBar.ExtendsContentIntoTitleBar = false;
+            this.Window.SizeChanged -= Window_SizeChanged;
+            this.Window.Activated -= Window_Activated;
+            SizeChanged -= this.TitleBar_SizeChanged;
+            Window.AppWindow.TitleBar.ResetToDefault();
+        }
+    }
+
+    private void Window_Activated(object sender, WindowActivatedEventArgs args)
+    {
+        if (args.WindowActivationState == WindowActivationState.Deactivated)
+        {
+            VisualStateManager.GoToState(this, WindowDeactivatedState, true);
+        }
+        else
+        {
+            VisualStateManager.GoToState(this, WindowActivatedState, true);
+        }
+    }
+
+    public void SetDragRegionForCustomTitleBar()
+    {
+        if (AutoConfigureCustomTitleBar && Window is not null)
+        {
+            ClearDragRegions(NonClientRegionKind.Passthrough);
+#pragma warning disable CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.
+            var items = new FrameworkElement?[] { PART_ContentPresenter, PART_FooterPresenter, PART_ButtonHolder };
+#pragma warning restore CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.
+            var validItems = items.Where(x => x is not null).Select(x => x!).ToArray(); // Prune null items
+
+            SetDragRegion(NonClientRegionKind.Passthrough, validItems);
+        }
+    }
+
+    public double GetRasterizationScaleForElement(UIElement element)
+    {
+        if (element.XamlRoot != null)
+        {
+            return element.XamlRoot.RasterizationScale;
+        }
+
+        return 0.0;
+    }
+
+    public void SetDragRegion(NonClientRegionKind nonClientRegionKind, params FrameworkElement[] frameworkElements)
+    {
+        List<RectInt32> rects = new List<RectInt32>();
+        var scale = GetRasterizationScaleForElement(this);
+
+        foreach (var frameworkElement in frameworkElements)
+        {
+            if (frameworkElement == null)
+            {
+                continue;
+            }
+
+            GeneralTransform transformElement = frameworkElement.TransformToVisual(null);
+            Rect bounds = transformElement.TransformBounds(new Rect(0, 0, frameworkElement.ActualWidth, frameworkElement.ActualHeight));
+            var transparentRect = new RectInt32(
+                _X: (int)Math.Round(bounds.X * scale),
+                _Y: (int)Math.Round(bounds.Y * scale),
+                _Width: (int)Math.Round(bounds.Width * scale),
+                _Height: (int)Math.Round(bounds.Height * scale));
+            rects.Add(transparentRect);
+        }
+
+        if (rects.Count > 0)
+        {
+            InputNonClientPointerSource.GetForWindowId(Window.AppWindow.Id).SetRegionRects(nonClientRegionKind, rects.ToArray());
+        }
+    }
+
+    public void ClearDragRegions(NonClientRegionKind nonClientRegionKind)
+    {
+        InputNonClientPointerSource.GetForWindowId(Window.AppWindow.Id).ClearRegionRects(nonClientRegionKind);
+    }
+}

src/settings-ui/Settings.UI/SettingsXAML/Controls/TitleBar/TitleBar.cs

@@ -0,0 +1,220 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Windows.Foundation;
+
+namespace Microsoft.PowerToys.Settings.UI.Controls;
+
+[TemplateVisualState(Name = BackButtonVisibleState, GroupName = BackButtonStates)]
+[TemplateVisualState(Name = BackButtonCollapsedState, GroupName = BackButtonStates)]
+[TemplateVisualState(Name = PaneButtonVisibleState, GroupName = PaneButtonStates)]
+[TemplateVisualState(Name = PaneButtonCollapsedState, GroupName = PaneButtonStates)]
+[TemplateVisualState(Name = WindowActivatedState, GroupName = ActivationStates)]
+[TemplateVisualState(Name = WindowDeactivatedState, GroupName = ActivationStates)]
+[TemplateVisualState(Name = StandardState, GroupName = DisplayModeStates)]
+[TemplateVisualState(Name = TallState, GroupName = DisplayModeStates)]
+[TemplateVisualState(Name = IconVisibleState, GroupName = IconStates)]
+[TemplateVisualState(Name = IconCollapsedState, GroupName = IconStates)]
+[TemplateVisualState(Name = ContentVisibleState, GroupName = ContentStates)]
+[TemplateVisualState(Name = ContentCollapsedState, GroupName = ContentStates)]
+[TemplateVisualState(Name = FooterVisibleState, GroupName = FooterStates)]
+[TemplateVisualState(Name = FooterCollapsedState, GroupName = FooterStates)]
+[TemplateVisualState(Name = WideState, GroupName = ReflowStates)]
+[TemplateVisualState(Name = NarrowState, GroupName = ReflowStates)]
+[TemplatePart(Name = PartBackButton, Type = typeof(Button))]
+[TemplatePart(Name = PartPaneButton, Type = typeof(Button))]
+[TemplatePart(Name = nameof(PART_LeftPaddingColumn), Type = typeof(ColumnDefinition))]
+[TemplatePart(Name = nameof(PART_RightPaddingColumn), Type = typeof(ColumnDefinition))]
+[TemplatePart(Name = nameof(PART_ButtonHolder), Type = typeof(StackPanel))]
+
+public partial class TitleBar : Control
+{
+    private const string PartBackButton = "PART_BackButton";
+    private const string PartPaneButton = "PART_PaneButton";
+
+    private const string BackButtonVisibleState = "BackButtonVisible";
+    private const string BackButtonCollapsedState = "BackButtonCollapsed";
+    private const string BackButtonStates = "BackButtonStates";
+
+    private const string PaneButtonVisibleState = "PaneButtonVisible";
+    private const string PaneButtonCollapsedState = "PaneButtonCollapsed";
+    private const string PaneButtonStates = "PaneButtonStates";
+
+    private const string WindowActivatedState = "Activated";
+    private const string WindowDeactivatedState = "Deactivated";
+    private const string ActivationStates = "WindowActivationStates";
+
+    private const string IconVisibleState = "IconVisible";
+    private const string IconCollapsedState = "IconCollapsed";
+    private const string IconStates = "IconStates";
+
+    private const string StandardState = "Standard";
+    private const string TallState = "Tall";
+    private const string DisplayModeStates = "DisplayModeStates";
+
+    private const string ContentVisibleState = "ContentVisible";
+    private const string ContentCollapsedState = "ContentCollapsed";
+    private const string ContentStates = "ContentStates";
+
+    private const string FooterVisibleState = "FooterVisible";
+    private const string FooterCollapsedState = "FooterCollapsed";
+    private const string FooterStates = "FooterStates";
+
+    private const string WideState = "Wide";
+    private const string NarrowState = "Narrow";
+    private const string ReflowStates = "ReflowStates";
+
+#pragma warning disable SA1306 // Field names should begin with lower-case letter
+#pragma warning disable SA1310 // Field names should not contain underscore
+#pragma warning disable SA1400 // Access modifier should be declared
+#pragma warning disable CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.
+    ColumnDefinition? PART_RightPaddingColumn;
+    ColumnDefinition? PART_LeftPaddingColumn;
+    StackPanel? PART_ButtonHolder;
+#pragma warning restore CS8632 // The annotation for nullable reference types should only be used in code within a '#nullable' annotations context.
+#pragma warning restore SA1400 // Access modifier should be declared
+#pragma warning restore SA1306 // Field names should begin with lower-case letter
+#pragma warning restore SA1310 // Field names should not contain underscore
+
+    // We only want to reset TitleBar configuration in app, if we're the TitleBar instance that's managing that state.
+    private bool _isAutoConfigCompleted;
+
+    public TitleBar()
+    {
+        this.DefaultStyleKey = typeof(TitleBar);
+    }
+
+    protected override void OnApplyTemplate()
+    {
+        PART_LeftPaddingColumn = GetTemplateChild(nameof(PART_LeftPaddingColumn)) as ColumnDefinition;
+        PART_RightPaddingColumn = GetTemplateChild(nameof(PART_RightPaddingColumn)) as ColumnDefinition;
+        ConfigureButtonHolder();
+        Configure();
+        if (GetTemplateChild(PartBackButton) is Button backButton)
+        {
+            backButton.Click -= BackButton_Click;
+            backButton.Click += BackButton_Click;
+        }
+
+        if (GetTemplateChild(PartPaneButton) is Button paneButton)
+        {
+            paneButton.Click -= PaneButton_Click;
+            paneButton.Click += PaneButton_Click;
+        }
+
+        SizeChanged -= this.TitleBar_SizeChanged;
+        SizeChanged += this.TitleBar_SizeChanged;
+
+        Update();
+        base.OnApplyTemplate();
+    }
+
+    private void TitleBar_SizeChanged(object sender, SizeChangedEventArgs e)
+    {
+        UpdateVisualStateAndDragRegion(e.NewSize);
+    }
+
+    private void UpdateVisualStateAndDragRegion(Size size)
+    {
+        if (size.Width <= CompactStateBreakpoint)
+        {
+            if (Content != null || Footer != null)
+            {
+                VisualStateManager.GoToState(this, NarrowState, true);
+            }
+        }
+        else
+        {
+            VisualStateManager.GoToState(this, WideState, true);
+        }
+
+        SetDragRegionForCustomTitleBar();
+    }
+
+    private void BackButton_Click(object sender, RoutedEventArgs e)
+    {
+        BackButtonClick?.Invoke(this, new RoutedEventArgs());
+    }
+
+    private void PaneButton_Click(object sender, RoutedEventArgs e)
+    {
+        PaneButtonClick?.Invoke(this, new RoutedEventArgs());
+    }
+
+    private void ConfigureButtonHolder()
+    {
+        if (PART_ButtonHolder != null)
+        {
+            PART_ButtonHolder.SizeChanged -= PART_ButtonHolder_SizeChanged;
+        }
+
+        PART_ButtonHolder = GetTemplateChild(nameof(PART_ButtonHolder)) as StackPanel;
+
+        if (PART_ButtonHolder != null)
+        {
+            PART_ButtonHolder.SizeChanged += PART_ButtonHolder_SizeChanged;
+        }
+    }
+
+    private void PART_ButtonHolder_SizeChanged(object sender, SizeChangedEventArgs e)
+    {
+        SetDragRegionForCustomTitleBar();
+    }
+
+    private void Configure()
+    {
+        SetWASDKTitleBar();
+    }
+
+    public void Reset()
+    {
+        ResetWASDKTitleBar();
+    }
+
+    private void Update()
+    {
+        if (Icon != null)
+        {
+            VisualStateManager.GoToState(this, IconVisibleState, true);
+        }
+        else
+        {
+            VisualStateManager.GoToState(this, IconCollapsedState, true);
+        }
+
+        VisualStateManager.GoToState(this, IsBackButtonVisible ? BackButtonVisibleState : BackButtonCollapsedState, true);
+        VisualStateManager.GoToState(this, IsPaneButtonVisible ? PaneButtonVisibleState : PaneButtonCollapsedState, true);
+
+        if (DisplayMode == DisplayMode.Tall)
+        {
+            VisualStateManager.GoToState(this, TallState, true);
+        }
+        else
+        {
+            VisualStateManager.GoToState(this, StandardState, true);
+        }
+
+        if (Content != null)
+        {
+            VisualStateManager.GoToState(this, ContentVisibleState, true);
+        }
+        else
+        {
+            VisualStateManager.GoToState(this, ContentCollapsedState, true);
+        }
+
+        if (Footer != null)
+        {
+            VisualStateManager.GoToState(this, FooterVisibleState, true);
+        }
+        else
+        {
+            VisualStateManager.GoToState(this, FooterCollapsedState, true);
+        }
+
+        SetDragRegionForCustomTitleBar();
+    }
+}

src/settings-ui/Settings.UI/SettingsXAML/Controls/TitleBar/TitleBar.xaml

@@ -0,0 +1,371 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
+    xmlns:local="using:Microsoft.PowerToys.Settings.UI.Controls">
+
+    <x:Double x:Key="TitleBarCompactHeight">32</x:Double>
+    <x:Double x:Key="TitleBarTallHeight">48</x:Double>
+    <x:Double x:Key="TitleBarContentMinWidth">360</x:Double>
+    <Style BasedOn="{StaticResource DefaultTitleBarStyle}" TargetType="local:TitleBar" />
+
+    <Style x:Key="DefaultTitleBarStyle" TargetType="local:TitleBar">
+        <Setter Property="MinHeight" Value="{ThemeResource TitleBarCompactHeight}" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="local:TitleBar">
+                    <Grid
+                        x:Name="PART_RootGrid"
+                        Height="{TemplateBinding MinHeight}"
+                        Padding="4,0,0,0"
+                        VerticalAlignment="Stretch"
+                        Background="{TemplateBinding Background}">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition x:Name="PART_LeftPaddingColumn" Width="0" />
+                            <ColumnDefinition x:Name="PART_ButtonsHolderColumn" Width="Auto" />
+                            <ColumnDefinition x:Name="PART_IconColumn" Width="Auto" />
+                            <ColumnDefinition x:Name="PART_TitleColumn" Width="Auto" />
+                            <ColumnDefinition
+                                x:Name="PART_LeftDragColumn"
+                                Width="*"
+                                MinWidth="4" />
+                            <ColumnDefinition x:Name="PART_ContentColumn" Width="Auto" />
+                            <ColumnDefinition
+                                x:Name="PART_RightDragColumn"
+                                Width="*"
+                                MinWidth="4" />
+                            <ColumnDefinition x:Name="PART_FooterColumn" Width="Auto" />
+                            <ColumnDefinition x:Name="PART_RightPaddingColumn" Width="0" />
+                        </Grid.ColumnDefinitions>
+                        <Border
+                            x:Name="PART_IconHolder"
+                            Grid.Column="2"
+                            Margin="12,0,0,0"
+                            VerticalAlignment="Center">
+                            <Viewbox
+                                x:Name="PART_Icon"
+                                MaxWidth="16"
+                                MaxHeight="16">
+                                <ContentPresenter
+                                    x:Name="PART_IconPresenter"
+                                    AutomationProperties.AccessibilityView="Raw"
+                                    Content="{TemplateBinding Icon}"
+                                    HighContrastAdjustment="None" />
+                            </Viewbox>
+                        </Border>
+
+                        <StackPanel
+                            x:Name="PART_TitleHolder"
+                            Grid.Column="3"
+                            Margin="16,0,0,0"
+                            HorizontalAlignment="Left"
+                            VerticalAlignment="Center"
+                            Orientation="Horizontal"
+                            Spacing="4">
+                            <TextBlock
+                                x:Name="PART_TitleText"
+                                MinWidth="48"
+                                Margin="0,0,0,1"
+                                Foreground="{ThemeResource TextFillColorPrimaryBrush}"
+                                Style="{StaticResource CaptionTextBlockStyle}"
+                                Text="{TemplateBinding Title}"
+                                TextTrimming="CharacterEllipsis"
+                                TextWrapping="NoWrap" />
+                            <TextBlock
+                                x:Name="PART_SubtitleText"
+                                MinWidth="48"
+                                Margin="0,0,0,1"
+                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                Style="{StaticResource CaptionTextBlockStyle}"
+                                Text="{TemplateBinding Subtitle}"
+                                TextTrimming="CharacterEllipsis"
+                                TextWrapping="NoWrap" />
+                        </StackPanel>
+                        <Grid
+                            x:Name="PART_DragRegion"
+                            Grid.Column="2"
+                            Grid.ColumnSpan="6"
+                            Background="Transparent" />
+                        <StackPanel
+                            x:Name="PART_ButtonHolder"
+                            Grid.Column="1"
+                            Orientation="Horizontal">
+                            <Button
+                                x:Name="PART_BackButton"
+                                Style="{ThemeResource TitleBarBackButtonStyle}"
+                                ToolTipService.ToolTip="Back" />
+                            <Button
+                                x:Name="PART_PaneButton"
+                                Style="{StaticResource TitleBarPaneToggleButtonStyle}"
+                                ToolTipService.ToolTip="Toggle menu" />
+                        </StackPanel>
+
+                        <ContentPresenter
+                            x:Name="PART_ContentPresenter"
+                            Grid.Column="5"
+                            MinWidth="{ThemeResource TitleBarContentMinWidth}"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Center"
+                            HorizontalContentAlignment="Stretch"
+                            Content="{TemplateBinding Content}" />
+                        <ContentPresenter
+                            x:Name="PART_FooterPresenter"
+                            Grid.Column="7"
+                            Margin="4,0,8,0"
+                            HorizontalContentAlignment="Right"
+                            Content="{TemplateBinding Footer}" />
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="BackButtonStates">
+                                <VisualState x:Name="BackButtonVisible" />
+                                <VisualState x:Name="BackButtonCollapsed">
+                                    <VisualState.Setters>
+                                        <Setter Target="PART_BackButton.Visibility" Value="Collapsed" />
+                                        <Setter Target="PART_BackButton.Visibility" Value="Collapsed" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                            <VisualStateGroup x:Name="PaneButtonStates">
+                                <VisualState x:Name="PaneButtonVisible" />
+                                <VisualState x:Name="PaneButtonCollapsed">
+                                    <VisualState.Setters>
+                                        <Setter Target="PART_PaneButton.Visibility" Value="Collapsed" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                            <VisualStateGroup x:Name="IconStates">
+                                <VisualState x:Name="IconVisible" />
+                                <VisualState x:Name="IconCollapsed">
+                                    <VisualState.Setters>
+                                        <Setter Target="PART_IconHolder.Visibility" Value="Collapsed" />
+                                        <Setter Target="PART_TitleHolder.Margin" Value="4,0,0,0" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                            <VisualStateGroup x:Name="ContentStates">
+                                <VisualState x:Name="ContentVisible" />
+                                <VisualState x:Name="ContentCollapsed">
+                                    <VisualState.Setters>
+                                        <Setter Target="PART_ContentPresenter.Visibility" Value="Collapsed" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                            <VisualStateGroup x:Name="FooterStates">
+                                <VisualState x:Name="FooterVisible" />
+                                <VisualState x:Name="FooterCollapsed">
+                                    <VisualState.Setters>
+                                        <Setter Target="PART_FooterPresenter.Visibility" Value="Collapsed" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                            <VisualStateGroup x:Name="ReflowStates">
+                                <VisualState x:Name="Wide" />
+                                <VisualState x:Name="Narrow">
+                                    <VisualState.Setters>
+                                        <Setter Target="PART_TitleHolder.Visibility" Value="Collapsed" />
+                                        <Setter Target="PART_LeftDragColumn.Width" Value="Auto" />
+                                        <Setter Target="PART_RightDragColumn.Width" Value="Auto" />
+                                        <Setter Target="PART_RightDragColumn.MinWidth" Value="16" />
+                                        <Setter Target="PART_LeftDragColumn.MinWidth" Value="16" />
+                                        <Setter Target="PART_ContentColumn.Width" Value="*" />
+                                        <!--  Content can stretch now  -->
+                                        <Setter Target="PART_ContentPresenter.MinWidth" Value="0" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                            <VisualStateGroup x:Name="WindowActivationStates">
+                                <VisualState x:Name="Activated" />
+                                <VisualState x:Name="Deactivated">
+                                    <VisualState.Setters>
+                                        <Setter Target="PART_TitleText.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
+                                        <Setter Target="PART_SubtitleText.Foreground" Value="{ThemeResource TextFillColorDisabledBrush}" />
+                                        <Setter Target="PART_BackButton.IsEnabled" Value="False" />
+                                        <Setter Target="PART_PaneButton.IsEnabled" Value="False" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                            <VisualStateGroup x:Name="DisplayModeStates">
+                                <VisualState x:Name="Standard" />
+                                <VisualState x:Name="Tall">
+                                    <VisualState.Setters>
+                                        <Setter Target="PART_RootGrid.MinHeight" Value="{ThemeResource TitleBarTallHeight}" />
+                                        <Setter Target="PART_RootGrid.Padding" Value="4" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!--  Copy of WinUI NavigationBackButtonNormalStyle - cannot use it as it picks up the generic.xaml version, not the WinUI version  -->
+    <Style x:Key="TitleBarBackButtonStyle" TargetType="Button">
+        <Setter Property="Background" Value="{ThemeResource NavigationViewBackButtonBackground}" />
+        <Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForegroundChecked}" />
+        <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
+        <Setter Property="FontSize" Value="16" />
+        <Setter Property="MaxHeight" Value="40" />
+        <Setter Property="VerticalAlignment" Value="Stretch" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
+        <Setter Property="Content" Value="&#xE72B;" />
+        <Setter Property="Padding" Value="12,4,12,4" />
+        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Grid
+                        x:Name="RootGrid"
+                        Padding="{TemplateBinding Padding}"
+                        Background="{TemplateBinding Background}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <AnimatedIcon
+                            x:Name="Content"
+                            Width="16"
+                            Height="16"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            AnimatedIcon.State="Normal"
+                            AutomationProperties.AccessibilityView="Raw">
+                            <animatedvisuals:AnimatedBackVisualSource />
+                            <AnimatedIcon.FallbackIconSource>
+                                <FontIconSource
+                                    FontFamily="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FontFamily}"
+                                    FontSize="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FontSize}"
+                                    Glyph="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}"
+                                    MirroredWhenRightToLeft="True" />
+                            </AnimatedIcon.FallbackIconSource>
+                        </AnimatedIcon>
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal" />
+                                <VisualState x:Name="PointerOver">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonBackgroundPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonForegroundPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                    <VisualState.Setters>
+                                        <Setter Target="Content.(AnimatedIcon.State)" Value="PointerOver" />
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="Pressed">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonBackgroundPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonForegroundPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                    <VisualState.Setters>
+                                        <Setter Target="Content.(AnimatedIcon.State)" Value="Pressed" />
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="Disabled">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonForegroundDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!--  Copy of WinUI PaneToggleButtonStyle - cannot use it as it picks up the generic.xaml version, not the WinUI version  -->
+    <Style x:Key="TitleBarPaneToggleButtonStyle" TargetType="Button">
+        <Setter Property="Background" Value="{ThemeResource NavigationViewBackButtonBackground}" />
+        <Setter Property="Foreground" Value="{ThemeResource NavigationViewItemForegroundChecked}" />
+        <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
+        <Setter Property="FontSize" Value="16" />
+        <Setter Property="MaxHeight" Value="40" />
+        <Setter Property="VerticalAlignment" Value="Stretch" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
+        <Setter Property="Content" Value="&#xE700;" />
+        <Setter Property="Padding" Value="12,4,12,4" />
+        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Grid
+                        x:Name="RootGrid"
+                        Padding="{TemplateBinding Padding}"
+                        Background="{TemplateBinding Background}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <AnimatedIcon
+                            x:Name="Content"
+                            Width="16"
+                            Height="16"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            AnimatedIcon.State="Normal"
+                            AutomationProperties.AccessibilityView="Raw">
+                            <animatedvisuals:AnimatedGlobalNavigationButtonVisualSource />
+                            <AnimatedIcon.FallbackIconSource>
+                                <FontIconSource
+                                    FontFamily="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FontFamily}"
+                                    FontSize="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=FontSize}"
+                                    Glyph="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content}"
+                                    MirroredWhenRightToLeft="True" />
+                            </AnimatedIcon.FallbackIconSource>
+                        </AnimatedIcon>
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal" />
+                                <VisualState x:Name="PointerOver">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonBackgroundPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonForegroundPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                    <VisualState.Setters>
+                                        <Setter Target="Content.(AnimatedIcon.State)" Value="PointerOver" />
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="Pressed">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonBackgroundPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonForegroundPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                    <VisualState.Setters>
+                                        <Setter Target="Content.(AnimatedIcon.State)" Value="Pressed" />
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="Disabled">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource NavigationViewButtonForegroundDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>

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

@@ -4,6 +4,7 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:animatedVisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
     xmlns:animations="using:CommunityToolkit.WinUI.Animations"
+    xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
     xmlns:converters="using:Microsoft.PowerToys.Settings.UI.Converters"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:helpers="using:Microsoft.PowerToys.Settings.UI.Helpers"
@@ -11,7 +12,6 @@
     xmlns:ic="using:Microsoft.Xaml.Interactions.Core"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:models="using:Microsoft.PowerToys.Settings.UI.ViewModels"
-    xmlns:tkcontrols="using:CommunityToolkit.WinUI.Controls"
     xmlns:tkconverters="using:CommunityToolkit.WinUI.Converters"
     xmlns:ui="using:CommunityToolkit.WinUI"
     xmlns:views="using:Microsoft.PowerToys.Settings.UI.Views"
@@ -98,17 +98,17 @@
             <RowDefinition Height="48" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
-        <tkcontrols:TitleBar
+        <controls:TitleBar
             x:Name="AppTitleBar"
             AutoConfigureCustomTitleBar="True"
             PaneButtonClick="PaneToggleBtn_Click">
-            <tkcontrols:TitleBar.Resources>
+            <controls:TitleBar.Resources>
                 <x:Double x:Key="TitleBarContentMinWidth">516</x:Double>
-            </tkcontrols:TitleBar.Resources>
-            <tkcontrols:TitleBar.Icon>
+            </controls:TitleBar.Resources>
+            <controls:TitleBar.Icon>
                 <BitmapIcon ShowAsMonochrome="False" UriSource="/Assets/Settings/icon.ico" />
-            </tkcontrols:TitleBar.Icon>
-            <tkcontrols:TitleBar.Content>
+            </controls:TitleBar.Icon>
+            <controls:TitleBar.Content>
                 <AutoSuggestBox
                     x:Name="SearchBox"
                     x:Uid="Shell_SearchBox"
@@ -129,8 +129,8 @@
                             Modifiers="Control" />
                     </AutoSuggestBox.KeyboardAccelerators>
                 </AutoSuggestBox>
-            </tkcontrols:TitleBar.Content>
-        </tkcontrols:TitleBar>
+            </controls:TitleBar.Content>
+        </controls:TitleBar>
         <NavigationView
             x:Name="navigationView"
             Grid.Row="1"

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

@@ -11,6 +11,7 @@ using System.Threading.Tasks;
 using Common.Search;
 using Common.Search.FuzzSearch;
 using ManagedCommon;
+using Microsoft.PowerToys.Settings.UI.Controls;
 using Microsoft.PowerToys.Settings.UI.Helpers;
 using Microsoft.PowerToys.Settings.UI.Library;
 using Microsoft.PowerToys.Settings.UI.Services;
@@ -132,7 +133,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
 
         public static bool IsUserAnAdmin { get; set; }
 
-        public CommunityToolkit.WinUI.Controls.TitleBar TitleBar => AppTitleBar;
+        public Controls.TitleBar TitleBar => AppTitleBar;
 
         private Dictionary<Type, NavigationViewItem> _navViewParentLookup = new Dictionary<Type, NavigationViewItem>();
         private List<string> _searchSuggestions = [];