[Win8]Windows8開發筆記（二）：三種基礎的布局控制項

布局控制項對於使用者體驗來說至關重要，下面就來體驗一下Windows8的市集項目開發中的幾種常用布局吧。

建立一個項目叫做LayoutTest來做測試。

一：Grid網格布局控制項

作用：定義由行和列組成的網格地區。

建立一個空白xaml頁面，命名為：GridLayout.xaml。

裡面寫上如下代碼：

<Page    x:Class="LayoutTest.GridLayout"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:LayoutTest"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <!--Grid表格版面配置        Grid.RowDefinitions：定義Grid中的行        Grid.ColumnDefinitions ：定義Grid的列         建立一個四行五列的表格版面配置    -->    <Grid HorizontalAlignment="Center" Height="210"  VerticalAlignment="Center" Width="305">        <Grid.RowDefinitions>            <!--定義四行及每行高度，*表示所佔的比例-->            <RowDefinition Height="1*"/>            <RowDefinition Height="2*"/>            <RowDefinition Height="3*"/>            <RowDefinition Height="4*"/>        </Grid.RowDefinitions>                <Grid.ColumnDefinitions>            <!--定義五列及每列寬度，*表示所佔的比例-->            <ColumnDefinition Width="1*" />            <ColumnDefinition Width="2*"/>            <ColumnDefinition Width="3*"/>            <ColumnDefinition Width="4*"/>            <ColumnDefinition Width="5*"/>        </Grid.ColumnDefinitions>    </Grid></Page>

這樣便是一個簡單的格子布局，效果：

這樣只是簡單的建立了格子布局，為了讓效果更明顯一點，我們把每個格子都填充上顏色，完整代碼如下：

<Page    x:Class="LayoutTest.GridLayout"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:LayoutTest"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <!--Grid表格版面配置        Grid.RowDefinitions：定義Grid中的行        Grid.ColumnDefinitions ：定義Grid的列         建立一個四行五列的表格版面配置    -->    <Grid HorizontalAlignment="Center" Height="210"  VerticalAlignment="Center" Width="305">        <Grid.RowDefinitions>            <!--定義四行及每行高度，*表示所佔的比例-->            <RowDefinition Height="1*"/>            <RowDefinition Height="2*"/>            <RowDefinition Height="3*"/>            <RowDefinition Height="4*"/>        </Grid.RowDefinitions>        <Grid.ColumnDefinitions>            <!--定義五列及每列寬度，*表示所佔的比例-->            <ColumnDefinition Width="1*" />            <ColumnDefinition Width="2*"/>            <ColumnDefinition Width="3*"/>            <ColumnDefinition Width="4*"/>            <ColumnDefinition Width="5*"/>        </Grid.ColumnDefinitions>        <!--第一行的五列-->        <Rectangle Fill="#000000" Grid.Row="0" Grid.Column="0" />        <Rectangle Fill="#444444" Grid.Row="0" Grid.Column="1" />        <Rectangle Fill="#888888" Grid.Row="0" Grid.Column="2" />        <Rectangle Fill="#bbbbbb" Grid.Row="0" Grid.Column="3" />        <Rectangle Fill="#ffffff" Grid.Row="0" Grid.Column="4" />        <!--第二行的五列-->        <Rectangle Fill="#000000" Grid.Row="1" Grid.Column="0" />        <Rectangle Fill="#000044" Grid.Row="1" Grid.Column="1" />        <Rectangle Fill="#000088" Grid.Row="1" Grid.Column="2" />        <Rectangle Fill="#0000bb" Grid.Row="1" Grid.Column="3" />        <Rectangle Fill="#0000ff" Grid.Row="1" Grid.Column="4" />        <!--第三行的五列-->        <Rectangle Fill="#000000" Grid.Row="2" Grid.Column="0" />        <Rectangle Fill="#004400" Grid.Row="2" Grid.Column="1" />        <Rectangle Fill="#008800" Grid.Row="2" Grid.Column="2" />        <Rectangle Fill="#00bb00" Grid.Row="2" Grid.Column="3" />        <Rectangle Fill="#00ff00" Grid.Row="2" Grid.Column="4" />        <!--第四行的五列-->        <Rectangle Fill="#000000" Grid.Row="3" Grid.Column="0" />        <Rectangle Fill="#440000" Grid.Row="3" Grid.Column="1" />        <Rectangle Fill="#880000" Grid.Row="3" Grid.Column="2" />        <Rectangle Fill="#bb0000" Grid.Row="3" Grid.Column="3" />        <Rectangle Fill="#ff0000" Grid.Row="3" Grid.Column="4" />    </Grid></Page>

如下：

二：Canvas畫布布局

作用：定義一個地區可以使用相對於該地區的座標直接定位子項目。

給工程添加一個新的空白xaml檔案，叫做CanvasLayout.xaml。

完整的代碼如下：

<Page    x:Class="LayoutTest.CanvasLayout"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:LayoutTest"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Grid>        <Canvas HorizontalAlignment="Center" Height="600" Margin="0"                 VerticalAlignment="Center" Width="800" Background="Blue">            <!--Canvas裡子項目通過調整Canvas地區的絕對位置來定位             Canvas.Left – 以左上方為原點，Canvas X軸的距離             Canvas.Top – 以左上方為原點，Canvas Y軸的距離             -->            <Ellipse Fill="Red" Height="51" Canvas.Left="400" Stroke="White"                      Canvas.Top="52" Width="53"/>            <Rectangle Fill="Green" Height="56" Canvas.Left="415" Stroke="Black"                        Canvas.Top="105" Width="20"/>        </Canvas>    </Grid></Page>

：

三、StackPanel排列布局控制項
作用：將子項目排列成一行（可沿水平或垂直方向）
再添加一個空白頁，命名為“StackPanelLayout.xaml”，然後把原來的Grid標籤刪除，在Page標籤內添加如下代碼：

<Page    x:Class="LayoutTest.StackPanelLayout"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:LayoutTest"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">        <StackPanel Background="Black">        <StackPanel Orientation="Horizontal" x:Name="stackpanel">            <Button>Test</Button>            <Button>Test</Button>            <Button>Test</Button>            <Button>Test</Button>            <Button>Test</Button>            <Button>Test</Button>            <Button>Test</Button>            <Button>Test</Button>            <Button>Test</Button>            <Button>Test</Button>            <Button>Test</Button>        </StackPanel>        <Button Width="111" Height="111">變換方向</Button>    </StackPanel></Page>

此時可以看到一排按鈕齊刷刷的排在那裡，那麼接下來為這個按鈕添加監聽，監聽代碼如下：

 private void Change(object sender, RoutedEventArgs e)        {            ///更改Stackpanel控制項的內部相片順序            if (stackpanel.Orientation == Orientation.Horizontal)            {                stackpanel.Orientation = Orientation.Vertical;            }            else            {                stackpanel.Orientation = Orientation.Horizontal;            }        }

開啟App.xaml.cs，找到下面這幾句代碼，把typeof括弧裡的MainPage改成StackPanelLayout，這裡的意思就是應用啟動時候顯示的頁面。

運行一下，便可以看到風騷的效果了。