How to put vertical lines for listviewitem in WPF

Question

I am trying put vertical lines between the columns in ListViewItem. I Tried the solutions given. But its not working. Can anybody help me in solving this. I have created a separate style for ListViewItem. Do i need to add some property in the styles?

The code is like this

<ListView x:Key="ListView1" ItemContainerStyle="{DynamicResource ListViewItemStyle1}">
<ListView.View>
    <GridView>
        <GridViewColumn Header="{TemplateBinding GridView.ColumnCollection}">
            <GridViewColumn.CellTemplate>
                <DataTemplate>
                    <Border BorderBrush="#FF000000" BorderThickness="1,0,0,0" Margin="-6,-2,-6,-2">
                        <StackPanel Margin="6,2,6,2">
                            <TextBlock Text="{TemplateBinding Content}"/>
                        </StackPanel>
                     </Border>
                </DataTemplate>
            </GridViewColumn.CellTemplate>
        </GridViewColumn>
    </GridView>
</ListView.View>
</ListView>

literally it should work, but its not working. I am not able add vertical lines using above code..

Solution 1

Here is a short sample with a ListView and two columns. The trick is to define a DataTemplate with a border, strech the border to fill the cell (see ItemContainerStyle, Style ListViewItem, H/V-ContentAligment=Stretch) and show (in this case) the right and the bottom line (by BorderThickness="0,0,1,1"). For your case use BorderThickness="0,0,1,0"

    <ListView ItemsSource="{Binding}">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.Resources>
            <DataTemplate x:Key="NameTemplate">
                <Border BorderThickness="0,0,1,1" BorderBrush="LightGray" Margin="-6,0,-6,0">
                    <TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding Name}" VerticalAlignment="Center" TextTrimming="CharacterEllipsis"></TextBlock>
                </Border>
            </DataTemplate>
            <DataTemplate x:Key="ActualValueTemplate">
                <Border BorderThickness="0,0,1,1" BorderBrush="LightGray" Margin="-6,0,-6,0">
                    <TextBlock Name="ActualValueTextBlock" Margin="2,1,1,1" Text="{Binding TextMeasuredValue}" VerticalAlignment="Center"></TextBlock>
                </Border>
            </DataTemplate>
        </ListView.Resources>
        <ListView.View>
            <GridView>
                <GridView.Columns>
                    <GridViewColumn Header="Name" CellTemplate="{StaticResource NameTemplate}"></GridViewColumn>
                    <GridViewColumn Header="Actual Value" CellTemplate="{StaticResource ActualValueTemplate}"></GridViewColumn>
                </GridView.Columns>
            </GridView>
        </ListView.View>
    </ListView>

Edit:
I used your source code with some minor modifications:

<ListView ItemContainerStyle="{DynamicResource ListViewItemStyle1}">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="My Header">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <Border BorderBrush="#FF000000" BorderThickness="1,0,1,0" Margin="-6,-2,-6,-2">
                            <StackPanel Margin="6,2,6,2">
                                <TextBlock Text="{TemplateBinding Content}"/>
                            </StackPanel>
                        </Border>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
        </GridView>
    </ListView.View>
    <ListViewItem>Hello</ListViewItem>
    <ListViewItem>Stack</ListViewItem>
    <ListViewItem>Overflow</ListViewItem>
</ListView>

And the result is like this:

I added vertical lines on the right for better visibillity and the border is not strechted to the bounds of the cell - ok, so it looks somewhat ugly. But as you can see, it is working.

Solution 2

Try to color the background of your border to make it visible

Example:

<Border BorderBrush="#FF000000" Background="Red" BorderThickness="1,0,1,0" Margin="-6,-2,-6,-2">

If you'll see a red rectangle behind your content, than play with the values for Margin and BorderThickness for further debugging.

Comments

[Markus]

Can you see 'Content' in your TextBlock?

[Preeth]

thanks for the valueable reply. I tried using the above sample code,but verical lines did not appeared..

[Markus]

Especially my example shows vertical and horizontal Lines. It is stripped from a project. I even tried (parts) of your code. I can see a black vertical line on the left.

[Orace]

7 years later links are gone.