Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

November 13, 2009

Silverlight: Images

Filed under: C#,Silverlight,VB.NET @ 7:09 pm

I just needed to add a simple image to my Silverlight application to include a company logo. Three hours later …

This post provides information on the image formats supported by Silverlight so that you don’t run into the same issues and waste as much time as I did today.

[NOTE: To anyone on the Silverlight team that may read this: Why not have Visual Studio (or even Expression Blend) tell me I was making this mistake instead of letting me waste so much time!!]

First, I followed the *very* simple instructions I found everywhere:

1) Add the image to the Silverlight project.

I put mine in an Images folder in the project.

2) Set the Build Action for the image to "Resource".

3) Add the image tag to the XAML.

Easy peasy. Then why didn’t it work? No image appeared. I read/tried everything I could think of but no luck. Three hours later my partner suggested I try another file… AND IT WORKED.

The problem was the image format!

  • bmp: NOT SUPPORTED IN SILVERLIGHT
    No warning, no error, it just does not display the image
  • jpg: It works, but does not support a transparent color
  • gif: It supports a transparent color, but NOT SUPPORTED IN SILVERLIGHT
  • png: It works AND it supports a transparent color

As soon as I replaced my logo.bmp with a logo.png, it worked!

[For help setting up a transparent color, see this Silverlight Tip of the Day.]

So here again are the steps for adding an image to a Silverlight application:

1) Add the image to the Silverlight project.

BE SURE that the file is either a .jpg or .png format image.

image

NOTE: The above screen shot shows the image under my Silverlight VB project, but the same is true for a C# Silverlight project.

2) Set the Build Action for the image to "Resource".

image

3) Add the image tag to the XAML.

<StackPanel Background="BlanchedAlmond">
    <Image Source="Images/Logo.png" Width="100"
           HorizontalAlignment="Left"
           Margin="2"/>
    <data:DataGrid x:Name="CustomerList"
      ItemsSource="{Binding Data, ElementName=CustomerSource}">
</data:DataGrid>           
</StackPanel>

NOTE: Since I set up the file as a resource, I set the source property of the Image tag directly to the location of the image in the Silverlight project.

And the result:

image

Enjoy!

7 Comments

  1.   BEM — November 14, 2009 @ 9:09 pm    Reply

    …and, in order for PNG transparency to work, the PNG must be 24 bits/pixel. Like you, I found out the hard way.

  2.   DeborahK — November 16, 2009 @ 10:24 am    Reply

    Thanks for the tip, BEM!

  3.   Ted — November 16, 2009 @ 11:19 am    Reply

    - Assume that Microsoft tools do not support anything other than the most plain image format (open it in paint and also preview it via file explorer just to check). MS largely lags behind in supporting image, audio and video formats.
    – Use a decent image editing program (photoshop, gimp, etc.) so that your images match the image format standard
    – Use more widely supported sub-format like 4:2:2 in Jpeg instead of 4:1:1
    – Consider optimizing the image using optipng or jpegtrans
    – Assume that Silverlight/MS apps will very poorly resize or dither your image.

  4.   DeborahK — November 20, 2009 @ 12:27 am    Reply

    Thanks for the tips, Ted.

  5.   Ganesh Ranganathan — November 23, 2009 @ 12:33 am    Reply

    Hi Deborah,

    We can also bind an image tag’s Image Source proprety to and ImageSource tag in the codebehind. That works too :)

  6.   Volker — November 26, 2009 @ 12:07 pm    Reply

    Hi,

    let me add another curiosity (and example of sleazy app-development) with images, but this time WPF:

    Struggling around with XAML and WPF one’ll find out that using Blend and VS side by side will be highly recommended. OK that far. Now, let you (or even worse your stylish designer) open your .net-project in Blend. First you arange some window-properties. Among others the Icon-Prop. Blend gives you the file-open dialog and let you choose (as you did that thousends of times with winforms before) an ico-file. And now you hit F5 to run the project, but the only thing you’ll get is the well known “app encountered a problem; report this to MS or not”. To me as a winforms developer the near to most feared and hated message. But no further explanation. Hmmm.
    So let’s try it in VS. There you’ll get an error, to, but this time a FileFormatException, giving you the hint, that you should probably try png instead of ico and e`voila, it works!

    1) Why is the ico-format supported by the file-open dialog, when it’s usage creates an error? Bad, because a good app should let the user make mistakes…

    2) Why not giving a qualified error message?

    Both aspects make THIS implementation really is lousy and not appropriate to designers (you know, the guys wearing stylish glasses and love to use their fruity-comps and hate to use that boring business stuff instead ;-)).

    Seems as if MS has to do much more homework to launch new technologies in a way that doesn’ make it’s critics laugh…

    Greetings from rainy & stormy germany

    Volker

  7.   Jonasaky — September 29, 2011 @ 12:57 pm    Reply

    Great!!

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2014 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs