#427 – Changing Margins from Within Blend

You can adjust margins by entering values directly in XAML.  You can also change margins by clicking and dragging on elements on the design surface in Blend.

Below is a Grid with two buttons:

    <Grid ShowGridLines="True" Background="Beige" Margin="10">
        <-- row/col defs here -->
        <Button Grid.Row="0" Grid.Column="0" Content="Dance" Margin="5" VerticalAlignment="Center"/>
        <Button Grid.Row="1" Grid.Column="1" Content="Play Ukulele" Margin="5" HorizontalAlignment="Center"/>
    </Grid>

Left-click on the Dance button on the design surface in Blend to see an indication of the margins.

Because the Dance button’s VerticalAlignment property is set to Center, it autosizes its height and the top/bottom margin values are not used.  The dashed lines above/below the button indicate that this distance is automatically set.

You can change the left or right margins by left-clicking on the left or right edges of the button and dragging.

You’ll see the margin value updated in the XAML.