CmdPal: Refactoring ContextMenu adding separators, IsCritical styling, and right-click context menus for list items (#40189)

Refactored ContextMenu into it's own control to allow displaying in
CommandBar and in response to right click on list items.

- Adds "critical" styling to context menu items flagged as `IsCritical`.
This will use the theme to style with correct color.
- Added `SeparatorContextItem` and modified `MoreCommands` to allow for
both `CommandContextItem`s and `SeparatorContextItem`s.
- Right clicking a list item with a context menu will open the context
menu at the position of the click and position the filter box at the top
of the context menu.


![image](https://github.com/user-attachments/assets/3bef6b04-28bb-4a17-b731-d9ed20c0566f)


![image](https://github.com/user-attachments/assets/37ed497c-6d98-4f04-8114-d9952127ca2e)


This PR covers:

- closes #38308
- closes #39211
- closes #38307
- closes #38261

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

@@ -27,78 +27,28 @@
                 TrueValue="Collapsed" />
 
             <cmdpalUI:MessageStateToSeverityConverter x:Key="MessageStateToSeverityConverter" />
-            <cmdpalUI:KeyChordToStringConverter x:Key="KeyChordToStringConverter" />
 
             <StackLayout
                 x:Name="VerticalStackLayout"
                 Orientation="Vertical"
                 Spacing="4" />
 
-            <cmdpalUI:ContextItemTemplateSelector
-                x:Key="ContextItemTemplateSelector"
-                Critical="{StaticResource CriticalContextMenuViewModelTemplate}"
-                Default="{StaticResource DefaultContextMenuViewModelTemplate}" />
+            <Style
+                x:Name="ContextMenuFlyoutStyle"
+                BasedOn="{StaticResource DefaultFlyoutPresenterStyle}"
+                TargetType="FlyoutPresenter">
+                <Style.Setters>
+                    <Setter Property="Margin" Value="0" />
+                    <Setter Property="Padding" Value="0" />
+                </Style.Setters>
+            </Style>
 
-            <!--  Template for context items in the context item menu  -->
-            <DataTemplate x:Key="DefaultContextMenuViewModelTemplate" x:DataType="viewModels:CommandContextItemViewModel">
-                <Grid AutomationProperties.Name="{x:Bind Title, Mode=OneWay}">
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="32" />
-                        <ColumnDefinition Width="*" />
-                        <ColumnDefinition Width="Auto" />
-                    </Grid.ColumnDefinitions>
-                    <cpcontrols:IconBox
-                        Width="16"
-                        Height="16"
-                        Margin="4,0,0,0"
-                        HorizontalAlignment="Left"
-                        SourceKey="{x:Bind Icon, Mode=OneWay}"
-                        SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested}" />
-                    <TextBlock
-                        Grid.Column="1"
-                        VerticalAlignment="Center"
-                        Text="{x:Bind Title, Mode=OneWay}" />
-                    <TextBlock
-                        Grid.Column="2"
-                        Margin="16,0,0,0"
-                        HorizontalAlignment="Right"
-                        VerticalAlignment="Center"
-                        Foreground="{ThemeResource MenuFlyoutItemKeyboardAcceleratorTextForeground}"
-                        Style="{StaticResource CaptionTextBlockStyle}"
-                        Text="{x:Bind RequestedShortcut, Mode=OneWay, Converter={StaticResource KeyChordToStringConverter}}" />
-                </Grid>
-            </DataTemplate>
-
-            <!--  Template for context items flagged as critical  -->
-            <DataTemplate x:Key="CriticalContextMenuViewModelTemplate" x:DataType="viewModels:CommandContextItemViewModel">
-                <Grid AutomationProperties.Name="{x:Bind Title, Mode=OneWay}">
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="32" />
-                        <ColumnDefinition Width="*" />
-                        <ColumnDefinition Width="Auto" />
-                    </Grid.ColumnDefinitions>
-                    <cpcontrols:IconBox
-                        Width="16"
-                        Height="16"
-                        Margin="4,0,0,0"
-                        HorizontalAlignment="Left"
-                        Foreground="{ThemeResource SystemFillColorCriticalBrush}"
-                        SourceKey="{x:Bind Icon, Mode=OneWay}"
-                        SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested}" />
-                    <TextBlock
-                        Grid.Column="1"
-                        VerticalAlignment="Center"
-                        Style="{StaticResource ContextItemTitleTextBlockCriticalStyle}"
-                        Text="{x:Bind Title, Mode=OneWay}" />
-                    <TextBlock
-                        Grid.Column="2"
-                        Margin="16,0,0,0"
-                        HorizontalAlignment="Right"
-                        VerticalAlignment="Center"
-                        Style="{StaticResource ContextItemCaptionTextBlockCriticalStyle}"
-                        Text="{x:Bind RequestedShortcut, Mode=OneWay, Converter={StaticResource KeyChordToStringConverter}}" />
-                </Grid>
-            </DataTemplate>
+            <Flyout
+                x:Name="ContextMenuFlyout"
+                FlyoutPresenterStyle="{StaticResource ContextMenuFlyoutStyle}"
+                Opened="ContextMenuFlyout_Opened">
+                <cpcontrols:ContextMenu x:Name="ContextControl" />
+            </Flyout>
 
             <Style x:Key="HotkeyStyle" TargetType="Border">
                 <Style.Setters>
@@ -252,45 +202,9 @@
                 Content="{ui:FontIcon Glyph=&#xE712;,
                                       FontSize=16}"
                 Style="{StaticResource SubtleButtonStyle}"
