Silverlight教程

前一篇说明了Silverlight Canvas布局技术,本篇是Silverlight布局技术的最后一篇内容,主要谈谈页面大小变化的相关处理技巧,其中要用到Silverlight ScrollViewer控件,Sivlerlight toolkit ViewBox控件和Silverlight全屏界面技术。

Page Scrolling

有些界面要求,在有限的尺寸范围,显示很多的内容,这时我们只有使用页面的滚动。在Silverlight中,滚动支持是很容易实现的,只用借助Silverlight ScrollViewer控件即可。ScrollViewer控件是种容器控件,它只是确定滚动的范围,对子控件产生滚动效果,并不对子控件进行布局,所以通常情况下,我们应该使用一些布局控件如Grid控件,结合ScrollViewer控件使用。下面的例子使用十个TextBox和Button控件,产生滚动的效果,首先将十个TextBox和Button控件垂直的排列到Grid控件,Grid控件应该写成十行两列的布局格式,TextBox排在第一列,Button排在第二列,如下:

互联力量Silverlight之Scrolling|Scaling|全屏_Scaling

图1

asp.net教程

互联力量Silverlight之Scrolling|Scaling|全屏_Scrolling_02

图2

现在,需要修改上面的显示效果,将十组TextBox和Button放在小的范围内并支持滚动,只用在Grid外面加上ScrollViewer控件,如下:

互联力量Silverlight之Scrolling|Scaling|全屏_互联力量_03

图3

互联力量Silverlight之Scrolling|Scaling|全屏_Silverlight_04

图4

还可以强制ScrollViewer控件显示滚动条,设置 HorizontalScrollBarVisibility=”Visible” 显示水平滚动条,VerticalScrollBarVisibility=”Hidden” 隐藏垂直滚动条。

全屏

Silverlight可以实现全屏显示模式,并且可以在浏览器外执行,也就是说,你可以把一个Silverlight的网页当作windows的桌面程序来运行,而不需要像普通网页,必须在浏览器浏览。我们来看看,这个很炫的效果怎么实现。在页面中放入button,然后定义button的Click事件,只用一句话就实现全屏效果,如下:

互联力量Silverlight之Scrolling|Scaling|全屏_休闲_05

图5

武汉双证培训

Button事件代码如下:

1 2 3 4 private void Button_Click(object sender, RoutedEventArgs e) { Application.Current.Host.Content.IsFullScreen = true; }

运行效果,如图:

互联力量Silverlight之Scrolling|Scaling|全屏_Scrolling_06

图6

全屏效果开始有提示,说是按下Esc键可以退出全屏,这个提示很快就会消失,全屏后,没有任何边框,你需要注意这和IE全屏是完全不同的概念。