Thursday, January 8, 2009

Displaying grid lines

Sometimes when laying out a Grid control in WPF you need to add grid lines to identify rows and columns. The Grid control does expose a propery called ShowGridLines, but you have no control over the appearence of the lines. According to the documentation this property is only provided for debugging purposes and should not be used in production applications.

Having face this problem myself I came up with a set of styles that could be used to produce grid lines.

There are three main aspects that makes these styles work.
  1. Line.Stretch is set to fill. 
  2. For horizontal lines the VerticalAlignment of the line is set Bottom, and for VerticalLines the HorizontalAlignment is set to Right.
  3. The line how many rows or columns to span, this is done by binding to either RowDefinitions or ColumnDefintions Count property.
You can download the full source from here.

EDIT:
Sample updated to display the grid lines at the top and side of the grid.

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    >
    <Style x:Key="lineStyle" TargetType="Line">
        <Setter Property="Stroke" Value="Gray" />
        <Setter Property="Stretch" Value="Fill" />
        <Setter Property="Grid.ZIndex" Value="100" />
        <Setter Property="StrokeDashArray" Value="1,2" />
    </Style>

    <Style x:Key="horizontalLineStyle" TargetType="Line" BasedOn="{StaticResource lineStyle}">
        <Setter Property="X2" Value="1" />
        <Setter Property="VerticalAlignment" Value="Bottom" />
        <Setter Property="Grid.ColumnSpan" Value="{Binding 
            Path=ColumnDefinitions.Count, RelativeSource={RelativeSource AncestorType=Grid}}"/>
    </Style>

    <Style x:Key="verticalLineStyle" TargetType="Line" BasedOn="{StaticResource lineStyle}">
        <Setter Property="Y2" Value="1" />
        <Setter Property="HorizontalAlignment" Value="Right" />
        <Setter Property="Grid.RowSpan" Value="{Binding 
            Path=RowDefinitions.Count, RelativeSource={RelativeSource AncestorType=Grid}}"/>
    </Style>

    <Style x:Key="verticalLineStyleLeft" TargetType="Line" BasedOn="{StaticResource verticalLineStyle}">
        <Setter Property="HorizontalAlignment" Value="Left" />
    </Style>   
    
    <Style x:Key="horizontalLineStyleTop" TargetType="Line" BasedOn="{StaticResource horizontalLineStyle}">
        <Setter Property="VerticalAlignment" Value="Top" />
    </Style>    
</ResourceDictionary>

5 comments:

  1. Thanks for this .. succint explanation..

    ReplyDelete
  2. Nice, but the outer left and outer top lines are missing, any chance to fix this? Thanks :-)

    ReplyDelete
  3. I tryed to do the same issue in silverlight but can`t solve the problem with
    RelativeSource={RelativeSource AncestorType=Grid}}
    compiler could not find AncestorType property.Maybe you have a solution?

    ReplyDelete
  4. Unfortunately this is a limitation of Silverlight. As of version 4 the RelativeSource markup extension only supports Self and TemplatedParent.

    ReplyDelete
  5. How about adding rectangles to all the grid cells? Then you can control their border color/style to paint the grid lines.

    ReplyDelete

Note: Only a member of this blog may post a comment.