+                Tapped="MoreCommandsButton_Tapped"
                 ToolTipService.ToolTip="Ctrl+K"
-                Visibility="{x:Bind ViewModel.ShouldShowContextMenu, Mode=OneWay}">
-                <Button.Flyout>
-                    <Flyout
-                        Closing="Flyout_Closing"
-                        Opened="Flyout_Opened"
-                        Placement="TopEdgeAlignedRight">
-                        <StackPanel>
-                            <ListView
-                                x:Name="CommandsDropdown"
-                                MinWidth="248"
-                                Margin="-16,-12,-16,-12"
-                                IsItemClickEnabled="True"
-                                ItemClick="CommandsDropdown_ItemClick"
-                                ItemTemplateSelector="{StaticResource ContextItemTemplateSelector}"
-                                ItemsSource="{x:Bind ViewModel.ContextMenu.FilteredItems, Mode=OneWay}"
-                                KeyDown="CommandsDropdown_KeyDown"
-                                SelectionMode="Single">
-                                <ListView.ItemContainerStyle>
-                                    <Style BasedOn="{StaticResource DefaultListViewItemStyle}" TargetType="ListViewItem">
-                                        <Setter Property="MinHeight" Value="0" />
-                                        <Setter Property="Padding" Value="12,7,12,7" />
-                                    </Style>
-                                </ListView.ItemContainerStyle>
-                                <ListView.ItemContainerTransitions>
-                                    <TransitionCollection />
-                                </ListView.ItemContainerTransitions>
-                            </ListView>
-                            <TextBox
-                                x:Name="ContextFilterBox"
-                                x:Uid="ContextFilterBox"
-                                Margin="-12,12,-12,-12"
-                                KeyDown="ContextFilterBox_KeyDown"
-                                PreviewKeyDown="ContextFilterBox_PreviewKeyDown"
-                                TextChanged="ContextFilterBox_TextChanged" />
-                        </StackPanel>
-                    </Flyout>
-                </Button.Flyout>
-            </Button>
+                Visibility="{x:Bind ViewModel.ShouldShowContextMenu, Mode=OneWay}" />
         </StackPanel>
     </Grid>
 </UserControl>

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/CommandBar.xaml.cs

@@ -18,6 +18,7 @@ namespace Microsoft.CmdPal.UI.Controls;
 
 public sealed partial class CommandBar : UserControl,
     IRecipient<OpenContextMenuMessage>,
