Windows phone 7 布局与大小

对于Windows phone 7标准的800px * 480px 屏幕中各种大小分析如下：

新建一个Windows phone 应用程序，默认状态下 shell:SystemTray.IsVisible="true" 表示显示系统托盘（在Portrait视图下系统托盘占用高度为32px 在landscape视图状态下，系统托盘占用72px的宽度From MainPage）

为ContentPanel添加SizeChanged事件，并且添加一个TextBlock，其余使用默认，如下

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="TEST" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="size" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" SizeChanged="ContentPanel_SizeChanged">      
            <TextBlock Name="CenterTextBlock" FontSize="30" Text="Center_Center" VerticalAlignment="Center"  HorizontalAlignment="Center"></TextBlock>    
        </Grid>
    </Grid>

　为SizeChanged实现处理函数：

 private void ContentPanel_SizeChanged(object sender, SizeChangedEventArgs e)
{
            CenterTextBlock.Text = string.Format("ContentPanel Size:{0}\n"+
                                                 "TitlePanel Size:{1}\n"+
                                                 "LayoutRoot Size:{2}\n"+
                                                 "MainPage Size:{3}\n"+
                                                 "Fram Size:{4}",
                                                 e.NewSize,  //获取ContentPanel大小
new Size(TitlePanel.ActualWidth,TitlePanel.ActualHeight), //TitlePanel
new Size(LayoutRoot.ActualWidth,ActualHeight),         //LayoutRoot
 new Size(this.ActualWidth,this.ActualHeight),          //当前页面
Application.Current.RootVisual.RenderSize);            //main application UI      
}

这段代码是显示页面中各种大小信息。

运行显示如图：

可以观察到系统托盘是占有 32px的高度，名字为LayoutRoot的Grid的大小是和MainPage的大小一致的，但是垂直方向上LayoutRoot的垂直高度不等于 TitlePanel的高度和ContentPanel的高度的和，因为TitlePanel有45px的边距（17px在上面，28px在下面）

修改SupportedOrientations="PortraitOrLandscape" 切换到landscape视图如下

默认状态下系统托盘是占有 72px的宽，名字为LayoutRoot的Grid的大小是和MainPage的大小一致的，但是垂直方向上LayoutRoot的垂直高度不等于 TitlePanel的高度和ContentPanel的高度的和，因为TitlePanel有45px的边距（17px在上面，28px在下面）

同时由于默认状态下 TitlePanel的左右边距分别为12px 和0px ，ContentPanel的左右边距分别为12px 和12px 故显示如图。

下面也是几个相似的图片

不显示系统托盘 shell:SystemTray.IsVisible="False"

不显示系统托盘 shell:SystemTray.IsVisible="False" 且为landscape视图

显示Application视图很容易看出ApplicationBar的高度为72px