WPF实现点击列表项弹出附加内容下拉菜单的方法

你之前手动往ListBox里零散塞按钮和文本块的方案无法关联编号和对应内容的展开状态，直接用原生Expander控件搭配数据模板实现即可，不需要自定义复杂的行列布局逻辑。

实现要点 #

• 核心交互靠Expander控件实现，它原生支持点击头部展开/折叠内容的能力，完全匹配点击编号显示附加内容的需求
• 用ItemsControl（如果需要滚动、选中能力也可以替换为ListBox，修改下默认选中样式即可）作为问题列表容器，不要手动往容器里零散塞控件，通过数据绑定维护展开状态稳定性更高
• 每个问题项对应独立的数据模型，存储编号、附加内容、展开状态三个核心属性即可
• 如果需要匹配圆形编号按钮的视觉效果，自定义Expander的头部模板即可，不需要改动核心交互逻辑

完整实现代码 #

后端数据与逻辑代码（C#） #

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

namespace WpfExpandMenuDemo
{
    public partial class MainWindow : Window
    {
        // 问题列表数据源
        public ObservableCollection<QuestionItem> Questions { get; set; } = new ObservableCollection<QuestionItem>
        {
            new QuestionItem{ Number = 1, AddtionalContent = "这是第1个问题对应的附加说明内容"},
            new QuestionItem{ Number = 2, AddtionalContent = "这是第2个问题对应的附加说明内容"},
            new QuestionItem{ Number = 3, AddtionalContent = "这是第3个问题对应的附加说明内容"}
        };

        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
        }

        // 点击编号按钮触发展开/折叠
        private void NumberButton_Click(object sender, RoutedEventArgs e)
        {
            if (sender is FrameworkElement element && element.DataContext is QuestionItem targetItem)
            {
                targetItem.IsExpanded = !targetItem.IsExpanded;
                
                // 如果需要手风琴效果（同一时间只展开一个项），取消注释下面这段代码即可
                // foreach (var item in Questions)
                // {
                //     if (item != targetItem) item.IsExpanded = false;
                // }
            }
        }
    }

    // 问题项数据模型
    public class QuestionItem : INotifyPropertyChanged
    {
        private bool _isExpanded;
        public int Number { get; set; }
        public string AddtionalContent { get; set; }
        public bool IsExpanded
        {
            get => _isExpanded;
            set
            {
                _isExpanded = value;
                OnPropertyChanged();
            }
        }

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

前端界面代码（XAML） #

<Window x:Class="WpfExpandMenuDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="问题展开菜单" Height="450" Width="600">
    <Grid Margin="15">
        <ItemsControl ItemsSource="{Binding Questions}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Expander IsExpanded="{Binding IsExpanded}" Margin="0 6">
                        <Expander.Header>
                            <!-- 圆形编号按钮头部 -->
                            <Button Content="{Binding Number}"
                                    Click="NumberButton_Click"
                                    Width="32" Height="32"
                                    BorderBrush="#cccccc"
                                    BorderThickness="1"
                                    Background="White"/>
                        </Expander.Header>
                        <!-- 展开显示的附加内容区域 -->
                        <Border Background="#f5f5f5" 
                                Padding="12" 
                                Margin="40 2 0 0" 
                                CornerRadius="4">
                            <TextBlock Text="{Binding AddtionalContent}" 
                                       TextWrapping="Wrap"
                                       FontSize="14"/>
                        </Border>
                    </Expander>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>

自定义调整说明 #

• 编号按钮、内容区域的颜色、大小、圆角等样式，直接修改对应控件的外观属性即可，核心展开逻辑不需要改动
• 如果需要默认展开某一项，在初始化数据源时给对应QuestionItem的IsExpanded属性赋值为true即可
• 如果需要用ListBox替代ItemsControl，只要替换容器标签，再新增样式隐藏ListBoxItem默认的选中高亮背景即可

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