+    IRecipient<CloseContextMenuMessage>,
     IRecipient<TryCommandKeybindingMessage>,
     ICurrentPageAware
 {
@@ -39,9 +40,8 @@ public sealed partial class CommandBar : UserControl,
 
         // RegisterAll isn't AOT compatible
         WeakReferenceMessenger.Default.Register<OpenContextMenuMessage>(this);
+        WeakReferenceMessenger.Default.Register<CloseContextMenuMessage>(this);
         WeakReferenceMessenger.Default.Register<TryCommandKeybindingMessage>(this);
-
-        ViewModel.PropertyChanged += ViewModel_PropertyChanged;
     }
 
     public void Receive(OpenContextMenuMessage message)
@@ -51,12 +51,43 @@ public sealed partial class CommandBar : UserControl,
             return;
         }
 
-        var options = new FlyoutShowOptions
+        if (message.Element == null)
         {
-            ShowMode = FlyoutShowMode.Standard,
-        };
-        MoreCommandsButton.Flyout.ShowAt(MoreCommandsButton, options);
-        UpdateUiForStackChange();
+            _ = DispatcherQueue.TryEnqueue(
+                () =>
+                {
+                    ContextMenuFlyout.ShowAt(
+                        MoreCommandsButton,
+                        new FlyoutShowOptions()
+                        {
+                            ShowMode = FlyoutShowMode.Standard,
+                            Placement = FlyoutPlacementMode.TopEdgeAlignedRight,
+                        });
+                });
+        }
+        else
+        {
+            _ = DispatcherQueue.TryEnqueue(
+            () =>
+            {
+                ContextMenuFlyout.ShowAt(
+                    message.Element!,
+                    new FlyoutShowOptions()
+                    {
+                        ShowMode = FlyoutShowMode.Standard,
+                        Placement = (FlyoutPlacementMode)message.FlyoutPlacementMode!,
+                        Position = message.Point,
+                    });
+            });
+        }
+    }
+
+    public void Receive(CloseContextMenuMessage message)
+    {
+        if (ContextMenuFlyout.IsOpen)
+        {
+            ContextMenuFlyout.Hide();
+        }
     }
 
     public void Receive(TryCommandKeybindingMessage msg)
@@ -74,17 +105,7 @@ public sealed partial class CommandBar : UserControl,
         }
         else if (result == ContextKeybindingResult.KeepOpen)
         {
-            if (!MoreCommandsButton.Flyout.IsOpen)
-            {
-                var options = new FlyoutShowOptions
-                {
-                    ShowMode = FlyoutShowMode.Standard,
-                };
-                MoreCommandsButton.Flyout.ShowAt(MoreCommandsButton, options);
-            }
-
-            UpdateUiForStackChange();
-
+            WeakReferenceMessenger.Default.Send<OpenContextMenuMessage>(new OpenContextMenuMessage(null, null, null, ContextMenuFilterLocation.Bottom));
             msg.Handled = true;
         }
         else if (result == ContextKeybindingResult.Unhandled)
@@ -121,164 +142,15 @@ public sealed partial class CommandBar : UserControl,
         e.Handled = true;
     }
 
-    private void CommandsDropdown_ItemClick(object sender, ItemClickEventArgs e)
+    private void MoreCommandsButton_Tapped(object sender, TappedRoutedEventArgs e)
     {
-        if (e.ClickedItem is CommandContextItemViewModel item)
-        {
-            if (ViewModel?.InvokeItem(item) == ContextKeybindingResult.Hide)
-            {
-                MoreCommandsButton.Flyout.Hide();
-            }
-            else
-            {
-                UpdateUiForStackChange();
-            }
-        }
+        WeakReferenceMessenger.Default.Send<OpenContextMenuMessage>(new OpenContextMenuMessage(null, null, null, ContextMenuFilterLocation.Bottom));
     }
 
