CODEWITHSUNDEEP
wpfxamllistview
Christian Cederquist
Christian Cederquist

Reputation: 513

Text separator between ListView in WPF

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

Upvotes: 1

Views: 2497

Answers (2)

Mark Feldman
Mark Feldman

Reputation: 16119

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>

Upvotes: 2

Rohit Vats
Rohit Vats

Reputation: 81243

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

Upvotes: 0

Related Questions