Merge pull request #60 from zadjii-msft/niels9001/fluent3

[UX] Fluent design

src/modules/cmdpal/WindowsCommandPalette/App.xaml

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8" ?>
 <Application
     x:Class="WindowsCommandPalette.App"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
@@ -7,15 +7,13 @@
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>
                 <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
-                <!-- Other merged dictionaries here -->
+                <!--  Other merged dictionaries here  -->
                 <ResourceDictionary Source="Themes/Generic.xaml" />
+                <ResourceDictionary Source="Styles/Button.xaml" />
+                <ResourceDictionary Source="Styles/TextBox.xaml" />
             </ResourceDictionary.MergedDictionaries>
-            <!-- Other app resources here -->
+            <!--  Other app resources here  -->
 
-
-            <!--  Shadow that can be used by any control.  -->
-            <ThemeShadow x:Name="SharedShadow" />
-            
         </ResourceDictionary>
     </Application.Resources>
 </Application>

src/modules/cmdpal/WindowsCommandPalette/Converters/ReverseBoolToVisibilityConverter.cs

@@ -0,0 +1,21 @@
+// 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.Data;
+
+namespace WindowsCommandPalette.Converters;
+
+public sealed partial class ReverseBoolToVisibilityConverter : IValueConverter
+{
+    public object Convert(object value, Type targetType, object parameter, string language)
+    {
+        return ((bool)value) ? Visibility.Collapsed : Visibility.Visible;
+    }
+
+    public object ConvertBack(object value, Type targetType, object parameter, string language)
+    {
+        throw new NotImplementedException();
+    }
+}

src/modules/cmdpal/WindowsCommandPalette/Converters/StringNotEmptyToVisibilityConverter.xaml.cs

@@ -5,7 +5,7 @@
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Data;
 
