#408 – ShowGridLines Property Allows You to See Individual Cells in Grid

When laying out child elements in a Grid, it can be helpful to get some visual indication of where the grid’s individual cells are located.  You can do this by setting the ShowGridLines property of the Grid to true.  A dotted line will appear, showing the boundaries of the rows and columns.

This property is meant to be used only at design time, to assist in laying out the elements of the Grid–the expectation is that you’d set ShowGridLines to false before shipping an application.

    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Label Grid.Row="0" Grid.Column="0" Content="Larry" Margin="10" Background="Lavender"/>
        <Label Grid.Row="0" Grid.Column="1" Content="Moe" Margin="10" Background="Magenta"/>
        <Label Grid.Row="0" Grid.Column="2" Content="Curly" Margin="10" Background="Cornsilk"/>

        <Button Grid.Row="1" Grid.Column="1" Content="Do Eye Poke" Margin="10"/>
    </Grid>

As I resize the parent window, causing the Grid to change size, you can see how the size of the individual cells changes.