Windows phone 7之頁面布局

Windows phone的頁面布局方式一般是依賴布局控件實現的，而布局控件有三種Grid，StackPanel和Canvas

Grid是網格布局方式，相當于一個表格，有行和列，新建一個Windows phone項目，打開MainPage.xaml，頁面呈現內容的核心代碼如下

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>
    </Grid>

看到代碼中用的了兩種布局方式Grid和StackPanel，這也是windows phone最常用的兩種布局方式，在布局中Canvas不常用，當然這不代表他沒用，在一些xaml繪制logo，那Canvas在核實不過了，Grid和StackPanel無法將之取代。

1、Grid

看下面的代碼

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Grid" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="left top"/>
            <TextBlock Grid.Column="1" Text="center top"/>
            <TextBlock Grid.Column="2" Text="right top"/>
            <TextBlock Grid.Row="1" Text="left center"/>
            <TextBlock Grid.Row="1" Grid.Column="1" Text="center center"/>
            <TextBlock Grid.Row="1" Grid.Column="2"  Text="right center"/>
            <TextBlock Grid.Row="2" Text="left bottom"/>
            <TextBlock Grid.Row="2" Grid.Column="1"  Text="center bottom"/>
            <TextBlock Grid.Row="2" Grid.Column="2"  Text="right bottom"/>
        </Grid>
    </Grid>

運行效果如下圖

在name為ContentPanel的Grid中加入三行三列，<Grid.RowDefinitions>也是一個容器，在內部放幾個RowDefinition，就表明Grid有幾行，<Grid.ColumnDefinitions>中放幾個ColumnDefinition就有幾列看
還有就是，RowDefinition只是用來定義列的，列中的內容不是直接放在RowDefinition標簽下，而是放在Grid標簽下，通過Grid.Row和Grid.Column來定義內容屬于哪一行哪一列，默認是第0行，第0列，所以如果是放在0行Grid.Row可以不用寫，如果是放在0列Grid.Column不用寫，就想上面的代碼。

Grid中RowDefinition能夠定義Height屬性，表示高度，不能定義寬度，ColumnDefinition能夠定義Width，表示寬度，不能定義高度，所以最終的寬度和高度是兩者共同決定的

Height和Width屬性是枚舉類型，可以有三個選項，填入具體是，就是固定的高或寬，填入Auto關鍵字，就是根據行和咧中的子空間的高和寬決定，一最大的為準，填入星號*，就是占據剩余部分，比如我第一行，Height填入100，升入兩行詩*，則表明第一行為100，二三行平分Grid剩余的部分，比如Grid的Height是500，那剩余的部分就是400，而三行每行200.

實際中很少出現特別正規的行列分布，往往有的子控件要跨行或跨列，Grid.RowSpan表示跨行，Grid.ColumnSpan表示跨列

看下面的代碼

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <TextBlock Grid.RowSpan="2" VerticalAlignment="Center" Text="left top"/>
            <TextBlock Grid.Column="1" Text="center top"/>
            <TextBlock Grid.Column="2" Text="right top"/>
            <TextBlock Grid.Row="1" Grid.Column="1" Text="center center"/>
            <TextBlock Grid.Row="1" Grid.Column="2"  Text="right center"/>
            <TextBlock Grid.Row="2" Text="left bottom"/>
            <TextBlock Grid.Row="2" Grid.ColumnSpan="2" HorizontalAlignment="Center" Grid.Column="1"  Text="center bottom"/>
        </Grid>

運行效果如下圖

2、StackPanel

StackPanel是一個比較簡單的容器，可以將子控件進行橫排或豎排（默認是豎排），不能同時橫排和豎排，如果是想實現橫排和豎排一起出現的效果，就要使用子控件嵌套活著布局控件嵌套

Orientation屬性是一個枚舉類型，Horizontal表示橫排，Vertical表示豎排

看下面的代碼和運行效果

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="100"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="left" Width="100"/>
                <TextBlock Text="center" Width="100"/>
                <TextBlock Text="right" Width="100"/>
            </StackPanel>
            <StackPanel Orientation="Vertical" Grid.Row="1">
                <TextBlock Text="top" Height="100"/>
                <TextBlock Text="center" Height="100"/>
                <TextBlock Text="bottom" Height="100"/>
            </StackPanel>
        </Grid>

3、Canvas

Canvas是畫布布局方式，是一個絕對定位的布局控件，他是以左上角（0,0）為標準，將子控件擺放到其中，用Cancas.eft和Cancas.Right決定距離左上角的偏移量，可以是負值，如果出現控件重疊的狀況可以通過Canvas.Zindex屬性控制，Zindex大的會覆蓋小的

看下面代碼和運行效果

<Canvas>
                <TextBlock Canvas.Left="0" Canvas.Top="10" Text="textblock1"/>
                <StackPanel Canvas.ZIndex="2" Canvas.Left="0" Canvas.Top="10" Background="Red">
                    <TextBlock Text="hello"/>
                </StackPanel>
                <TextBlock Canvas.Left="100" Canvas.Top="100" Text="textblock2"/>
                <TextBlock Canvas.Left="300" Canvas.Top="300" Text="textblock3"/>
            </Canvas>

另外，每個控件都有布局的屬性，Margin之類的接下來的文章中將介紹不同控件的用法和屬性，會介紹布局屬性，今天的內容中，有關布局屬性，不是很明白的童鞋不用急

?

我的新浪微博昵稱是“@馬蔬菜”，希望大家多關注，謝謝

?