-namespace WindowsCommandPalette.Views;
+namespace WindowsCommandPalette.Converters;
 
 public sealed partial class StringNotEmptyToVisibilityConverter : IValueConverter
 {

src/modules/cmdpal/WindowsCommandPalette/MainWindow.xaml

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8" ?>
 <Window
     x:Class="WindowsCommandPalette.MainWindow"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
@@ -8,46 +8,48 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     Closed="MainWindow_Closed"
     mc:Ignorable="d">
-
-    <Window.SystemBackdrop>
-        <MicaBackdrop Kind="BaseAlt"/>
-    </Window.SystemBackdrop>
-
     <Grid x:Name="RootGrid">
         <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition/>
+            <RowDefinition Height="Auto" />
+            <RowDefinition />
         </Grid.RowDefinitions>
-
-
-        <Grid x:Name="AppTitleBar" Background="Transparent" Height="0">
-            <!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
-            <!-- Using padding columns instead of Margin ensures that the background
-             paints the area under the caption control buttons (for transparent buttons). -->
+        <Grid
+            x:Name="AppTitleBar"
+            Height="0"
+            Background="Transparent">
+            <!--  Width of the padding columns is set in LayoutMetricsChanged handler.  -->
+            <!--
+                Using padding columns instead of Margin ensures that the background
+                paints the area under the caption control buttons (for transparent buttons).
+            -->
             <Grid.ColumnDefinitions>
-                <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
-                <ColumnDefinition/>
-                <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
+                <ColumnDefinition x:Name="LeftPaddingColumn" Width="0" />
+                <ColumnDefinition />
+                <ColumnDefinition x:Name="RightPaddingColumn" Width="0" />
             </Grid.ColumnDefinitions>
-            <StackPanel Orientation="Horizontal"
-                Grid.Column="1">
-
-                <Image Source="Assets/WindowIcon.png"
-                   HorizontalAlignment="Left"
-                   Width="16" Height="16"
-                   Margin="8,0,0,0"/>
-                <TextBlock x:Name="AppTitleTextBlock"
-                   Text="App title"
-                   Visibility="Collapsed"
-                   Style="{StaticResource CaptionTextBlockStyle}"
-                   Grid.Column="1"
-                   VerticalAlignment="Center"
-                   Margin="28,0,0,0"/>
-
+            <StackPanel Grid.Column="1" Orientation="Horizontal">
+                <Image
+                    Width="16"
+                    Height="16"
+                    Margin="8,0,0,0"
+                    HorizontalAlignment="Left"
+                    Source="Assets/WindowIcon.png" />
+                <TextBlock
+                    x:Name="AppTitleTextBlock"
+                    Grid.Column="1"
+                    Margin="28,0,0,0"
+                    VerticalAlignment="Center"
+                    Style="{StaticResource CaptionTextBlockStyle}"
+                    Text="App title"
+                    Visibility="Collapsed" />
             </StackPanel>
         </Grid>
-        <Grid x:Name="ContentGrid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Padding="24,24,24,4" Grid.Row="1">
-            <cmdpal:MainPage x:Name="MainPage"/>
+        <Grid
+            x:Name="ContentGrid"
+            Grid.Row="1"
+            HorizontalAlignment="Stretch"
+            VerticalAlignment="Stretch">
+            <cmdpal:MainPage x:Name="MainPage" />
         </Grid>
     </Grid>
-</Window>
+</Window>

src/modules/cmdpal/WindowsCommandPalette/MainWindow.xaml.cs

@@ -7,6 +7,9 @@ using System.Text.RegularExpressions;
 using Microsoft.CmdPal.Common.Contracts;
 using Microsoft.CmdPal.Common.Extensions;
 using Microsoft.CmdPal.Common.Services;
+using Microsoft.UI;
+using Microsoft.UI.Composition;
+using Microsoft.UI.Composition.SystemBackdrops;
 using Microsoft.UI.Input;
 using Microsoft.UI.Windowing;
 using Microsoft.UI.Xaml;
@@ -19,13 +22,16 @@ using Windows.System;
 using Windows.Win32.Foundation;
 using Windows.Win32.UI.WindowsAndMessaging;
 using WindowsCommandPalette.Views;
+using WinRT;
 
 namespace WindowsCommandPalette;
 
 /// <summary>
 /// An empty window that can be used on its own or navigated to within a Frame.
 /// </summary>
+#pragma warning disable CA1001 // Types that own disposable fields should be disposable
 public sealed partial class MainWindow : Window
+#pragma warning restore CA1001 // Types that own disposable fields should be disposable
 {
     private readonly AppWindow _appWindow;
 
@@ -73,7 +79,9 @@ public sealed partial class MainWindow : Window
         MainPage.ViewModel.Summon();
     }
 
+#pragma warning disable CS8618 // Non-nullable field must contain a non-null value when exiting constructor. Consider adding the 'required' modifier or declaring as nullable.
     public MainWindow()
+#pragma warning restore CS8618 // Non-nullable field must contain a non-null value when exiting constructor. Consider adding the 'required' modifier or declaring as nullable.
     {
         InitializeComponent();
         _mainViewModel = MainPage.ViewModel;
@@ -88,7 +96,7 @@ public sealed partial class MainWindow : Window
 
         Activated += MainWindow_Activated;
         AppTitleBar.SizeChanged += AppTitleBar_SizeChanged;
-
+        SetAcrylic();
         ExtendsContentIntoTitleBar = true;
 
         // Hide our titlebar. We'll make the sides draggable later
@@ -124,7 +132,7 @@ public sealed partial class MainWindow : Window
 
     private void PositionCentered()
     {
-        _appWindow.Resize(new SizeInt32 { Width = 860, Height = 512 });
+        _appWindow.Resize(new SizeInt32 { Width = 860, Height = 560 });
         DisplayArea displayArea = DisplayArea.GetFromWindowId(_appWindow.Id, DisplayAreaFallback.Nearest);
         if (displayArea is not null)
         {
@@ -264,8 +272,9 @@ public sealed partial class MainWindow : Window
     {
         if (args.WindowActivationState == WindowActivationState.Deactivated)
         {
-            AppTitleTextBlock.Foreground =
-                (SolidColorBrush)App.Current.Resources["WindowCaptionForegroundDisabled"];
+            AppTitleTextBlock.Foreground = (SolidColorBrush)App.Current.Resources["WindowCaptionForegroundDisabled"];
+
+            _configurationSource.IsInputActive = false;
 
             // If there's a debugger attached...
             if (System.Diagnostics.Debugger.IsAttached)
@@ -280,8 +289,8 @@ public sealed partial class MainWindow : Window
         }
         else
         {
-            AppTitleTextBlock.Foreground =
-                (SolidColorBrush)App.Current.Resources["WindowCaptionForeground"];
+            AppTitleTextBlock.Foreground = (SolidColorBrush)App.Current.Resources["WindowCaptionForeground"];
+            _configurationSource.IsInputActive = true;
         }
     }
 
@@ -391,5 +400,87 @@ public sealed partial class MainWindow : Window
         // WinUI bug is causing a crash on shutdown when FailFastOnErrors is set to true (#51773592).
         // Workaround by turning it off before shutdown.
         App.Current.DebugSettings.FailFastOnErrors = false;
+        DisposeAcrylic();
+    }
+
+    private DesktopAcrylicController _acrylicController;
+    private SystemBackdropConfiguration _configurationSource;
+
+    // We want to use DesktopAcrylicKind.Thin and custom colors as this is the default material other Shell surfaces are using, this cannot be set in XAML however.
+    private void SetAcrylic()
+    {
+        if (DesktopAcrylicController.IsSupported())
+        {
+            // Hooking up the policy object.
+            _configurationSource = new SystemBackdropConfiguration();
+
+            ((FrameworkElement)this.Content).ActualThemeChanged += MainWindow_ActualThemeChanged;
+
+            // Initial configuration state.
+            _configurationSource.IsInputActive = true;
+            UpdateAcrylic();
+        }
+    }
+
+    private void UpdateAcrylic()
+    {
+        _acrylicController = GetAcrylicConfig();
+
+        // Enable the system backdrop.
+        // Note: Be sure to have "using WinRT;" to support the Window.As<...>() call.
+        _acrylicController.AddSystemBackdropTarget(this.As<ICompositionSupportsSystemBackdrop>());
+        _acrylicController.SetSystemBackdropConfiguration(_configurationSource);
+    }
+
+    private DesktopAcrylicController GetAcrylicConfig()
+    {
+        if (((FrameworkElement)this.Content).ActualTheme == ElementTheme.Light)
+        {
+            return new DesktopAcrylicController()
+            {
+                Kind = DesktopAcrylicKind.Thin,
+                TintColor = Windows.UI.Color.FromArgb(255, 243, 243, 243),
+                LuminosityOpacity = 0.90f,
+                TintOpacity = 0.0f,
+                FallbackColor = Windows.UI.Color.FromArgb(255, 238, 238, 238),
+            };
+        }
+        else
+        {
+            return new DesktopAcrylicController()
+            {
+                Kind = DesktopAcrylicKind.Thin,
+                TintColor = Windows.UI.Color.FromArgb(255, 32, 32, 32),
+                LuminosityOpacity = 0.96f,
+                TintOpacity = 0.5f,
+                FallbackColor = Windows.UI.Color.FromArgb(255, 28, 28, 28),
+            };
+        }
+    }
+
+    private void MainWindow_ActualThemeChanged(FrameworkElement sender, object args)
+    {
+        SetConfigurationSourceTheme(sender.ActualTheme);
+        UpdateAcrylic();
+    }
+
+    private void SetConfigurationSourceTheme(ElementTheme theme)
+    {
+        switch (theme)
+        {
+            case ElementTheme.Dark: _configurationSource.Theme = SystemBackdropTheme.Dark; break;
+            case ElementTheme.Light: _configurationSource.Theme = SystemBackdropTheme.Light; break;
+            case ElementTheme.Default: _configurationSource.Theme = SystemBackdropTheme.Default; break;
+        }
+    }
+
+    private void DisposeAcrylic()
+    {
+        if (_acrylicController != null)
+        {
+            _acrylicController.Dispose();
+            _acrylicController = null!;
+            _configurationSource = null!;
+        }
     }
 }

src/modules/cmdpal/WindowsCommandPalette/Microsoft.CmdPal.UI.Poc.csproj

@@ -95,11 +95,21 @@
      <Content Include="$(TargetDir)\AdaptiveCards.ObjectModel.WinUI3.dll" Link="AdaptiveCards.ObjectModel.WinUI3.dll" CopyToOutputDirectory="PreserveNewest" />
      <Content Include="$(TargetDir)\AdaptiveCards.Rendering.WinUI3.dll" Link="AdaptiveCards.Rendering.WinUI3.dll" CopyToOutputDirectory="PreserveNewest" />
    </ItemGroup>
+   <ItemGroup>
+     <Page Update="Styles\TextBox.xaml">
+       <Generator>MSBuild:Compile</Generator>
+     </Page>
+   </ItemGroup>
    <ItemGroup>
      <Page Update="DetailsControl.xaml">
        <Generator>MSBuild:Compile</Generator>
      </Page>
    </ItemGroup>
+   <ItemGroup>
+     <Page Update="Styles\Button.xaml">
+       <Generator>MSBuild:Compile</Generator>
+     </Page>
+   </ItemGroup>
    <Target Name="CopyAdaptiveCardsToTargetDir" BeforeTargets="BeforeBuild">
      <Message text="PkgAdaptiveCards_ObjectModel_WinUI3 = '$(PkgAdaptiveCards_ObjectModel_WinUI3)'" Importance="high" />
      <Message text="PkgAdaptiveCards_Rendering_WinUI3 = '$(PkgAdaptiveCards_Rendering_WinUI3)'" Importance="high" />

src/modules/cmdpal/WindowsCommandPalette/Styles/Button.xaml

@@ -0,0 +1,161 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:WindowsCommandPalette">
+
+    <ResourceDictionary.MergedDictionaries>
+        <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
+        <!--  Other merged dictionaries here  -->
+    </ResourceDictionary.MergedDictionaries>
+
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Default">
+            <StaticResource x:Key="SubtleButtonBackground" ResourceKey="SubtleFillColorTransparent" />
+            <StaticResource x:Key="SubtleButtonBackgroundPointerOver" ResourceKey="SubtleFillColorSecondary" />
+            <StaticResource x:Key="SubtleButtonBackgroundPressed" ResourceKey="SubtleFillColorTertiary" />
+            <StaticResource x:Key="SubtleButtonBackgroundDisabled" ResourceKey="SubtleFillColorTransparent" />
+
+            <StaticResource x:Key="SubtleButtonBorderBrush" ResourceKey="SubtleFillColorTransparent" />
+            <StaticResource x:Key="SubtleButtonBorderBrushPointerOver" ResourceKey="SubtleFillColorSecondary" />
+            <StaticResource x:Key="SubtleButtonBorderBrushPressed" ResourceKey="SubtleFillColorTertiary" />
+            <StaticResource x:Key="SubtleButtonBorderBrushDisabled" ResourceKey="SubtleFillColorTransparent" />
+
+            <StaticResource x:Key="SubtleButtonForeground" ResourceKey="TextFillColorPrimary" />
+            <StaticResource x:Key="SubtleButtonForegroundPointerOver" ResourceKey="TextFillColorPrimary" />
+            <StaticResource x:Key="SubtleButtonForegroundPressed" ResourceKey="TextFillColorSecondary" />
+            <StaticResource x:Key="SubtleButtonForegroundDisabled" ResourceKey="TextFillColorDisabled" />
+        </ResourceDictionary>
+
+        <ResourceDictionary x:Key="Light">
+            <StaticResource x:Key="SubtleButtonBackground" ResourceKey="SubtleFillColorTransparent" />
+            <StaticResource x:Key="SubtleButtonBackgroundPointerOver" ResourceKey="SubtleFillColorSecondary" />
+            <StaticResource x:Key="SubtleButtonBackgroundPressed" ResourceKey="SubtleFillColorTertiary" />
+            <StaticResource x:Key="SubtleButtonBackgroundDisabled" ResourceKey="SubtleFillColorTransparent" />
+
+            <StaticResource x:Key="SubtleButtonBorderBrush" ResourceKey="SubtleFillColorTransparent" />
+            <StaticResource x:Key="SubtleButtonBorderBrushPointerOver" ResourceKey="SubtleFillColorSecondary" />
+            <StaticResource x:Key="SubtleButtonBorderBrushPressed" ResourceKey="SubtleFillColorTertiary" />
+            <StaticResource x:Key="SubtleButtonBorderBrushDisabled" ResourceKey="SubtleFillColorTransparent" />
+
+            <StaticResource x:Key="SubtleButtonForeground" ResourceKey="TextFillColorPrimary" />
+            <StaticResource x:Key="SubtleButtonForegroundPointerOver" ResourceKey="TextFillColorPrimary" />
+            <StaticResource x:Key="SubtleButtonForegroundPressed" ResourceKey="TextFillColorSecondary" />
+            <StaticResource x:Key="SubtleButtonForegroundDisabled" ResourceKey="TextFillColorDisabled" />
+        </ResourceDictionary>
+
+        <ResourceDictionary x:Key="HighContrast">
+            <StaticResource x:Key="SubtleButtonBackground" ResourceKey="SystemColorWindowColorBrush" />
+            <StaticResource x:Key="SubtleButtonBackgroundPointerOver" ResourceKey="SystemColorHighlightTextColorBrush" />
+            <StaticResource x:Key="SubtleButtonBackgroundPressed" ResourceKey="SystemColorWindowColorBrush" />
+            <StaticResource x:Key="SubtleButtonBackgroundDisabled" ResourceKey="SystemControlBackgroundBaseLowBrush" />
+
+            <StaticResource x:Key="SubtleButtonBorderBrush" ResourceKey="SystemColorWindowColorBrush" />
+            <StaticResource x:Key="SubtleButtonBorderBrushPointerOver" ResourceKey="SystemColorHighlightColorBrush" />
+            <StaticResource x:Key="SubtleButtonBorderBrushPressed" ResourceKey="SystemColorHighlightColorBrush" />
+            <StaticResource x:Key="SubtleButtonBorderBrushDisabled" ResourceKey="SystemColorGrayTextColor" />
+
+            <StaticResource x:Key="SubtleButtonForeground" ResourceKey="SystemColorButtonTextColorBrush" />
+            <StaticResource x:Key="SubtleButtonForegroundPointerOver" ResourceKey="SystemControlHighlightBaseHighBrush" />
+            <StaticResource x:Key="SubtleButtonForegroundPressed" ResourceKey="SystemControlHighlightBaseHighBrush" />
+            <StaticResource x:Key="SubtleButtonForegroundDisabled" ResourceKey="SystemControlDisabledBaseMediumLowBrush" />
+        </ResourceDictionary>
+
+    </ResourceDictionary.ThemeDictionaries>
+    <Style x:Key="SubtleButtonStyle" TargetType="Button">
+        <Setter Property="Background" Value="{ThemeResource SubtleButtonBackground}" />
+        <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
+        <Setter Property="Foreground" Value="{ThemeResource SubtleButtonForeground}" />
+        <Setter Property="BorderBrush" Value="{ThemeResource SubtleButtonBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
+        <Setter Property="Padding" Value="{StaticResource ButtonPadding}" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
+        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
+        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
+        <Setter Property="FocusVisualMargin" Value="-3" />
+        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <ContentPresenter
+                        x:Name="ContentPresenter"
+                        Padding="{TemplateBinding Padding}"
+                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                        AnimatedIcon.State="Normal"
+                        AutomationProperties.AccessibilityView="Raw"
+                        Background="{TemplateBinding Background}"
+                        BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        ContentTransitions="{TemplateBinding ContentTransitions}"
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        Foreground="{TemplateBinding Foreground}">
+                        <ContentPresenter.BackgroundTransition>
+                            <BrushTransition Duration="0:0:0.083" />
+                        </ContentPresenter.BackgroundTransition>
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal" />
+                                <VisualState x:Name="PointerOver">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleButtonBackgroundPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleButtonBorderBrushPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleButtonForegroundPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                    <VisualState.Setters>
+                                        <Setter Target="ContentPresenter.(AnimatedIcon.State)" Value="PointerOver" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Pressed">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleButtonBackgroundPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleButtonBorderBrushPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleButtonForegroundPressed}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                    <VisualState.Setters>
+                                        <Setter Target="ContentPresenter.(AnimatedIcon.State)" Value="Pressed" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Disabled">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleButtonBackgroundDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleButtonBorderBrushDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleButtonForegroundDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                    <VisualState.Setters>
+                                        <!--  DisabledVisual Should be handled by the control, not the animated icon.  -->
+                                        <Setter Target="ContentPresenter.(AnimatedIcon.State)" Value="Normal" />
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </ContentPresenter>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>

src/modules/cmdpal/WindowsCommandPalette/Styles/TextBox.xaml

@@ -0,0 +1,275 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:WindowsCommandPalette">
+
+    <ResourceDictionary.MergedDictionaries>
+        <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
+        <!--  Other merged dictionaries here  -->
+    </ResourceDictionary.MergedDictionaries>
+
+    <Style x:Key="SearchTextBoxStyle" TargetType="TextBox">
+        <Setter Property="Foreground" Value="{ThemeResource TextControlForeground}" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderBrush" Value="Transparent" />
+        <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextControlSelectionHighlightColor}" />
+        <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" />
+        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
+        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
+        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
+        <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
+        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
+        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
+        <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
+        <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
+        <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
+        <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}" />
+        <Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}" />
+        <Setter Property="ContextFlyout" Value="{StaticResource TextControlCommandBarContextFlyout}" />
+        <Setter Property="SelectionFlyout" Value="{StaticResource TextControlCommandBarSelectionFlyout}" />
+        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}" />
+        <Setter Property="BackgroundSizing" Value="InnerBorderEdge" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="TextBox">
+                    <Grid>
+                        <Grid.Resources>
+                            <Style x:Name="DeleteButtonStyle" TargetType="Button">
+                                <Setter Property="Template">
+                                    <Setter.Value>
+                                        <ControlTemplate TargetType="Button">
+                                            <Grid
+                                                x:Name="ButtonLayoutGrid"
+                                                Margin="{ThemeResource TextBoxInnerButtonMargin}"
+                                                Background="Transparent"
+                                                BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                                                BorderBrush="{ThemeResource TextControlButtonBorderBrush}"
+                                                BorderThickness="{TemplateBinding BorderThickness}"
+                                                CornerRadius="{TemplateBinding CornerRadius}">
+                                                <TextBlock
+                                                    x:Name="GlyphElement"
+                                                    HorizontalAlignment="Center"
+                                                    VerticalAlignment="Center"
+                                                    AutomationProperties.AccessibilityView="Raw"
+                                                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                                                    FontSize="{ThemeResource TextBoxIconFontSize}"
+                                                    FontStyle="Normal"
+                                                    Foreground="{ThemeResource TextControlButtonForeground}"
+                                                    Text="&#xE894;" />
+                                                <VisualStateManager.VisualStateGroups>
+                                                    <VisualStateGroup x:Name="CommonStates">
+                                                        <VisualState x:Name="Normal" />
+                                                        <VisualState x:Name="PointerOver">
+                                                            <Storyboard>
+                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
+                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPointerOver}" />
+                                                                </ObjectAnimationUsingKeyFrames>
+                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
+                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPointerOver}" />
+                                                                </ObjectAnimationUsingKeyFrames>
+                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
+                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPointerOver}" />
+                                                                </ObjectAnimationUsingKeyFrames>
+                                                            </Storyboard>
+                                                        </VisualState>
+                                                        <VisualState x:Name="Pressed">
+                                                            <Storyboard>
+                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
+                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPressed}" />
+                                                                </ObjectAnimationUsingKeyFrames>
+                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
+                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPressed}" />
+                                                                </ObjectAnimationUsingKeyFrames>
+                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
+                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPressed}" />
+                                                                </ObjectAnimationUsingKeyFrames>
+                                                            </Storyboard>
+                                                        </VisualState>
+                                                        <VisualState x:Name="Disabled">
+                                                            <Storyboard>
+                                                                <DoubleAnimation
+                                                                    Storyboard.TargetName="ButtonLayoutGrid"
+                                                                    Storyboard.TargetProperty="Opacity"
+                                                                    To="0"
+                                                                    Duration="0" />
+                                                            </Storyboard>
+                                                        </VisualState>
+                                                    </VisualStateGroup>
+                                                </VisualStateManager.VisualStateGroups>
+                                            </Grid>
+                                        </ControlTemplate>
+                                    </Setter.Value>
+                                </Setter>
+                            </Style>
+                        </Grid.Resources>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="*" />
+                            <RowDefinition Height="Auto" />
+                        </Grid.RowDefinitions>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
+                        <ContentPresenter
+                            x:Name="HeaderContentPresenter"
+                            Grid.Row="0"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
+                            Margin="{ThemeResource TextBoxTopHeaderMargin}"
+                            VerticalAlignment="Top"
+                            x:DeferLoadStrategy="Lazy"
+                            Content="{TemplateBinding Header}"
+                            ContentTemplate="{TemplateBinding HeaderTemplate}"
+                            FontWeight="Normal"
+                            Foreground="{ThemeResource TextControlHeaderForeground}"
+                            TextWrapping="Wrap"
+                            Visibility="Collapsed" />
+                        <Border
+                            x:Name="BorderElement"
+                            Grid.Row="1"
+                            Grid.RowSpan="1"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
+                            MinWidth="{TemplateBinding MinWidth}"
+                            MinHeight="{TemplateBinding MinHeight}"
+                            VerticalAlignment="Stretch"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            Control.IsTemplateFocusTarget="True"
+                            CornerRadius="{TemplateBinding CornerRadius}" />
+                        <ScrollViewer
+                            x:Name="ContentElement"
+                            Grid.Row="1"
+                            Grid.Column="0"
+                            Margin="{TemplateBinding BorderThickness}"
+                            Padding="{TemplateBinding Padding}"
+                            VerticalAlignment="Center"
+                            AutomationProperties.AccessibilityView="Raw"
+                            Foreground="{TemplateBinding Foreground}"
+                            HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                            HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
+                            IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
+                            IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
+                            IsTabStop="False"
+                            IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
+                            VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
+                            VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
+                            ZoomMode="Disabled" />
+                        <TextBlock
+                            x:Name="PlaceholderTextContentPresenter"
+                            Grid.Row="1"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
+                            Margin="{TemplateBinding BorderThickness}"
+                            Padding="{TemplateBinding Padding}"
+                            VerticalAlignment="Center"
+                            Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForeground}}"
+                            IsHitTestVisible="False"
+                            Text="{TemplateBinding PlaceholderText}"
+                            TextAlignment="{TemplateBinding TextAlignment}"
+                            TextWrapping="{TemplateBinding TextWrapping}" />
+                        <Button
+                            x:Name="DeleteButton"
+                            Grid.Row="1"
+                            Grid.Column="1"
+                            Width="30"
+                            Padding="{ThemeResource HelperButtonThemePadding}"
+                            VerticalAlignment="Stretch"
+                            AutomationProperties.AccessibilityView="Raw"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            FontSize="{TemplateBinding FontSize}"
+                            IsTabStop="False"
+                            Style="{StaticResource DeleteButtonStyle}"
+                            Visibility="Collapsed" />
+                        <ContentPresenter
+                            x:Name="DescriptionPresenter"
+                            Grid.Row="2"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
+                            x:Load="False"
+                            AutomationProperties.AccessibilityView="Raw"
+                            Content="{TemplateBinding Description}"
+                            Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}" />
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal" />
+                                <VisualState x:Name="Disabled">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlHeaderForegroundDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundDisabled}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForegroundDisabled}}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="PointerOver">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForegroundPointerOver}}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="Focused">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForegroundFocused}}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderThickness">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderThemeThicknessFocused}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundFocused}" />
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                            </VisualStateGroup>
+                            <VisualStateGroup x:Name="ButtonStates">
+                                <VisualState x:Name="ButtonVisible">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DeleteButton" Storyboard.TargetProperty="Visibility">
+                                            <DiscreteObjectKeyFrame KeyTime="0">
+                                                <DiscreteObjectKeyFrame.Value>
+                                                    <Visibility>Visible</Visibility>
+                                                </DiscreteObjectKeyFrame.Value>
+                                            </DiscreteObjectKeyFrame>
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="ButtonCollapsed" />
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>

