Customize the Silverlight Installation Experience in about 15 Minutes

If you build Silverlight applications, chances are you have seen this screen before. I'm talking about the default “To view this content, please install…” screen shown below.

The Default Installation Screen.

This is the screen that your users see when they first visit your site without Silverlight installed. It’s just plain ugly and most users do not know what it means. Take this example below by Netflix, they have alerted the user with a friendly: “You're almost ready to watch…” Install Now. This screen makes the user eager to install Silverlight because they want to watch the movie. This is a perfect example of why you should spend time customizing this screen.

I snagged this image from Google images which pulled it off of Tim Heuer’s great site.

We are going to build a screen that is stylish in about 15 minutes using the Sample Code Microsoft provided for us. To begin, you are going to want to read the Silverlight Installation Experience White Paper and download the Sample Code.zip file.

Since you develop Silverlight Applications, you first need to disable the plug-in from your browser. I am using Internet Explorer 9 Beta at the moment and will show you how to disable it.

Click the Settings button first and then click on Manage add-ons:

You will want to find Microsoft Silverlight and disable it as shown below:

Now if you go to www.silverlight.net, you should see the following screen:

Now that our browser thinks that Silverlight is not installed, it’s time to finish the job.

Extract the Installation Experience Sample Code to a folder and you will have the following directories:

We are going to copy the CSS and images folder from the WebAppInstall Folder onto our clipboard to paste later:

Now that the files are copied, we are going to paste them into our Silverlight Project’s Web Folder.

At this point, you will need to add the stylesheets and images reference to either your .aspx or .html file. We are going to add it to our .html file.

<link href="css/slInstall.css"rel="stylesheet"type="text/css"/>
<link href="css/slInstallWide.css"rel="stylesheet"type="text/css"/>

You can go ahead and add the template below to the inside of your form tag, paying special attention to the div classes we are creating:

<form id="form1" runat="server" 
style="height:100%">
<div id="silverlightControlHost">
    <object data="data:application/x-silverlight-2," 
	type="application/x-silverlight-2" 
	width="100%" height="100%">
      <param name="source" 
      value="ClientBin/SilverlightApplication7.xap"/>
      <param name="onError" 
      value="onSilverlightError" />
      <param name="background" value="white" />
      <param name="minRuntimeVersion" value="4.0.50826.0" />
      <param name="autoUpgrade" value="true" />
     <div class="slInstall">
         <div class="slInstallPopupWide"style="margin-top: -182px; 
         height: 363px">
             <div class="slPopupContentWide">
                 <div class="slScreenshotWide">
                 <img src="images/wide/soccer.jpg"></div>
                         <div class="slTextContentWide">
                             <div class="slHeadlineWide">Michael Crump</div>
                             <div class="slDescription">
                             <p>Michael Crump is the developer of this fine demo.</p>
                             <p>He really enjoys building in 
                             Microsoft Silverlight and his hobbies include:</p>
                             <ul>
                             <li>Programming .NET</li>
                             <li>WP7</li>
                             <li>Film</li>
                             <li>Family</li>
                             </ul>
                             </div>
                             <img class="slDivider"src="images/wide/divider.png"
				style="display: block">
                             <a class="slButtonWide" 
				href="http://go.microsoft.com/fwlink/?LinkID=149156"
                             style="display: block">GET STARTED NOW!</a>
                         </div>
                     </div>
                 <div class="slPopupTopWide"></div>
                 <div class="slPopupLoopWide"
                 style="height: 17px"></div>
             <div class="slPopupBotWide"></div>
         </div>
     </div>
    </object><iframe id="_sl_historyFrame" style="visibility:hidden;
		height:0px;width:0px;border:0px"></iframe></div>
</form>

Now, when you load your site, it will have the following theme: (minus the good looking guy in the picture) 

This was accomplished in about 15 minutes. You can look at the code above and see that this was easily accomplished. A demo can be found here, but you will need to disable Silverlight in your add-on first. The full source can be found here.

The full source is located below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
    <title>SilverlightApplication7</title>
    <style type="text/css">
    html, body {
        height: 100%;
        overflow: auto;
    }
    body {
        padding: 0;
        margin: 0;
    }
    #silverlightControlHost {
        height: 100%;
        text-align:center;
    }
    </style>

<link href="css/slInstall.css"
rel="stylesheet"type="text/css"/>
<link href="css/slInstallWide.css"
rel="stylesheet"type="text/css"/>

    <script type="text/javascript" 
    src="Silverlight.js"></script>
    <script type="text/javascript">
        function onSilverlightError(sender, args) {
            var appSource = "";
            if (sender != null && sender != 0) {
              appSource = sender.getHost().Source;
            }
            
            var errorType = args.ErrorType;
            var iErrorCode = args.ErrorCode;

            if (errorType == "ImageError" || errorType == "MediaError") {
              return;
            }

            var errMsg = "Unhandled Error in Silverlight Application " +  
			appSource + "\n" ;

            errMsg += "Code: "+ iErrorCode + "    \n";
            errMsg += "Category: " + errorType + "       \n";
            errMsg += "Message: " + args.ErrorMessage + "     \n";

            if (errorType == "ParserError") {
                errMsg += "File: " + args.xamlFile + "     \n";
                errMsg += "Line: " + args.lineNumber + "     \n";
                errMsg += "Position: " + args.charPosition + "     \n";
            }
            else if (errorType == "RuntimeError") {           
                if (args.lineNumber != 0) {
                    errMsg += "Line: " + args.lineNumber + "     \n";
                    errMsg += "Position: " +  args.charPosition + "     \n";
                }
                errMsg += "MethodName: " + args.methodName + "     \n";
            }

            throw new Error(errMsg);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server" 
    style="height:100%">
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," 
	type="application/x-silverlight-2" 
	width="100%" height="100%">
          <param name="source" 
          value="ClientBin/SilverlightApplication7.xap"/>
          <param name="onError" 
          value="onSilverlightError" />
          <param name="background" 
          value="white" />
          <param name="minRuntimeVersion" 
          value="4.0.50826.0" />
          <param name="autoUpgrade" 
          value="true" />
         <div class="slInstall">
             <div class="slInstallPopupWide"style="margin-top: -182px; 
             height: 363px">
                 <div class="slPopupContentWide">
                     <div class="slScreenshotWide">
                     <img src="images/wide/mike1.jpg"></div>
                             <div class="slTextContentWide">
                                 <div class="slHeadlineWide">Michael Crump</div>
                                 <div class="slDescription">
                                 <p>Michael Crump is the developer of this fine demo.</p>
                                 <p>He really enjoys building in 
                                 Microsoft Silverlight and his hobbies include:</p>
                                 <ul>
                                 <li>Programming .NET</li>
                                 <li>WP7</li>
                                 <li>Film</li>
                                 <li>Family</li>
                                 </ul>
                                 </div>
                                 <img class="slDivider"
                                 src="images/wide/divider.png"
                                 style="display: block">
                                 <a class="slButtonWide" 
                                 href="http://go.microsoft.com/fwlink/?LinkID=149156"
                                 style="display: block">GET STARTED NOW!</a>
                             </div>
                         </div>
                     <div class="slPopupTopWide"></div>
                     <div class="slPopupLoopWide"style="height: 17px"></div>
                 <div class="slPopupBotWide"></div>
             </div>
         </div>
        </object><iframe id="_sl_historyFrame" style="visibility:hidden;
		height:0px;width:0px;border:0px"></iframe></div>
    </form>
</body>
</html>

 Subscribe to my feed