当手机旋转到横向模式时，我们把TotalsGrid移到第二列，紧邻NumbersGrid，要实现这个效果，首先LayoutRoot需要有三行两列来容纳这些内容。
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="0" x:Name="LandscapeColumn" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="0" x:Name="LandscapeColumn" />
</Grid.ColumnDefinitions>
前两个Height属性都设为“Auto”的RowDefinition元素表示它们只会占据所容纳内容需要的高度，第三个RowDefinition元素的Height属性设为“*”，表示高度不限，要多少占多少。
第一个ColumnDefinition元素的Width属性设为“Auto”，表示它的宽度会根据所容纳内容自动进行调整，第二个ColumnDefinition元素的Width属性设为“0”，这是因为在纵向模式时这一列(LandscapeColumn)是不显示的。
为了同时支持横向和纵向模式，应用程序必须声明它支持，然后再处理方向变化事件：
SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;
this.OrientationChanged += new EventHandler<OrientationChangedEventArgs>(MainPage_OrientationChanged);
this.OrientationChanged += new EventHandler<OrientationChangedEventArgs>(MainPage_OrientationChanged);
当方向变化时，我们首先将TotalsGrid移到紧邻NumbersGrid的第二列中去，然后对列的属性做相应的修改：
void MainPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
{
// In landscape mode, the totals grid is moved to the right on the screen
// which puts it in row 1, column 1.
if ((e.Orientation & PageOrientation.Landscape) != 0)
{
LandscapeColumn.Width = GridLength.Auto;
Grid.SetRow(TotalsGrid, 1);
Grid.SetColumn(TotalsGrid, 1);
LayoutRoot.ColumnDefinitions[1].Width = GridLength.Auto;
}
// In portrait mode, the totals grid goes below the number pad at the
// bottom of the screen which is row 0, column 2.
else
{
LandscapeColumn.Width = new GridLength(0);
Grid.SetRow(TotalsGrid, 2);
Grid.SetColumn(TotalsGrid, 0);
LayoutRoot.ColumnDefinitions[1].Width = new GridLength(0);
}
}
{
// In landscape mode, the totals grid is moved to the right on the screen
// which puts it in row 1, column 1.
if ((e.Orientation & PageOrientation.Landscape) != 0)
{
LandscapeColumn.Width = GridLength.Auto;
Grid.SetRow(TotalsGrid, 1);
Grid.SetColumn(TotalsGrid, 1);
LayoutRoot.ColumnDefinitions[1].Width = GridLength.Auto;
}
// In portrait mode, the totals grid goes below the number pad at the
// bottom of the screen which is row 0, column 2.
else
{
LandscapeColumn.Width = new GridLength(0);
Grid.SetRow(TotalsGrid, 2);
Grid.SetColumn(TotalsGrid, 0);
LayoutRoot.ColumnDefinitions[1].Width = new GridLength(0);
}
}
最后横向模式的显示效果如下：
图 4 横向模式显示效果
