ansaurus

Question

How does one change the background color for a loading out-of-browser Silverlight 3 application?

Answer 1

A:

Unfortunately, Silerlight 3 does not provide a way to customize this.

Jeff Wilcox 2010-03-24 22:07:27

Answer 2

A:

I actually found a way to do this. Hooray! Much credit goes to the document found at this page. Note that we're distributing our application on disk; these instructions won't work for a Silverlight application installed by a user from the web.

It turns out that the Silverlight launcher loads an HTML page at the start. Where the application gets installed, there's an index.html file. The page contains an <object> tag similar to the one used to host Silverlight on the Web.

Unfortunately, this <object> does not support the Silverlight splash screen XAML or progress indicator, which I guess is to be expected since the XAP isn't being downloaded. Also, setting the background color of the page or of the <object> also doesn't seem to take effect. However, it turns out that it's just that Windows immediately starts drawing the plugin, so the default window color is shown while doing so.

To work around this, I set the visibility of the <div> that hosts the Silverlight to hidden. Then, at the bottom of the HTML, I added a <script> that sets a timer. When the timer fires, the visibility of the <div> is changed to visible, and the Silverlight object is given focus. Even if the timer is set to 1 millisecond, that allows the HTML's host a chance to do the initial drawing of the web page. That allows any content underneath the Silverlight to show up.

Here's my entire HTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head>
    <style type="text/css">
      html, body { height: 100%; overflow: hidden; background-color: black; }
      body { padding: 0; margin: 0; }

      #silverlightControlHost 
      { 
          height: 100%; visibility: hidden; position: absolute; 
      }

      #splashScreen
      {
          background-image: url('blah.png');
          background-repeat: no-repeat;
          width: 575px;
          height: 330px;
          top: 185px;
          left: 212px;
          color: white;
          position: absolute;
          font-family: Arial, Sans-Serif;
      }

      #loadingText
      {
          position: relative;
          top: 165px;
          text-align: center;
          font-size: 18px;
      }
    </style>
  </head>
  <body scroll="no">
    <div id="silverlightControlHost">
      <object id='_sl' data="data:application/x-silverlight," type="application/x-silverlight" width="100%" height="100%">
          <param name="source" value="offline://1931574666.localhost"/>
          <param name="background" value="Black"/>
          <param name="enableGPUAcceleration" value="True"/>
          <a href="http://go.microsoft.com/fwlink/?LinkID=124807" 
            style="text-decoration: none;">
              <img src="http://go.microsoft.com/fwlink/?LinkId=108181" 
                alt="Get Microsoft Silverlight" style="border-style: none"/>
          </a>
      </object>
      <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
    </div>
    <div id="splashScreen">
        <div id="loadingText">Loading.  Please wait...</div>
    </div>
    <script>
        setTimeout(
            function() { 
                var ctrl = document.getElementById("silverlightControlHost");
                ctrl.style.visibility = "visible"; 
                document.getElementById('_sl').focus();
            },
            3000
        );
    </script>
  </body>
</html>

Jacob 2010-03-25 02:41:55

ansaurus

tags:

views:

answers:

How does one change the background color for a loading out-of-browser Silverlight 3 application?

related questions