/Expression/ Create a custom Silverlight install experience

04/11/2009 | Filed under Discover > Expression

Microsoft’s Mike Ormond walks through a simple example of taking a vanilla Silverlight application and customising the Silverlight install experience for an end user

What You’ll Need

In order to work though this tutorial you will need a copy of Microsoft Expression Blend 3. There is a trial version of Expression Blend 3 available for download. In addition you will need the latest version of Microsoft Silverlight.

Tutorial

For those users who visit your shiny new Silverlight application that don’t already have the Silverlight plug-in installed,spending a little time customising the install experience will have a dramatic effect on whether or not they go on to install Silverlight and use your application.

Silverlight itself makes it very easy to customise the install experience. In this tutorial we’ll walk through a simple example of taking a vanilla Silverlight application and customising the Silverlight install experience for an end user.

A customised install experience essentially means presenting the user with alternative content that encourages them to proceed with installing Silverlight and therefore running your application. That content should be focussed on explaining the value of installing Silverlight so they can enjoy your application as well as simplifying choices and building trust. Much more detail on design considerations can be found in the Microsoft Silverlight Installation Experience White Paper.

For a great example of a custom Silverlight install experience, take a look at the Seat Exeo site (you can see the custom install by temporarily disabling the Silverlight plug-in, covered in the tutorial below).

1 – Create a vanilla Silverlight 3 application

We’re going to create the simplest of Silverlight applications and focus on improving the installation experience for people visiting our site who don’t have Silverlight installed.

Start Expression Blend 3, select File -> New Project from the menu and opt for a Silverlight 3 Application + Website. Give the new application an appropriate name:

This will create a new Silverlight 3 application and a website to host it. The Projects window should now look something like this:

Just so we can see our application is working, open MainPage.xaml in the designer and add a button. You can do this by opening the Assets window, selecting Button from the Controls section:

and drawing a Button onto the design surface.

Hit F5 (Run Project) to make sure the project builds and runs. A browser window should open with a single button displayed.

Stop the application by closing the browser window.

2 – Walk in your customer’s shoes

To understand things from an end-user’s perspective, let’s see what the experience is like for someone who visits your new site who doesn’t have Silverlight installed. The simplest way to simulate this is to disable the Silverlight plug-in in your browser.

If you’re using Internet Explorer 8, go to the Tools menu and select Manage Add-ons. Under Toolbars and Extensions find the Microsoft Silverlight entry and click the Disable button. In Firefox you can disable the Add-on from the Tools -> Add-ons menu.

Now run the application again (F5 in Expression Blend) and you’ll see the default Silverlight installation experience:

Good news! There’s not much too it so it shouldn’t be difficult to improve on it.

3 - Customising the install experience

Let me start by saying that what we’ll do here is very simple and addresses one possible scenario; the user doesn’t have Silverlight installed.  There are a number of other possibilities. Perhaps the wrong version of Silverlight is installed. Perhaps Silverlight is in the process of being upgraded to the latest version.

Silverlight can report each of these states to allow you to display appropriate UI. The Microsoft Silverlight Installation Experience White Paper describes this in some detail and has an associated sample code file you can use for your own site.For this tutorial I’ve used a simplified version of the sample code. I’ll describe exactly which files are required and any changes that need to be made.

Let’s assume we’re building a site for people with a passion for VW buses. Rather than presenting people with the “Install Silverlight” experience above, I’m aiming for something like this:

Most of the hard work is done by markup and CSS from the sample code. All I’ve had to do is modify some text and the image. With a bit more effort I could take things a lot further.

4 – Let’s get started

Back in Expression Blend, open the Default.html file in the solution you created earlier. The Default.html file is in the hosting website created as part of the solution. In the <body> tag you’ll find a <div> with id “silverlightControlHost” that contains an <object> tag. This is the Silverlight <object> tag.

The HTML content of the <object> tag will be rendered if Silverlight isn’t installed. By default that’s an anchor tag with the standard “Install Microsoft Silverlight” image. We’re going to replace this HTML with our custom install UI.

