在很多情况下,从用户体验的角度考虑,我们都希望我们的Silverlight程序能够适应各种大小的浏览器窗口或者框架,如图所示:
那么如何使Silverlight程序能够自适应浏览器窗口的大小呢,即使在动态改变浏览器窗口的时候也不例外。Google了几次,都没找到自己所需要的方案,于是只好自己来解决了。
首先,有没有办法在Silverlight的程序代码中获取浏览器的高宽呢?这一点似乎没法做 到,Application.Current.Host.Content.ActualWidth和 Application.Current.Host.Content.ActualHeight获取的是插件的高宽。 BrowserInformation对象获取的虽然是浏览器的信息,但是没有高宽。那么可以不可以使用JS获取浏览器高宽呢,这当然是可行的。
获取浏览器高宽有了思路,那么怎么让程序自适应呢?于是想到了“window.onresize”事件。这样,问题就解决了,具体代码如下:
首先,在Silverlight中定义了如下方法:
<a href="http://www.cnblogs.com/codelove/archive/2011/06/12/2079232.html#">?</a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<code>/// <summary></code>
<code>/// 设置控件布局(根据窗口来自适应)</code>
<code>/// </summary></code>
<code>[ScriptableMember()]</code>
<code>public</code> <code>void</code> <code>SetLayout(</code><code>string</code> <code>_winWidth,</code><code>string</code> <code>_winHeight)</code>
<code>{</code>
<code> </code><code>double</code> <code>_windowWidth = Convert.ToDouble(_winWidth);</code>
<code> </code><code>double</code> <code>_windowHeight = Convert.ToDouble(_winHeight);</code>
<code> </code><code>//设置滚动框宽度</code>
<code> </code><code>svPlans.Width = _windowWidth - 8;</code>
<code> </code><code>Canvas.SetLeft(spButtons, _windowWidth - 400);</code>
<code> </code><code>Canvas.SetLeft(txtTitle, _windowWidth / 2 - 150);</code>
<code> </code><code>Canvas.SetZIndex(cvShowProcess, 999);</code>
<code> </code><code>Canvas.SetLeft(cvShowProcess, _windowWidth / 3);</code>
<code> </code><code>Canvas.SetTop(cvShowProcess, 80);</code>
<code> </code><code>//设置滚动框高度</code>
<code> </code><code>svPlans.MaxHeight = _windowHeight - 54;</code>
<code>}</code>
该函数是可以使用JS调用的,上一篇已经说明了,这里就略过了。布局的方法写好了,该写js去调用了。由于不想每个页面都写调用的js,于是UserControl_Loaded
事件就辛苦点,在里面写下如下代码:
<code>//JS调用SetLayout函数来设置控件布局</code>
<code>HtmlPage.Window.Eval(</code><code>@"</code>
<code>setTimeout(</code>
<code> </code><code>function () {slCtl.Content.PlanView.SetLayout(document.documentElement.clientWidth, document.documentElement.clientHeight);</code>
<code> </code><code>window.onresize = function() {</code>
<code> </code><code>slCtl.Content.PlanView.SetLayout(document.documentElement.clientWidth, document.documentElement.clientHeight);</code>
<code> </code><code>}</code>
<code> </code><code>}, 1000</code>
<code> </code><code>);"</code><code>);</code>