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

#274 – Embed Images into Your Project as Binary Resources

The easiest way to specify a path to an image to be used in an Image control is to do the following:

  • Embed the image as a binary resource in your project
  • Set the Build Action of the image to Resource
  • Just use the filename as the image’s Source
  • Do not distribute the image with your executable (it’s embedded)

These steps are shown below.

Add the .png file to the project.

Verify that the Build Action is set to Resource.

Just use the filename in the Image tag.

	<Image Source="TractorSm.png"/>

Do not copy the .png file to the output directory.

Here is the final result, displaying the image in a window:

#273 – Display a Picture Using an Image Control

The Image control in WPF allows you to display an image in your user interface.  The control can display an image that is stored in any of the following file types: .png, .jpg, .gif, .bmp, .ico, .wdp, or .tiff.

You tell the Image control where to find the image content using the Source property.  In the example below, Source points to a .jpg file on a web site using a URI, or Uniform Resource Identifier.

<Window
    Width="400" Height="300">
	<Image Source="http://www.seans.com/KlondikeSm.jpg" />
</Window>

#272 – Displaying a Border Around a Window

You can include a border around the edges of a Window using the BorderBrush and BorderThickness properties.

By default, the BorderBrush is null and BorderThickness is a Thickness structure with all of its dimensions set to 0.

If you specify only the BorderThickness property, you get a black border around the window.

<Window
	 BorderThickness="5,10,5,10">

You can also specify both a border brush and a border thickness.

<Window
	 BorderThickness="20">

	<Window.BorderBrush>
	 	<LinearGradientBrush>
            <GradientStop Color="DarkKhaki" Offset="0.0"/>
            <GradientStop Color="DarkGreen" Offset="1.0"/>
        </LinearGradientBrush>
	</Window.BorderBrush>

#271 – Changing a Window’s Resize Behavior

There are four different options for allowing a window to be resized.  You set the resizing behavior using the ResizeMode property.

The default value for ResizeMode is CanResize.  This results in the standard window border, allowing resizing by dragging the edge of the window.

<Window
	Width="300" Height="150" ResizeMode="CanResize">


The CanResizeWithGrip option is similar to CanResize, but the lower right corner of the window shows a little “grip” icon indicating that you can “grab” the window here to resize it.

<Window
	Width="300" Height="150" ResizeMode="CanResizeWithGrip">


The NoResize option creates a window that can’t be resized, minimized or maximized.  Notice that the minimize and maximize buttons have also disappeared.

<Window
	Width="300" Height="150" ResizeMode="NoResize">


The final choice for ResizeMode is CanMinimize, which creates a window that can’t be resized or maximized, but can be minimized.

<Window
	Width="300" Height="150" ResizeMode="CanMinimize">

#270 – Minimum and Maximum Window Size

By default, there are no upper or lower limits for the size of a window in WPF–you can shrink a window to the point where none of its content is visible and you can maximize a window so that it takes up the entire desktop.

You can use the MinWidth and MinHeight properties to dictate the minimum dimensions for the window.  When resizing the window, you’ll be unable to make the window any smaller.

<Window
	Width="400" Height="300" MinHeight="100" MinWidth="200">


You can use the MaxWidth and MaxHeight properties to dictate the maximum dimensions for the window.  When resizing the window, you’ll be unable to make the window any larger.  If you try maximizing the window, it will be constrained to the maximum size.

<Window
	Width="400" Height="300" MaxWidth="500" MaxHeight="320">