Categories of Silverlight Resources

Strictly speaking, Silverlight supports two categories of resources:
  •        
Binary Resources: This is what most developers regard as resources (embedded images, sound
            clips, videos, and so on).
  •       
 Logical Resources: Named .NET objects stored within a “resource dictionary”. This is very
            useful when defining graphical objects (pens, brushes, and such) used throughout your application.

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"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<StackPanel x:Name="LayoutRoot" Background="White">
<Image x:Name = "imgNorthShore"  Source = "SplitRock.jpg"/>
</StackPanel>
</UserControl>






















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"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
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 = "http://www.wtip.org/images_035.jpeg"/>

</StackPanel>
</UserControl>



Categories of Controls | Image Control | Embedded Resources
Table of Contents
Copyright (c) 2008.  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.