src/modules/cmdpal/WindowsCommandPalette/Views/DetailsControl.xaml

@@ -1,47 +1,55 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8" ?>
 <UserControl
     x:Class="WindowsCommandPalette.Views.DetailsControl"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:WindowsCommandPalette.Views"
+    xmlns:converters="using:WindowsCommandPalette.Converters"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:WindowsCommandPalette.Views"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:toolkit="using:CommunityToolkit.WinUI.UI.Controls"
     mc:Ignorable="d">
 
     <UserControl.Resources>
         <ResourceDictionary>
-            <local:StringNotEmptyToVisibilityConverter x:Key="StringNotEmptyToVisibilityConverter" />
+            <converters:StringNotEmptyToVisibilityConverter x:Key="StringNotEmptyToVisibilityConverter" />
         </ResourceDictionary>
     </UserControl.Resources>
-    
-    <Grid HorizontalAlignment="Center">
+
+    <Grid>
         <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="*"/>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
         </Grid.RowDefinitions>
-        <TextBlock 
-            Grid.Row="0"
+        <Viewbox
+            Width="64"
+            Height="64"
+            HorizontalAlignment="Center">
+            <ContentControl
+                Margin="4,0,8,0"
+                Content="{x:Bind ViewModel.IcoElement}"
+                Visibility="{x:Bind ViewModel.HeroImage.Icon, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}" />
+        </Viewbox>
+        <TextBlock
+            Grid.Row="1"
+            HorizontalAlignment="Center"
             FontSize="20"
