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

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