Settings: Replace custom TitleBar with built-in WinUI TitleBar control

Migrate Settings UI from the custom controls:TitleBar to the built-in
WinUI TitleBar control. The SearchBox moves from ShellPage to
MainWindow (inside TitleBar.Content) so drag regions work correctly.

- Manual passthrough region via InputNonClientPointerSource for the
  SearchBox (built-in TitleBar drag region APIs are unreliable)
- DisplayModeChanged callback replaces HostTitleBar reference
- Search templates stay in ShellPage (x:Bind codegen limitation)
- TODO comment for compact-mode alignment (microsoft/microsoft-ui-xaml#11181)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

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

@@ -34,7 +34,6 @@
 		<None Remove="Assets\Settings\Modules\OOBE\pt-hero.light.png" />
 		<None Remove="SettingsXAML\Controls\Dashboard\CheckUpdateControl.xaml" />
 		<None Remove="SettingsXAML\Controls\Dashboard\ShortcutConflictControl.xaml" />
-		<None Remove="SettingsXAML\Controls\TitleBar\TitleBar.xaml" />
 	</ItemGroup>
 	<ItemGroup>
 		<Page Remove="SettingsXAML\App.xaml" />
@@ -175,9 +174,6 @@
 		<None Update="Assets\Settings\Scripts\DisableModule.ps1">
 			<CopyToOutputDirectory>Always</CopyToOutputDirectory>
 		</None>
-		<Page Update="SettingsXAML\Controls\TitleBar\TitleBar.xaml">
-			<Generator>MSBuild:Compile</Generator>
-		</Page>
 		<Page Update="SettingsXAML\Controls\GPOInfoControl.xaml">
 			<Generator>MSBuild:Compile</Generator>
 		</Page>

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

@@ -14,7 +14,6 @@
                 <ResourceDictionary Source="ms-appx:///PowerToys.Common.UI.Controls/Controls/KeyVisual/KeyVisual.xaml" />
                 <ResourceDictionary Source="ms-appx:///PowerToys.Common.UI.Controls/Controls/KeyVisual/KeyCharPresenter.xaml" />
                 <ResourceDictionary Source="ms-appx:///PowerToys.Common.UI.Controls/Controls/IsEnabledTextBlock/IsEnabledTextBlock.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

@@ -1,229 +0,0 @@
-// 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

@@ -1,195 +0,0 @@
-// 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

@@ -1,220 +0,0 @@
-// 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

@@ -1,371 +0,0 @@
-<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/MainWindow.xaml

@@ -1,4 +1,4 @@
-<winuiex:WindowEx
+<winuiex:WindowEx
     x:Class="Microsoft.PowerToys.Settings.UI.MainWindow"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -13,5 +13,48 @@
     <Window.SystemBackdrop>
         <MicaBackdrop />
     </Window.SystemBackdrop>
-    <local:ShellPage x:Name="shellPage" />
+    <Grid x:Name="RootGrid">
+        <Grid.Resources>
+            <!--  TODO: Remove once WinUI exposes TitleBarCompactContentHorizontalAlignment
+                  lightweight styling resource (microsoft/microsoft-ui-xaml#11181).  -->
+            <x:Double x:Key="TitleBarMinDragRegionWidth">0</x:Double>
+            <HorizontalAlignment x:Key="TitleBarContentHorizontalAlignment">Stretch</HorizontalAlignment>
+        </Grid.Resources>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+        <TitleBar
+            x:Name="AppTitleBar"
+            IsBackButtonVisible="False"
+            IsPaneToggleButtonVisible="False"
+            PaneToggleRequested="TitleBar_PaneToggleRequested">
+            <TitleBar.IconSource>
+                <BitmapIconSource ShowAsMonochrome="False" UriSource="/Assets/Settings/icon.ico" />
+            </TitleBar.IconSource>
+            <TitleBar.Content>
+                <AutoSuggestBox
+                    x:Name="SearchBox"
+                    x:Uid="Shell_SearchBox"
+                    MaxWidth="580"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Center"
+                    GotFocus="SearchBox_GotFocus"
+                    QueryIcon="Find"
+                    QuerySubmitted="SearchBox_QuerySubmitted"
+                    SuggestionChosen="SearchBox_SuggestionChosen"
+                    TextChanged="SearchBox_TextChanged"
+                    TextMemberPath="Header"
+                    UpdateTextOnSelect="False">
+                    <AutoSuggestBox.KeyboardAccelerators>
+                        <KeyboardAccelerator
+                            Key="F"
+                            Invoked="CtrlF_Invoked"
+                            Modifiers="Control" />
+                    </AutoSuggestBox.KeyboardAccelerators>
+                </AutoSuggestBox>
+            </TitleBar.Content>
+        </TitleBar>
+        <local:ShellPage x:Name="shellPage" Grid.Row="1" />
+    </Grid>
 </winuiex:WindowEx>

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

@@ -15,6 +15,8 @@ using Microsoft.UI;
 using Microsoft.UI.Dispatching;
 using Microsoft.UI.Windowing;
 using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Input;
 using Windows.Data.Json;
 using WinRT.Interop;
 using WinUIEx;
@@ -137,10 +139,59 @@ namespace Microsoft.PowerToys.Settings.UI
 
         private void SetTitleBar()
         {
-            // We need to assign the window here so it can configure the custom title bar area correctly.
-            shellPage.TitleBar.Window = this;
             this.ExtendsContentIntoTitleBar = true;
+            this.SetTitleBar(AppTitleBar);
+            this.AppWindow.TitleBar.PreferredHeightOption = TitleBarHeightOption.Tall;
             WindowHelpers.ForceTopBorder1PixelInsetOnWindows10(WindowNative.GetWindowHandle(this));
+
+            // Set the title based on elevation state.
+            var loader = ResourceLoaderInstance.ResourceLoader;
+            AppTitleBar.Title = App.IsElevated ? loader.GetString("SettingsWindow_AdminTitle") : loader.GetString("SettingsWindow_Title");
+#if DEBUG
+            AppTitleBar.Subtitle = "Debug";
+#endif
+
+            // Give ShellPage a reference to the SearchBox (defined here in XAML
+            // so drag regions are computed correctly by the built-in TitleBar).
+            shellPage.SearchBox = SearchBox;
+
+            // The built-in TitleBar's drag region auto-computation is unreliable
+            // in this setup. Manually register the SearchBox as a passthrough
+            // (non-draggable) region via InputNonClientPointerSource.
+            SearchBox.SizeChanged += (_, _) => UpdateSearchBoxPassthroughRegion();
+
+            // Update TitleBar pane toggle visibility when NavigationView display mode changes.
+            shellPage.DisplayModeChanged = mode =>
+            {
+                AppTitleBar.IsPaneToggleButtonVisible =
+                    mode == NavigationViewDisplayMode.Compact ||
+                    mode == NavigationViewDisplayMode.Minimal;
+            };
+
+            // Caption button theming — the built-in TitleBar handles drag regions
+            // and layout automatically, but caption button foreground colors need
+            // to be set explicitly for theme changes (WinUI known issue).
+            if (this.Content is FrameworkElement rootElement)
+            {
+                ApplyThemeToCaptionButtons(rootElement.ActualTheme);
+                rootElement.ActualThemeChanged += (_, _) => ApplyThemeToCaptionButtons(rootElement.ActualTheme);
+            }
+        }
+
+        private void ApplyThemeToCaptionButtons(ElementTheme theme)
+        {
+            this.AppWindow.TitleBar.ButtonBackgroundColor = Colors.Transparent;
+            this.AppWindow.TitleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
+            if (theme == ElementTheme.Dark)
+            {
+                this.AppWindow.TitleBar.ButtonForegroundColor = Colors.White;
+                this.AppWindow.TitleBar.ButtonInactiveForegroundColor = Colors.DarkGray;
+            }
+            else
+            {
+                this.AppWindow.TitleBar.ButtonForegroundColor = Colors.Black;
+                this.AppWindow.TitleBar.ButtonInactiveForegroundColor = Colors.DarkGray;
+            }
         }
 
         public void NavigateToSection(Type type)
@@ -148,6 +199,33 @@ namespace Microsoft.PowerToys.Settings.UI
             ShellPage.Navigate(type);
         }
 
+        private void UpdateSearchBoxPassthroughRegion()
+        {
+            if (SearchBox.ActualWidth == 0)
+            {
+                return;
+            }
+
+            var scale = SearchBox.XamlRoot.RasterizationScale;
+            var transform = SearchBox.TransformToVisual(null);
+            var bounds = transform.TransformBounds(
+                new global::Windows.Foundation.Rect(0, 0, SearchBox.ActualWidth, SearchBox.ActualHeight));
+
+            var rect = new global::Windows.Graphics.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));
+
+            var source = Microsoft.UI.Input.InputNonClientPointerSource.GetForWindowId(this.AppWindow.Id);
+            source.SetRegionRects(Microsoft.UI.Input.NonClientRegionKind.Passthrough, new[] { rect });
+        }
+
+        private void TitleBar_PaneToggleRequested(Microsoft.UI.Xaml.Controls.TitleBar sender, object args)
+        {
+            shellPage.ToggleNavigationPane();
+        }
+
         public void CloseHiddenWindow()
         {
             var hWnd = WindowNative.GetWindowHandle(this);
@@ -201,5 +279,22 @@ namespace Microsoft.PowerToys.Settings.UI
         {
             ShellPage.EnsurePageIsSelected();
         }
+
+        // Search event forwarders — the SearchBox lives in MainWindow's XAML
+        // (required for TitleBar drag regions) but the search logic is in ShellPage.
+        private void SearchBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
+            => shellPage.HandleSearchTextChanged(sender, args);
+
+        private void SearchBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
+            => shellPage.HandleSearchQuerySubmitted(sender, args);
+
+        private void SearchBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
+            => shellPage.HandleSearchSuggestionChosen(sender, args);
+
+        private void SearchBox_GotFocus(object sender, RoutedEventArgs e)
+            => shellPage.HandleSearchGotFocus(sender, e);
+
+        private void CtrlF_Invoked(KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)
+            => shellPage.HandleCtrlF(sender, args);
     }
 }

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

