Resource in Silverlight - Part 1 (Resource Files)


Resources are always a vital part of a web application and for Silverlight applications too, resources play a major role for creating Rich internet applications. In this context Resource means images, audio files, video files, objects, which can be styles or datatemplate used for creating a rich application. Silverlight does support various ways of storing resources and managing them.

In this article, we will discover the different options available to manage resources in Silverlight applications.

Various Ways of Managing Resources

In Silverlight, the resources can be managed in the following three ways:

  • Resource on server side, loading on demand
  • Resource embedded inside XAP/Assembly
  • Resources from external assemblies

The most important point is that we should not confuse an Assembly Resource and a XAML Resource although both are called a resource. We can divide resource types into two categories:

  • Files other than executable or Binary/Assembly Resource (Managed through Resource Files)
  • Objects such as Styles, Templates etc. or XAML Resource (Managed Through Resource Dictionary)

Basically the scope of this article is to give you a brief introduction about Resource Files or Binary Resource or Assembly Resource. In this article, we will also explore how these resource files can be stored and managed from Silverlight. The subsequent article will focus on Resource Dictionary or XAML Resource.

Managing Resource Files

Before moving on the Resource Files let's have a quick look into some important terminologies we will come across frequently.

Application Package - The files packaged as an XAP file which includes the Silverlight assemblies and Application manifest files also Resources if any.

Application Root - The location where XAP files reside in the deployed solution most of the time ClientBin.

URI - Stands for Uniform Resource Identifier, is the path to the the Resource. It can be either:

Absolute URI Relative URI
Exact location of the Resource for .eg. a qualified URL (www.manaspatnaik.com/image1.jpg) Location of file with respect to the application root (Where Application package resides)For e.g. "/image1.jpg"
Used when files are other than application root A common scenario of storing resource with in the domain under application root
Files must be inside the same application root folder where package exists.

The application root is the folder where the application package XAP file resides. So all the files must be within the same folder as the XAP file. The relative URI does not look for content outside this folder but it does support a folder structure inside the application root. So we can have our file image1.jpg inside Resource folder inside application root folder.

Other than Uri there is BuildAction property for each files which we will discover as we go through with a sample as follows.

Resource File

As we know Silverlight application is nothing but a package of files compressed and stored as a single file. Any resource added to the client side inside the Silverlight project will be transferred to the client side based on the Mode of Deployment. Let's check with the example as bellow:

SNAGHTML1186ae8

Mode Of Deployment, BuildAction

Here the most important to note is how the resource is configured for deployment; by default the file's BuildAction properties are set as a Resource. Silverlight does offer various options which can be handy at some time.

image

Generally the resources can be be deployed with the following options for BuildAction:

  • Content
  • Resource
  • None

With each option the application package and the URI defers. Also make a note that in a Silverlight project, although there are various options but only above mentioned build actions can be used.

Content -: Content option adds the file to the application package as a loose resource.

image

Here in the project Change the file BuildAction as Content and Rebuild the solution. The XAP file size is almost 42 KB which includes Image.

image SNAGHTML13e0aee

Here to locate the resource file you can follow either of the methods mentioned.

XAML :

1
2
3
<Grid x:Name="LayoutRoot" Background="White">
    <Image Margin="12,12,12,77" Name="image1" Stretch="Fill" Source="/BananaTECH.jpg" />
</Grid>

Code :

1
image1.Source = new BitmapImage(new Uri("/BananaTECH.jpg",UriKind.Relative));

Resource: This Option will add the resource within the application package inside the Silverlight assembly .

image

On rebuilding the project, after changing the BuildAction type of image, the XAP file size remains the same 43 KB but the image is embedded inside the MySilverlightApp.dll. You can compare the difference in size of the assembly compared to the above content type.

image SNAGHTML157f83a

To locate the resource there should not be any leading trails.

XAML :

1
2
3
<Grid x:Name="LayoutRoot" Background="White">
    <Image Margin="12,12,12,77" Name="image1" Stretch="Fill" Source="BananaTECH.jpg" />
</Grid>

Code :

pre ! important; float: none ! important; border-top-width: 0px ! important; border-bottom-width: 0px ! important; height: auto ! important; font-size: 1em ! important; vertical-align: baseline ! important; overflow: visible ! important; border-left-width: 0px ! important; right: auto ! important; font-weight: normal ! important; border-right: 3px solid rgb(108, 226, 108); top: auto ! important; left: auto ! important;" class="line number1 index0 alt2">1
image1.Source = new BitmapImage(new Uri("BananaTECH.jpg", UriKind.Relative));

None: This option neither adds the resource to the application package nor to the Silverlight assembly. You need to add the resource to the server manually.

With the None build action the XAP file size is reduced dramatically as the resource is not embedded inside the package or assembly. The screenshots below shows the XAP file with 4 KB for size. To make your deployed code working we need to place the resource file inside the published project under clientbin.

SNAGHTML1632a61 SNAGHTML1655c3a

XAML :

1
2
3
<Grid x:Name="LayoutRoot" Background="White">
    <Image Margin="12,12,12,77" Name="image1" Stretch="Fill" Source="BananaTECH.jpg" />
</Grid>

Code :

1
image1.Source = new BitmapImage(new Uri("BananaTECH.jpg", UriKind.Relative));

Resource from an external assembly

It is wise to refactor the resource into a separate assembly for reuse amongst the applications. The best example of external assembly for a resource is the theme libraries. The Silverlight also supports use of external Silverlight assemblies in projects. Let's create a Silverlight assembly project.

image

Then adding a reference to the Silverlight project will allow you to use the resource file inside the application.

image

Resources can be used using the following syntax – /assemblyName;component/resourceLocation. For example in this project the image file from the MyResources assembly can be fetched with URI "/MyResources;component/Rupees.jpg". The component here is the keyword.

1
2
3
<Grid x:Name="LayoutRoot" Background="White">
    <Image Margin="12,12,12,77" Name="image1" Stretch="Fill" Source="/MyResources;component/Rupees.jpg" />
</Grid>

Conclusion

Hope this article gave you a clear idea about Resource Files in Silverlight. However, the topic, resource is not complete yet. In this article, I discussed about Files/ Binaries only. In my subsequent articles, I shall cover more about this topic.

Send me you suggestions and queries.


erver'>

Similar Articles