WPF ListView实现动态数字弹出式访问键并切换IsSelected

核心思路 #

要实现类似Outlook的弹出式数字访问键，需要拆分三个核心功能：隐藏Item内的访问键标签、Alt触发弹出数字提示层、数字键切换Item选中状态。以下是完整实现方案：

1. XAML结构调整 #

移除原代码中显示访问键的Label，新增一个覆盖在ListView上方的弹出提示层（默认隐藏），用于显示数字访问键：

<Grid>
    <!-- 原有ListView保留，移除访问键Label -->
    <ListView x:Name="MyListView" ItemsSource="{Binding Items}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <!-- 保留绑定IsSelected的隐藏ToggleButton -->
                    <ToggleButton x:Name="tb" Visibility="Hidden" 
                                  IsChecked="{Binding RelativeSource={RelativeSource AncestorType=ListViewItem}, Path=IsSelected}"/>
                    <Label HorizontalAlignment="Center" Content="{Binding ItemName}" />
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

    <!-- 弹出访问键提示层，默认折叠 -->
    <ItemsControl x:Name="AccessKeyOverlay" 
                  ItemsSource="{Binding Items}"
                  Visibility="Collapsed"
                  Panel.ZIndex="100">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <!-- 模拟Outlook的数字提示样式 -->
                <Border Background="#FF333333" Foreground="White" 
                        Padding="3 1" CornerRadius="2"
                        FontSize="12">
                    <TextBlock Text="{Binding AccessKey}" />
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas /> <!-- 用Canvas实现自由定位 -->
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <!-- 绑定数字提示的位置 -->
                <Setter Property="Canvas.Left" Value="{Binding AccessKeyLeft}" />
                <Setter Property="Canvas.Top" Value="{Binding AccessKeyTop}" />
            </Style>
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>
</Grid>

2. 数据模型扩展 #

给每个列表项添加访问键属性和位置属性，用于绑定弹出层的数字和坐标：

using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Collections.ObjectModel;

public class ListItemViewModel : INotifyPropertyChanged
{
    private string _itemName;
    public string ItemName
    {
        get => _itemName;
        set { _itemName = value; OnPropertyChanged(); }
    }

    private int _accessKey;
    public int AccessKey
    {
        get => _accessKey;
        set { _accessKey = value; OnPropertyChanged(); }
    }

    private double _accessKeyLeft;
    public double AccessKeyLeft
    {
        get => _accessKeyLeft;
        set { _accessKeyLeft = value; OnPropertyChanged(); }
    }

    private double _accessKeyTop;
    public double AccessKeyTop
    {
        get => _accessKeyTop;
        set { _accessKeyTop = value; OnPropertyChanged(); }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propName = null)
        => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
}

public class MainViewModel
{
    public ObservableCollection<ListItemViewModel> Items { get; } = new();

    public MainViewModel()
    {
        // 初始化示例数据，自动分配1开始的数字访问键
        for (int i = 0; i < 10; i++)
        {
            Items.Add(new ListItemViewModel
            {
                ItemName = $"列表项 {i+1}",
                AccessKey = i+1
            });
        }
    }
}

3. 后台逻辑实现 #

处理键盘事件（Alt触发显示、数字键切换选中、Esc取消），并计算弹出数字的位置：

using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Linq;

public partial class MainWindow : Window
{
    private MainViewModel _vm;
    private bool _accessKeysActive;

    public MainWindow()
    {
        InitializeComponent();
        _vm = new MainViewModel();
        DataContext = _vm;
        
        // 绑定键盘事件
        PreviewKeyDown += OnPreviewKeyDown;
        PreviewKeyUp += OnPreviewKeyUp;
        // 监听ListView布局变化，更新提示位置
        MyListView.LayoutUpdated += OnListViewLayoutUpdated;
    }

    private void OnPreviewKeyDown(object sender, KeyEventArgs e)
    {
        if (e.Key is Key.LeftAlt or Key.RightAlt)
        {
            // 按下Alt，激活访问键模式
            _accessKeysActive = true;
            UpdateAccessKeyPositions();
            AccessKeyOverlay.Visibility = Visibility.Visible;
            e.Handled = true;
        }
        else if (_accessKeysActive && e.Key is >= Key.D1 and <= Key.D9)
        {
            // 按下数字键，切换对应项选中状态
            int keyNum = e.Key - Key.D0;
            var targetItem = _vm.Items.FirstOrDefault(item => item.AccessKey == keyNum);
            if (targetItem != null)
            {
                var listItem = MyListView.ItemContainerGenerator.ContainerFromItem(targetItem) as ListViewItem;
                if (listItem != null)
                {
                    listItem.IsSelected = !listItem.IsSelected;
                }
            }
            // 关闭访问键模式
            ExitAccessKeyMode();
            e.Handled = true;
        }
        else if (_accessKeysActive && e.Key == Key.Escape)
        {
            // 按Esc取消访问键模式
            ExitAccessKeyMode();
            e.Handled = true;
        }
    }

    private void OnPreviewKeyUp(object sender, KeyEventArgs e)
    {
        if (_accessKeysActive && e.Key is Key.LeftAlt or Key.RightAlt)
        {
            // 释放Alt，关闭访问键模式
            ExitAccessKeyMode();
            e.Handled = true;
        }
    }

    private void UpdateAccessKeyPositions()
    {
        // 计算每个ListItem在弹出层中的坐标
        var overlayTransform = AccessKeyOverlay.TransformToVisual(this);
        for (int i = 0; i < _vm.Items.Count; i++)
        {
            var listItem = MyListView.ItemContainerGenerator.ContainerFromIndex(i) as ListViewItem;
            if (listItem == null) continue;

            // 获取ListItem在窗口中的绝对位置
            var itemPoint = listItem.TransformToVisual(this).Transform(new Point(0, 0));
            // 转换为弹出层Canvas的相对坐标
            var overlayPoint = overlayTransform.InverseTransform(itemPoint);
            
            // 设置提示数字在ListItem左上角偏移5px的位置
            _vm.Items[i].AccessKeyLeft = overlayPoint.X + 5;
            _vm.Items[i].AccessKeyTop = overlayPoint.Y + 5;
        }
    }

    private void OnListViewLayoutUpdated(object sender, System.EventArgs e)
    {
        // 布局变化时（如滚动），更新提示位置
        if (_accessKeysActive) UpdateAccessKeyPositions();
    }

    private void ExitAccessKeyMode()
    {
        _accessKeysActive = false;
        AccessKeyOverlay.Visibility = Visibility.Collapsed;
    }
}

关键细节说明 #

• 访问键隐藏：移除了原代码中显示_1的Label，改用独立的弹出层显示数字，完全不影响ListItem的原有布局。
• 弹出层定位：通过Canvas和坐标转换，确保数字提示精准对应每个ListItem的位置，滚动ListView时会自动更新位置。
• 键盘逻辑：仅在Alt键激活后响应数字键，避免干扰正常输入；支持Esc键取消模式，提升用户体验。

内容的提问来源于stack exchange，提问作者user18636778