@@ -1,10 +1,9 @@
-<UserControl
+<UserControl
     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: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"
@@ -86,48 +85,8 @@
         </ic:EventTriggerBehavior>
     </i:Interaction.Behaviors>
     <Grid x:Name="RootGrid">
-        <Grid.RowDefinitions>
-            <RowDefinition Height="48" />
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
-        <controls:TitleBar
-            x:Name="AppTitleBar"
-            AutoConfigureCustomTitleBar="True"
-            CompactStateBreakpoint="900"
-            IsTabStop="False"
-            PaneButtonClick="PaneToggleBtn_Click">
-            <controls:TitleBar.Resources>
-                <x:Double x:Key="TitleBarContentMinWidth">516</x:Double>
-            </controls:TitleBar.Resources>
-            <controls:TitleBar.Icon>
-                <BitmapIcon ShowAsMonochrome="False" UriSource="/Assets/Settings/icon.ico" />
-            </controls:TitleBar.Icon>
-            <controls:TitleBar.Content>
-                <AutoSuggestBox
-                    x:Name="SearchBox"
-                    x:Uid="Shell_SearchBox"
-                    HorizontalAlignment="Stretch"
-                    VerticalAlignment="Center"
-                    GotFocus="SearchBox_GotFocus"
-                    ItemTemplateSelector="{StaticResource SearchSuggestionTemplateSelector}"
-                    QueryIcon="Find"
-                    QuerySubmitted="SearchBox_QuerySubmitted"
-                    SuggestionChosen="SearchBox_SuggestionChosen"
-                    TextChanged="SearchBox_TextChanged"
-                    TextMemberPath="Header"
-                    UpdateTextOnSelect="False">
-                    <AutoSuggestBox.KeyboardAccelerators>
-                        <KeyboardAccelerator
-                            Key="F"
-                            Invoked="CtrlF_Invoked"
-                            Modifiers="Control" />
-                    </AutoSuggestBox.KeyboardAccelerators>
-                </AutoSuggestBox>
-            </controls:TitleBar.Content>
-        </controls:TitleBar>
         <NavigationView
             x:Name="navigationView"
