XAML 在 ListBox 中使用 MVVM 模式时混入自定义布局

问题

在 XAML 中使用了 MVVM 的模式实现布局切换，所以在 ListBox 中设置了每个 item 的模板，源码大概是这样子：

<ListBox>
    <ListBox.ItemTemplate>
        <DataTemplate DataType="app:ItemDemo">
            
        DataTemplate>
    <ListBox.ItemTemplate>
    
ListBox>

愉快地实现后，想在 Feedback 和 About 菜单之间加个分割条：

因为设置了 item 模板，所以直接加入到列表是没有效果的。

解决方案

这里使用 ItemContainerStyle 来实现。当窗口绘制时都会调用 ItemContainerStyle 来渲染每个 item，所以可以结合 Trigger 判断某个值以便替换不同的视图模板（如果不是很清楚建议先搜索 Style、Trigger、Setter）：

<ListBox.ItemContainerStyle>
    
    <Style BasedOn="{ StaticResource MaterialDesignListBoxItem }">
        <Style.Triggers>
            -- 注意这里绑定的应该是你 item 数据对象的某个属性 -->
            -- 通过这个值来判断是否替换默认视图模板 -->
            -- {x:Null} 是系统命名空间中提供的 NULL 值 -->
            <DataTrigger Binding="{Binding Content}" Value="{x:Null}">
                -- 指定 ListBoxItem.Control.Template 的值，在 ControlTemplate 类型下包裹你的视图 -->
                <Setter Property="Control.Template">
                    <Setter.Value>
                        <ControlTemplate>
                            -- I am here. -->
                            <Separator Margin="8" />
                        ControlTemplate>
                    Setter.Value>
                Setter>
                -- 因为是分割线，所以禁用其点击响应 -->
                <Setter Property="IsEnabled" Value="False" />
            DataTrigger>
        Style.Triggers>
    Style>
ListBox.ItemContainerStyle>

之后在列表项目中将某个 item 的字段调为 NULL 即可：

...
"{x:Null}" />
...

最终画完一条万恶的分割线：

吐槽

笔者是 Google 几小时总结来的（怪我 Orz）