How does one change the background color for a loa

When running our Silverlight 3 application out-of-browser, startup takes a little time, but it's long enough to be noticeable. During this startup, the background of the window hosting the application displays an ugly white background color. When running in-browser, we have a splash screen, but that's loaded via JavaScript of course. How can I get a splash screen working for an out-of-browser Silverlight 3? Or if that's not possible, is there a way I can at least change the background color of the window?

回答1:

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">
<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>

回答2:

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