Delete the <a> tag and its contents and replace it with the following markup:

<divclass=“slInstall”>

<divclass="slInstallPopupWide"style="margin-top: -182px; height: 363px">

<divclass=“slPopupContentWide”>

<divclass=“slScreenshotWide”><imgsrc=“images/wide/camper.jpg”></div>

<divclass=“slTextContentWide”>

<divclass=“slHeadlineWide”>Dubs and Pubs</div>

<divclass=“slDescription”>

<p>Dubs and Pubs is <b>the</b> place for people interested in VWs and pubs.</p>

<p>The application is powered by Microsoft Silverlight technology and includes:</p>

<ul>

<li>Realistic virtual dub and pub environments</li>

<li>Smooth, high quality HD video of dubs in action</li>

<li>Amazing 3D animations and special effects</li>

</ul>

</div>

<imgclass="slDivider"src="images/wide/divider.png"style="display: block">

<aclass="slButtonWide"href="javascript:Silverlight.getSilverlight(‘3.0.40624.0’);"

style="display: block">UPDATE AND START</a>

</div>

</div>

<divclass=“slPopupTopWide”></div>

<divclass="slPopupLoopWide"style="height: 17px"></div>

<divclass=“slPopupBotWide”></div>

</div>

</div>

This gives us the basic element structure required. I’ve already modified the text (in the slHeadlineWide and slDescription <div>s above) for my own application. You should replace this with your own text (the whitepaper has some useful guidelines).

I’ve also added a custom image (camper.jpg). To do this I created a suitable image (optimum size is 165px by 124px) and added it to my website in a new folder (/images/wide). If you don’t have your own custom image, there are a couple to choose from in the sample code (see section 5 below).

To add this folder, right-click on the website node in the Projects window, select “Add New Folder” and call it “images”. Then right-click on the images folder to create a subfolder called “wide”

To add the custom image, right-click on the images/wide folder, select “Add Existing Item…” and browse to the image you want to use. Change the path in the <img> element in the slScreenshotWide<div> to match the filename of your imported image.

Save and run (F5) your application. You’ll see something like this:

We still need to add some CSS styles and images from the sample code to give our installation experience the necessary look and feel.

5 – Final touches

Download the sample code if you haven’t already done so and extract it to a suitable location.

We’re going to use files from the WebAppInstall folder.

In Expression Blend, right-click your images folder, select “Add Existing Item…” and browse to the WebAppInstall\css folder in the sample code directory. Add slInstall.css and slInstallWide.css to your images folder.

Right-click on your images\wide folder, select “Add Existing Item…”, browse to the WebAppInstall\images\wide folder and add all the images (you don’t need light.jpg or soccer.jpg but if you don’t have your own custom image to replace camper.jpg you can use one of these).

Finally, we need to add a reference to the two style sheets to our Default.html page. Open Default.html in Expression Blend and add the following two lines to the <head> element

<linkhref="Images/slInstall.css"rel="stylesheet"type=“text/css”/>

<linkhref="Images/slInstallWide.css"rel="stylesheet"type=“text/css”/>

Add them just after the existing styles in the <head> element as below:

Save and hit F5 to run your application. You should see something similar to the below (with Silverlight disabled / not installed):

Remember to re-enable Silverlight in your browser if you disabled it for testing purposes!

6 - Summary

Customising the install experience for Silverlight is critical to explaining the benefits and building trust with users, thus encouraging them to install Microsoft Silverlight and use your application.

Building a customised install experience is straightforward and the Microsoft Silverlight Installation Experience White Paper and Sample Code provides design guidance, instructions, code samples and templates to make it as simple as possible to produce a compelling experience.

About the Author

Mike Ormond works for Microsoft’s Developer and Platform Group in the UK where he promotes and educates the Microsoft platform and tools to the broad UK community of developers and architects. Mike blogs at http://mikeo.co.uk.