Silverlight和动态布局 (一)

　　前面已经提到，在默认状态下，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，分别设置对齐方式如下：
ContentPanel
<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，如下：
ContentPanel
<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：
SizeChanged
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，通常为屏幕分辨率。运行程序：

 

 

最后回忆下visual tree的层次：

PhoneApplicationFrame

          PhoneApplicationPage

                      Grid named “LayoutRoot”

                                 StackPanel named “TitlePanel”

                                              TextBlock named “ApplicationTitle”

                                              TextBlock named “PageTitle”

                                 Grid named “ContentPanel”

                                              TextBlock named “txtInfo”