布局控件對于用戶體驗來說至關重要，下面就來體驗一下Windows8的應用商店項目開發中的幾種常用布局吧。

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

一：Grid網格布局控件

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

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

里面寫上如下代碼：

[html] view plaincopy

<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>??

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

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

[html] view plaincopy

<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。

完整的代碼如下：

[html] view plaincopy

<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標簽內添加如下代碼：

[html] view plaincopy

<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>??

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

[csharp] view plaincopy

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，這里的意思就是應用啟動時候顯示的頁面。

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

總結

以上是生活随笔為你收集整理的三种基础的布局控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。