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>
This commit is contained in:
Mike Griese
2025-10-10 06:26:04 -05:00
committed by GitHub
parent f44addb29c
commit cd5b76c988

View File

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