wpfxamllayoutgridgridlines

How can I get a Grid to draw Borders for blank cells?


I have an ItemsControl which uses a Grid as the ItemsPanelTemplate, and sets the Grid.Column and Grid.Row on the ItemContainerStyle to position data items in the grid

Is there a way to either add GridLines to the Grid, or to fill in the blank cells with a Border?

Right now I have ShowGridLines set to True which makes the dotted lines, however I want Horizontal lines to show up, and I'd prefer solid GridLines

Screenshot

There is a rather large amount of XAML, but here's a screenshot of how my XAML is laid out: XAML Layout


Solution

  • Sorry, styling the grid lines can't be done. Atleast not in an easy way. See the following question for an explanation: How can I change the color of the gridlines of a Grid in WPF?

    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."

    Edit: If you want the borders you can create a custom Grid and draw the GridLines in OnRender method of the control.

        using System.Windows;
        using System.Windows.Controls;
        using System.Windows.Media;
    
        namespace BorderGridControl
        {
            public class GridControl : Grid
            {
                #region Properties
                public bool ShowCustomGridLines
                {
                    get { return (bool)GetValue(ShowCustomGridLinesProperty); }
                    set { SetValue(ShowCustomGridLinesProperty, value); }
                }
    
                public static readonly DependencyProperty ShowCustomGridLinesProperty =
                    DependencyProperty.Register("ShowCustomGridLines", typeof(bool), typeof(GridControl), new UIPropertyMetadata(false));
    
                
                public Brush GridLineBrush
                {
                    get { return (Brush)GetValue(GridLineBrushProperty); }
                    set { SetValue(GridLineBrushProperty, value); }
                }
    
                public static readonly DependencyProperty GridLineBrushProperty =
                    DependencyProperty.Register("GridLineBrush", typeof(Brush), typeof(GridControl), new UIPropertyMetadata(Brushes.Black));
    
                public double GridLineThickness
                {
                    get { return (double)GetValue(GridLineThicknessProperty); }
                    set { SetValue(GridLineThicknessProperty, value); }
                }
    
                public static readonly DependencyProperty GridLineThicknessProperty =
                    DependencyProperty.Register("GridLineThickness", typeof(double), typeof(GridControl), new UIPropertyMetadata(1.0));
                #endregion
    
                protected override void OnRender(DrawingContext dc)
                {
                    if (ShowCustomGridLines)
                    {
                        foreach (var rowDefinition in RowDefinitions)
                        {
                            dc.DrawLine(new Pen(GridLineBrush, GridLineThickness), new Point(0, rowDefinition.Offset), new Point(ActualWidth, rowDefinition.Offset));
                        }
    
                        foreach (var columnDefinition in ColumnDefinitions)
                        {
                            dc.DrawLine(new Pen(GridLineBrush, GridLineThickness), new Point(columnDefinition.Offset, 0), new Point(columnDefinition.Offset, ActualHeight));
                        }
                        dc.DrawRectangle(Brushes.Transparent, new Pen(GridLineBrush, GridLineThickness), new Rect(0, 0, ActualWidth, ActualHeight));
                    }
                    base.OnRender(dc);
                }
                static GridControl()
                {
                    DefaultStyleKeyProperty.OverrideMetadata(typeof(GridControl), new FrameworkPropertyMetadata(typeof(GridControl)));
                }
            }
        }
    

    I Tried it out and it seems to be working great.

    Here an example of using:

        <controls:GridControl ShowCustomGridLines="True"
                              GridLineBrush="Red"
                              GridLineThickness="1">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
        </controls:GridControl>