#333 – Margin and Padding Overview

A control’s Margin property specifies the spacing between the edges of the control and its container.  A control’s Padding property specifies the spacing between the edges of the control and its interior content.

In the example below, we specify the Margin.  Because the HorzontalAlignment is Stretch (the default), the left/right Padding values are ignored and the Button is stretched to reach the desired Margin values.

    <StackPanel VerticalAlignment="Top" Background="Goldenrod">
        <Button Content="I'm a Button" Margin="5,10,50,10" Padding="15,5,15,5"/>
    </StackPanel>


If we now set HorizontalAlignment to Center, the control will size to fit its content. The Padding values will be honored exactly and the control will be centered horizontally within the available space after the specified left and right Margin values have been accounted for.

This becomes more clear when we draw lines for the specified Margin values.

Advertisements

#326 – Specifying a Symmetrical Margin Using Two Arguments

You can set the Margin property on a control so that it has some extra room around its edges, within its container.

You can specify a value for the Margin property in XAML using either one, two or four integer values.  Using one value indicates the margin for each of the four sides of the control.  Using four values indicates the left/top/right/bottom margin values individually.

When you use two values in specifying the Margin, you are specifying a value to be used for the left and right margins, and a value to be used for the top and bottom margins.  So a value of 10,20 is identical to 10,20,10,20.

    
        
        
        
    

The value of 10,20 indicates that the left and right margins should both be 10 WPF units and top and bottom should both be 20.  Using the two-argument version results in symmetrical margins.

#325 – Specifying a Margin Value in Code

You can set the Margin property on a control so that it has some extra room around its edges, within its container.

You’ll typically set the values for Margin in XAML, but you can also set a Margin value in code.  The type of the Margin property is Thickness, which is a struct having fields for margins along the left, top, right and bottom of a control.

You can specify a value for Margin by creating a new instance of the Thickness structure.

            double left = 5.0;
            double top = 10.0;
            double right = 2.0;
            double bottom = 20.0;
            lblName.Margin = new Thickness(left, top, right, bottom);

#324 – Setting a Margin with Different Sizes on Each Edge

You can set the Margin property on a control so that it has some extra room around its edges, within its container.

In XAML, if you specify a single value for Margin, that value will be used as the margin (in WPF Units) along each edge of the control.

    <StackPanel>
        <Label Content="Hello there.." Margin="3"/>
        <Button Content="Click Me" Margin="5"/>
    </StackPanel>

You can also specify four different values for the Margin property, listing the margin along each edge of the control in the order: Left, Top, Right, Bottom.

    <StackPanel>
        <Label Content="Hello there.." Background="Goldenrod" Margin="5,10,2,20"/>
        <Button Content="Click Me"/>
    </StackPanel>

#323 – Provide Space Around StackPanel Children Using Margin

By default, StackPanel provides no extra space around the child controls that it contains, but packs them tightly.

    <StackPanel>
        <Label Content="Gene Autry the singing cowboy" Background="Pink"/>
        <Button Content="I Like Gene" />
        <Label Content="Roy Rogers" Background="Aqua"/>
        <Button Content="I Like Roy Rogers Yes I Do"/>
        <Label Content="Spade Cooley had a sad story" Background="DodgerBlue"/>
    </StackPanel>


You can specify a margin that should be used around the outside of each control using the Margin property.

    <StackPanel>
        <Label Content="Gene Autry the singing cowboy" Background="Pink" Margin="5"/>
        <Button Content="I Like Gene" Margin="5"/>
        <Label Content="Roy Rogers" Background="Aqua" Margin="5"/>
        <Button Content="I Like Roy Rogers Yes I Do" Margin="5"/>
        <Label Content="Spade Cooley had a sad story" Background="DodgerBlue" Margin="5"/>
    </StackPanel>

In this example, we used a single value whenever we set the Margin property.  This causes the container to add the specified margin (in WPF units) along all four sides of the child control.

#282 – The Margin Property Stores a Thickness Value

The Margin property, used by many controls to specify a margin around the outside of the control, is inherited from the FrameworkElement class.  The Margin property’s type is Thickness, which is a structure.

The Thickness structure has four fields, defining the size of the margin along each edge of the control: Left, Top, Right, Bottom.  The value of each of these fields is specified in device independent WPF Units.

You can specify a Thickness value in XAML by listing the four values in a comma-separated string, in the following order: “left, top, right, bottom”.

	<Image Name="imgKlondike" Source="TractorSm.png" Margin="5,10,5,10"/>

You can also change the value of a Margin in code.  You can’t set individual fields in the margin, but you can set the property to a new instance of a Thickness.

            Thickness oldMargin = imgKlondike.Margin;

            imgKlondike.Margin = new Thickness(
                oldMargin.Left + 2.0,
                oldMargin.Top + 2.0,
                oldMargin.Right + 2.0,
                oldMargin.Bottom + 2.0);

#281 – Give an Image Control More Room with a Margin

An Image control will normally try to fill all of the available space, with the Stretch property dictating in which dimensions the image is stretched to fill the container.

If you want to stretch the image to fill the space, but you want a little whitespace around the edges of the image, you can use the Margin property.

When specified in XAML, the Margin property takes four comma-separated values, specifying “left, top, right, bottom” margin values.  The units are the standard WPF device independent units.

	<Image Name="imgKlondike" Source="TractorSm.png" Margin="5,10,5,10"/>

Notice that if we look at the Image control in the designer, we can see the margins.  The light blue lines show the boundaries of the Image control itself and you can see the margins outside the line.  The white vertical bands are due to the Stretch behavior–the image stretches just to fit, preserving its aspect ratio.