#409 – Child Elements in a Grid Size to Fit the Containing Cell

By default, most child elements hosted in a Grid will automatically size to fit the size of the containing cell.  You typically do not set explicit sizes for child elements, but control their size by changing the size of the corresponding rows or columns in the Grid.

You can also control the size of the child elements by using the Margin property to specify how much space should exist between the outside edge of the control and the boundaries of the cell.

    <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="5" Background="Lavender"/>
        <Label Grid.Row="0" Grid.Column="1" Content="Moe" Margin="5" Background="Magenta"/>
        <Label Grid.Row="0" Grid.Column="2" Content="Curly" Margin="5" Background="Cornsilk"/>

        <CheckBox Grid.Row="1" Grid.Column="0" Margin="5" Content="Nose Tweak"/>
        <Button Grid.Row="1" Grid.Column="1" Margin="5" Content="Do Eye Poke" />
        <TextBox Grid.Row="1" Grid.Column="2" Margin="5" Text="Double slap"/>
    </Grid>