It all started half year ago, after the Japanese (customer of my customer) UI designer sent a photo of how a ListView should look like. First we though: "Piece of Cake, WPF...", then we saw the weird, annoying vertical-lines that stuck in the middle of nowhere... So we decided to provide a solution later :-)
Did you notice that neither WPF ListView (using a GridView as its view) nor custom grids such as Infragistics, Xceed, etc, provide an out-of-the-box vertical lines?
Download this code from here.
Starting by digging inside the complicated WPF ListView/GridView template and style, I didn't find any native option to draw my lines.
Why? Because the ListView/GridView is composed with several helper-controls which are decoupled from each other. In this case, the header part is rendered by the GridViewHeaderRowPresenter and the rows part is rendered by the ScrollContentPresenter.
To overcome this problem, without writing a custom GridViewHeaderRowPresenter I hooked into the ScrollContentPresenter by changing its content to Grid with ContentControl for the original content (rows), and ItemsControl with a Data Tenmplate to draw each column with a border.
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
ContentTemplate="{TemplateBinding ContentTemplate}"
KeyboardNavigation.DirectionalNavigation="Local"
CanContentScroll="{TemplateBinding CanContentScroll}">
<ScrollContentPresenter.Content>
<Grid>
<!-- Container of vertical and horizontal lines -->
<ItemsControl Margin="3,0,0,0"
ItemsSource="{Binding Path=TemplatedParent.View.Columns,
RelativeSource={RelativeSource TemplatedParent}}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Width="{Binding Path=ActualWidth}"
BorderThickness="0,0,1,0"
BorderBrush="{DynamicResource verticalLineColor}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- Fill background with horizontal lines -->
<ItemsControl.Background>
<VisualBrush TileMode="Tile"
Stretch="None"
Viewport="{Binding Source={StaticResource columnHeight},
Converter={StaticResource columnViewportConverter}}"
ViewportUnits="Absolute">
<VisualBrush.Visual>
<StackPanel HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<!-- Add Rectangles here for more horizontal lines -->
<Rectangle Height="{DynamicResource columnHeight}"
VerticalAlignment="Stretch"
Fill="{DynamicResource horizontalLineColor1}"
Width="1" />
<Rectangle Height="{DynamicResource columnHeight}"
VerticalAlignment="Stretch"
Fill="{DynamicResource horizontalLineColor2}"
Width="1" />
</StackPanel>
</VisualBrush.Visual>
</VisualBrush>
</ItemsControl.Background>
</ItemsControl>
<ContentControl Content="{TemplateBinding Content}" />
</Grid>
</ScrollContentPresenter.Content>
</ScrollContentPresenter>
As a bonus, I have added multi colors horizontal-lines all the way down (not only for items in the ListView) as a background brush, which is not the standard solution you are used to.
Enjoy by download this code from here.