Click here to Skip to main content
12,508,965 members (36,441 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

10.7K views
4 bookmarked
Posted

Customize the Silverlight Installation Experience in about 15 Minutes

, 22 Nov 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
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.

image

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.

image

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:

image

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

SNAGHTML239103a3

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

image

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:

image

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

image

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

image

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) 

image

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>

alt Subscribe to my feed

<iframe marginwidth="0" marginheight="0" src=""http://ads.geekswithblogs.net/a.aspx?ZoneID=5&Task=Get&PageID=31016&SiteID=1"" frameborder="0" width="1" scrolling="no" height="1" />

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

mbcrump
Software Developer (Senior) Telerik
United States United States
Michael Crump is a Silverlight MVP and MCPD that has been involved with computers in one way or another for as long as he can remember, but started professionally in 2002. After spending years working as a systems administrator/tech support analyst, Michael branched out and started developing internal utilities that automated repetitive tasks and freed up full-time employees. From there, he was offered a job working at McKesson corporation and has been working with some form of .NET and VB/C# since 2003.

He has worked at Fortune 500 companies where he gained experience in embedded systems design and software development to systems administration and database programming, and everything in between.

His primary focus right now is developing healthcare software solutions using Microsoft .NET technologies. He prefers building infrastructure components, reusable shared libraries and helping companies define, develop and automate process standards and guidelines.

You can read his blog at: MichaelCrump.net or follow him on Twitter at @mbcrump.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionIt doesn't show the message after installation, and doesn't treat the case, when need to upgrade Pin
Member 81319372-Aug-11 19:07
memberMember 81319372-Aug-11 19:07 
GeneralMy vote of 5 Pin
jackmos29-Nov-10 8:05
memberjackmos29-Nov-10 8:05 
GeneralMy vote of 5 Pin
KunalChowdhury22-Nov-10 16:48
mentorKunalChowdhury22-Nov-10 16:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160927.1 | Last Updated 22 Nov 2010
Article Copyright 2010 by mbcrump
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid