Silverlight和动态布局 (一)

2016-08-20 11:06:41来源:http://2063557.blog.51cto.com/2053557/541365作者:lsjhn110人点击


前面已经提到,在默认状态下,Windows Phone 7中的Silverlight程序以肖像模式(竖直模式)运行,XNA程序以风景模式(横向模式)运行。这一节我们将了解在Windows Phone7中如何处理模式改变。
  运行前面提供的示例,如果改变手机显示方向,我们的程序不会自动适应屏幕显示模式的改变,这是因为在创建Windows Phone工程时MainPage.xaml中就定义了默认的显示模式:
  Silverlight:SupportedOrientations="Portrait"
XNA: SupportedOrientations="Landscape"
  如果我们把这属性修改为:SupportedOrientations="PortraitOrLandscape",我们的程序在运行时就会自动适应屏幕方向的改变。但是这不是万能的,因为如果是肖像模式下设计好了程序布局,比如设置了固定Size,但是切换风景模式有些控件在进行Size调整时就会使布局变得很乱,甚至有些控件看不见(可能是Size的高度调整为很小,导致看不见)。当然,这种情况下,我们不能把控件的Size固定写死,而是需要利用Silverlight的动态布局来自动调整控件。
  Silverlight有两个很重要的Propery来实现:HorizontalAlignment和VerticalAlignment,使用这两个Property可以轻易地定位控件位置,而不需要像在Xna中那样根据屏幕大小和控件大小来计算控件位置。看下面的示例,我们将体会到这两个控件的方便性:
  在画面中摆放9个TextBlock,分别设置对齐方式如下:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"><TextBlock Text="Left-Top" VerticalAlignment="Top" HorizontalAlignment="Left"></TextBlock><TextBlock Text="Center-Top" VerticalAlignment="Top" HorizontalAlignment="Center"></TextBlock><TextBlock Text="Right-Top" VerticalAlignment="Top" HorizontalAlignment="Right"></TextBlock><TextBlock Text="Left-Center" VerticalAlignment="Center" HorizontalAlignment="Left"></TextBlock><TextBlock Text="Center-Center" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="100 200 50 50"></TextBlock><TextBlock Text="Right-Center" VerticalAlignment="Center" HorizontalAlignment="Right"></TextBlock><TextBlock Text="Left-Botton" VerticalAlignment="Bottom" HorizontalAlignment="Left"></TextBlock><TextBlock Text="Center-Botton" VerticalAlignment="Bottom" HorizontalAlignment="Center"></TextBlock><TextBlock Text="Right-Botton" VerticalAlignment="Bottom" HorizontalAlignment="Right"></TextBlock></Grid>
  再设置SupportedOrientations="PortraitOrLandscape",运行程序,改变模拟器显示方向,这些控件会自动调整位置。
  


  注意到最中间的TextBlock设置了Margin,Margin也是一个很重要的Property,Margin的类型是Thickness,它本身包含四个Property:Left,Top,Right,Bottom,我们可以方便地这只这四个Property的值,比如只给Margin设置一个值:Margin="100",那么这个值为被应用到Left,Top,Right,Bottom四个Property上;如果给Margin设置两个值:Margin="100 50",前一个值应用为Left和Right,后一个值应用为Top和Bottom,需要注意的是,如果Margin设置的很大,控件或者控件的一部分会被遮住,因为Silverlight为了维护Margin甚至会裁剪控件。我们注意到TextBlock还有另外一个Property:Padding,类型同样为Thickness,它和Margin的区别是:Margin属于控件外部的部分,Padding属于控件内部的部分,因此Padding可以用于响应屏幕触摸,但是Margin不可以。通常在Silverlight中,所有的控件都默认有非0的Margin,为了防止控件之间互相重叠,而Padding是一个稀有Property,只有TextBlock,Border,Control定义了该Property。
  如果没有显示设定控件的Size,但又希望在运行时需要知道控件的实际Size可以访问控件的ActualWidth和ActualHeight,但是要注意的是只有在控件初始化之后这两个Property在有非0的值。在下面的示例中,我们将会应用到SizeChanged事件来即时获取控件的Size。首先我们在最中间放置一个TextBlock,如下:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" SizeChanged="ContentPanel_SizeChanged"><TextBlock Name="txtInfo" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="22"></TextBlock></Grid>
  注意到为ContentPanel增加了SizeChanged事件,我们可以在事件处理函数中即时获取控件的实际Size:
private void ContentPanel_SizeChanged(object sender, SizeChangedEventArgs e){this.txtInfo.Text = string.Format("ContentPanel Size: {0}/n" +"TitlePanel Size: {1}/n" +"LayoutRoot Size: {2}/n" +"MainPage Size: {3}/n" +"Frame Size: {4}/n", e.NewSize, new Size(TitlePanel.ActualWidth, TitlePanel.ActualHeight), new Size(LayoutRoot.ActualWidth, LayoutRoot.ActualHeight), new Size(this.ActualWidth, this.ActualHeight), Application.Current.RootVisual.RenderSize);}
  注意两个项目:e.NewSize,返回的是触发事件的控件的最新Size;Application.Current.RootVisual.RenderSize,Application.Current返回当前进程,通常为创建的App对象,App对象的RootVisual返回了当前程序frame的引用,这样使用RenderSize可以获取程序所占的Size,通常为屏幕分辨率。运行程序:
  

本文来自GyyCyy.Xap的博客,原文地址:http://www.cnblogs.com/gyycyy/archive/2010/12/16/1907572.html

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台