如何更改加载浏览器外 Silverlight 3 应用程序的背景颜色？

发布于 2024-08-26 11:21:09 字数 196 浏览 4 评论 0原文

在浏览器外运行 Silverlight 3 应用程序时，启动需要一点时间，但时间足够长，足以引起人们的注意。在此启动期间，托管应用程序的窗口的背景显示丑陋的白色背景颜色。在浏览器中运行时，我们有一个启动屏幕，但它当然是通过 JavaScript 加载的。如何让闪屏在浏览器外的 Silverlight 3 上正常工作？或者如果这是不可能的，有没有办法至少可以改变窗口的背景颜色？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谁对谁错谁最难过 2024-09-02 11:21:09

我实际上找到了一种方法来做到这一点。万岁！很大程度上归功于此页面。请注意，我们正在磁盘上分发我们的应用程序；这些说明不适用于用户从 Web 安装的 Silverlight 应用程序。

事实证明，Silverlight 启动器在开始时加载了一个 HTML 页面。在安装应用程序的地方，有一个index.html 文件。该页面包含一个

不幸的是，这个

为了解决这个问题，我将托管 Silverlight 的

的可见性设置为隐藏。然后，在 HTML 的底部，我添加了一个设置计时器的

这是我的整个 HTML 页面：

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

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>

回复收藏 0 原文