[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

<本文可以轉載，但是請保留以上作者資訊。謝謝。>

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