-    private void CommandsDropdown_KeyDown(object sender, KeyRoutedEventArgs e)
+    private void ContextMenuFlyout_Opened(object sender, object e)
     {
-        if (e.Handled)
-        {
-            return;
-        }
-
-        var ctrlPressed = InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.Control).HasFlag(CoreVirtualKeyStates.Down);
-        var altPressed = InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.Menu).HasFlag(CoreVirtualKeyStates.Down);
-        var shiftPressed = InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.Shift).HasFlag(CoreVirtualKeyStates.Down);
-        var winPressed = InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.LeftWindows).HasFlag(CoreVirtualKeyStates.Down) ||
-            InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.RightWindows).HasFlag(CoreVirtualKeyStates.Down);
-
-        var result = ViewModel?.CheckKeybinding(ctrlPressed, altPressed, shiftPressed, winPressed, e.Key);
-
-        if (result == ContextKeybindingResult.Hide)
-        {
-            e.Handled = true;
-            MoreCommandsButton.Flyout.Hide();
-            WeakReferenceMessenger.Default.Send<FocusSearchBoxMessage>();
-        }
-        else if (result == ContextKeybindingResult.KeepOpen)
-        {
-            e.Handled = true;
-        }
-        else if (result == ContextKeybindingResult.Unhandled)
-        {
-            e.Handled = false;
-        }
-    }
-
-    private void Flyout_Opened(object sender, object e)
-    {
-        UpdateUiForStackChange();
-    }
-
-    private void Flyout_Closing(FlyoutBase sender, FlyoutBaseClosingEventArgs args)
-    {
-        ViewModel?.ClearContextStack();
-        WeakReferenceMessenger.Default.Send<FocusSearchBoxMessage>();
-    }
-
-    private void ViewModel_PropertyChanged(object? sender, System.ComponentModel.PropertyChangedEventArgs e)
-    {
-        var prop = e.PropertyName;
-        if (prop == nameof(ViewModel.ContextMenu))
-        {
-            UpdateUiForStackChange();
-        }
-    }
-
-    private void ContextFilterBox_TextChanged(object sender, TextChangedEventArgs e)
-    {
-        ViewModel.ContextMenu?.SetSearchText(ContextFilterBox.Text);
-
-        if (CommandsDropdown.SelectedIndex == -1)
-        {
-            CommandsDropdown.SelectedIndex = 0;
-        }
-    }
-
-    private void ContextFilterBox_KeyDown(object sender, KeyRoutedEventArgs e)
-    {
-        var ctrlPressed = InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.Control).HasFlag(CoreVirtualKeyStates.Down);
-        var altPressed = InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.Menu).HasFlag(CoreVirtualKeyStates.Down);
-        var shiftPressed = InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.Shift).HasFlag(CoreVirtualKeyStates.Down);
-        var winPressed = InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.LeftWindows).HasFlag(CoreVirtualKeyStates.Down) ||
-            InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.RightWindows).HasFlag(CoreVirtualKeyStates.Down);
-
-        if (e.Key == VirtualKey.Enter)
-        {
-            if (CommandsDropdown.SelectedItem is CommandContextItemViewModel item)
-            {
-                if (ViewModel?.InvokeItem(item) == ContextKeybindingResult.Hide)
-                {
-                    MoreCommandsButton.Flyout.Hide();
-                    WeakReferenceMessenger.Default.Send<FocusSearchBoxMessage>();
-                }
-                else
-                {
-                    UpdateUiForStackChange();
-                }
-
-                e.Handled = true;
-            }
-        }
-        else if (e.Key == VirtualKey.Escape ||
-            (e.Key == VirtualKey.Left && altPressed))
-        {
-            if (ViewModel.CanPopContextStack())
-            {
-                ViewModel.PopContextStack();
-                UpdateUiForStackChange();
-            }
-            else
-            {
-                MoreCommandsButton.Flyout.Hide();
-                WeakReferenceMessenger.Default.Send<FocusSearchBoxMessage>();
-            }
-
-            e.Handled = true;
-        }
-
-        CommandsDropdown_KeyDown(sender, e);
-    }
-
-    private void ContextFilterBox_PreviewKeyDown(object sender, KeyRoutedEventArgs e)
-    {
-        if (e.Key == VirtualKey.Up)
-        {
-            // navigate previous
-            if (CommandsDropdown.SelectedIndex > 0)
-            {
-                CommandsDropdown.SelectedIndex--;
-            }
-            else
-            {
-                CommandsDropdown.SelectedIndex = CommandsDropdown.Items.Count - 1;
-            }
-
-            e.Handled = true;
-        }
-        else if (e.Key == VirtualKey.Down)
-        {
-            // navigate next
-            if (CommandsDropdown.SelectedIndex < CommandsDropdown.Items.Count - 1)
-            {
-                CommandsDropdown.SelectedIndex++;
-            }
-            else
-            {
-                CommandsDropdown.SelectedIndex = 0;
-            }
-
-            e.Handled = true;
-        }
-    }
-
-    private void UpdateUiForStackChange()
-    {
-        ContextFilterBox.Text = string.Empty;
-        ViewModel.ContextMenu?.SetSearchText(string.Empty);
-        CommandsDropdown.SelectedIndex = 0;
-        ContextFilterBox.Focus(FocusState.Programmatic);
+        // We need to wait until our flyout is opened to try and toss focus
+        // at its search box. The control isn't in the UI tree before that
+        ContextControl.FocusSearchBox();
     }
 }

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

