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

[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

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

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

1楼hu3619220326天前 13:20

看好WP7