Có thể mô phỏng sự sụp đổ biên giới (ala CSS) trong WPF ItemsControl không?

Question

Tôi đang tạo kiểu cho các mục trong WPF ListBox và muốn đặt đường viền quanh mỗi mục. Với BorderThickness thiết lập để 1, ví dụ, biên giới trên dưới giữa các mục liền kề đều được rút ra và do đó xuất hiện "dày" hơn so với biên giới phía, như:

Mục mẫu mà sản xuất những ListBoxItems là:

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

Tôi muốn "thu gọn" các đường viền liền kề này, như có thể, ví dụ: through CSS. Tôi biết rằng BorderThickness có thể được xác định riêng cho đường biên trái/phải/trên/dưới, nhưng điều này cũng ảnh hưởng đến đường viền của mục đầu tiên hoặc cuối cùng, điều này không được mong muốn.

Có cách nào để thực hiện việc này với WPF không? Tài sản của Border Tôi bị thiếu hoặc có yêu cầu một cách tiếp cận khác để tạo biên giới không?

Answer 1

Sử dụng BorderThickness="1,0,1,1" và DataTrigger mà kiểm tra cho RelativeSource={RelativeSource Mode=PreviousData} phúc null để đặt 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

Một điều bạn cần lưu ý là sử dụng AlternationIndex. Điều này sẽ yêu cầu bạn thiết lập một cái gì đó như AlternationCount="10000" trên ListBox. Sau đó bạn có thể đặt BorderThickess="1,0,1,1" và sử dụng một DataTrigger để tìm ListBoxItem đầu tiên

<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

Bạn có thể thêm

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

định nghĩa biên giới