add thickness = 1, outline for borders,rows and columns of grids inside grids in wpf

Question

I have following WPF XAML file,

<Window x:Class="Program"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Program"
        mc:Ignorable="d"
        Title="Print Preview" Height="40820.962" Width="2135.146">
    <Grid Margin="10,10,2,-21" Height="40801" VerticalAlignment="Top">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="131*"/>
            <RowDefinition Height="40670*"/>
        </Grid.RowDefinitions>
        <Grid HorizontalAlignment="Left" Height="3438" Margin="20,126,0,0" VerticalAlignment="Top" Width="2095" Grid.RowSpan="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="500*"/>
                <ColumnDefinition Width="1072*"/>
                <ColumnDefinition Width="523*"/>
            </Grid.ColumnDefinitions>
            <Label x:Name="label5" Content="Here" Grid.Column="1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" RenderTransformOrigin="-7.455,-0.374" Height="58" Width="171" FontSize="16"/>
        </Grid>
        <Grid HorizontalAlignment="Right" Height="432" Margin="0,3453,1605,0" Grid.Row="1" VerticalAlignment="Top" Width="490" RenderTransformOrigin="0.62,1.205">
            <Grid.RowDefinitions>
                <RowDefinition Height="143*"/>
                <RowDefinition Height="136*"/>
                <RowDefinition Height="153*"/>
            </Grid.RowDefinitions>
        </Grid>
        <Grid HorizontalAlignment="Right" Height="452" Margin="0,3433,1605,0" Grid.Row="1" VerticalAlignment="Top" Width="490" RenderTransformOrigin="0.62,1.205">
            <Grid.RowDefinitions>
                <RowDefinition Height="143*"/>
                <RowDefinition Height="136*"/>
                <RowDefinition Height="153*"/>
            </Grid.RowDefinitions>
        </Grid>
        <Grid HorizontalAlignment="Left" Height="447" Margin="1594,3438,0,0" Grid.Row="1" VerticalAlignment="Top" Width="511">
            <Grid.RowDefinitions>
                <RowDefinition Height="142*"/>
                <RowDefinition Height="156*"/>
                <RowDefinition Height="149*"/>
            </Grid.RowDefinitions>
        </Grid>
        <Grid HorizontalAlignment="Left" Height="452" Margin="510,3433,0,0" Grid.Row="1" VerticalAlignment="Top" Width="1084">
            <Grid.RowDefinitions>
                <RowDefinition Height="44*"/>
                <RowDefinition Height="45*"/>
            </Grid.RowDefinitions>
        </Grid>
        <Grid HorizontalAlignment="Left" Height="23141" Margin="20,3895,0,0" Grid.Row="1" VerticalAlignment="Top" Width="1574"/>
        <Grid HorizontalAlignment="Left" Height="23540" Margin="1599,3496,0,0" Grid.Row="1" VerticalAlignment="Top" Width="506">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="14.143"/>
                <ColumnDefinition Width="146.857"/>
                <ColumnDefinition Width="42.714"/>
                <ColumnDefinition Width="119*"/>
                <ColumnDefinition Width="98*"/>
                <ColumnDefinition Width="85*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="87*"/>
                <RowDefinition Height="23516*"/>
            </Grid.RowDefinitions>
            <Label x:Name="label" Content="Hespanic" HorizontalAlignment="Left" Margin="-1,-61,0,0" VerticalAlignment="Top" Height="55" Width="506" FontSize="22" Grid.ColumnSpan="6"/>
        </Grid>
        <Label x:Name="label1" Content="Sample" HorizontalAlignment="Left" Margin="8,97,0,0" VerticalAlignment="Top" RenderTransformOrigin="-8.5,0.654" Width="215"/>
        <Label x:Name="label2" Content="Layer" HorizontalAlignment="Left" Height="33" Margin="922,10,0,0" VerticalAlignment="Top" Width="232" FontSize="18"/>
        <Label x:Name="label3" Content="Index" HorizontalAlignment="Left" Margin="1969,10,0,0" VerticalAlignment="Top" Width="105"/>
        <Label x:Name="label4" Content="People" HorizontalAlignment="Left" Margin="1477,84,0,0" VerticalAlignment="Top" Width="161"/>
    </Grid>
</Window>

So I'm trying to add thickness = 1, outline for grid borders, rows and columns

So I tried following thread

How do i put a border on my grid in WPF?

So to add a border I added following thing, and its working fine

<Border BorderBrush="Black" BorderThickness="2">
    <Grid>
       <!-- Grid contents here -->
    </Grid>
</Border>

But since I have need to add thickness = 1, outline for all above multiple columns and rows also, I tried something like this

</Grid.ColumnDefinitions>
                <Border Grid.Row="0" Grid.Column="0" BorderThickness="1" BorderBrush="Black"/>
                <Border Grid.Row="0" Grid.Column="1" BorderThickness="1" BorderBrush="Black"/>

which is identifying each column and row and add thickness to them, but this seems quite time consuming and confusing work.

Is there any other proper and quick way to add BorderThickness="1" BorderBrush="Black" to all above Columns and Rows in the grids ?

score 1 · Accepted Answer · answered Apr 26 '17 at 17:25

In the default WPF Grid, you can set ShowGridLines="True". However these lines are meant to be designer lines, and not meant for end use.

The common solution I use is a custom GridControl which adds DependencyProperties for GridLines settings, and overrides OnRender to draw them.

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

It can be used like this :

<local:GridEx ShowCustomGridLines="True" 
              GridLineBrush="#FF38B800" 
              GridLineThickness="2">
    ...
</local:GridEx>

I created new CS file in this project and inserted your code mentioned above to it, here can you tell where this `GridEx` came from ? — kez, Apr 26 '17 at 17:57
@kez The top of your XAML in the `` tag contains the XML NameSpace definition of `xmlns:local="clr-namespace:Program"`. This means ` — Rachel, Apr 26 '17 at 18:14

add thickness = 1, outline for borders,rows and columns of grids inside grids in wpf

1 Answers1