-            Grid.Row="1"
             Canvas.ZIndex="0"
             CompactModeThresholdWidth="1007"
             DisplayModeChanged="NavigationView_DisplayModeChanged"

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

@@ -11,7 +11,6 @@ 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.Library.Utilities;
@@ -94,7 +93,18 @@ namespace Microsoft.PowerToys.Settings.UI.Views
 
         public static bool IsUserAnAdmin { get; set; }
 
-        public Controls.TitleBar TitleBar => AppTitleBar;
+        /// <summary>
+        /// Gets or sets the SearchBox control. The AutoSuggestBox lives in
+        /// MainWindow.xaml (inside the TitleBar) so drag regions work correctly.
+        /// MainWindow assigns this reference after InitializeComponent.
+        /// </summary>
+        public AutoSuggestBox SearchBox { get; set; }
+
+        /// <summary>
+        /// Callback invoked when the NavigationView display mode changes.
+        /// MainWindow uses this to update TitleBar.IsPaneToggleButtonVisible.
+        /// </summary>
+        public Action<NavigationViewDisplayMode> DisplayModeChanged { get; set; }
 
         private Dictionary<Type, NavigationViewItem> _navViewParentLookup = new Dictionary<Type, NavigationViewItem>();
         private List<string> _searchSuggestions = [];