-            Visibility="{x:Bind ViewModel.Title, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}"
+            Style="{StaticResource SubtitleTextBlockStyle}"
+            Text="{x:Bind ViewModel.Title, Mode=OneWay}"
             TextWrapping="WrapWholeWords"
-            Text="{x:Bind ViewModel.Title, Mode=OneWay}" />
-
-        <ContentControl Margin="4, 0, 8, 0" 
-                        Grid.Row="1"
-                        Visibility="{x:Bind ViewModel.HeroImage.Icon, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}"
-                        Width="64"
-                        Height="64" Content="{x:Bind ViewModel.IcoElement}" />
-        <ScrollViewer 
-            Grid.Row="2">
-            <toolkit:MarkdownTextBlock x:Name="mdTextBox"
-                                       Background="Transparent"
-                                       IsTextSelectionEnabled="True"
-                                       Text="{x:Bind ViewModel.Body, Mode=OneWay}" />
+            Visibility="{x:Bind ViewModel.Title, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}" />
 
+        <ScrollViewer Grid.Row="2" HorizontalAlignment="Stretch">
+            <toolkit:MarkdownTextBlock
+                x:Name="mdTextBox"
+                HorizontalAlignment="Center"
+                Background="Transparent"
+                Header3FontSize="12"
+                Header3FontWeight="Normal"
+                Header3Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                IsTextSelectionEnabled="True"
+                Text="{x:Bind ViewModel.Body, Mode=OneWay}" />
         </ScrollViewer>
-
-
     </Grid>
-</UserControl>
+</UserControl>

src/modules/cmdpal/WindowsCommandPalette/Views/FormPage.xaml

@@ -3,59 +3,65 @@
     x:Class="WindowsCommandPalette.Views.FormPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:WindowsCommandPalette.Views"
     xmlns:ac="using:AdaptiveCards.Rendering.WinUI3"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:WindowsCommandPalette.Views"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    mc:Ignorable="d"
     Background="Transparent"
-    Loaded="Page_Loaded">
+    Loaded="Page_Loaded"
+    mc:Ignorable="d">
 
     <Page.Resources>
         <ResourceDictionary>
-            <StackLayout x:Name="VerticalStackLayout" Orientation="Vertical" Spacing="8"/>
+            <StackLayout
+                x:Name="VerticalStackLayout"
+                Orientation="Vertical"
+                Spacing="8" />
 
             <DataTemplate x:Key="CardTemplate" x:DataType="local:FormViewModel">
-                <Border x:Name="DetailsContent"
-                        Visibility="{x:Bind ShouldDisplay, Mode=OneWay}"
-                        Margin="0,0,0,0"
-                        Padding="8"
-                        Translation="0,0,16"
-                        Shadow="{StaticResource SharedShadow}"
-                        BorderBrush="{ThemeResource AccentControlElevationBorderBrush}"
-                        Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
-                        CornerRadius="4"
-                        TabFocusNavigation="Cycle"
-                        Child="{x:Bind RenderedChildElement, Mode=OneWay}"
-                    />
-
+                <Border
+                    x:Name="DetailsContent"
+                    Margin="0,0,0,0"
+                    Padding="8"
+                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
+                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+                    Child="{x:Bind RenderedChildElement, Mode=OneWay}"
+                    CornerRadius="{StaticResource OverlayCornerRadius}"
+                    TabFocusNavigation="Cycle"
+                    Visibility="{x:Bind ShouldDisplay, Mode=OneWay}" />
             </DataTemplate>
-
         </ResourceDictionary>
     </Page.Resources>
