Grid lines in WPF ListView

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


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


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: enter image description here

Tags:

.Net

Wpf