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


#280 – Alignment Properties for an Image

If an Image control is not set to fill all of the available space, you can specify how it should be aligned horizontally and vertically within the available space.

In the example below, the Stretch property is set to Uniform, so we would normally have empty space on either side of the image when the window’s aspect ratio is greater than the aspect ratio of the image.  The Image control’s HorizontalAlignment is set to Center, by default, so there are white bars on both sides of the image.

	<Image Name="imgKlondike" Source="TractorSm.png"/>

If we want to left-align the image in the available space, we can set the HorizontalAlignment property to Left.

<Image Name="imgKlondike" Source="TractorSm.png" HorizontalAlignment="Left"/>

#279 – Adding a Border Around an Image Control

To add a border around an Image control, you can embed the Image in a Border element.

	<Border BorderBrush="SaddleBrown" BorderThickness="3">
		<Image Name="imgKlondike" Source="TractorSm.png" />
	</Border>

If this Border element is the single child element in a Window, this will look like:

Notice that the Border fills the available space in the Window, but the Image ends up with white bands on either size.  Because the image’s Stretch property is set to Uniform, it’s preserving the aspect ratio of the image and so doesn’t fill all of the available space.

If you want the Border to surround the image without including the white bands, you can add alignment attributes to the Border element.

	<Border BorderBrush="SaddleBrown" BorderThickness="3" HorizontalAlignment="Center" VerticalAlignment="Center">
		<Image Name="imgKlondike" Source="TractorSm.png" />
	</Border>

#278 – Allow an Image to Get Bigger, But Not Smaller (or Vice Versa)

Normally, when you set the Stretch property of an Image control to something other than None, the image can be resized up (larger) or down (smaller), obeying the rule of the specific Stretch value that you specify.

For example, if Stretch is set to Uniform, so that the image stretches to preserve the aspect ratio, you can resize a container window so that the image ends up either larger or smaller than its original size.

Smaller than original:

Larger than original:

If you want to constrain the image so that it can’t go larger or smaller than the original size, you can use the StretchDirection property.

Setting StretchDirection to DownOnly indicates that you can make the image smaller than the original, but not larger.

Setting StretchDirection to UpOnly indicates that you can make the image larger than the original, but not smaller.

#277 – Images May Have Embedded DpiX and DpiY Information

Even when you specify Stretch=None for an Image control, you may notice that the image does not appear at the expected number of pixels wide/high.  This can happen if the image’s resolution (DPI) doesn’t match your current system DPI.

An image file (e.g. .png or .jpg) contains an image that is a certain number of pixels wide/high.  An image file may also contain embedded DpiX and DpiY (resolution) information.  This resolution information is not present in all image files.

WPF uses this resolution information to calculate the image size in WPF Units as:

  • Width (in WPF Units) = (96 * ImageWidth) / ImageHorizontalDPI
  • Height (in WPF Units) = (96 * ImageHeight) / ImageVerticalDPI

If there is no resolution information in the file, WPF defaults to 96 dpi.

WPF then calculates the image size in pixels as:

  • Width (pixels) = Width (WPF Units) * (SystemDPI / 96)
  • Height (pixels) = Height (WPF Units) * (SystemDPI / 96)

 

#276 – Change Image Sizing Using the Stretch Property

The Stretch property of an Image control dictates whether the image will be stretched to fit the available space.

The None option indicates that the image should be displayed at its original size.  It is not stretched to fit the available space.

	<Image Source="TractorSm.png" Stretch="None"/>

The Uniform option (the default) causes the image to be stretched to fill the available space–just until one of its dimensions fits.  The container may show whitespace for the other dimension.

<Image Source="TractorSm.png" Stretch="Uniform"/>


The UniformToFill option also preserves the aspect ratio, but the image will continue to grow until both dimensions fit the available space.  The container may clip the image in one dimension.

<Image Source="TractorSm.png" Stretch="UniformToFill"/>


The Fill option stretches the image without preserving the aspect ratio, exactly filling the available space.  The image may appear distorted.

<Image Source="TractorSm.png" Stretch="Fill"/>

#275 – Load a Loose Image File into an Image Control

You can distribute an image file as a loose file, i.e. deploy it as a separate file along with your executable, and then load the image into an Image control at runtime.  To do this:

  • Add the image file to your project
  • Set the image file’s Build Action to Content
  • Use a plain filename as the image’s Source
  • Distribute the image file with the executable

Add the image (.png) file to the project.

Set the Build Action to Content.  The image resource won’t be embedded in the .exe file, but the project will know where to find the file.  Also set the Copy to Output Directory field, so that the file is copied.

Use the plain filename as the Source.

<Image Source="TractorSm.png"/>

Distribute the image file along with the executable.  (When you build the project, the file will be automatically copied to the output directory).