WP8基礎------布局學習

超級新手一枚，沒有搞過windows的任何開發。以下内容都是對着API自己看的。 昨晚的學習成果：

布局檔案：

<phone:PhoneApplicationPage x:Class="SmartQQ.Phone.MyPage"
                            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"
                            shell:SystemTray.IsVisible="True">

    <!--LayoutRoot 是包含所有頁面内容的根網格-->
    <Grid x:Name="LayoutRoot"
          Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!--TitlePanel 包含應用程式的名稱和頁标題-->
        <StackPanel Grid.Row="0"
                    Margin="12,17,0,28">
            <TextBlock Text="Windows Phone 8 QQ"
                       Style="{StaticResource PhoneTextNormalStyle}" />
            <TextBlock Text="登入"
                       Margin="9,-7,0,0"
                       Style="{StaticResource PhoneTextTitle1Style}" />
        </StackPanel>

        <!--ContentPanel - 在此處放置其他内容-->
        <Grid x:Name="ContentPanel"
              Margin="25"
              Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="75"></RowDefinition>
                <RowDefinition Height="75"></RowDefinition>
                <RowDefinition Height="75"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="150"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Border Grid.Column="0"
                    Grid.Row="0"
                    Grid.RowSpan="2"
                    Background="White"
                    Margin="10"></Border>
            <TextBox Grid.Column="1"
                     Grid.Row="0"
                     Margin="10,0,0,0"></TextBox>
            <PasswordBox Grid.Column="1"
                         Grid.Row="1"
                         Margin="10,0,0,0"></PasswordBox>
            <StackPanel Grid.Column="0"
                        Grid.ColumnSpan="2"
                        Grid.Row="2"
                        Orientation="Horizontal">
                <CheckBox Content="隐身登入"
                          Margin="100,0,0,0"></CheckBox>
                <CheckBox Content="記住密碼"></CheckBox>
            </StackPanel>
            <Button Content="确定"
                    Grid.Column="0"
                    Grid.ColumnSpan="2"
                    Grid.Row="3"
                    Width="150"
                    Height="70"
                    HorizontalAlignment="Center"
                    Margin="0,50,0,0"
                    VerticalAlignment="Top"></Button>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>           

1、（1）這個是視圖外部内容距離視圖邊框的間距指派方式：

<frameworkElement Margin="uniform"/>
- or -
<frameworkElement Margin="left+right,top+bottom"/>
- or -
<frameworkElement Margin="left,top,right,bottom"/>      

Margin="0,50,0,0" ：距離“左，上，右，下”方向控件的距離，類似于android中的LayoutMar...XX屬性，既控件的外邊距。

（2）這個是視圖内部内容距離視圖邊框的間距指派方式： 屬性：Padding，指派方式如下:

<control Padding="uniform"/>（一個統一的值，使用在所有的邊距上）
- or -
<control Padding="left&right,top&bottom"/>
- or -
<control Padding="left,top,right,bottom"/>      

(3)Width跟Height屬性能接受的參數為：

<frameworkElement Height="double"/>
-or-
<frameworkElement Height="Auto"/>在WP8中的Auto類似與warpcontent。      

（4）Grid的屬性      

建立一個包含三行的 Grid。第一行的 
Height 
設定為值 Auto，使高度基于該行中内容的大小平均配置設定。第二行和第三行的高度分别設定為 2* 和 
*。第二行擷取剩餘空間的 2/3，而第三行擷取剩餘空間的 1/3。      

<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="2*" />
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>      

2、     HorizontalAlignment：這個屬性是設定控件在父視圖中水準對齊特征。參數：Left，Center,Right,Stretch(可伸展的)

VerticalAlignmengt    同上      

HorizontalContentAlignment   :這個屬性是設定控件控件中内容的水準對齊特征。
      

VertivalContentAlignment同上      

參數如下      

Left	An element（n. 元素；要素；原理；成分；自然環境） aligned（adj. 對齊的；均衡的） to the left of the layout slot for the parent element.
Center	1	An element aligned to the center of the layout slot for the parent element.
Right	2	An element aligned to the right of the layout slot for the parent element.
Stretch	3	An element stretched to fill the entire（全部的） layout slot（位置） of the parent element.

Stretch意思差不多就是充滿父視圖。跟android的fillparent參數一樣。 3、相對于第一條針對視圖外部的間距， 4、Grid.ColumnSpan="2"這個屬性是讓該視圖在Grid視圖中占兩列，就是說可以橫放在兩列的分界線上 初步體會就是WP8布局的時候首先要想清楚整個界面分成多少行多少列。