[CmdPal] Settings UI polishing (#38094)

<!-- Enter a brief description/summary of your PR here. What does it fix/what does it change/how was it tested (even manually, if necessary)? -->
## Summary of the Pull Request

Settings window UI polishing:
- Make the navigation view toggle button move in the title bar when navigation view mode is compact or minimal
- Center settings card in the window
- Properly set windows icon in order to make it visible in task manager and task view

_main branch_
![image](https://github.com/user-attachments/assets/792f0779-016a-4056-81b0-04244d903909)

![image](https://github.com/user-attachments/assets/81ac2761-2a9c-4fe7-a122-2f69f900e656)

_PR_
![image](https://github.com/user-attachments/assets/029b95a0-9629-4732-9f0c-bf586954e887)

![image](https://github.com/user-attachments/assets/81bb2beb-9a07-42cf-8594-16ba5a9cda1b)

<!-- Please review the items on the PR checklist before submitting-->
## PR Checklist

- [ ] **Closes:**: https://github.com/zadjii-msft/PowerToys/issues/581

---------

Co-authored-by: Niels Laute <niels.laute@live.nl>

src/modules/cmdpal/Microsoft.CmdPal.UI/Helpers/WindowExtensions.cs

@@ -0,0 +1,20 @@
+// 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;
+using Microsoft.UI.Windowing;
+using Microsoft.UI.Xaml;
+
+namespace Microsoft.CmdPal.UI.Helpers;
+
+public static class WindowExtensions
+{
+    public static void SetIcon(this Window window)
+    {
+        var hWnd = WinRT.Interop.WindowNative.GetWindowHandle(window);
+        WindowId windowId = Win32Interop.GetWindowIdFromWindow(hWnd);
+        AppWindow appWindow = AppWindow.GetFromWindowId(windowId);
+        appWindow.SetIcon(@"Assets\icon.ico");
+    }
+}

src/modules/cmdpal/Microsoft.CmdPal.UI/MainWindow.xaml.cs

@@ -8,6 +8,7 @@ using Microsoft.CmdPal.Common.Helpers;
 using Microsoft.CmdPal.Common.Messages;
 using Microsoft.CmdPal.Common.Services;
 using Microsoft.CmdPal.UI.Events;
+using Microsoft.CmdPal.UI.Helpers;
 using Microsoft.CmdPal.UI.ViewModels;
 using Microsoft.CmdPal.UI.ViewModels.Messages;
 using Microsoft.Extensions.DependencyInjection;
@@ -71,6 +72,7 @@ public sealed partial class MainWindow : Window,
         // notification area icon back
         WM_TASKBAR_RESTART = PInvoke.RegisterWindowMessage("TaskbarCreated");
 
+        this.SetIcon();
         AppWindow.Title = RS_.GetString("AppName");
         AppWindow.Resize(new SizeInt32 { Width = 1000, Height = 620 });
         PositionCentered();

src/modules/cmdpal/Microsoft.CmdPal.UI/Settings/ExtensionPage.xaml

@@ -41,8 +41,8 @@
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
-        <ScrollViewer Grid.Row="1" Padding="0,0,8,0">
+        <ScrollViewer Grid.Row="1">
-            <Grid Padding="8,-8,8,8">
+            <Grid Padding="16">
                 <StackPanel
                     MaxWidth="1000"
                     HorizontalAlignment="Stretch"

src/modules/cmdpal/Microsoft.CmdPal.UI/Settings/ExtensionsPage.xaml

@@ -19,8 +19,8 @@
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
-        <ScrollViewer Grid.Row="1" Padding="0,0,8,0">
+        <ScrollViewer Grid.Row="1">
-            <Grid Padding="8,16,8,8">
+            <Grid Padding="16">
                 <StackPanel
                     MaxWidth="1000"
                     HorizontalAlignment="Stretch"

src/modules/cmdpal/Microsoft.CmdPal.UI/Settings/GeneralPage.xaml

@@ -17,8 +17,8 @@
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
-        <ScrollViewer Grid.Row="1" Padding="0,0,8,0">
+        <ScrollViewer Grid.Row="1">
-            <Grid Padding="8,16,8,8">
+            <Grid Padding="16">
                 <StackPanel
                     MaxWidth="1000"
                     HorizontalAlignment="Stretch"

src/modules/cmdpal/Microsoft.CmdPal.UI/Settings/SettingsWindow.xaml

@@ -20,11 +20,21 @@
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
         <!--  TO DO: Replace this with WinUI TitleBar once that ships.  -->
-        <StackPanel Height="48" Orientation="Horizontal">
+        <Button
+            x:Name="PaneToggleBtn"
+            Width="48"
+            HorizontalAlignment="Left"
+            VerticalAlignment="Center"
+            Click="PaneToggleBtn_Click"
+            Style="{StaticResource PaneToggleButtonStyle}" />
+        <StackPanel
+            x:Name="AppTitleBar"
+            Grid.Row="0"
+            Height="48"
+            Orientation="Horizontal">
             <Image
                 Width="16"
                 Height="16"
-                Margin="16,0,0,0"
                 Source="ms-appx:///Assets/StoreLogo.png" />
             <TextBlock
                 Margin="12,0,0,0"
@@ -35,6 +45,7 @@
         <NavigationView
             x:Name="NavView"
             Grid.Row="1"
+            DisplayModeChanged="NavView_DisplayModeChanged"
             IsBackButtonVisible="Collapsed"
             IsSettingsVisible="False"
             ItemInvoked="NavView_ItemInvoked"
@@ -46,28 +57,6 @@
                 <Thickness x:Key="NavigationViewHeaderMargin">15,0,0,0</Thickness>
             </NavigationView.Resources>
 
-            <NavigationView.Header>
-                <BreadcrumbBar
-                    x:Name="NavigationBreadcrumbBar"
-                    MaxWidth="1000"
-                    ItemClicked="NavigationBreadcrumbBar_ItemClicked"
-                    ItemsSource="{x:Bind BreadCrumbs, Mode=OneWay}">
-                    <BreadcrumbBar.ItemTemplate>
-                        <DataTemplate x:DataType="local:Crumb">
-                            <TextBlock Text="{x:Bind Label, Mode=OneWay}" />
-                        </DataTemplate>
-                    </BreadcrumbBar.ItemTemplate>
-                    <BreadcrumbBar.Resources>
-                        <ResourceDictionary>
-                            <x:Double x:Key="BreadcrumbBarItemThemeFontSize">28</x:Double>
-                            <Thickness x:Key="BreadcrumbBarChevronPadding">7,4,8,0</Thickness>
-                            <FontWeight x:Key="BreadcrumbBarItemFontWeight">SemiBold</FontWeight>
-                            <x:Double x:Key="BreadcrumbBarChevronFontSize">16</x:Double>
-                        </ResourceDictionary>
-                    </BreadcrumbBar.Resources>
-                </BreadcrumbBar>
-
-            </NavigationView.Header>
             <NavigationView.MenuItems>
                 <NavigationViewItem
                     x:Uid="Settings_GeneralPage_NavigationViewItem_General"
@@ -85,6 +74,28 @@
                     <RowDefinition Height="*" />
                 </Grid.RowDefinitions>
 
+                <BreadcrumbBar
+                    x:Name="NavigationBreadcrumbBar"
+                    Grid.Row="0"
+                    MaxWidth="1000"
+                    Margin="16,0,0,0"
+                    ItemClicked="NavigationBreadcrumbBar_ItemClicked"
+                    ItemsSource="{x:Bind BreadCrumbs, Mode=OneWay}">
+                    <BreadcrumbBar.ItemTemplate>
+                        <DataTemplate x:DataType="local:Crumb">
+                            <TextBlock Text="{x:Bind Label, Mode=OneWay}" />
+                        </DataTemplate>
+                    </BreadcrumbBar.ItemTemplate>
+                    <BreadcrumbBar.Resources>
+                        <ResourceDictionary>
+                            <x:Double x:Key="BreadcrumbBarItemThemeFontSize">28</x:Double>
+                            <Thickness x:Key="BreadcrumbBarChevronPadding">7,4,8,0</Thickness>
+                            <FontWeight x:Key="BreadcrumbBarItemFontWeight">SemiBold</FontWeight>
+                            <x:Double x:Key="BreadcrumbBarChevronFontSize">16</x:Double>
+                        </ResourceDictionary>
+                    </BreadcrumbBar.Resources>
+                </BreadcrumbBar>
+
                 <Frame x:Name="NavFrame" Grid.Row="1" />
             </Grid>
         </NavigationView>

src/modules/cmdpal/Microsoft.CmdPal.UI/Settings/SettingsWindow.xaml.cs

@@ -4,6 +4,7 @@
 
 using System.Collections.ObjectModel;
 using CommunityToolkit.Mvvm.Messaging;
+using Microsoft.CmdPal.UI.Helpers;
 using Microsoft.CmdPal.UI.ViewModels;
 using Microsoft.CmdPal.UI.ViewModels.Messages;
 using Microsoft.UI.Windowing;
@@ -24,7 +25,7 @@ public sealed partial class SettingsWindow : Window,
     {
         this.InitializeComponent();
         this.ExtendsContentIntoTitleBar = true;
-        this.AppWindow.SetIcon("ms-appx:///Assets/Icons/StoreLogo.png");
+        this.SetIcon();
         this.AppWindow.Title = RS_.GetString("SettingsWindowTitle");
         this.AppWindow.TitleBar.PreferredHeightOption = TitleBarHeightOption.Tall;
         PositionCentered();
@@ -110,6 +111,27 @@ public sealed partial class SettingsWindow : Window,
         WeakReferenceMessenger.Default.Send<SettingsWindowClosedMessage>();
     }
 
+    private void PaneToggleBtn_Click(object sender, RoutedEventArgs e)
+    {
+        NavView.IsPaneOpen = !NavView.IsPaneOpen;
+    }
+
+    private void NavView_DisplayModeChanged(NavigationView sender, NavigationViewDisplayModeChangedEventArgs args)
+    {
+        if (args.DisplayMode == NavigationViewDisplayMode.Compact || args.DisplayMode == NavigationViewDisplayMode.Minimal)
+        {
+            PaneToggleBtn.Visibility = Visibility.Visible;
+            NavView.IsPaneToggleButtonVisible = false;
+            AppTitleBar.Margin = new Thickness(48, 0, 0, 0);
+        }
+        else
+        {
+            PaneToggleBtn.Visibility = Visibility.Collapsed;
+            NavView.IsPaneToggleButtonVisible = true;
+            AppTitleBar.Margin = new Thickness(16, 0, 0, 0);
+        }
+    }
+
     public void Receive(QuitMessage message)
     {
         // This might come in on a background thread

src/modules/cmdpal/Microsoft.CmdPal.UI/ToastWindow.xaml.cs

@@ -4,19 +4,16 @@
 
 using CommunityToolkit.Mvvm.Messaging;
 using CommunityToolkit.WinUI;
+using Microsoft.CmdPal.UI.Helpers;
 using Microsoft.CmdPal.UI.ViewModels;
 using Microsoft.CmdPal.UI.ViewModels.Messages;
-using Microsoft.UI.Composition;
-using Microsoft.UI.Composition.SystemBackdrops;
 using Microsoft.UI.Dispatching;
 using Microsoft.UI.Windowing;
 using Microsoft.UI.Xaml;
 using Windows.Graphics;
-using Windows.UI;
 using Windows.Win32;
 using Windows.Win32.Foundation;
 using Windows.Win32.UI.WindowsAndMessaging;
-using WinRT;
 using RS_ = Microsoft.CmdPal.UI.Helpers.ResourceLoaderInstance;
 
 namespace Microsoft.CmdPal.UI;
@@ -37,7 +34,7 @@ public sealed partial class ToastWindow : Window,
         AppWindow.IsShownInSwitchers = false;
         ExtendsContentIntoTitleBar = true;
         AppWindow.SetPresenter(AppWindowPresenterKind.CompactOverlay);
-        AppWindow.SetIcon("ms-appx:///Assets/Icons/StoreLogo.png");
+        this.SetIcon();
         AppWindow.Title = RS_.GetString("ToastWindowTitle");
         AppWindow.TitleBar.PreferredHeightOption = TitleBarHeightOption.Collapsed;