-    
-    <Grid Padding="24">
-        <StackPanel>
-            <StackPanel Orientation="Horizontal" Margin="8,0,0,8" Padding="-24,-32,0,0">
-                <Button x:Name="BackButton"
-                        Grid.Row="0"
-                        Margin="-8,0,8,0"
-                        Width="16" Height="16"
-                        Style="{StaticResource NavigationBackButtonNormalStyle}"
-                        Visibility="{x:Bind ViewModel.Nested}"
-                        IsEnabled="{x:Bind ViewModel.Nested}"
-                        Tapped="BackButton_Tapped"
-                        ToolTipService.ToolTip="Back"/>
-                <TextBlock Text="{x:Bind ViewModel.Page.Name}" FontSize="24" />
-            </StackPanel>
-            
-            <Grid x:Name="FormContent" Margin="-24,0,-24,0">
-                <ItemsRepeater ItemsSource="{x:Bind ViewModel.Forms, Mode=OneWay}" 
-                               ItemTemplate="{StaticResource CardTemplate}"
-                               Layout="{StaticResource VerticalStackLayout}"/>
-            </Grid>
-
 
+    <Grid Padding="12" RowSpacing="16">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+        <StackPanel Orientation="Horizontal" Spacing="12">
+            <Button
+                x:Name="BackButton"
+                Grid.Row="0"
+                Padding="6"
+                IsEnabled="{x:Bind ViewModel.Nested}"
+                Style="{StaticResource SubtleButtonStyle}"
+                Tapped="BackButton_Tapped"
+                ToolTipService.ToolTip="Back"
+                Visibility="{x:Bind ViewModel.Nested}">
+                <FontIcon FontSize="16" Glyph="&#xE72B;" />
+            </Button>
+            <TextBlock
+                Margin="0,-2,0,0"
+                VerticalAlignment="Center"
+                Style="{StaticResource BodyStrongTextBlockStyle}"
+                Text="{x:Bind ViewModel.Page.Name}" />
         </StackPanel>
+
+        <Grid x:Name="FormContent" Grid.Row="1">
+            <ItemsRepeater
+                ItemTemplate="{StaticResource CardTemplate}"
+                ItemsSource="{x:Bind ViewModel.Forms, Mode=OneWay}"
+                Layout="{StaticResource VerticalStackLayout}" />
+        </Grid>
     </Grid>
 </Page>

src/modules/cmdpal/WindowsCommandPalette/Views/ListPage.xaml

@@ -1,96 +1,128 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8" ?>
 <Page
     x:Class="WindowsCommandPalette.Views.ListPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="using:WindowsCommandPalette.Converters"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:devpal="using:WindowsCommandPalette"
     xmlns:local="using:WindowsCommandPalette.Views"
-    xmlns:rsdk="using:Microsoft.CmdPal.Extensions"
-    xmlns:mtu="using:Microsoft.Terminal.UI"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    mc:Ignorable="d"
+    xmlns:mtu="using:Microsoft.Terminal.UI"
+    xmlns:rsdk="using:Microsoft.CmdPal.Extensions"
     Background="Transparent"
-    Loaded="Page_Loaded">
+    Loaded="Page_Loaded"
+    mc:Ignorable="d">
+
 
     <Page.Resources>
         <ResourceDictionary>
-            <local:StringNotEmptyToVisibilityConverter x:Key="StringNotEmptyToVisibilityConverter" />
-
+            <converters:StringNotEmptyToVisibilityConverter x:Key="StringNotEmptyToVisibilityConverter" />
+            <converters:ReverseBoolToVisibilityConverter x:Key="ReverseBoolToVisibilityConverter" />
             <CollectionViewSource x:Name="ItemsCVS" IsSourceGrouped="True" />
-            <StackLayout x:Name="HorizontalStackLayout" Orientation="Horizontal" Spacing="8"/>
-
+            <StackLayout
+                x:Name="HorizontalStackLayout"
+                Orientation="Horizontal"
+                Spacing="8" />
 
             <DataTemplate x:Key="TagTemplate" x:DataType="devpal:TagViewModel">
-                <Border BorderBrush="{x:Bind BorderBrush, Mode=OneWay}"
-                        BorderThickness="1"
-                        CornerRadius="4"
-                        Background="{x:Bind BackgroundBrush, Mode=OneWay}"
-                        Padding="4, 2, 4, 2"
-                        VerticalAlignment="Center">
+                <Border
+                    Padding="4,2,4,2"
+                    VerticalAlignment="Center"
+                    Background="{x:Bind BackgroundBrush, Mode=OneWay}"
+                    BorderBrush="{x:Bind BorderBrush, Mode=OneWay}"
+                    BorderThickness="1"
+                    CornerRadius="4">
                     <StackPanel Orientation="Horizontal">
-                        <ContentControl Width="12"
-                                        Height="12"
-                                        Margin="0, 0, 4, 0"
-                                        Visibility="{x:Bind HasIcon, Mode=OneWay}"
-                                        Content="{x:Bind IcoElement, Mode=OneWay}" />
-                        <TextBlock VerticalAlignment="Center" Foreground="{x:Bind TextBrush, Mode=OneWay}" FontSize="10" Text="{x:Bind Text, Mode=OneWay}"/>
+                        <ContentControl
+                            Width="12"
+                            Height="12"
+                            Margin="0,0,4,0"
+                            Content="{x:Bind IcoElement, Mode=OneWay}"
+                            Visibility="{x:Bind HasIcon, Mode=OneWay}" />
+                        <TextBlock
+                            VerticalAlignment="Center"
+                            FontSize="10"
+                            Foreground="{x:Bind TextBrush, Mode=OneWay}"
+                            Text="{x:Bind Text, Mode=OneWay}" />
                     </StackPanel>
                 </Border>
             </DataTemplate>
 
-            <!--Template for items in the main list view -->
+            <!--  Template for items in the main list view  -->
             <DataTemplate x:Key="ListItemTemplate" x:DataType="devpal:ListItemViewModel">
-                <ListViewItem KeyDown="ListItem_KeyDown"
-                              Tapped="ListItem_Tapped"
-                              MinHeight="32"
-                              Height="24"
-                              Visibility="{x:Bind Title, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}">
-                    <Grid>
+                <ListViewItem
+                    MinHeight="40"
+                    KeyDown="ListItem_KeyDown"
+                    Tapped="ListItem_Tapped"
+                    Visibility="{x:Bind Title, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}">
+                    <Grid ColumnSpacing="12">
                         <Grid.ColumnDefinitions>
-                            <ColumnDefinition Width="24"/>
-                            <ColumnDefinition Width="*"/>
-                            <ColumnDefinition Width="Auto"/>
+                            <ColumnDefinition Width="24" />
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="Auto" />
                         </Grid.ColumnDefinitions>
-                        <ContentControl Grid.Column="0"
-                                        Width="24"
-                                        Height="24"
-                                        Content="{x:Bind IcoElement, Mode=OneWay}" />
-                        <StackPanel Grid.Column="1"
-                                    Orientation="Horizontal"
-                                    Padding="8,4,4,4">
-                            <TextBlock VerticalAlignment="Center"
-                                       FontSize="16"
-                                       Text="{x:Bind Title, Mode=OneWay}"/>
-                            <TextBlock Margin="8,0,0,0"
-                                       VerticalAlignment="Center"
-                                       Foreground="{ThemeResource TextFillColorTertiaryBrush}"
-                                       FontSize="12"
-                                       Text="{x:Bind Subtitle, Mode=OneWay}"
-                                       Visibility="{x:Bind Subtitle, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}"/>
+
+                        <Viewbox
+                            Width="20"
+                            Height="20"
+                            VerticalAlignment="Center">
+                            <ContentControl
+                                Width="24"
+                                Height="24"
+                                Content="{x:Bind IcoElement, Mode=OneWay}" />
+                        </Viewbox>
+
+                        <StackPanel
+                            Grid.Column="1"
+                            VerticalAlignment="Center"
+                            Orientation="Horizontal">
+                            <TextBlock
+                                VerticalAlignment="Center"
+                                Text="{x:Bind Title, Mode=OneWay}"
+                                TextTrimming="CharacterEllipsis" />
+                            <TextBlock
+                                Margin="4,0,0,0"
+                                VerticalAlignment="Center"
+                                Foreground="{ThemeResource TextFillColorTertiaryBrush}"
+                                Style="{StaticResource CaptionTextBlockStyle}"
+                                TextTrimming="CharacterEllipsis"
+                                Visibility="{x:Bind Subtitle, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}">
+                                <Run Text=" - " />
+                                <Run Text="{x:Bind Subtitle, Mode=OneWay}" />
+                            </TextBlock>
                         </StackPanel>
