Spacing between child controls in WPF Grid

Question

I have a set of Key/Value pairs I want to display on a WPF Window. I'm using a grid to lay them out like so:

<Grid Margin="4">
 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition/>
 </Grid.ColumnDefinitions>
 <Grid.RowDefinitions>
  <RowDefinition Height="Auto"/>
  <RowDefinition Height="Auto"/>
 </Grid.RowDefinitions>

 <Label Grid.Row="0" Grid.Column="0">Code</Label>
 <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Code}"/>

 <Label Grid.Row="1" Grid.Column="0">Name</Label>
 <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Name}"/>
</Grid>

However when I display this, the TextBoxes are squashed up with their top and bottom borders touching the TextBox above/below. What is the best way to add vertical space to the rows in this layout?

Answer 1

Easiest way is to set a margin on the individual controls. Setting it on the TextBoxes should be enough, because once they're spaced out the Labels will set vertically in the center of each row and have plenty of space anyway.

You can set it once using a style:

<Grid Margin="4">
    <Grid.Resources>
        <Style TargetType="{x:Type TextBox}">
            <Setter Property="Margin" Value="0,0,0,4" />
        </Style>
    </Grid.Resources>

    ...
</Grid>

This will add a 4-pixel margin to the bottom of any TextBox inside your grid.