Text separator between ListView in WPF

Question

I'm trying to get the following from a ListView:

Text | Text | Text

I've already achieved the vertical orientation by the following

<ItemsPanelTemplate><StackPanel Orientation="Horizontal"/></ItemsPanelTemplate>

Each part(Text) is a TextBlock bound to a string in MVVM. Preferably the lines between should just be regular vertical bars.

Any tips for achieving these vertical bars as specified??

What is your current problem? What is your current result and how does it differ from what you expect? — Federico Berasategui, Dec 02 '13 at 18:44
Don't have a current result, as I can't think of a recursive way to have vertical lines as specified, without either starting with or ending with a vertical line — Christian Cederquist, Dec 02 '13 at 18:53
possible duplicate of [How can a separator be added between items in an ItemsControl](http://stackoverflow.com/questions/2511227/how-can-a-separator-be-added-between-items-in-an-itemscontrol) — Rohit Vats, Dec 03 '13 at 06:28

score 2 · Accepted Answer · edited May 23 '17 at 11:49

Duplicate of How can a separator be added between items in an ItemsControl, try this:

<ItemsControl Name="theListBox">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock x:Name="seperator" Text=" | "/>
                    <TextBlock Text="{Binding}"/>
                </StackPanel>
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
                        <Setter Property="Visibility" TargetName="seperator" Value="Collapsed"/>
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

score 0 · Answer 2 · answered Dec 02 '13 at 19:53

In case you have achieved to show separator in between two items, you can have a converter say LastItemInContainerToVisibilityConverter which will be binded to the visibility of separator making separator collapsed for last item and visible for all other items.

Assuming you have used Rectangle to show the seperation between items -

<ItemsControl.ItemTemplate>
   <DataTemplate>
      <StackPanel Orientation="Horizontal">
         <TextBlock Text="{Binding}"/>
         <Rectangle Visibility="{Binding RelativeSource={RelativeSource
                                   Mode=FindAncestor, AncestorType=ListViewItem},
                                  Converter={StaticResource 
                                   LastItemInContainerToVisibilityConverter}}"/>
       </StackPanel>
   </DataTemplate>
</ItemsControl.ItemTemplate>

Here goes your converter which will return if it's last item in collection -

public class LastItemInContainerToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter,
                          CultureInfo culture)
    {
       DependencyObject item = (DependencyObject)value;
       ItemsControl ic = ItemsControl.ItemsControlFromItemContainer(item);

       return (ic.ItemContainerGenerator.IndexFromContainer(item)
            == ic.Items.Count - 1) ? Visibility.Collapsed : Visibility.Visible;
    }

    public object ConvertBack(object value, Type targetType, object parameter,
                              CultureInfo culture)
    {
       throw new NotImplementedException();
    }
}

Text separator between ListView in WPF

2 Answers2