-                        <StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Right" Visibility="{x:Bind HasTags}">
-                            <ItemsRepeater ItemsSource="{x:Bind Tags}"
-                                           ItemTemplate="{StaticResource TagTemplate}"
-                                           Layout="{StaticResource HorizontalStackLayout}"/>
+                        <StackPanel
+                            Grid.Column="2"
+                            HorizontalAlignment="Right"
+                            Orientation="Horizontal"
+                            Visibility="{x:Bind HasTags}">
+                            <ItemsRepeater
+                                ItemTemplate="{StaticResource TagTemplate}"
+                                ItemsSource="{x:Bind Tags}"
+                                Layout="{StaticResource HorizontalStackLayout}" />
                         </StackPanel>
                     </Grid>
                 </ListViewItem>
             </DataTemplate>
 
-            <!--Template for actions in the mode actions dropdown button -->
+            <!--  Template for actions in the mode actions dropdown button  -->
             <DataTemplate x:Key="ContextMenuViewModelTemplate" x:DataType="devpal:ContextItemViewModel">
                 <ListViewItem KeyDown="ActionListViewItem_KeyDown" Tapped="ActionListViewItem_Tapped">
-                    <Grid>
+                    <Grid ColumnSpacing="8">
                         <Grid.ColumnDefinitions>
-                            <ColumnDefinition Width="24"/>
-                            <ColumnDefinition Width="Auto"/>
+                            <ColumnDefinition Width="24" />
+                            <ColumnDefinition Width="Auto" />
                         </Grid.ColumnDefinitions>
 
-                        <ContentControl Grid.Column="0" Width="24" Height="24" Content="{x:Bind IcoElement, Mode=OneWay}" />
-                        <StackPanel Grid.Column="1">
-                            <TextBlock Text="{x:Bind Name}"/>
-                        </StackPanel>
+                        <Viewbox Width="16" Height="16">
+                            <ContentControl
+                                Grid.Column="0"
+                                Width="24"
+                                Height="24"
+                                Content="{x:Bind IcoElement, Mode=OneWay}" />
+                        </Viewbox>
+                        <TextBlock Grid.Column="1" Text="{x:Bind Name}" />
                     </Grid>
                 </ListViewItem>
             </DataTemplate>
@@ -98,8 +130,7 @@
             <!--
                 Remove all item animations from lists. They're entirely too slow to let that UI be usable.
             -->
-            <Style x:Key="NoAnimationsPlease"
-                   TargetType="ListView">
+            <Style x:Key="NoAnimationsPlease" TargetType="ListView">
                 <Setter Property="ItemContainerTransitions">
                     <Setter.Value>
                         <TransitionCollection>
@@ -117,86 +148,119 @@
     </Page.Resources>
 
     <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="Auto"/>
-            <ColumnDefinition Width="Auto"/>
-        </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="*"/>
-            <RowDefinition Height="Auto"/>
+            <RowDefinition Height="56" />
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+            <RowDefinition Height="Auto" MinHeight="36" />
         </Grid.RowDefinitions>
 
-         <!--Row 0: Back button and search box-->
-        <Grid Grid.Row="0">
+        <!--  Row 0: Back button and search box  -->
+        <Grid Grid.Row="0" Margin="-2,0,0,0">
             <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="Auto"/>
-                <ColumnDefinition Width="*"/>
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="*" />
             </Grid.ColumnDefinitions>
 
-            <!--Back button-->
-            <Button x:Name="BackButton"
-                    Grid.Column="0"
-                    Width="24" Height="24"
+            <!--  Back button  -->
+            <FontIcon
+                Margin="24,0,2,0"
+                HorizontalAlignment="Right"
+                AutomationProperties.AccessibilityView="Raw"
+                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                Glyph="&#xE721;"
+                Visibility="{x:Bind ViewModel.Nested, Mode=OneWay, Converter={StaticResource ReverseBoolToVisibilityConverter}}" />
+            <Button
+                x:Name="BackButton"
+                Height="32"
+                Margin="16,4,4,4"
+                Padding="12,0,12,0"
+                HorizontalAlignment="Right"
+                VerticalAlignment="Center"
+                Background="{ThemeResource SubtleFillColorSecondaryBrush}"
+                BorderBrush="{ThemeResource ControlStrokeColorDefaultBrush}"
+                CornerRadius="16"
+                FontSize="16"
+                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                IsEnabled="{x:Bind ViewModel.Nested}"
+                Tapped="BackButton_Tapped"
+                ToolTipService.ToolTip="Back"
+                Visibility="{x:Bind ViewModel.Nested}">
+                <StackPanel
+                    Grid.Column="1"
                     HorizontalAlignment="Left"
-                    Margin="0,0,10,0"
-                    Style="{StaticResource NavigationBackButtonNormalStyle}"
-                    Visibility="{x:Bind ViewModel.Nested}"
-                    IsEnabled="{x:Bind ViewModel.Nested}"
-                    Tapped="BackButton_Tapped"
-                    ToolTipService.ToolTip="Back"/>
+                    VerticalAlignment="Center"
+                    Orientation="Horizontal"
+                    Spacing="8"
+                    Visibility="{x:Bind ViewModel.Nested}">
+                    <!--<BitmapIcon Width="20" Margin="4, 0, 8, 0" ShowAsMonochrome="False" UseLayoutRounding="False" UriSource="{x:Bind ViewModel.Command.IconUri}" HorizontalAlignment="Left"/>-->
 
-            <!--Search box-->
-            <TextBox x:Name="FilterBox"
-                     MinHeight="32"
-                     FontSize="24"
-                     Grid.Column="1"
-                     PlaceholderText="Type here to search"
-                     HorizontalAlignment="Stretch" KeyDown="FilterBox_KeyDown" TextChanged="FilterBox_TextChanged"/>
+                    <Viewbox Width="16" Height="16">
+                        <ContentControl VerticalAlignment="Center" Content="{x:Bind ViewModel.Command.IcoElement}" />
+                    </Viewbox>
+
+                    <TextBlock
+                        Margin="0,-2,0,0"
+                        VerticalAlignment="Center"
+                        FontSize="12"
+                        Foreground="{ThemeResource TextFillColorTertiaryBrush}"
+                        Text="{x:Bind ViewModel.Page.Name}" />
+                    <FontIcon
+                        Margin="4,2,0,0"
+                        FontSize="12"
+                        Glyph="&#xE894;" />
+                </StackPanel>
+            </Button>
+
+            <!--  Search box  -->
+            <TextBox
+                x:Name="FilterBox"
+                Grid.Column="2"
+                MinHeight="32"
+                VerticalAlignment="Stretch"
+                VerticalContentAlignment="Stretch"
+                FontSize="18"
+                KeyDown="FilterBox_KeyDown"
+                PlaceholderText="Type here to search..."
+                Style="{StaticResource SearchTextBoxStyle}"
+                TextChanged="FilterBox_TextChanged" />
         </Grid>
-
-        <!--Extension name after clicking on a command-->
-        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Grid.Row="1" Grid.Column="0" Margin="4,4,20,4" Visibility="{x:Bind ViewModel.Nested}">
-            <!--<BitmapIcon Width="20" Margin="4, 0, 8, 0" ShowAsMonochrome="False" UseLayoutRounding="False" UriSource="{x:Bind ViewModel.Command.IconUri}" HorizontalAlignment="Left"/>-->
-
-            <ContentControl Grid.Column="0" Margin="4, 0, 8, 0" Width="20" Height="20" Content="{x:Bind ViewModel.Command.IcoElement}" />
-            <TextBlock Foreground="{ThemeResource TextFillColorTertiaryBrush}" FontSize="14" Text="{x:Bind ViewModel.Page.Name}"></TextBlock>
-        </StackPanel>
-
-        <!--List of commands-->
-        <Grid Grid.Row="2"
-                  Margin="0,8,0,0"
-              Grid.ColumnSpan="3">
-
+        <Grid
+            Grid.Row="2"
+            Background="{ThemeResource LayerOnAcrylicFillColorDefaultBrush}"
+            BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+            BorderThickness="0,1,0,1">
             <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="3*"/>
-                <ColumnDefinition x:Name="DetailsColumn" Width="2*"/>
+                <ColumnDefinition Width="3*" />
+                <ColumnDefinition x:Name="DetailsColumn" Width="2*" />
             </Grid.ColumnDefinitions>
 
