如何在WPF ListBox中添加分组表头 适配MaterialDesign主题

方案一：静态硬编码方案（适配你当前写死菜单的场景） #

你直接使用MaterialDesign主题自带的导航列表头样式MaterialDesignNavigationItemHeader即可，该样式默认不可选中、自带加粗放大效果，和你的现有主题完全适配，无需额外自定义样式，代码改动量极小：

<ListBox 
    x:Name="ItemsListBox" 
    Margin="0 16 0 16"
    Style="{StaticResource MaterialDesignNavigationPrimaryListBox}">
    <ListBox.Resources>
        <Style TargetType="ScrollBar" BasedOn="{StaticResource MaterialDesignScrollBarMinimal}"/>
    </ListBox.Resources>
    <!-- Config分组表头 -->
    <ListBoxItem Style="{StaticResource MaterialDesignNavigationItemHeader}" Content="Config"/>
    <Separator/>
    <ListBoxItem>Config menu 1</ListBoxItem>
    <ListBoxItem>Config menu 2</ListBoxItem>
    <ListBoxItem>Config menu 3</ListBoxItem>
    <ListBoxItem>Config menu 4</ListBoxItem>
    <ListBoxItem>Config menu 5</ListBoxItem>
    <ListBoxItem>Config menu 6</ListBoxItem>
    <ListBoxItem>Config menu 7</ListBoxItem>
    <!-- Tasks分组表头 -->
    <ListBoxItem Style="{StaticResource MaterialDesignNavigationItemHeader}" Content="Tasks"/>
    <Separator/>
    <ListBoxItem>Task menu 1</ListBoxItem>
    <ListBoxItem>Task menu 2</ListBoxItem>
    <ListBoxItem>Task menu 3</ListBoxItem>
    <ListBoxItem>Task menu 4</ListBoxItem>
    <ListBoxItem>Task menu 5</ListBoxItem>
    <ListBoxItem>Task menu 6</ListBoxItem>
    <ListBoxItem>Task menu 7</ListBoxItem>
    <Separator/>
</ListBox>

该方案的优势：

• 完全不需要修改你现有DrawerHost的整体结构
• 表头默认无选中交互，不会和普通菜单项的点击逻辑冲突
• 样式原生适配MaterialDesign主题，符合你要的加粗、大号字体分组效果

方案二：动态绑定方案（适配后续菜单需要动态生成的场景） #

如果后续你的菜单需要从ViewModel动态加载，可以使用WPF原生的CollectionView分组功能实现：

1. 首先在ViewModel层定义菜单项类，给每个菜单项添加GroupName属性标识所属分组
2. 给ListBox添加GroupStyle指定表头模板即可：

<ListBox.GroupStyle>
    <GroupStyle>
        <GroupStyle.HeaderTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Name}" 
                           FontWeight="Bold" 
                           FontSize="14" 
                           Margin="16 8 16 4"/>
            </DataTemplate>
        </GroupStyle.HeaderTemplate>
    </GroupStyle>
</ListBox.GroupStyle>

如果你不需要菜单的选中高亮逻辑，也可以直接把ListBox替换为更轻量的ItemsControl控件，同样可以实现上述分组效果。

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