Windows Phone笔记(2)方向处理之动态布局

　1.动态布局
　　默认情况下，Windows Phone应用程序在竖屏模式(垂直方向)下运行，当手机改变方向时我们的应用程序也应该能够根据方向的改变做出相应的布局调整。运行之前创建的HelloWindowsPhone项目程序，改变模拟器中屏幕的的方向:

我们发现页面并没有做出相应的改变。让页面根据自动改变很简单。只需要把MainPage.xaml中的PhoneApplicationPage标记的SupportedOrientations属性值更改为:PortraitOrLandscape即可,SupportedOrientations支持三个枚举值:Landscape(水平方向)、Portrait(竖直方向)、PortraitOrLandscape(根据手机具体方向自动调整)。

　　重新编译运行后，旋转模拟器我们会发现，页面方向也会自动根据方向改变进行调整。

这些对方向改变程序而做出的响应体现了Silverlight的动态布局。所以得页面元素都改变了位置，并且有的元素还改变的自身的大小。在处理动态布局中最重要的两个属性是:HorizontalAlignment(水平对齐方式)和VerticalAlignment(垂直对齐方式) 。
下面通过在一个Grid中放置9个TextBlock元素用来学习HorizontalAlignment和VerticalAlignment的9种不同组合下的使用方法。

MainPage.xaml
1 <phone:PhoneApplicationPage
2     x:Class="HelloWindowsPhone.MainPage"
3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
6     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
7     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
8     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9     mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
10     FontFamily="{StaticResource PhoneFontFamilyNormal}"
11     FontSize="{StaticResource PhoneFontSizeNormal}"
12     Foreground="{StaticResource PhoneForegroundBrush}"
13     SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
14     shell:SystemTray.IsVisible="True">
15
16     <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,0,12">
17         <TextBlock Text="Top-Left" VerticalAlignment="Top" HorizontalAlignment="Left" FontSize="22"></TextBlock>
18         <TextBlock Text="Top-Center" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="22"></TextBlock>
19         <TextBlock Text="Top-Right" VerticalAlignment="Top" HorizontalAlignment="Right" FontSize="22"></TextBlock>
20         <TextBlock Text="Center-Left" VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="22"></TextBlock>
21         <TextBlock Text="Center-Center" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="22"></TextBlock>
22         <TextBlock Text="Center-Right" VerticalAlignment="Center" HorizontalAlignment="Right" FontSize="22"></TextBlock>
23         <TextBlock Text="Bottom-Left" VerticalAlignment="Bottom" HorizontalAlignment="Left" FontSize="22"></TextBlock>
24         <TextBlock Text="Bottom-Center" VerticalAlignment="Bottom" HorizontalAlignment="Center" FontSize="22"></TextBlock>
25         <TextBlock Text="Bottom-Right" VerticalAlignment="Bottom" HorizontalAlignment="Right" FontSize="22"></TextBlock>
26     </Grid>
27
28
29 </phone:PhoneApplicationPage>

运行程序，旋转模拟器方向：

我们可以看出Windows Phone 中有三种可能的方向：纵向(竖屏)和横向（向左或向右,横屏）。
从前面给出的代码中我们发现有一个Margin属性这个属性在Silverlight布局中同样很重要，有个CSS开发经验的都知道Margin用来设置一个元素所有外边距的宽度。如果指这种一个值例如:"Margin=100"那么这个值将应用于四个边，如果是两个值如:"Margin=100,200"那么第一个值应用于左右，第二个值应用于上下，如果为四个值例如前面示例给出代码中的"Margin="12,0,0,12""那么应用的顺序为左、上、右、下。Margin属性是由FrameworkElement定义的；在实际的应用中，几乎每个元素都会有一个非零的Margin属性用来防止页面间的元素过于拥挤。
通过修改前面给出的代码我们进一步观察Margin在布局的中作用。
MainPage.xaml
1 <phone:PhoneApplicationPage

2     x:Class="HelloWindowsPhone.MainPage"
3     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
6     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
7     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
8     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9     mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
10     FontFamily="{StaticResource PhoneFontFamilyNormal}"
11     FontSize="{StaticResource PhoneFontSizeNormal}"
12     Foreground="{StaticResource PhoneForegroundBrush}"
13     SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
14     shell:SystemTray.IsVisible="True">
15
16     <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,0,12">
17         <TextBlock Text="Top-Left" VerticalAlignment="Top" HorizontalAlignment="Left" FontSize="22" Margin="0 50 0 0"></TextBlock>
18         <TextBlock Text="Top-Center" VerticalAlignment="Top" HorizontalAlignment="Center" FontSize="22" Margin="30 100 0 0"></TextBlock>
19 &nbs

补充：移动开发 , Windows Phone ,