WPF-样式问题-ListBox或ListView中子项全填充去除边线问题

解决自定义集合控件样式间隙问题

最新推荐文章于 2024-09-27 17:57:29 发布

原创最新推荐文章于 2024-09-27 17:57:29 发布 · 3.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#wpf #c#

随笔同时被 3 个专栏收录

30 篇文章

订阅专栏

WPF/XAML

18 篇文章

订阅专栏

技术总结

17 篇文章

订阅专栏

在自定义集合类控件样式时，经常遇到子项样式未能全填充的问题，表现为存在细微的线条或空白间隙。通过分析，发现子项右侧存在约1像素的间距。为了解决这个问题，可以重写ListView的Template，移除默认布局。具体操作是将每个ListViewItem直接放置在ListView内，并设置适当的模板，以此实现子项全填充的效果。

文章目录

- 一、场景
- 二、解决方案

一、场景

对于自定义集合类控件样式时，经常会遇到的一个问题就是，定义好子项样式后，添加到集合控件中时，发现和实际设计的样式存在细节偏差，子项并没有能够按照预期方式实现全填充，存在着部分的线条或者空白间隙。

原始xaml

<ListView SelectedIndex="0">
    <ListViewItem local:ControlExtensions.Data="{StaticResource bingren}" Content="病人管理"/>
    <ListViewItem local:ControlExtensions.Data="{StaticResource chuangwei}" Content="床位管理"/>
    <ListViewItem local:ControlExtensions.Data="{StaticResource yihu}" Content="医护管理"/>
    <ListViewItem local:ControlExtensions.Data="{StaticResource baobiao}" Content="报表管理"/>
    <ListViewItem local:ControlExtensions.Data="{StaticResource shebei}" Content="设备管理"/>
    <ListViewItem local:ControlExtensions.Data="{StaticResource xitong}" Content="系统设置"/>
    <!--<ListView.Template>
        <ControlTemplate>
            <ItemsPresenter></ItemsPresenter>
        </ControlTemplate>
    </ListView.Template>-->
</ListView>

运行效果：

WPF-ListView-Border

去除Border，设置BorderThickness宽度为0

<ListView SelectedIndex="0" BorderThickness="0">
   ......
</ListView>

运行效果：

WPF-ListView-Border-0

二、解决方案

实际通过比较可以发现，子项的右端存在着一个间距大约一个像素的间隙，内部子项并不是全填充，然后就遇到现在的问题，如何让子项全填充？一下为笔者找到的最佳方案-----重写ListView对应的Template，剔除控件自身的默认布局，以下为具体方案：

重写ListBox或ListView对应的Template：

<ListView>
    <ListViewItem IsSelected="True" local:ControlExtensions.Data="{StaticResource xitong}" Content="系统设置"/>
    <ListView.Template>
        <ControlTemplate>
            <ItemsPresenter></ItemsPresenter>
        </ControlTemplate>
    </ListView.Template>
</ListView>

运行效果：

WPF-ListView-Template