-            <ListView ItemsSource="{x:Bind ItemsCVS.View, Mode=OneWay}"
-                  Style="{StaticResource NoAnimationsPlease}"
-                      Grid.Column="0"
-                  x:Name="ItemsList"
-                  SelectionChanged="ItemsList_SelectionChanged"
-                  ItemTemplate="{StaticResource ListItemTemplate}"
-                  IsItemClickEnabled="True">
-
+            <ListView
+                x:Name="ItemsList"
+                Grid.Column="0"
+                Margin="4,0,0,0"
+                IsItemClickEnabled="True"
+                ItemTemplate="{StaticResource ListItemTemplate}"
+                ItemsSource="{x:Bind ItemsCVS.View, Mode=OneWay}"
+                SelectionChanged="ItemsList_SelectionChanged"
+                Style="{StaticResource NoAnimationsPlease}">
                 <ListView.ItemsPanel>
                     <ItemsPanelTemplate>
-                        <ItemsStackPanel AreStickyGroupHeadersEnabled="False"/>
+                        <ItemsStackPanel AreStickyGroupHeadersEnabled="False" />
                     </ItemsPanelTemplate>
                 </ListView.ItemsPanel>
                 <ListView.GroupStyle>
-                    <GroupStyle HidesIfEmpty="True" HeaderContainerStyle="{StaticResource CustomHeaderContainerStyle}">
+                    <GroupStyle HeaderContainerStyle="{StaticResource CustomHeaderContainerStyle}" HidesIfEmpty="True">
                         <GroupStyle.HeaderTemplate>
                             <DataTemplate x:DataType="local:SectionInfoList">
-                                <TextBlock Text="{x:Bind Title}" Padding="8,0,0,0"
-                                           Visibility="{x:Bind Title, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}"
-                                            Style="{StaticResource CaptionTextBlockStyle}"
-                                            Foreground="{ThemeResource TextFillColorSecondary}"
-                                            AutomationProperties.AccessibilityView="Raw"/>
+                                <TextBlock
+                                    Padding="20,12,0,8"
+                                    AutomationProperties.AccessibilityView="Raw"
+                                    FontSize="14"
+                                    FontWeight="SemiBold"
+                                    Text="{x:Bind Title}"
+                                    Visibility="{x:Bind Title, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}" />
                             </DataTemplate>
                         </GroupStyle.HeaderTemplate>
                     </GroupStyle>
@@ -204,39 +268,68 @@
 
             </ListView>
 
-            <Border x:Name="DetailsContent"
-
-                    Visibility="Collapsed"
-                    Margin="8,0,0,0"
-                    Padding="8"
-                    Translation="0,0,32"
-                    Shadow="{StaticResource SharedShadow}"
-                    BorderBrush="{ThemeResource AccentControlElevationBorderBrush}"
-                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
-                    CornerRadius="4"
-                    Grid.Column="1"/>
-
+            <Border
+                x:Name="DetailsContent"
+                Grid.Column="1"
+                Margin="12"
+                Padding="8"
+                Background="{ThemeResource LayerFillColorDefaultBrush}"
+                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+                BorderThickness="1"
+                CornerRadius="{ThemeResource OverlayCornerRadius}"
+                Visibility="Collapsed" />
         </Grid>
 
-        <!--Footer-->
-        <Grid Grid.Row="3" Margin="4" MinHeight="32">
+        <!--  Footer  -->
+        <Grid Grid.Row="3" Padding="8,0,8,0">
             <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="Auto"></ColumnDefinition>
-                <ColumnDefinition Width="*"></ColumnDefinition>
-                <ColumnDefinition Width="Auto"></ColumnDefinition>
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="Auto" />
             </Grid.ColumnDefinitions>
-            <StackPanel HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="0" Orientation="Horizontal" Visibility="{x:Bind SelectedItem.DefaultAction.Name, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}">
-                <TextBlock Text="{x:Bind SelectedItem.DefaultAction.Name, Mode=OneWay}" Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"/>
-                <FontIcon Glyph="&#xE751;" FontSize="12" VerticalAlignment="Center" Margin="4,0,0,0" Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"/>
+
+            <StackPanel
+                Margin="12,0,0,0"
+                Padding="6,2,4,3"
+                HorizontalAlignment="Left"
+                VerticalAlignment="Center"
+                BorderBrush="{ThemeResource ControlStrokeColorSecondaryBrush}"
+                BorderThickness="1"
+                CornerRadius="4"
+                Orientation="Horizontal"
+                Visibility="{x:Bind SelectedItem.DefaultAction.Name, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}">
+                <TextBlock
+                    FontSize="11"
+                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                    Style="{StaticResource CaptionTextBlockStyle}"
+                    Text="{x:Bind SelectedItem.DefaultAction.Name, Mode=OneWay}" />
+                <FontIcon
+                    Margin="4,0,0,0"
+                    VerticalAlignment="Center"
+                    FontSize="11"
+                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                    Glyph="&#xE751;" />
             </StackPanel>
-            <SplitButton x:Name="MoreCommandsButton" Grid.Column="2" Visibility="{x:Bind MoreCommandsAvailable, Mode=OneWay}">
-                <TextBlock>Actions</TextBlock>
+
+            <SplitButton
+                x:Name="MoreCommandsButton"
+                Grid.Column="2"
+                Margin="0,-2,0,0"
+                VerticalAlignment="Center"
+                Content="Actions"
+                FontSize="12"
+                Visibility="{x:Bind MoreCommandsAvailable, Mode=OneWay}">
                 <SplitButton.Flyout>
                     <Flyout Placement="TopEdgeAlignedRight">
-                        <ListView ItemsSource="{x:Bind SelectedItem.ContextActions, Mode=OneWay}" Style="{StaticResource NoAnimationsPlease}" Margin="-12" x:Name="ActionsDropdown" ItemTemplate="{StaticResource ContextMenuViewModelTemplate}" />
+                        <ListView
+                            x:Name="ActionsDropdown"
+                            Margin="-12"
+                            ItemTemplate="{StaticResource ContextMenuViewModelTemplate}"
+                            ItemsSource="{x:Bind SelectedItem.ContextActions, Mode=OneWay}"
+                            Style="{StaticResource NoAnimationsPlease}" />
                     </Flyout>
                 </SplitButton.Flyout>
             </SplitButton>
         </Grid>
     </Grid>
-</Page>
+</Page>

src/modules/cmdpal/WindowsCommandPalette/Views/MainPage.xaml

@@ -1,22 +1,23 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8" ?>
 <Page
     x:Class="WindowsCommandPalette.Views.MainPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:WindowsCommandPalette.Views"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:WindowsCommandPalette.Views"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    mc:Ignorable="d"
     Background="Transparent"
-    Loaded="Page_Loaded">
+    Loaded="Page_Loaded"
+    mc:Ignorable="d">
 
     <Page.Resources>
-        <ResourceDictionary>
-        </ResourceDictionary>
+        <ResourceDictionary />
     </Page.Resources>
 
-    <Grid  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" KeyDown="RootGrid_KeyDown">
-        <Frame x:Name="RootFrame" IsNavigationStackEnabled="True">
-        </Frame>
+    <Grid
+        HorizontalAlignment="Stretch"
+        VerticalAlignment="Stretch"
+        KeyDown="RootGrid_KeyDown">
+        <Frame x:Name="RootFrame" IsNavigationStackEnabled="True" />
     </Grid>
 </Page>

src/modules/cmdpal/WindowsCommandPalette/Views/MarkdownPage.xaml

@@ -1,34 +1,39 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8" ?>
 <Page
     x:Class="WindowsCommandPalette.Views.MarkdownPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="using:WindowsCommandPalette.Converters"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:devpal="using:WindowsCommandPalette"
     xmlns:local="using:WindowsCommandPalette.Views"
-    xmlns:mtu="using:Microsoft.Terminal.UI"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:mtu="using:Microsoft.Terminal.UI"
     xmlns:toolkit="using:CommunityToolkit.WinUI.UI.Controls"
-    mc:Ignorable="d"
     Background="Transparent"
-    Loaded="Page_Loaded">
+    Loaded="Page_Loaded"
+    mc:Ignorable="d">
 
     <Page.Resources>
         <ResourceDictionary>
-            <local:StringNotEmptyToVisibilityConverter x:Key="StringNotEmptyToVisibilityConverter" />
+            <converters:StringNotEmptyToVisibilityConverter x:Key="StringNotEmptyToVisibilityConverter" />
 
-            <!--Template for actions in the mode actions dropdown button -->
+            <!--  Template for actions in the mode actions dropdown button  -->
             <DataTemplate x:Key="ContextMenuViewModelTemplate" x:DataType="devpal:ContextItemViewModel">
                 <ListViewItem KeyDown="ActionListViewItem_KeyDown" Tapped="ActionListViewItem_Tapped">
                     <Grid>
                         <Grid.ColumnDefinitions>
