How can I change the color of the gridlines of a Grid in WPF?

Question

I have a Grid (not a DataGrid, but a real Grid), with GridLines set to True. How can I change the color of the gridlines? Hardcoded in XAML is ok, since it is just for development-reasons.

<Grid ShowGridLines="True" />

Compatriot

Do you mean a Grid, or a DataGrid? I don't see a GridLines property on Grid. – Ridotto

Answer 1

Sorry, can't be done with ShowGridLines - you need to style the elements contained.

Exhibit A:

MSDN docs say "Only dotted lines are available because this property is intended as a design tool to debug layout problems and is not intended for use in production quality code. If you want lines inside a Grid, style the elements within the Grid to have borders."

Exhibit B - The WPF Source Code:

Notice the Brushes.Blue and Brushes.Yellow hard-coded in this sealed internal class which System.Windows.Controls.Grid uses to draw the lines.

From Grid.cs

    /// <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(); 
        }

Monosome

Answer 2

var T = Type.GetType("System.Windows.Controls.Grid+GridLinesRenderer," +
    " PresentationFramework, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35");

var GLR = Activator.CreateInstance(T);
GLR.GetType().GetField("s_oddDashPen", BindingFlags.Static | BindingFlags.NonPublic).SetValue(GLR, new Pen(Brushes.Black, 1.0));
GLR.GetType().GetField("s_evenDashPen", BindingFlags.Static | BindingFlags.NonPublic).SetValue(GLR, new Pen(Brushes.Black, 1.0));

myGrid.ShowGridLines = true;

Cerecloth

Thanks +1 . wouldn't of thought of doing that. By using reflection you can by pass the fact that the class is internal ? – Quacksalver

If you set both pens to orange, it turns out pretty easy on the eyes :) – Scutari

Answer 3

This answer is not how to actually change the GridLines, but how to make it look like you did in a very simple way. I am sure others have better ways to do this, but here is how I accomplished showing my gridlines.

<Grid Height="115" Margin="0,0,0,0" ShowGridLines="False">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="220"/>
                                    <ColumnDefinition Width="220"/>
                                    <ColumnDefinition Width="200*"/> 
                                </Grid.ColumnDefinitions>
                                <Border Grid.Column="0" BorderBrush="White" BorderThickness="1">
                                </Border>
                                <Border Grid.Column="1" BorderBrush="White" BorderThickness="1">                      
                                </Border>
                                <Border Grid.Column="2" BorderBrush="White" BorderThickness="1">        
                                </Border>
                            </Grid>

Create a border for your column definitions or grid definitions and set the Grid.Column property to whatever you wish. Then you can set your color, thickness, or style. Sweet and simple. Hope this helps someone else!

Here is an image of this grid:

Ivette

The two vertical borders in the middle of the grid will actually have a thickness of 2 and not 1 if you zoom in. These two lines will visually appear thicker than the rest. This artifact can be corrected by adding Margin="-1,0.-1,0" to the second border element. – Alguire

Answer 4

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

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

Ref: http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/0202b0dd-38d9-4ad7-8576-d115922aeeec/

Dietrich

Funny. This actually helped me becuz I was searching for DataGrid. – Brenner

Answer 5

An extension of igalk474's answer, used as:

<FixedPage.Resources>
  <local:GridLinesRenderer x:Key="glr" StrokeColor="Black" StrokeWidth="1.0" />
</FixedPage.Resources>

...

<Grid ShowGridLines="True">
...
</Grid>

Where local is the local assembly, and FixedPage is any FrameworkElement.

using System;
using System.Reflection;
using System.Windows;
using System.Windows.Media;

namespace mynamespace.xaml {
    public class GridLinesRenderer : DependencyObject {

        public static readonly DependencyProperty StrokeWidthProperty = DependencyProperty.Register(
            "StrokeWidth", typeof(double), typeof(GridLinesRenderer), new PropertyMetadata(1.0, OnPropertyChanged)
        );

        public static readonly DependencyProperty StrokeColorProperty = DependencyProperty.Register(
            "StrokeColor", typeof(SolidColorBrush), typeof(GridLinesRenderer), new PropertyMetadata(Brushes.Black, OnPropertyChanged)
        );

        public double StrokeWidth {
            get { return (double)GetValue(StrokeWidthProperty); }
            set { SetValue(StrokeWidthProperty, value); }
        }

        public SolidColorBrush StrokeColor {
            get { return (SolidColorBrush)GetValue(StrokeColorProperty); }
            set { SetValue(StrokeColorProperty, value); }
        }

        public GridLinesRenderer() {
            OnPropertyChanged(this, new DependencyPropertyChangedEventArgs());
        }

        private static void OnPropertyChanged(DependencyObject source, DependencyPropertyChangedEventArgs e) {
            Type T = Type.GetType("System.Windows.Controls.Grid+GridLinesRenderer," +
                "PresentationFramework, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35");
            var glr = Activator.CreateInstance(T);
            Pen glrPen = new Pen(((GridLinesRenderer)source).StrokeColor, ((GridLinesRenderer)source).StrokeWidth);
            glr.GetType().GetField("s_oddDashPen", BindingFlags.Static | BindingFlags.NonPublic).SetValue(glr, glrPen);
            glr.GetType().GetField("s_evenDashPen", BindingFlags.Static | BindingFlags.NonPublic).SetValue(glr, glrPen);
        }

    }
}

Euthanasia