@@ -346,11 +356,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
 
         private void SetWindowTitle()
         {
-            var loader = ResourceLoaderInstance.ResourceLoader;
-            AppTitleBar.Title = App.IsElevated ? loader.GetString("SettingsWindow_AdminTitle") : loader.GetString("SettingsWindow_Title");
-#if DEBUG
-            AppTitleBar.Subtitle = "Debug";
-#endif
+            // Title is now set by MainWindow on the window-level TitleBar.
         }
 
         private void ShellPage_Loaded(object sender, RoutedEventArgs e)
@@ -360,21 +366,23 @@ namespace Microsoft.PowerToys.Settings.UI.Views
                 SearchIndexService.BuildIndex();
             })
             .ContinueWith(_ => { });
+
+            // Wire the ItemTemplateSelector from ShellPage's resources to the
+            // SearchBox which lives in MainWindow's TitleBar XAML.
+            if (SearchBox != null
+                && this.Resources.TryGetValue("SearchSuggestionTemplateSelector", out var selector)
+                && selector is DataTemplateSelector templateSelector)
+            {
+                SearchBox.ItemTemplateSelector = templateSelector;
+            }
         }
 
         private void NavigationView_DisplayModeChanged(NavigationView sender, NavigationViewDisplayModeChangedEventArgs args)
         {
-            if (args.DisplayMode == NavigationViewDisplayMode.Compact || args.DisplayMode == NavigationViewDisplayMode.Minimal)
-            {
-                AppTitleBar.IsPaneButtonVisible = true;
-            }
-            else
-            {
-                AppTitleBar.IsPaneButtonVisible = false;
-            }
+            DisplayModeChanged?.Invoke(args.DisplayMode);
         }
 
-        private void PaneToggleBtn_Click(object sender, RoutedEventArgs e)
+        internal void ToggleNavigationPane()
         {
             navigationView.IsPaneOpen = !navigationView.IsPaneOpen;
         }
@@ -400,7 +408,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
         private List<SettingEntry> _lastSearchResults = new();
         private string _lastQueryText = string.Empty;
 
-        private async void SearchBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
+        internal async void HandleSearchTextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
         {
             // Only respond to user input, not programmatic text changes
             if (args.Reason != AutoSuggestionBoxTextChangeReason.UserInput)
@@ -465,7 +473,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
             sender.IsSuggestionListOpen = top.Count > 0;
         }
 
-        private void SearchBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
+        internal void HandleSearchSuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
         {
             // Do not navigate on arrow navigation. Let QuerySubmitted handle commits (Enter/click).
             // AutoSuggestBox will pass the chosen item via args.ChosenSuggestion to QuerySubmitted.
@@ -516,13 +524,13 @@ namespace Microsoft.PowerToys.Settings.UI.Views
             return assembly.GetType($"Microsoft.PowerToys.Settings.UI.Views.{pageTypeName}");
         }
 
-        private void CtrlF_Invoked(KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)
+        internal void HandleCtrlF(KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)
         {
             SearchBox.Focus(FocusState.Programmatic);
             args.Handled = true; // prevent further processing (e.g., unintended navigation)
         }
 
-        private void SearchBox_GotFocus(object sender, RoutedEventArgs e)
+        internal void HandleSearchGotFocus(object sender, RoutedEventArgs e)
         {
             var box = sender as AutoSuggestBox;
             var current = box?.Text?.Trim() ?? string.Empty;
@@ -606,7 +614,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
             return list;
         }
 
-        private async void SearchBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
+        internal async void HandleSearchQuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
         {
             // If a suggestion is selected, navigate directly
             if (args.ChosenSuggestion is SuggestionItem chosen)