是否可以在WPF ItemsControl中模拟border-collapse（ala CSS）？

Question

我正在为WPF ListBox中的项目设置样式，并希望在每个项目周围添加边框。例如，如果将BorderThickness设置为1，则相邻项目之间的上下边框都会被绘制，因此显示为比边框边缘“更厚”，如下所示：

生成这些ListBoxItems的项目模板是：

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

我想“折叠”这些相邻的边界，例如，through CSS。我知道可以为左/右/上/下边框单独定义BorderThickness，但这也会影响第一个或最后一个项目的边框，这是不可取的。

有没有办法用WPF实现这一目标？ Border我失踪的属性，还是需要采用不同的方法来创建边界？

Answer 1

使用BorderThickness="1,0,1,1"和DataTrigger检查RelativeSource={RelativeSource Mode=PreviousData} null来设置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>

Answer 2

想到的一件事是使用AlternationIndex。这将要求您在ListBox上设置类似AlternationCount="10000"的内容。之后，您可以设置BorderThickess="1,0,1,1"并使用DataTrigger查找第一个ListBoxItem

<DataTemplate>
  <Border x:Name="border" BorderThickness="1,0,1,1" BorderBrush="DarkSlateGray" Background="DimGray" Padding="8 4 8 4">        
    <TextBlock Text="{Binding Name}" FontSize="16"/>
  </Border>
  <DataTemplate.Triggers>
    <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}},
                                   Path=(ItemsControl.AlternationIndex)}"
                 Value="0">
      <Setter TargetName="border" Property="BorderThickness" Value="1,1,1,1"/>
    </DataTrigger>
  </DataTemplate.Triggers>
</DataTemplate>

Answer 3

您可以添加

 Margin="0,0,0,-1" SnapsToDevicePixels="True"

到边界定义