Line separator in DataTemplate for ListView

Question

I have ItemsControl with bindable itemsource and custom datetemplate for each item. Items are separated by line. But last item has separator too, and that's my problem, how to not render line for last item. I've found this solution, but it's working in WPF:

How can a separator be added between items in an ItemsControl

EDIT: Here is my template:

<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>

Decade Moon · Answer 1 · 2016-10-24T13:20:17.880

There's probably a few different ways of doing this, here's my take.

Style your ListView's item containers with the border brush and thickness you want to have, and subscribe to the ContainerContentChanging event:

<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>

In your code behind:

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);
    }
}

I decided on this approach for a few reasons:

It makes sense to apply the border style to the ListViewItem instead of within the ItemTemplate because it will be the same for all items in the list regardless of which item template is used for a particular item. Also, it will ensure that the line touches the very left and right edge of the ListView.
The visual appearance of the separators can be adjusted in XAML. The code-behind can be put into a behavior (or subclass the ListView) if you want to reuse it.
It will maintain the correct appearance even when items are added/removed from the list, or when items are reordered.
It works correctly with UI virtualization.
It is independent of the data bound to the list view.

EDIT

It looks like you meant for an ItemsControl, not a ListView. If that's the case, then you'd have to do something along Depechie's answer because ItemsControl doesn't have the ContainerContentChanging event (subclass ItemsControl and override PrepareContainerForItemOverride instead), but this likely won't work for dynamic lists with items added and removed at runtime. You'd have to experiment with different solutions if this is important to you.

score 1 · Answer 2 · answered Oct 24 '16 at 14:21

I solved my problem this way:

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;
    }

What do you think?

score 0 · Answer 3 · answered Oct 24 '16 at 11:53

0

Maybe it's better to put the seperator on top because that will be easier to detect instead of knowing the last element. Putting it on top will result in 1 line to much for the first item, to resolve this add a binding on the visibility property of the seperator, using a converter. You pass along the item index and if the item index is 1 hide the seperator, otherwise show it.

To get the index of an item, look at an example here: http://www.bendewey.com/index.php/523/alternating-row-color-in-windows-store-listview

answered Oct 24 '16 at 11:53

Depechie

6,102
24
46

That's good solution. But ItemsControl does not have index property – JuP Oct 24 '16 at 12:57
You are talking about a ListView? In the PrepareContainerForItemOverride method you just need to call the IndexFromContainer method to get the index for the current item... if it is not a ListView, please add some code / xaml so we can see and not assume.... – Depechie Oct 24 '16 at 13:02
I'm talking about ItemsControl – JuP Oct 24 '16 at 13:08
So the first sentence of your question "I have **Listview** with bindable itemsource and custom..."is not correct? – Depechie Oct 24 '16 at 13:09
Oh, sorry, my fault. I use ItemsControl – JuP Oct 24 '16 at 13:11

score -3 · Answer 4 · answered Jun 04 '18 at 13:30

-3

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

answered Jun 04 '18 at 13:30

guest

115
1
2

5

You should explain your answer more in-depth so that others can understand why this works. – rst-2cv Jun 04 '18 at 13:56

Line separator in DataTemplate for ListView

4 Answers4