Grid lines in WPF ListView

Question

How can we show grid lines in the WPFListView control?

Answer 1

Try these resources - they both offer similar straightforward solutions, which I've used successfully in the past.

WPF ListView Vertical Lines (Horizontal as Bonus

How Do I Set Up Grid Lines for my ListView?

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

Answer 2

Elaborating on my comment to selected answer - (had to use -8 on the right side margin)

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

Answer 3

Implement custom GridViewRowPresenter and draw vertical lines in 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 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 details in my blog entry

Answer 4

Late answer but it might help someone:

First create a style for the celltemplate border 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 your 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 listview item container style resource as follows (i skipped binding to the listview items source in this code):

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