#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.

About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

One Response to #427 – Changing Margins from Within Blend

  1. Pingback: Dew Drop – November 10, 2011 | Alvin Ashcraft's Morning Dew

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: