How to highlight the border lines of a Grid control

Question

I have wrote some code in order to add 100 x 100 cells to a grid. The thing is that I would like to highlight the lines that split the rows/column of the grid.

What properties should I use, or how should I do that?

Bellow is the code for creating the grid cells :

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        for (int i = 0; i < 100 ; i++)

            layoutGrid.RowDefinitions.Add( new RowDefinition {  } );
        for (int i = 0; i < 100; i++)
            layoutGrid.ColumnDefinitions.Add(new ColumnDefinition { });

    }
}

Answer 1

There's a couple ways you can try. If you take a look at Grid.cs, see the Brushes.Blue & Brushes.Yellow solid colors that make up the dashes you see when you enable ShowGridLines="True" in the source below? You can set those over to a different color (make them both the same color to not have to edit it much like Brushes.Gray, or you can omit the dash, draw a single line, and could even use a custom brush resource like a gradient.

 /// <summary>
    /// Helper to render grid lines. 
    /// </summary>
    internal class GridLinesRenderer : DrawingVisual 
    { 
        /// <summary>
        /// Static initialization 
        /// </summary>
        static GridLinesRenderer()
        {
            s_oddDashPen = new Pen(Brushes.Blue, c_penWidth); 
            DoubleCollection oddDashArray = new DoubleCollection();
            oddDashArray.Add(c_dashLength); 
            oddDashArray.Add(c_dashLength); 
            s_oddDashPen.DashStyle = new DashStyle(oddDashArray, 0);
            s_oddDashPen.DashCap = PenLineCap.Flat; 
            s_oddDashPen.Freeze();

            s_evenDashPen = new Pen(Brushes.Yellow, c_penWidth);
            DoubleCollection evenDashArray = new DoubleCollection(); 
            evenDashArray.Add(c_dashLength);
            evenDashArray.Add(c_dashLength); 
            s_evenDashPen.DashStyle = new DashStyle(evenDashArray, c_dashLength); 
            s_evenDashPen.DashCap = PenLineCap.Flat;
            s_evenDashPen.Freeze(); 
        }

Or there's a trick you can do shown in XAML (because I had already slapped an example together for a past post elsewhere) where you take a border control with a set BorderBrush & BorderThickness and span incremental borders across the cells & columns like this example;

<Border Height="300" Width="300" Background="White" BorderThickness="1" BorderBrush="Gray">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="30"/>
                <ColumnDefinition Width="30"/>
                <ColumnDefinition Width="30"/>
                <ColumnDefinition Width="30"/>               
                <ColumnDefinition Width="30"/>
                <ColumnDefinition Width="30"/>               
                <ColumnDefinition Width="30"/>
                <ColumnDefinition Width="30"/>               
                <ColumnDefinition Width="30"/>
                <ColumnDefinition Width="30"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="30"/>
            </Grid.RowDefinitions>
            <!-- Horizontal Accent Lines -->
            <Border Grid.ColumnSpan="10" BorderThickness="0,1" BorderBrush="Gray"/>
            <Border Grid.Row="2" Grid.ColumnSpan="10" BorderThickness="0,1" BorderBrush="Gray"/>
            <Border Grid.Row="4" Grid.ColumnSpan="10" BorderThickness="0,1" BorderBrush="Gray"/>
            <Border Grid.Row="6" Grid.ColumnSpan="10" BorderThickness="0,1" BorderBrush="Gray"/>
            <Border Grid.Row="8" Grid.ColumnSpan="10" BorderThickness="0,1" BorderBrush="Gray"/>
            <!-- Vertical Accent Lines -->
            <Border Grid.Column="1" Grid.RowSpan="10" BorderThickness="1,0" BorderBrush="Gray"/>
            <Border Grid.Column="3" Grid.RowSpan="10" BorderThickness="1,0" BorderBrush="Gray"/>
            <Border Grid.Column="5" Grid.RowSpan="10" BorderThickness="1,0" BorderBrush="Gray"/>
            <Border Grid.Column="7" Grid.RowSpan="10" BorderThickness="1,0" BorderBrush="Gray"/>
            <Border Grid.Column="9" Grid.RowSpan="10" BorderThickness="1,0" BorderBrush="Gray"/>
            <!-- Content Elements -->
            <TextBlock Text="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <TextBlock Text="2" Grid.Column="5" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <TextBlock Text="3" Grid.Row="2" Grid.Column="9" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <TextBlock Text="4" Grid.Row="4" Grid.Column="3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <TextBlock Text="5" Grid.Row="8" Grid.Column="7" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
        </Border>

Or with XAML for DataGrid;

   <Window.Resources>
       <SolidColorBrush x:Key="RedGridLine" Color="#FFFF4444" />
       <SolidColorBrush x:Key="BlueGridLine" Color="#554444FF"/>
    </Window.Resources>

    <my:DataGrid VerticalGridLinesBrush="{StaticResource RedGridLine}"
            HorizontalGridLinesBrush="{StaticResource BlueGridLine}" >

Hope this helps and best of luck!