是否可以在WPF ItemsControl中模拟边框折叠(ala CSS)? [英] Is it possible to emulate border-collapse (ala CSS) in a WPF ItemsControl?

问题描述

我正在WPF ListBox中对项目进行样式设置，并希望在每个项目周围添加边框.例如，在BorderThickness设置为1的情况下，相邻项目之间的上下边框都被绘制，因此比侧边框显得更厚"，如图所示:

I'm styling the items in a WPF ListBox, and want to put a border around each item. With BorderThickness set to 1, for example, the top-bottom borders between adjacent items are both drawn and therefore appear "thicker" than the side borders, as shown:

产生这些ListBoxItems的项目模板是:

The item template that produces these ListBoxItems is:

<DataTemplate>
  <Border BorderThickness="1" BorderBrush="DarkSlateGray" Background="DimGray" Padding="8 4 8 4">        
    <TextBlock Text="{Binding Name}" FontSize="16"/>
  </Border>
</DataTemplate>

我想折叠"这些相邻的边界，例如，通过CSS .我知道BorderThickness可以为左/右/上/下边框分别定义，但是这也会影响第一个或最后一个项目的边框，这是不希望的.

I'd like to "collapse" these adjacent borders, as one could, for example, through CSS. I'm aware that BorderThickness can be defined separately for the left/right/top/bottom borders, but this affects the border of the first or last item, as well, which is not desired.

有没有一种方法可以使用WPF做到这一点?我缺少的Border属性，还是需要使用其他方法来创建边框?

Is there a way to accomplish this with WPF? A property of Border I'm missing, or does it require a different approach to creating borders?

推荐答案

使用BorderThickness="1,0,1,1"和DataTrigger来检查RelativeSource={RelativeSource Mode=PreviousData}是否为null来设置BorderThickness="1,1,1,1":

Use BorderThickness="1,0,1,1" and a DataTrigger which checks for RelativeSource={RelativeSource Mode=PreviousData} being null to set BorderThickness="1,1,1,1":

<Window x:Class="CollapseBordersDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow" Height="239" Width="525">
  <Window.Resources>
    <x:Array x:Key="ListBoxItems" Type="{x:Type sys:String}">
      <sys:String>Alice</sys:String>
      <sys:String>Bob</sys:String>
      <sys:String>Colleen</sys:String>
    </x:Array>
    <DataTemplate x:Key="ListBoxTemplate">
      <Border x:Name="Border" BorderThickness="1,0,1,1" BorderBrush="DarkSlateGray" Background="LightGray" Padding="8 4 8 4">
        <TextBlock Text="{Binding}" FontSize="16"/>
      </Border>
      <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=PreviousData}}" Value="{x:Null}">
          <Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,1"/>
        </DataTrigger>
      </DataTemplate.Triggers>
    </DataTemplate>
  </Window.Resources>
  <Grid>
    <ListBox ItemsSource="{StaticResource ListBoxItems}" ItemTemplate="{StaticResource ListBoxTemplate}" HorizontalContentAlignment="Stretch" />
  </Grid>
</Window>

这篇关于是否可以在WPF ItemsControl中模拟边框折叠(ala CSS)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！