Geeks With Blogs
Light Up the Web Blog about programming in Silverlight

Do you like install plug-in image for Silverlight 2.0? Do you think that user, who don’t know anything about Silverlight, will click it?



Usual the answer is NO!


What we should care is a user’s experience from first moments. If he disappoint on first install’s image, he probably won’t come back to our application.

What we can do about this?

We can customize installation process, so it will be more user-friendly and intuitive. We can give him information that everything is ok, that he should click installation button and nothing bad will happen!

To change installation process, we can create and show user our own “install plug-in” image. Let’s do this now!

For html files

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
   
<param name="source" value="ClientBin/SilverlightApplication1.xap" />
   
<param name="onerror" value="onSilverlightError" />
   
<param name="background" value="white" />
   
<param name="minRuntimeVersion" value="2.0.31005.0" />
   
<param name="autoUpgrade" value="true" />
   
<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
       
<img src="ClientBin/InstallSL.png" alt="Get Microsoft Silverlight" style="border-style: none" />
   
</a>
</object>

To set our image, we should only change “src” value for <img tag and point it at our image. We can even modify entire html code, write nice information about application, video, links to others pages, etc.

For aspx files

<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightApplication1.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%">
 
<PluginNotInstalledTemplate>
     
<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
         
<img src="ClientBin/InstallSL.png" alt="Get Microsoft Silverlight" style="border-style: none" />
     
</a>
 
</PluginNotInstalledTemplate>
</asp:Silverlight>

For ASP.NET (aspx) files we have to add parameter "PluginNotInstalledTemplate" and as a value insert html code. It can be, for example image with information about application or entire html code. In this example, I used the code from html example.

How to in easy way test our installation image

To test how our pre-installation html code looks like, we don’t need to uninstall every time Silverlight plug-in, we can use instead of it, additional features in Internet Explorer.

All you have to do is open “Tools” -> “Manage Add-ons” -> “Enable or Disable Add-ons”

Now find Silverlight plug-in and turn it on/off. Your application will restart automatically and pre-installer will appear.

My example

As a example I would like to show pre-installer image for my Solitaire Game.

Game looks like this:


When user don’t have plug-in to Silverlight, game looks like this:

But when we change pre-installer image, then game could look like this:


p.s. Polish version: http://jacekciereszko.pl/2008/11/obrazek-instalacyjny-silverlight-20.html

Best Regards,
Jacek Ciereszko

Posted on Thursday, December 4, 2008 12:25 AM | Back to top

Copyright © Jacek | Powered by: GeeksWithBlogs.net | Join free