Grid meshes in WPF ListView

Question

How can we show grid lines in a WPFListView control?

Answer 1

Try these resources - they both offer similar simple solutions that I have successfully used in the past.

WPF ListView vertical lines (horizontal as bonus

How to adjust grid lines for my ListView?

Update: links now point to archived copies of web pages, since the pages have been inaccessible for some time

Answer 2

Embed a custom GridViewRowPresenter and draw vertical lines in the ArrangeOverride method.

protected override Size ArrangeOverride(Size arrangeSize) { var size = base.ArrangeOverride(arrangeSize); var children = Children.ToList(); EnsureLines(children.Count); for (var i = 0; i < _lines.Count; i++) { var child = children[i]; var x = child.TransformToAncestor(this).Transform(new Point(child.ActualWidth, 0)).X + child.Margin.Right; var rect = new Rect(x, -Margin.Top, 1, size.Height + Margin.Top + Margin.Bottom); var line = _lines[i]; line.Measure(rect.Size); line.Arrange(rect); } return size; } 

Then use this for the ListViewItem template.

  <ListView.ItemContainerStyle> <Style TargetType="{x:Type ListViewItem}"> <Setter Property="Margin" Value="2,0,0,0"/> <Setter Property="Padding" Value="0,2"/> <Setter Property="BorderBrush" Value="LightGray"/> <Setter Property="BorderThickness" Value="0,0,0,1"/> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ListViewItem}"> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"> <GridLines:GridViewRowPresenterWithGridLines Columns="{TemplateBinding GridView.ColumnCollection}" Margin="{TemplateBinding Padding}" /> </Border> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/> </Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/> </Trigger> </Style.Triggers> </Style> </ListView.ItemContainerStyle> 

See my blog post for more details.

Answer 3

Late answer, but it might help someone:

First create a style for the celltemplate as follows:

  <Style x:Key="BorderStyle" TargetType="{x:Type Border}"> <Setter Property="BorderThickness" Value="0,0,1,0"></Setter> <Setter Property="BorderBrush" Value="Black"></Setter> <Setter Property="Margin" Value="0,0,-7,0"></Setter> </Style> <DataTemplate x:Key="_SomeColumnCellTemplate"> <Border Style="{StaticResource BorderStyle}"> <DockPanel Margin="5,0,0,0"> <TextBlock Text="{Binding Name}" Margin="5,0,0,0"/> </DockPanel> </Border> </DataTemplate> 

and then set the itemcontainer style as follows:

  <Style x:Key="_ItemContainerStyle" TargetType="{x:Type ListViewItem}"> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="VerticalContentAlignment" Value="Stretch" /> </Style> 

and finally reference your resource like the container of the listview list item as follows (I missed the binding to the source of the list items in this code):

 <ListView ItemContainerStyle="{StaticResource _ListViewItemContainerStyle}"> <ListView.View> <GridView> <GridViewColumn Header="SomeName" CellTemplate="{StaticResource _SomeColumnCellTemplate}"/> </GridView> </ListView.View> </ListView> 

Answer 4

Develop my comment on the selected answer - (you had to use -8 from the right edge)

 <ListView HorizontalContentAlignment="Stretch" BorderBrush="Gray" BorderThickness="1" ItemsSource="{Binding FileList}" SelectedItem="{Binding FileSelected, Mode=TwoWay}" > <ListView.Resources> <DataTemplate x:Key="VerTemplate"> <Border BorderBrush="Gray" BorderThickness="1,0,0,0" Margin="-6,-2,-8,-2"> <StackPanel Margin="6,2,6,2"> <TextBlock Text="{Binding SFVer}" HorizontalAlignment="Center" TextAlignment="Center" /> </StackPanel> </Border> </DataTemplate> <DataTemplate x:Key="FOTemplate"> <Border BorderBrush="Gray" BorderThickness="1,0,0,0" Margin="-6,-2,-8,-2"> <StackPanel Margin="6,2,6,2"> <TextBlock Text="{Binding SFFO}" HorizontalAlignment="Center" TextAlignment="Center" /> </StackPanel> </Border> </DataTemplate> <!-- etc. --> </ListView.Resources> <ListView.ItemContainerStyle> <Style TargetType="ListViewItem"> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="BorderBrush" Value="Gray"></Setter> <Setter Property="BorderThickness" Value="0,0,0,1"></Setter> </Style> </ListView.ItemContainerStyle> <ListView.View> <GridView AllowsColumnReorder="False"> <GridView.Columns> <GridViewColumn CellTemplate="{StaticResource VerTemplate}"/> <GridViewColumn CellTemplate="{StaticResource FOTemplate}"/> <!-- etc. --> </GridView.Columns> </GridView> </ListView.View> </ListView> 

Result: