CommandBarFlyout restyling (#434)

- Restyled the ListView to make it look like a MenuFlyout
- Added support for displaying the optional shortcut
This commit is contained in:
Niels Laute
2025-02-20 12:41:14 +01:00
committed by GitHub
parent 50fcc4c789
commit 7c9fa6fb6e
3 changed files with 96 additions and 62 deletions

View File

@@ -26,6 +26,7 @@
TrueValue="Collapsed" />
<cmdpalUI:MessageStateToSeverityConverter x:Key="MessageStateToSeverityConverter" />
<cmdpalUI:KeyChordToStringConverter x:Key="KeyChordToStringConverter" />
<StackLayout
x:Name="VerticalStackLayout"
@@ -34,24 +35,32 @@
<!-- Template for actions in the mode actions dropdown button -->
<DataTemplate x:Key="ContextMenuViewModelTemplate" x:DataType="viewmodels:CommandContextItemViewModel">
<ListViewItem KeyDown="CommandListViewItem_KeyDown" Tapped="CommandListViewItem_Tapped">
<Grid ColumnSpacing="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<cpcontrols:IconBox
Grid.Column="0"
Width="16"
Height="16"
Margin="0,0,0,0"
SourceKey="{x:Bind Icon, Mode=OneWay}"
SourceRequested="{x:Bind help:IconCacheProvider.SourceRequested}" />
<TextBlock Grid.Column="1" Text="{x:Bind Title, Mode=OneWay}" />
</Grid>
</ListViewItem>
<Grid>
<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>
</ResourceDictionary>
</UserControl.Resources>
@@ -226,9 +235,19 @@
<Flyout Placement="TopEdgeAlignedRight">
<ListView
x:Name="CommandsDropdown"
Margin="-12"
MinWidth="248"
Margin="-16,-12,-16,-12"
IsItemClickEnabled="True"
ItemClick="CommandsDropdown_ItemClick"
ItemTemplate="{StaticResource ContextMenuViewModelTemplate}"
ItemsSource="{x:Bind ViewModel.ContextCommands, Mode=OneWay}">
ItemsSource="{x:Bind ViewModel.ContextCommands, Mode=OneWay}"
SelectionMode="None">
<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>

View File

@@ -54,48 +54,6 @@ public sealed partial class CommandBar : UserControl,
CommandsDropdown.Focus(FocusState.Programmatic);
}
[System.Diagnostics.CodeAnalysis.SuppressMessage("CodeQuality", "IDE0051:Remove unused private members", Justification = "VS has a tendency to delete XAML bound methods over-aggressively")]
private void CommandListViewItem_KeyDown(object sender, KeyRoutedEventArgs e)
{
if (e.Handled)
{
return;
}
if (sender is not ListViewItem listItem)
{
return;
}
if (listItem.DataContext is CommandContextItemViewModel item)
{
if (e.Key == VirtualKey.Enter)
{
ViewModel?.InvokeItemCommand.Execute(item);
MoreCommandsButton.Flyout.Hide();
e.Handled = true;
}
}
}
[System.Diagnostics.CodeAnalysis.SuppressMessage("CodeQuality", "IDE0051:Remove unused private members", Justification = "VS has a tendency to delete XAML bound methods over-aggressively")]
private void CommandListViewItem_Tapped(object sender, TappedRoutedEventArgs e)
{
MoreCommandsButton.Flyout.Hide();
if (sender is not ListViewItem listItem)
{
return;
}
if (listItem.DataContext is CommandContextItemViewModel item)
{
ViewModel?.InvokeItemCommand.Execute(item);
MoreCommandsButton.Flyout.Hide();
e.Handled = true;
}
}
[System.Diagnostics.CodeAnalysis.SuppressMessage("CodeQuality", "IDE0051:Remove unused private members", Justification = "VS has a tendency to delete XAML bound methods over-aggressively")]
private void PrimaryButton_Tapped(object sender, TappedRoutedEventArgs e) =>
WeakReferenceMessenger.Default.Send<ActivateSelectedListItemMessage>();
@@ -119,4 +77,13 @@ public sealed partial class CommandBar : UserControl,
WeakReferenceMessenger.Default.Send<OpenSettingsMessage>();
e.Handled = true;
}
private void CommandsDropdown_ItemClick(object sender, ItemClickEventArgs e)
{
if (e.ClickedItem is CommandContextItemViewModel item)
{
ViewModel?.InvokeItemCommand.Execute(item);
MoreCommandsButton.Flyout.Hide();
}
}
}

View File

@@ -0,0 +1,48 @@
// 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 System.Globalization;
using Microsoft.CommandPalette.Extensions;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Data;
using Windows.System;
namespace Microsoft.CmdPal.UI;
public partial class KeyChordToStringConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
if (value is KeyChord shortcut && (VirtualKey)shortcut.Vkey != VirtualKey.None)
{
var result = string.Empty;
if (shortcut.Modifiers.HasFlag(VirtualKeyModifiers.Control))
{
result += "Ctrl+";
}
if (shortcut.Modifiers.HasFlag(VirtualKeyModifiers.Shift))
{
result += "Shift+";
}
if (shortcut.Modifiers.HasFlag(VirtualKeyModifiers.Menu))
{
result += "Alt+";
}
result += (VirtualKey)shortcut.Vkey;
return result;
}
return string.Empty;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}