@@ -0,0 +1,159 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<UserControl
+    x:Class="Microsoft.CmdPal.UI.Controls.ContextMenu"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:animations="using:CommunityToolkit.WinUI.Animations"
+    xmlns:cmdpalUI="using:Microsoft.CmdPal.UI"
+    xmlns:converters="using:CommunityToolkit.WinUI.Converters"
+    xmlns:cpcontrols="using:Microsoft.CmdPal.UI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:help="using:Microsoft.CmdPal.UI.Helpers"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:toolkit="using:CommunityToolkit.WinUI.Controls"
+    xmlns:ui="using:CommunityToolkit.WinUI"
+    xmlns:viewmodels="using:Microsoft.CmdPal.UI.ViewModels"
+    Background="Transparent"
+    mc:Ignorable="d">
+
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <cmdpalUI:KeyChordToStringConverter x:Key="KeyChordToStringConverter" />
+
+            <cmdpalUI:ContextItemTemplateSelector
+                x:Key="ContextItemTemplateSelector"
+                Critical="{StaticResource CriticalContextMenuViewModelTemplate}"
+                Default="{StaticResource DefaultContextMenuViewModelTemplate}"
+                Separator="{StaticResource SeparatorContextMenuViewModelTemplate}" />
+
+            <!--  Template for context items in the context item menu  -->
+            <DataTemplate x:Key="DefaultContextMenuViewModelTemplate" x:DataType="viewmodels:CommandContextItemViewModel">
+                <Grid AutomationProperties.Name="{x:Bind Title}">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="32" />
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="Auto" />
+                    </Grid.ColumnDefinitions>
+                    <cpcontrols:IconBox
+                        Width="16"
+                        Height="16"
+                        Margin="4,0,0,0"
+                        HorizontalAlignment="Left"
+                        SourceKey="{x:Bind Icon}"
+                        SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested}" />
+                    <TextBlock
+                        Grid.Column="1"
+                        VerticalAlignment="Center"
+                        Text="{x:Bind Title}" />
+                    <TextBlock
+                        Grid.Column="2"
+                        Margin="16,0,0,0"
+                        HorizontalAlignment="Right"
+                        VerticalAlignment="Center"
+                        Foreground="{ThemeResource MenuFlyoutItemKeyboardAcceleratorTextForeground}"
+                        Style="{StaticResource CaptionTextBlockStyle}"
+                        Text="{x:Bind RequestedShortcut, Converter={StaticResource KeyChordToStringConverter}}" />
+                </Grid>
+            </DataTemplate>
+
+            <!--  Template for context items flagged as critical  -->
+            <DataTemplate x:Key="CriticalContextMenuViewModelTemplate" x:DataType="viewmodels:CommandContextItemViewModel">
+                <Grid AutomationProperties.Name="{x:Bind Title}">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="32" />
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="Auto" />
+                    </Grid.ColumnDefinitions>
+                    <cpcontrols:IconBox
+                        Width="16"
+                        Height="16"
+                        Margin="4,0,0,0"
+                        HorizontalAlignment="Left"
+                        Foreground="{ThemeResource SystemFillColorCriticalBrush}"
+                        SourceKey="{x:Bind Icon}"
+                        SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested}" />
+                    <TextBlock
+                        Grid.Column="1"
+                        VerticalAlignment="Center"
+                        Style="{StaticResource ContextItemTitleTextBlockCriticalStyle}"
+                        Text="{x:Bind Title}" />
+                    <TextBlock
+                        Grid.Column="2"
+                        Margin="16,0,0,0"
+                        HorizontalAlignment="Right"
+                        VerticalAlignment="Center"
+                        Style="{StaticResource ContextItemCaptionTextBlockCriticalStyle}"
+                        Text="{x:Bind RequestedShortcut, Converter={StaticResource KeyChordToStringConverter}}" />
+                </Grid>
+            </DataTemplate>
+
+            <!--  Template for context item separators  -->
+            <DataTemplate x:Key="SeparatorContextMenuViewModelTemplate" x:DataType="viewmodels:SeparatorContextItemViewModel">
+                <Rectangle
+                    Height="1"
+                    Margin="-16,-12,-12,-12"
+                    Fill="{ThemeResource MenuFlyoutSeparatorThemeBrush}" />
+            </DataTemplate>
+        </ResourceDictionary>
+    </UserControl.Resources>
+
+    <Grid x:Name="ContextMenuGrid">
+        <Grid.RowDefinitions>
+            <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}"
+                KeyDown="CommandsDropdown_KeyDown"
+                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>
+        <TextBox
+            x:Name="ContextFilterBox"
+            x:Uid="ContextFilterBox"
+            Margin="4"
+            KeyDown="ContextFilterBox_KeyDown"
+            PreviewKeyDown="ContextFilterBox_PreviewKeyDown"
+            TextChanged="ContextFilterBox_TextChanged" />
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="ContextMenuOrder">
+                <VisualState x:Name="FilterOnTop">
+                    <VisualState.StateTriggers>
+                        <ui:IsEqualStateTrigger Value="{x:Bind ViewModel.FilterOnTop, Mode=OneWay}" To="True" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="CommandsPanel.(Grid.Row)" Value="1" />
+                        <Setter Target="ContextFilterBox.(Grid.Row)" Value="0" />
+                        <Setter Target="CommandsDropdown.Margin" Value="0, 0, 0, 4" />
+                    </VisualState.Setters>
+                </VisualState>
+                <VisualState x:Name="FilterOnBottom">
+                    <VisualState.StateTriggers>
+                        <ui:IsEqualStateTrigger Value="{x:Bind ViewModel.FilterOnTop, Mode=OneWay}" To="False" />
+                    </VisualState.StateTriggers>
+                    <VisualState.Setters>
+                        <Setter Target="CommandsPanel.(Grid.Row)" Value="0" />
+                        <Setter Target="ContextFilterBox.(Grid.Row)" Value="1" />
+                        <Setter Target="CommandsDropdown.Margin" Value="0, 4, 0, 0" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+    </Grid>
+</UserControl>

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

