[Windows Phone] StackPanel和Grid在布局中的使用

在WindowsPhone开发中，主要有三种布局方式，Canvas、Grid和StackPanel。

Canvas是以坐标的方式定位子元素，相当于Android中的AbsoluteLayout方式。Canvas当中也可以包含子Canvas。

Grid是以表格的方式定位子元素。可以定义行和列，然后将元素布局到表格当中。类似于Html中的Table元素。

StackPanel是以水平或者竖直方向对子元素进行排列。相当于Android中的LinearLayout，或者是JavaGUI中的FlowLayout。

个人认为，为了兼容多种屏幕，最好尽量多使用Grid和StackPanel布局方式。以下以一个常见的登陆窗口的例子来说明如果使用Grid和StackPanel布局。这里为了说明方便，使用了Grid和StackPanel两种方式。（用其中任何一种布局方式，都可以达到设计目的的。）

phone:PhoneApplicationPage 
    x:Class="PhoneApp1.Login"
    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"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <StackPanel x:Name="LoginPanel">
        <TextBlock x:Name="PageTitle" Text="Login" Style="{StaticResource PhoneTextTitle1Style}" HorizontalAlignment="Center" Margin="0,30,0,0" />
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0">
                <TextBlock Text="UserName:" Style="{StaticResource PhoneTextLargeStyle}" HorizontalAlignment="Center" />
            </Grid>
            <Grid Grid.Column="1">
                <TextBox x:Name="name" HorizontalAlignment="Stretch" />
            </Grid>
        </Grid>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0">
                <TextBlock Text="Password:" Style="{StaticResource PhoneTextLargeStyle}" HorizontalAlignment="Center" />
            </Grid>
            <Grid Grid.Column="1">
                <TextBox x:Name="pass" HorizontalAlignment="Stretch" />
            </Grid>
        </Grid>
        <Button x:Name="login" Content="Login" HorizontalAlignment="Center" Margin="0,30,0,0" Padding="30,3,30,5" Click="login_Click" />
    </StackPanel>
</phone:PhoneApplicationPage>

这里先定义了一个StackPanel，而且使用默认的Orientation，从上到下依次放入了文本显示控件、Grid、Grid和按钮控件。文本显示控件显示“Login”。第一个Grid设置了两列，第一列是文本控件，显示“UserName”，第二列是一个文本输入控件。第二个Grid和第一个Grid结构相同，用来输入密码。按钮控件显示“Login”，点击后触发“login_Click”事件。

整个UI虽然简单，但是基本说明了Grid和StackPanel布局的使用。

附界面图如下所示：

---------------------------------------------------------------------------

GL（arui319）

http://blog.csdn.net/arui319

<本文可以转载，但是请保留以上作者信息。谢谢。>

---------------------------------------------------------------------------