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


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 #281 – Give an Image Control More Room with a Margin

  1. Pingback: Academy Award Nominations 2011, 2011 Academy Award Nominations, Academy Awards | Aegis Films

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: