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

最新推荐文章于 2025-05-15 08:00:00 发布

soxfmr

最新推荐文章于 2025-05-15 08:00:00 发布

阅读量994

点赞数

CC 4.0 BY-SA版权

分类专栏：日常文章标签： WPF mvvm xaml listbox

本文链接：https://blog.youkuaiyun.com/soxfmr/article/details/49752961

日常专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在XAML中使用MVVM模式时，在ListBox中遇到的混入自定义布局的问题。通过设置ItemContainerStyle和利用Trigger判断，实现了在Feedback和About菜单之间插入分割条的效果。解决方案中详细解释了如何利用Style、Trigger和Setter来替换视图模板，以达到预期的布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

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

<ListBox>
    <ListBox.ItemTemplate>
        <DataTemplate DataType="app:ItemDemo">
            <!--Your item layout here blabla-->
        </DataTemplate>
    <ListBox.ItemTemplate>
    <!-- item list -->
</ListBox>

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

这里写图片描述

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

解决方案

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

<ListBox.ItemContainerStyle>
    <!-- BaseOn 用于设置渲染样式继承 -->
    <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 即可：

...
<app:DemoItem Content="{x:Null}" />
...

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

这里写图片描述

吐槽

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