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