ListView 的 DataTemplate 中的行分隔符

Question

我有 ItemsControl，每个项目都有可绑定的 itemsource 和自定义日期模板。项目由行分隔。但是最后一项也有分隔符，这就是我的问题，如何不为最后一项呈现线。我找到了这个解决方案，但它在 WPF 中工作：

How can a separator be added between items in an ItemsControl

编辑： 这是我的模板：

<ItemsControl Grid.Row="1"  ItemsSource="{x:Bind ViewModel.AvailableStatuses}" x:Name="Statuses">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Vertical" Padding="60,0,60,12"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Grid Background="Transparent">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <i:Interaction.Behaviors>
                                    <core:EventTriggerBehavior EventName="Tapped">
                                        <core:InvokeCommandAction Command="{Binding ElementName=ContentGrid, Path=DataContext.ChangeStatusCommand}" CommandParameter="{Binding}"/>
                                    </core:EventTriggerBehavior>
                                </i:Interaction.Behaviors>
                                <Rectangle StrokeThickness="0.4" Height="0.4" x:Name="Separator" 
                                   VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Stroke="#D1D3D4" />
                                <StackPanel Orientation="Horizontal" Grid.Row="1" HorizontalAlignment="Stretch">
                                    <Image Source="{Binding Converter={StaticResource SelectContactStatusConverter}}" Margin="0,8,12,8"/>
                                    <TextBlock Text="{Binding Converter={StaticResource EnumContactStatusToTextConverter}}" FontSize="20" VerticalAlignment="Center" Foreground="Black"/>
                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>

Answer 1

也许最好将分隔符放在最上面，因为这样比知道最后一个元素更容易检测到。 将其放在顶部将导致第一项的 1 行多，要解决此问题，请使用转换器在分隔符的可见性属性上添加绑定。 您传递项目索引，如果项目索引为 1，则隐藏分隔符，否则显示。

要获取项目的索引，请查看此处的示例：http://www.bendewey.com/index.php/523/alternating-row-color-in-windows-store-listview

Answer 2

可能有几种不同的方法可以做到这一点，这是我的看法。

使用您想要的边框画笔和粗细设置您的 ListView 项目容器的样式，并订阅 ContainerContentChanging 事件：

<ListView ContainerContentChanging="ListView_ContainerContentChanging">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="BorderThickness" Value="0,1,0,0"/>
        </Style>
    </ListView.ItemContainerStyle>

    <x:String>1</x:String>
    <x:String>2</x:String>
    <x:String>3</x:String>
    <x:String>4</x:String>
</ListView>

在你的代码后面：

private void ListView_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
{
    if (args.InRecycleQueue)
    {
        // Item is being recycled, make sure first item has no border
        if (args.ItemIndex == 0)
        {
            var first = (ListViewItem)sender.ContainerFromIndex(0);
            if (first != null)
            {
                first.BorderThickness = new Thickness(0);
            }
        }
    }
    else if (args.ItemIndex == 0)
    {
        // A new first item
        ((ListViewItem)args.ItemContainer).BorderThickness = new Thickness(0);

        var second = (ListViewItem)sender.ContainerFromIndex(1);
        if (second != null)
        {
            second.ClearValue(BorderThicknessProperty);
        }
    }
    else
    {
        // A new internal item
        ((ListViewItem)args.ItemContainer).ClearValue(BorderThicknessProperty);
    }
}

我决定采用这种方法有几个原因：

• 将边框样式应用于 ListViewItem 而不是在 ItemTemplate 中是有意义的，因为无论哪个项目模板用于特定项目，它对于列表中的所有项目都是相同的。此外，它会确保线条接触到 ListView 的最左右边缘。
• 可以在 XAML 中调整分隔符的视觉外观。如果您想重用代码隐藏，可以将其放入行为（或 ListView 的子类）中。
• 即使在列表中添加/删除项目或重新排序项目时，它也会保持正确的外观。
• 它可以与 UI 虚拟化一起正常工作。
• 它独立于绑定到列表视图的数据。

---

编辑

看起来您的意思是要使用 ItemsControl，而不是 ListView。如果是这种情况，那么您必须按照 Depechie 的回答做一些事情，因为 ItemsControl 没有 ContainerContentChanging 事件（子类 ItemsControl 并覆盖 PrepareContainerForItemOverride 代替），但这可能不适用于添加和删除项目的动态列表运行。如果这对您很重要，您必须尝试不同的解决方案。

Answer 3

我这样解决了我的问题：

private void Statuses_OnLoaded(object sender, RoutedEventArgs e)
    {
        var s = (ItemsControl) sender;
        var container = s.ContainerFromIndex(0);
        var element = container.FindChildren<Rectangle>("Separator");
        element.Visibility = Visibility.Collapsed;
    }

你怎么看？

Answer 4

<ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>