Geeks With Blogs

News
Michael Crump Microsoft MVP, INETA Community Champion and XAML Advocate.

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 IE9 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 like 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. Full source can be found here.

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

Posted on Saturday, November 6, 2010 8:28 AM | Back to top

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