Image Control

Intertech Tutorials

Categories of Silverlight Resources

Strictly speaking, Silverlight supports two categories of resources:

Be aware that understanding the use of Silverlight logical resources is critical when working with other aspects of the API. For example, styles, control templates, and data binding templates all require you to work with logical resources. As well, when you create custom controls, you will almost certainly make use of various logical resources.

Working with the Image Control and Embedded Resources

Many Silverlight applications will need to package up image files for display purposes. Using Visual Studio, it is simple to instruct the IDE to embed these image files as binary resources.

The Image control can be used to display these embedded images, via the Source property. If the Source property is set to an invalid format, or is specified to a URI that cannot be resolved, then the ImageFailed event is raised, however no runtime exception is thrown.

The Image control can only display JPEG and PNG file formats. The Image control supports the Stretch property, which controls how the image data should be placed in the panel. As well, the size of the image display area can be configured using the Height and Width properties. If you do not set Height and Width, the image data will display in its natural size.

Consider the following UserControl. Notice the Image control’s Source property is set to a *.jpg file.

<UserControl x:Class="SLResourcesGraphicsAnim.Page"
Width="400" Height="300">
<stackpanel x:name="LayoutRoot" background="White">
<image x:name="imgNorthShore" source="SplitRock.jpg" />


Because the Source property was not set using a absolute URI (such as a web address), the *.jpg file must be embedded as a binary resource. Simply use the Project | Add Existing Item menu option. Visual Studio responds by copying the resource into the current project. This can be verified using the Solution Explorer.


When you select this file within the Solution Explorer, the Properties window allows you to choose a given ‘Build Action’. To embed image files directly within the Silverlight assembly, select the Resource option.Then as you add resource files to your project, the Build Action will default to Resource.


You are free to place resources such as an Image folder in a subdirectory of the project root. You can then refer to the embedded resource using a relative path. Consider the following project updates:


<Image x:Name = "imgNorthShore" Source = "MyImages/SplitRock.jpg"/>

Once the application has been compiled, you can view the embedded resource using a tool such as ildasm.exe or reflector.exe. Here is a screen shot of the embedded resources as seen through the eyes of reflector.exe. Recall from Chapter 1 that Silverlight applications typically contain BAML resources, as well.


The Image control can also have the Source property set to external image data. For example, you could scrape an image file from a web site using an absolute URI. If you have stored iamge data using isolated storage (examined in a later chapter), you can load the iamge data from the user’s hard drive. Consider the following Image control definition.

<UserControl x:Class="SLResourcesGraphicsAnim.Page"
Width="400" Height="500">
<stackpanel x:name="LayoutRoot" background="White">

<image x:name="imgNorthShore" source="MyImages/SplitRock.jpg" height="300" />
<!-- Load image from a web URI. -->
<image height="100" width="138" x:name="NorthShoreRadio" source="" />



Copyright (c) 2008-2013. Intertech, Inc. All Rights Reserved. This information is to be used exclusively as an online learning aid. Any attempts to copy, reproduce, or use for training is strictly prohibited.