Windows Phone布局管理

    布局管理是从一个整体的角度去把握手机应用的界面设计。

    Grid是先指定。使用Grid.Row和Grid.Column来指定它所在的行和列。Grid布局来设计计算器的界面。

    StackPanel为启用Panel的元素之一。设置Orientation属性可确定列表的方向。将多个TextBlock控件放进StackPanel容器里面可以产生根据空格自动折行的效果。

    使用相对于Canvas区域的坐标显示定位子元素。后声明的对象出现在最先声明的对象的前面。Canvas可以包含其他Canvas对象。

    枢轴视图的页面是循环的。显示在枢轴视图页面的控件都放到PivotItem中。

    在Windows Phone手机上Panorama布局使用很普遍。其BuildAction属性一定要设置为Resource。建议在全景视图中最多不要加入超过4个Item。

    下面举例说明Grid布局。Grid为一行四列，背景图片为header_bg.png，实现代码如下：

<Grid.Background>

    <ImageBrush ImageSource="/嗨翻校园;component/images/header_bg.png" Stretch="Fill" />

</Grid.Background>

    第一列为图片title.png，第二列为文字“嗨翻校园”，第四列为图像more_btn_normal.png。实现代码如下：

<phone:PhoneApplicationPage 

    x:Class="嗨翻校园.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    SupportedOrientations="Portrait" Orientation="Portrait"

    shell:SystemTray.IsVisible="True">

 

    <!--LayoutRoot 是包含所有页面内容的根网格-->

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

 

        <!--ContentPanel - 在此处放置其他内容-->

        <Grid x:Name="ContentPanel" Margin="4,0,4,696" Grid.Row="1">

            <Grid.Background>

                <ImageBrush ImageSource="/嗨翻校园;component/images/header_bg.png" Stretch="Fill" />

            </Grid.Background>

            <Grid.RowDefinitions>

                <RowDefinition Height="72"/>

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="72"/>

                <ColumnDefinition Width="120"/>

                <ColumnDefinition/>

                <ColumnDefinition Width="72"/>

            </Grid.ColumnDefinitions>

            <Image  Grid.Row="0" Grid.Column="0" Source="/嗨翻校园;component/images/title.png"/>

            <TextBlock Text="嗨翻校园" Grid.Row="0" Grid.Column="1" FontSize="28" FontWeight="Black" VerticalAlignment="Center" />

            <Image  Grid.Row="0" Grid.Column="3" Source="/嗨翻校园;component/images/more_btn_normal.png"/>

        </Grid>

    </Grid>

</phone:PhoneApplicationPage>

    实现效果如图：