Silverlight Not Installed Action

Ok everyone, this will be a simple and short post, but useful.  When dealing with Silverlight you will run into the issue of users not having it installed with the web browser they are using.
So instead of just showing the default image provided when creating a new silverlight application (as shown below), you can show some custom HTML code, or redirect to another web page.

This HTML code can include simple text or images as well. Tim Heuer has a great post describing on how to do this, so my post shows the code I used and also a few lines of javascript you can use to redirect to another web page if the user doesn't have silverlight.  Shown below is the modified code I made from the code that shows up in your test page:

Note: This was made using Silverlight 3

<div id="silverlightControlHost" style="width: 280px; height: 250px; text-align:center;">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
          <param name="source" value="ClientBin/TestSL3.xap"/>
          <param name="onError" value="onSilverlightError" />
          <param name="background" value="white" />
          <param name="minRuntimeVersion" value="3.0.40624.0" />
          <param name="autoUpgrade" value="true" />
         <%-- <script type="text/javascript">
              //redirect to another page because user does not have silverlight installed.
              window.location = "default.aspx";     
          </script>--%>
          <div style="width: 100%; border: solid 1px black;
               background-color: #4682B4;font-size: 12px;
               font-family: Tahoma; color: White;">
              <div>
                <br />
                <span style="color:#FFD700; font-family: Verdana; font-size: 13px; font-weight: bold;">You do not have Silverlight Installed</span>
                <br /><br />
                To enjoy the full experience of this website, you must install the Silverlight plug-in. <br />
              </div>
              <br /><br />
              <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration:none">
                   <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
              </a>
              <br /><br />
              <div>
                Once installed, you may have to close and re-open your web browser.
              </div>
              <br />
          </div>
        </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
      </div>

You'll see that I added the custom HTML code after the last param tag. You'll also notice that I have commented out the script tag. If you would like to redirect someone to another page, just uncomment it and replace the default.aspx with a location you would like the user to end up at. So this is the end result:

And that's that, now when a user to your website doesn't have silverlight installed, something more useful can show up so he/she knows what to expect.

Other useful resources:

Tutorial on a Splash Screen:

http://weblogs.asp.net/lduveau/archive/2009/09/05/tutorial-create-a-custom-silverlight-splash-screen.aspx

Tim Heuer's post:

http://timheuer.com/blog/archive/0001/01/01/creating-a-great-silverlight-deployment-experience.aspx


For those beginners out there like me with Silverlight, this can at least help the install experience for the user.  Happy coding!