Silverlight's XAML Relative URI's and "Site of Origin"

Silverlight Logo

If you've used Silverlight 2 much, you probably have already run into the issue with URI's that can be specified in XAML (e.g. Image and MediaElement).  When using relative URI's for these elements, Silverlight 2 uses a "Site of Origin" resolution symantic. Instead of resolving the relative URI's based on the website that the Silverlight 2 application is hosted on, it resolves it based on the site of the origin of the application (the .xap file). If the application is hosted on a site (i.e. http://mysite.com) and our .xap file is in a directory (i.e. http://mysite.com/ClientBin), then a relative URI will be resolved based on the locaiton of the .xap file.  This means that a relative URI like "/foo.jpg" we resolve to "http://mysite.com/ClientBin/foo.jpg" *not* "http://mysite.com/foo.jpg" as you might expect.  In fact, changing this to "../foo.jpg" doesn't change anything.  It thinks that the directory of the .xap file is the root of the URI, no matter what you do.  Lastly, this also means that if your .xap file is hosted on a site other than your website, these URI's are relatvie to that remote web server, not yours.

These URI's are special because relative URI's look in the .xap file itself first. That's why you can include images in the .xap file and use them with relative URI's in Silverlight 2 without having to have a special syntax to specify the xap file itself. In addition, this syntax is meant to avoid having to learn the cryptic pack:// URI syntax that is used in WPF to retrieve items. So what can we do to simply this?

My initial approach was to try and make a XAML markup extension or something else nearly as arcane, but now I have a simple approach. I have started to place my .xap files at the the root of my web applications. This is in stark contrast to what the tools suggest (e.g. using a ClientBin directory), this means that these relative URI's will act like the root webserver.  So far I have not found a drawback to this approach.

To do this you will change the directory from ClientBin to simply blank.  For example, when you view the silverlight applicaitons (in the website properties), you can use the "Add" button to link a Silverlight application to your website:

When you add the Silverlight application, make sure and clear the Destination folder:

This will place the .xap files in the root of the web site and therefore relative URI's will resolve just like every other relative URI.  Voila!

If you know of a good reason not to do this, please comment below. I am vetting the technique to make sure its a good piece of advice to give.

Comments:

Gravatar

I can't get it to work with the gold Silverlight release. I have the xap in the root...

<asp:Silverlight ID="Xaml1" runat="server" Source="/SlidePuzzle.xap"
MinimumVersion="2.0.31005.0" Width="75%" Height="75%" />

I am trying to load an image with the following url:

"/prd_abl-b600_1_400.jpg"

It doesn't work. When I use:

http://localhost:53084/prd_abl-b600_1_400.jpg

It does work.

This is my code:

Img.Source = New System.Windows.Media.Imaging.BitmapImage(New Uri(ImageFile))

I've also used:

New Uri(ImageFile, UriKind.Relative)

when trying to load relative.

Any ideas?

Gravatar

Got it...

Img.Source = New System.Windows.Media.Imaging.BitmapImage(New Uri(Application.Current.Host.Source, ImageFile))

As explained here...

http://silverlight.net/forums/p/17694/59056.aspx#59056

Gravatar

I am creating a silverlight based ASP hosted website so i am adding a folder(images) in ASPapp.web so how can i call this folder from WCFservices

Gravatar

Ahmed,

I can't answer all questions like this. This is a different sort of question. I'd visit the http://asp.net/forums to ask this sort of question.

Gravatar

Thank's
I'm beginner. I did not know were to place my images, for relative Uri acces!

Gravatar

Hi Shawn,
There's something I still not understand very well about relative URI in Silverlight.
We know that by default URI are resolved from the ClientBin folder and that's OK.
Now try to put the code where you use this URI in a subdirectory in your project, you then have to add "../" in front of the URI.
Can you clarify this ?

Gravatar

Hi

I am Creating a silverlight application. When i give a source to my image control then it copies it in the project. Actually i donot want to copy images in the silverlight project. i want that my application access images from a particular folder and that folder is saved anywhere outside the project.

is there any way to do this?


 



 
Save Cancel