CmdPal: make the context menu search look more like a cmdpal (#42081)

Replaces our styling with the same styleing we use for the search bar

But we can't _just_ do that, because the stupid "text cursors don't show
up on top of transparent backgrounds" thing.

So I just added the smoke backdrop to the search box. Seemed reasonable.

Screenshots below.

---------

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

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/ContextMenu.xaml

@@ -14,7 +14,6 @@
     xmlns:toolkit="using:CommunityToolkit.WinUI.Controls"
     xmlns:ui="using:CommunityToolkit.WinUI"
     xmlns:viewModels="using:Microsoft.CmdPal.UI.ViewModels"
-    Background="Transparent"
     PreviewKeyDown="UserControl_PreviewKeyDown"
     mc:Ignorable="d">
 
@@ -22,7 +21,7 @@
         <ResourceDictionary>
             <cmdpalUI:KeyChordToStringConverter x:Key="KeyChordToStringConverter" />
             <converters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
-
+            <Thickness x:Key="DefaultContextMenuItemPadding">12,8,12,8</Thickness>
             <cmdpalUI:ContextItemTemplateSelector
                 x:Key="ContextItemTemplateSelector"
                 Critical="{StaticResource CriticalContextMenuViewModelTemplate}"
@@ -31,7 +30,7 @@
 
             <!--  Template for context items in the context item menu  -->
             <DataTemplate x:Key="DefaultContextMenuViewModelTemplate" x:DataType="coreViewModels:CommandContextItemViewModel">
-                <Grid AutomationProperties.Name="{x:Bind Title, Mode=OneWay}">
+                <Grid Padding="{StaticResource DefaultContextMenuItemPadding}" AutomationProperties.Name="{x:Bind Title, Mode=OneWay}">
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="32" />
                         <ColumnDefinition Width="*" />
@@ -71,7 +70,7 @@
 
             <!--  Template for context items flagged as critical  -->
             <DataTemplate x:Key="CriticalContextMenuViewModelTemplate" x:DataType="coreViewModels:CommandContextItemViewModel">
-                <Grid AutomationProperties.Name="{x:Bind Title, Mode=OneWay}">
+                <Grid Padding="{StaticResource DefaultContextMenuItemPadding}" AutomationProperties.Name="{x:Bind Title, Mode=OneWay}">
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="32" />
                         <ColumnDefinition Width="*" />
@@ -114,7 +113,7 @@
             <DataTemplate x:Key="SeparatorContextMenuViewModelTemplate" x:DataType="coreViewModels:SeparatorViewModel">
                 <Rectangle
                     Height="1"
-                    Margin="-16,-12,-12,-12"
+                    Margin="0,2,0,2"
                     Fill="{ThemeResource MenuFlyoutSeparatorBackground}" />
             </DataTemplate>
         </ResourceDictionary>
@@ -125,35 +124,39 @@
             <RowDefinition />
             <RowDefinition />
         </Grid.RowDefinitions>
-
-        <StackPanel x:Name="CommandsPanel">
-            <ListView
-                x:Name="CommandsDropdown"
-                MinWidth="248"
-                IsItemClickEnabled="True"
-                ItemClick="CommandsDropdown_ItemClick"
-                ItemTemplateSelector="{StaticResource ContextItemTemplateSelector}"
-                ItemsSource="{x:Bind ViewModel.FilteredItems, Mode=OneWay}"
-                PreviewKeyDown="CommandsDropdown_PreviewKeyDown"
-                SelectionMode="Single">
-                <ListView.ItemContainerStyle>
-                    <Style BasedOn="{StaticResource DefaultListViewItemStyle}" TargetType="ListViewItem">
-                        <Setter Property="MinHeight" Value="0" />
-                        <Setter Property="Padding" Value="12,8" />
-                    </Style>
-                </ListView.ItemContainerStyle>
-                <ListView.ItemContainerTransitions>
-                    <TransitionCollection />
-                </ListView.ItemContainerTransitions>
-            </ListView>
-        </StackPanel>
+        <ListView
+            x:Name="CommandsDropdown"
+            MinWidth="248"
+            Margin="0,4,0,2"
+            IsItemClickEnabled="True"
+            ItemClick="CommandsDropdown_ItemClick"
+            ItemTemplateSelector="{StaticResource ContextItemTemplateSelector}"
+            ItemsSource="{x:Bind ViewModel.FilteredItems, Mode=OneWay}"
+            PreviewKeyDown="CommandsDropdown_PreviewKeyDown"
+            SelectionMode="Single">
+            <ListView.ItemContainerStyle>
+                <Style BasedOn="{StaticResource DefaultListViewItemStyle}" TargetType="ListViewItem">
+                    <Setter Property="MinHeight" Value="0" />
+                    <Setter Property="Padding" Value="0" />
+                </Style>
+            </ListView.ItemContainerStyle>
+            <ListView.ItemContainerTransitions>
+                <TransitionCollection />
+            </ListView.ItemContainerTransitions>
+        </ListView>
+        <Border BorderBrush="{ThemeResource MenuFlyoutSeparatorBackground}" BorderThickness="0,0,0,1" />
         <TextBox
             x:Name="ContextFilterBox"
             x:Uid="ContextFilterBox"
-            Margin="4"
+            Margin="0"
+            Padding="10,7,6,8"
+            Background="{ThemeResource AcrylicBackgroundFillColorBaseBrush}"
+            BorderThickness="0,0,0,2"
+            CornerRadius="8, 8, 0, 0"
             IsTextScaleFactorEnabled="True"
             KeyDown="ContextFilterBox_KeyDown"
             PreviewKeyDown="ContextFilterBox_PreviewKeyDown"
+            Style="{StaticResource SearchTextBoxStyle}"
             TextChanged="ContextFilterBox_TextChanged" />
         <VisualStateManager.VisualStateGroups>
             <VisualStateGroup x:Name="ContextMenuOrder">
@@ -162,9 +165,11 @@
                         <ui:IsEqualStateTrigger Value="{x:Bind ViewModel.FilterOnTop, Mode=OneWay}" To="True" />
                     </VisualState.StateTriggers>
                     <VisualState.Setters>
-                        <Setter Target="CommandsPanel.(Grid.Row)" Value="1" />
+                        <Setter Target="CommandsDropdown.(Grid.Row)" Value="1" />
                         <Setter Target="ContextFilterBox.(Grid.Row)" Value="0" />
-                        <Setter Target="CommandsDropdown.Margin" Value="0, 0, 0, 4" />
+                        <Setter Target="CommandsDropdown.Margin" Value="0, 3, 0, 4" />
+                        <Setter Target="ContextFilterBox.CornerRadius" Value="8, 8, 0, 0" />
+                        <Setter Target="ContextFilterBox.Margin" Value="0,0,0,-1" />
                     </VisualState.Setters>
                 </VisualState>
                 <VisualState x:Name="FilterOnBottom">
@@ -172,9 +177,11 @@
                         <ui:IsEqualStateTrigger Value="{x:Bind ViewModel.FilterOnTop, Mode=OneWay}" To="False" />
                     </VisualState.StateTriggers>
                     <VisualState.Setters>
-                        <Setter Target="CommandsPanel.(Grid.Row)" Value="0" />
+                        <Setter Target="CommandsDropdown.(Grid.Row)" Value="0" />
                         <Setter Target="ContextFilterBox.(Grid.Row)" Value="1" />
-                        <Setter Target="CommandsDropdown.Margin" Value="0, 4, 0, 0" />
+                        <Setter Target="CommandsDropdown.Margin" Value="0, 4, 0, 4" />
+                        <Setter Target="ContextFilterBox.CornerRadius" Value="0, 0, 8, 8" />
+                        <Setter Target="ContextFilterBox.Margin" Value="0,0,0,-2" />
                     </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>