-                            <ColumnDefinition Width="*"/>
-                            <ColumnDefinition Width="Auto"/>
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="Auto" />
                         </Grid.ColumnDefinitions>
 
-                        <ContentControl Grid.Column="0" Width="32" Height="32" Content="{x:Bind IcoElement, Mode=OneWay}" />
+                        <ContentControl
+                            Grid.Column="0"
+                            Width="32"
+                            Height="32"
+                            Content="{x:Bind IcoElement, Mode=OneWay}" />
                         <StackPanel Grid.Column="1">
-                            <TextBlock Text="{x:Bind Name}"/>
+                            <TextBlock Text="{x:Bind Name}" />
                         </StackPanel>
                     </Grid>
                 </ListViewItem>
@@ -38,8 +43,7 @@
             <!--
                 Remove all item animations from lists. They're entirely too slow to let that UI be usable.
             -->
-            <Style x:Key="NoAnimationsPlease"
-                   TargetType="ListView">
+            <Style x:Key="NoAnimationsPlease" TargetType="ListView">
                 <Setter Property="ItemContainerTransitions">
                     <Setter.Value>
                         <TransitionCollection>
@@ -56,93 +60,75 @@
         </ResourceDictionary>
     </Page.Resources>
 
-    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" KeyDown="RootGrid_KeyDown">
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="Auto"/>
-            <ColumnDefinition Width="Auto"/>
-        </Grid.ColumnDefinitions>
+    <Grid
+        Padding="12"
+        KeyDown="RootGrid_KeyDown"
+        RowSpacing="16">
         <Grid.RowDefinitions>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="*"/>
-            <RowDefinition Height="Auto"/>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+            <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
-
-         <!--Row 0: Back button and Title-->
-        <Grid Grid.Row="0">
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="Auto"/>
-                <ColumnDefinition Width="*"/>
-            </Grid.ColumnDefinitions>
-
-            <!--Back button-->
-            <Button x:Name="BackButton"
-                    Grid.Column="0"
-                    Width="24" Height="24"
-                    HorizontalAlignment="Left"
-                    Margin="0,0,10,0"
-                    Style="{StaticResource NavigationBackButtonNormalStyle}"
-                    Visibility="{x:Bind ViewModel.Nested}"
-                    IsEnabled="{x:Bind ViewModel.Nested}"
-                    Tapped="BackButton_Tapped"
-                    ToolTipService.ToolTip="Back"/>
-
-            <!--Search box-->
-            <TextBlock x:Name="TitleBlock"
-                     IsTextSelectionEnabled="True"
-                     MinHeight="32"
-                     FontSize="24"
-                     Grid.Column="1"
-                     Text="{x:Bind ViewModel.Title}"
-                     HorizontalAlignment="Stretch" />
-        </Grid>
-
-        <!--Extension name after clicking on a command-->
-        <StackPanel Orientation="Horizontal"
-                    HorizontalAlignment="Left"
-                    Grid.Row="1"
-                    Grid.Column="0"
-                    Margin="4,4,20,4"
-                    Visibility="{x:Bind ViewModel.Nested}">
-            <!--<BitmapIcon Width="20" Margin="4, 0, 8, 0" ShowAsMonochrome="False" UseLayoutRounding="False" UriSource="{x:Bind ViewModel.Command.IconUri}" HorizontalAlignment="Left"/>-->
-
-            <!--<ContentControl Grid.Column="0" Margin="4, 0, 8, 0" Width="24" Height="24" Content="{x:Bind ViewModel.Page.IcoElement}" />-->
-            <!--<ContentControl Grid.Column="0" Margin="4, 0, 8, 0" Width="20" Height="20" Content="{x:Bind ViewModel.Command.IcoElement}" />-->
-            <!--<TextBlock Foreground="{ThemeResource TextFillColorTertiaryBrush}" FontSize="14" Text="{x:Bind ViewModel.Title}"></TextBlock>-->
+        <StackPanel Orientation="Horizontal" Spacing="12">
+            <Button
+                x:Name="BackButton"
+                Padding="6"
+                IsEnabled="{x:Bind ViewModel.Nested}"
+                Style="{StaticResource SubtleButtonStyle}"
+                Tapped="BackButton_Tapped"
+                ToolTipService.ToolTip="Back"
+                Visibility="{x:Bind ViewModel.Nested}">
+                <FontIcon FontSize="16" Glyph="&#xE72B;" />
+            </Button>
+            <TextBlock
+                Margin="0,-2,0,0"
+                VerticalAlignment="Center"
+                x:Name="TitleBlock"
+                Style="{StaticResource BodyStrongTextBlockStyle}"
+                Text="{x:Bind ViewModel.Page.Name}" />
         </StackPanel>
 
-        <!-- ScrollViewer for MarkdownTextBlock -->
-        <ScrollViewer x:Name="MarkdownScrollViewer" Grid.Row="2" Margin="0,8,0,0" KeyDown="MarkdownScrollViewer_KeyDown">
-            <toolkit:MarkdownTextBlock x:Name="mdTextBox"
-                                       Background="Transparent"
-                                       IsTextSelectionEnabled="True"
-                                       Text="{x:Bind ViewModel.MarkdownContent, Mode=OneWay}" />
+        <!--  ScrollViewer for MarkdownTextBlock  -->
+        <ScrollViewer
+            x:Name="MarkdownScrollViewer"
+            Grid.Row="1"
+            KeyDown="MarkdownScrollViewer_KeyDown">
+            <toolkit:MarkdownTextBlock
+                x:Name="mdTextBox"
+                Background="Transparent"
+                IsTextSelectionEnabled="True"
+                Text="{x:Bind ViewModel.MarkdownContent, Mode=OneWay}" />
         </ScrollViewer>
 
-    <!--Footer-->
-    <Grid Grid.Row="3" Margin="4">
-      <Grid.ColumnDefinitions>
-        <ColumnDefinition Width="Auto"></ColumnDefinition>
-        <ColumnDefinition Width="*"></ColumnDefinition>
-        <ColumnDefinition Width="Auto"></ColumnDefinition>
-      </Grid.ColumnDefinitions>
-      <!-- <StackPanel HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="0" Orientation="Horizontal" Visibility="{x:Bind SelectedItemDefaultAction, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}">
+        <!--  Footer  -->
+        <Grid Grid.Row="3" Padding="8,0,12,0">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+
+            <!-- <StackPanel HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="0" Orientation="Horizontal" Visibility="{x:Bind SelectedItemDefaultAction, Converter={StaticResource StringNotEmptyToVisibilityConverter}, Mode=OneWay}">
         <TextBlock Text="{x:Bind SelectedItemDefaultAction, Mode=OneWay}" Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"/>
         <FontIcon Glyph="&#xE751;" FontSize="12" VerticalAlignment="Center" Margin="4,0,0,0" Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"/>
-      </StackPanel> -->
-      <SplitButton x:Name="MoreCommandsButton" Grid.Column="2" Tapped="MoreCommandsButton_Tapped" Visibility="{x:Bind MoreCommandsAvailable, Mode=OneWay}">
-        <TextBlock>Actions</TextBlock>
-        <SplitButton.Flyout>
-          <Flyout Placement="TopEdgeAlignedRight">
-            <ListView ItemsSource="{x:Bind ViewModel.ContextActions, Mode=OneWay}"
-                      Style="{StaticResource NoAnimationsPlease}"
-                      Margin="-12"
-                      x:Name="ActionsDropdown"
-                      ItemTemplate="{StaticResource ContextMenuViewModelTemplate}" />
-          </Flyout>
-        </SplitButton.Flyout>
-      </SplitButton>
+      </StackPanel>-->
+            <SplitButton
+                x:Name="MoreCommandsButton"
+                Grid.Column="2"
+                Tapped="MoreCommandsButton_Tapped"
+                Visibility="{x:Bind MoreCommandsAvailable, Mode=OneWay}">
+                <TextBlock>Actions</TextBlock>
+                <SplitButton.Flyout>
+                    <Flyout Placement="TopEdgeAlignedRight">
+                        <ListView
+                            x:Name="ActionsDropdown"
+                            Margin="-12"
+                            ItemTemplate="{StaticResource ContextMenuViewModelTemplate}"
+                            ItemsSource="{x:Bind ViewModel.ContextActions, Mode=OneWay}"
+                            Style="{StaticResource NoAnimationsPlease}" />
+                    </Flyout>
+                </SplitButton.Flyout>
+            </SplitButton>
+        </Grid>
     </Grid>
-  </Grid>
 </Page>