wpf - Customize the grid lines for original wpf Grid control

The System.WIndows.Controls.Grid classes does provide a ShowGridLines method, while it does not provide means to override the style of the grid lines. 

 

 

Ian Oakes has shows some good ways to use the grid lines and his post is available at "Displaying Grid Lines" 

 

While it does show the quitessence of programming with styles, so here is what is the most important of the styles.

 

<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" /> <!-- DoubleValueCollection-->
    </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>

 

 

and how it is used? how will the styles be applied to draw the grid lines?

 

<Window x:Class="GridLines.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid
        x:Name="Grid" Margin="20"
        >
        <Grid.RowDefinitions>
            <RowDefinition Height="20"/>
            <RowDefinition Height="20"/>
            <RowDefinition Height="20"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="20" />
        </Grid.ColumnDefinitions>
        
        
        <Line Grid.Column="0" Style="{StaticResource verticalLineStyleLeft}" />
        <Line Grid.Column="0" Style="{StaticResource verticalLineStyle}" />
        <Line Grid.Column="1" Style="{StaticResource verticalLineStyle}" />
        <Line Grid.Column="2" Style="{StaticResource verticalLineStyle}" />
        <Line Grid.Column="3" Style="{StaticResource verticalLineStyle}" />
        
        <Line Grid.Row="0" Style="{StaticResource horizontalLineStyleTop}" />
        <Line Grid.Row="0" Style="{StaticResource horizontalLineStyle}" />
        <Line Grid.Row="1" Style="{StaticResource horizontalLineStyle}" />
        <Line Grid.Row="2" Style="{StaticResource horizontalLineStyle}" />
        <Line Grid.Row="3" Style="{StaticResource horizontalLineStyle}" />

    </Grid>
</Window>