@@ -0,0 +1,231 @@
+// 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 CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Messaging;
+using CommunityToolkit.WinUI;
+using Microsoft.CmdPal.Ext.System;
+using Microsoft.CmdPal.UI.ViewModels;
+using Microsoft.CmdPal.UI.ViewModels.Messages;
+using Microsoft.CmdPal.UI.Views;
+using Microsoft.UI.Input;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Input;
+using Windows.System;
+using Windows.UI.Core;
+
+namespace Microsoft.CmdPal.UI.Controls;
+
+public sealed partial class ContextMenu : UserControl,
+    IRecipient<OpenContextMenuMessage>,
+    IRecipient<UpdateCommandBarMessage>,
+    IRecipient<TryCommandKeybindingMessage>
+{
+    public ContextMenuViewModel ViewModel { get; } = new();
+
+    public ContextMenu()
+    {
+        this.InitializeComponent();
+
+        // RegisterAll isn't AOT compatible
+        WeakReferenceMessenger.Default.Register<OpenContextMenuMessage>(this);
+        WeakReferenceMessenger.Default.Register<UpdateCommandBarMessage>(this);
+        WeakReferenceMessenger.Default.Register<TryCommandKeybindingMessage>(this);
+
+        if (ViewModel != null)
+        {
+            ViewModel.PropertyChanged += ViewModel_PropertyChanged;
+        }
+    }
+
+    public void Receive(OpenContextMenuMessage message)
+    {
+        UpdateUiForStackChange();
+    }
+
+    public void Receive(UpdateCommandBarMessage message)
+    {
+        UpdateUiForStackChange();
+    }
+
+    public void Receive(TryCommandKeybindingMessage msg)
+    {
+        var result = ViewModel?.CheckKeybinding(msg.Ctrl, msg.Alt, msg.Shift, msg.Win, msg.Key);
+
+        if (result == ContextKeybindingResult.Hide)
+        {
+            msg.Handled = true;
+            WeakReferenceMessenger.Default.Send<CloseContextMenuMessage>();
+            UpdateUiForStackChange();
+        }
+        else if (result == ContextKeybindingResult.KeepOpen)
+        {
+            UpdateUiForStackChange();
+            msg.Handled = true;
+        }
+        else if (result == ContextKeybindingResult.Unhandled)
+        {
+            msg.Handled = false;
+        }
+    }
+
+    private void CommandsDropdown_ItemClick(object sender, ItemClickEventArgs e)
+    {
+        if (e.ClickedItem is CommandContextItemViewModel item)
+        {
+            if (InvokeCommand(item) == ContextKeybindingResult.Hide)
+            {
+                WeakReferenceMessenger.Default.Send<CloseContextMenuMessage>();
+            }
+
+            UpdateUiForStackChange();
+        }
+    }
+
+    private void CommandsDropdown_KeyDown(object sender, KeyRoutedEventArgs e)
+    {
+        if (e.Handled)
+        {
+            return;
+        }
+
+        var ctrlPressed = InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.Control).HasFlag(CoreVirtualKeyStates.Down);
+        var altPressed = InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.Menu).HasFlag(CoreVirtualKeyStates.Down);
+        var shiftPressed = InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.Shift).HasFlag(CoreVirtualKeyStates.Down);
+        var winPressed = InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.LeftWindows).HasFlag(CoreVirtualKeyStates.Down) ||
+            InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.RightWindows).HasFlag(CoreVirtualKeyStates.Down);
+
+        var result = ViewModel?.CheckKeybinding(ctrlPressed, altPressed, shiftPressed, winPressed, e.Key);
+
+        if (result == ContextKeybindingResult.Hide)
+        {
+            e.Handled = true;
+            WeakReferenceMessenger.Default.Send<CloseContextMenuMessage>();
+            UpdateUiForStackChange();
+        }
+        else if (result == ContextKeybindingResult.KeepOpen)
+        {
+            e.Handled = true;
+        }
+        else if (result == ContextKeybindingResult.Unhandled)
+        {
+            e.Handled = false;
+        }
+    }
+
+    private void ViewModel_PropertyChanged(object? sender, System.ComponentModel.PropertyChangedEventArgs e)
+    {
+        var prop = e.PropertyName;
+
+        if (prop == nameof(ContextMenuViewModel.FilteredItems))
+        {
+            UpdateUiForStackChange();
+        }
+    }
+
+    private void ContextFilterBox_TextChanged(object sender, TextChangedEventArgs e)
+    {
+        ViewModel?.SetSearchText(ContextFilterBox.Text);
+
+        if (CommandsDropdown.SelectedIndex == -1)
+        {
+            CommandsDropdown.SelectedIndex = 0;
+        }
+    }
+
+    private void ContextFilterBox_KeyDown(object sender, KeyRoutedEventArgs e)
+    {
+        var ctrlPressed = InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.Control).HasFlag(CoreVirtualKeyStates.Down);
+        var altPressed = InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.Menu).HasFlag(CoreVirtualKeyStates.Down);
+        var shiftPressed = InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.Shift).HasFlag(CoreVirtualKeyStates.Down);
+        var winPressed = InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.LeftWindows).HasFlag(CoreVirtualKeyStates.Down) ||
+            InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.RightWindows).HasFlag(CoreVirtualKeyStates.Down);
+
+        if (e.Key == VirtualKey.Enter)
+        {
+            if (CommandsDropdown.SelectedItem is CommandContextItemViewModel item)
+            {
+                if (InvokeCommand(item) == ContextKeybindingResult.Hide)
+                {
+                    WeakReferenceMessenger.Default.Send<CloseContextMenuMessage>();
+                }
+
+                UpdateUiForStackChange();
+
+                e.Handled = true;
+            }
+        }
+        else if (e.Key == VirtualKey.Escape ||
+            (e.Key == VirtualKey.Left && altPressed))
+        {
+            if (ViewModel.CanPopContextStack())
+            {
+                ViewModel.PopContextStack();
+                UpdateUiForStackChange();
+            }
+            else
+            {
+                WeakReferenceMessenger.Default.Send<CloseContextMenuMessage>();
+                WeakReferenceMessenger.Default.Send<FocusSearchBoxMessage>();
+                UpdateUiForStackChange();
+            }
+
+            e.Handled = true;
+        }
+
+        CommandsDropdown_KeyDown(sender, e);
+    }
+
+    private void ContextFilterBox_PreviewKeyDown(object sender, KeyRoutedEventArgs e)
+    {
+        if (e.Key == VirtualKey.Up)
+        {
+            // navigate previous
+            if (CommandsDropdown.SelectedIndex > 0)
+            {
+                CommandsDropdown.SelectedIndex--;
+            }
+            else
+            {
+                CommandsDropdown.SelectedIndex = CommandsDropdown.Items.Count - 1;
+            }
+
+            e.Handled = true;
+        }
+        else if (e.Key == VirtualKey.Down)
+        {
+            // navigate next
+            if (CommandsDropdown.SelectedIndex < CommandsDropdown.Items.Count - 1)
+            {
+                CommandsDropdown.SelectedIndex++;
+            }
+            else
+            {
+                CommandsDropdown.SelectedIndex = 0;
+            }
+
+            e.Handled = true;
+        }
+    }
+
+    private void UpdateUiForStackChange()
+    {
+        ContextFilterBox.Text = string.Empty;
+        ViewModel?.SetSearchText(string.Empty);
+        CommandsDropdown.SelectedIndex = 0;
+    }
+
+    /// <summary>
+    /// Manually focuses our search box. This needs to be called after we're actually
+    /// In the UI tree - if we're in a Flyout, that's not until Opened()
+    /// </summary>
+    internal void FocusSearchBox()
+    {
+        ContextFilterBox.Focus(FocusState.Programmatic);
+    }
+
+    private ContextKeybindingResult InvokeCommand(CommandItemViewModel command) => ViewModel.InvokeCommand(command);
+}

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/SearchBar.xaml.cs

@@ -122,7 +122,7 @@ public sealed partial class SearchBar : UserControl,
         else if (ctrlPressed && e.Key == VirtualKey.K)
         {
             // ctrl+k
-            WeakReferenceMessenger.Default.Send<OpenContextMenuMessage>();
+            WeakReferenceMessenger.Default.Send<OpenContextMenuMessage>(new OpenContextMenuMessage(null, null, null, ContextMenuFilterLocation.Bottom));
             e.Handled = true;
         }
         else if (e.Key == VirtualKey.Right)