Infosys Microsoft Alliance and Solutions blog

« Debugging .NET 4 Applications | Main | Two-Tier ERP for the new business »

Working with Images in Silverlight Application

Working with images is fairly straight forward in an Silverlight application and there are already many articles about this on the net. So I am not going to get into that. However recently my team faced an issue and that is what I will share here.

The scenario is that we needed to load image programmatically from a file folder and these images are not embedded in the application are resources. Assuming that the images are inside of a folder called Images, this is fairly trivially handled using some code like this (where image1 is the Image control that will display the image) 

            BitmapImage bmp = new BitmapImage(new Uri("Images/Atul.jpg", UriKind.Relative));

            image1.Source = bmp;

 

However when we tried with this code, nothing happened, i.e. no image got displayed on the UI. With some debugging, we realized that while we gave the path as Images/Atul.jpg, the files was actually being searched at ClientBin/Views/Images/Atul.jpg.

The ClientBin part, is easy to understand. That is the folder from where the Silverlight XAP got loaded and hence relative URIs are being resolved related to this folder. But why this extra Views in between?

Our initial thinking was that this is due to the namespace the particular code was in. However a bit more deliberation and this didn't seemed like the right answer. Had this been the case, then the path possibly should have been ClientBin/SilverlightApplication1/Views/Images/Atul.jpg, as the actual namespace was SilverlightApplication1.Views.

Looking at the solution explorer, we then realized that this particular code was actually within a folder called Views. We were getting our hands on MVVM and hence had relevant folders created. But then shouldn't the folders be only for our code organization? Why was that impacting the path?

The answer lies in how the XAMLs are packaged in the assembly. Using reflector we opened the SilverlightApplication1.dll and the resources part of it showed the following.

 

SLImage.jpg

As you seen in the figure above, the particular XAML file, since it was inside the Views folder, got embedded as views/Silverlightcontrol1.xaml. It is due to this when relative URI is resolved, that the base path is taken as ClientBin/Views and not just ClientBin. So get the image to display, we could either of the following

            BitmapImage bmp = new BitmapImage(new Uri("Views/Images/Atul.jpg", UriKind.Relative));

            image1.Source = bmp;

OR

            BitmapImage bmp = new BitmapImage(new Uri("../Images/Atul.jpg", UriKind.Relative));

            image1.Source = bmp;

 

The second approach is possible safer, since in case you change the folder name, the relative path will still work. Do share any comments that you may have.  

 

 

 

 

 

Comments

I am implementing a MVVM model in my SL application. I have created 2 properties, one of type Uri and the other of type BitmapImage.

I alternately bind these two properties to the source of an image in my View and it works in both cases!

Can you throw light on how can the same property take values of different datatypes?

Nimisha, this is due to the underlying type conversion support provided by both WPF and Silverlight. The property actually is of type ImageSource which internally is of type BitmapImage. Hence assigning BitmapImage will work.

As for property of URI also working, this uses the default type converter. In this case the BitmapImage(uri) constructor to create the BitmapImage. Read more on this in MSDN at http://msdn.microsoft.com/en-us/library/system.windows.controls.image.source(VS.95).aspx.

Quoting specific statement from MSDN - "You can set this property in XAML, but in this case you are setting the property as a URI. The XAML behavior relies on underlying type conversion that processes the string as a URI, and calls the BitmapImage(Uri) constructor. This in turn potentially requests a stream from that URI and returns the image source object."

Recently I was trying to set window background using ImageBrush created as a static resource. I was using a bmp image. Nothing was happening, though the same image was working for my WPF application. After pulling my couple of hair (I still have few left) while digging on net, I got to know that bmp image is not supported in silverlight. Strange...no compile/runtime error, no output!! I would expect the XAML parser to throw some kind of error/warning if a bmp image is being referred.

@Laxman, this can be difficult and more so since the documentation isn't very clear on this either. The one thing that you can use however is the ImageFailed event (http://msdn.microsoft.com/en-us/library/system.windows.media.imagebrush.imagefailed(v=VS.95).aspx) that is raised in case there is a failure in loading images. This includes invalid formats as well. Surprisingly however, the error details don't shed much light and you need to still figure out what really went wrong.

I have developed an application where i used Snapshell device to capture image and details from the given card. I have Added the dll in the server side and i am using wcf service to retrieve to the data on client side. Here comes my problem i able to create a directory on local machine with the help of code which i have written in the service and i able to capture those images in the folder on the local machine. i want to retrieve those images on the client side to displayed on extract data button click. i am able to get the information on the text boxes of the client side but i am unable to display the images which are stored on my local computer.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Please key in the two words you see in the box to validate your identity as an authentic user and reduce spam.

Subscribe to this blog's feed

Follow us on

Blogger Profiles

Infosys on Twitter