三种基础的布局控件

布局控件对于用户体验来说至关重要，下面就来体验一下Windows8的应用商店项目开发中的几种常用布局吧。

新建一个项目叫做LayoutTest来做测试。

一：Grid网格布局控件

作用：定义由行和列组成的网格区域。

新建一个空白xaml页面，命名为：GridLayout.xaml。

里面写上如下代码：

[html] view plaincopy

1. <Page  
2.     x:Class="LayoutTest.GridLayout"  
3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
5.     xmlns:local="using:LayoutTest"  
6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
8.     mc:Ignorable="d">  
9.   
10.     <!--Grid表格布局  
11.         Grid.RowDefinitions：定义Grid中的行  
12.         Grid.ColumnDefinitions ：定义Grid的列   
13.         创建一个四行五列的表格布局  
14.     -->  
15.     <Grid HorizontalAlignment="Center" Height="210"  VerticalAlignment="Center" Width="305">  
16.         <Grid.RowDefinitions>  
17.             <!--定义四行及每行高度，*表示所占的比例-->  
18.             <RowDefinition Height="1*"/>  
19.             <RowDefinition Height="2*"/>  
20.             <RowDefinition Height="3*"/>  
21.             <RowDefinition Height="4*"/>  
22.         </Grid.RowDefinitions>  
23.           
24.         <Grid.ColumnDefinitions>  
25.             <!--定义五列及每列宽度，*表示所占的比例-->  
26.             <ColumnDefinition Width="1*" />  
27.             <ColumnDefinition Width="2*"/>  
28.             <ColumnDefinition Width="3*"/>  
29.             <ColumnDefinition Width="4*"/>  
30.             <ColumnDefinition Width="5*"/>  
31.         </Grid.ColumnDefinitions>  
32.     </Grid>  
33. </Page>  

这样便是一个简单的格子布局，效果如图所示：

这样只是简单的创建了格子布局，为了让效果更明显一点，我们把每个格子都填充上颜色，完整代码如下：

[html] view plaincopy

1. <Page  
2.     x:Class="LayoutTest.GridLayout"  
3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
5.     xmlns:local="using:LayoutTest"  
6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
8.     mc:Ignorable="d">  
9.   
10.     <!--Grid表格布局  
11.         Grid.RowDefinitions：定义Grid中的行  
12.         Grid.ColumnDefinitions ：定义Grid的列   
13.         创建一个四行五列的表格布局  
14.     -->  
15.     <Grid HorizontalAlignment="Center" Height="210"  VerticalAlignment="Center" Width="305">  
16.         <Grid.RowDefinitions>  
17.             <!--定义四行及每行高度，*表示所占的比例-->  
18.             <RowDefinition Height="1*"/>  
19.             <RowDefinition Height="2*"/>  
20.             <RowDefinition Height="3*"/>  
21.             <RowDefinition Height="4*"/>  
22.         </Grid.RowDefinitions>  
23.   
24.         <Grid.ColumnDefinitions>  
25.             <!--定义五列及每列宽度，*表示所占的比例-->  
26.             <ColumnDefinition Width="1*" />  
27.             <ColumnDefinition Width="2*"/>  
28.             <ColumnDefinition Width="3*"/>  
29.             <ColumnDefinition Width="4*"/>  
30.             <ColumnDefinition Width="5*"/>  
31.         </Grid.ColumnDefinitions>  
32.   
33.         <!--第一行的五列-->  
34.         <Rectangle Fill="#000000" Grid.Row="0" Grid.Column="0" />  
35.         <Rectangle Fill="#444444" Grid.Row="0" Grid.Column="1" />  
36.         <Rectangle Fill="#888888" Grid.Row="0" Grid.Column="2" />  
37.         <Rectangle Fill="#bbbbbb" Grid.Row="0" Grid.Column="3" />  
38.         <Rectangle Fill="#ffffff" Grid.Row="0" Grid.Column="4" />  
39.   
40.         <!--第二行的五列-->  
41.         <Rectangle Fill="#000000" Grid.Row="1" Grid.Column="0" />  
42.         <Rectangle Fill="#000044" Grid.Row="1" Grid.Column="1" />  
43.         <Rectangle Fill="#000088" Grid.Row="1" Grid.Column="2" />  
44.         <Rectangle Fill="#0000bb" Grid.Row="1" Grid.Column="3" />  
45.         <Rectangle Fill="#0000ff" Grid.Row="1" Grid.Column="4" />  
46.   
47.         <!--第三行的五列-->  
48.         <Rectangle Fill="#000000" Grid.Row="2" Grid.Column="0" />  
49.         <Rectangle Fill="#004400" Grid.Row="2" Grid.Column="1" />  
50.         <Rectangle Fill="#008800" Grid.Row="2" Grid.Column="2" />  
51.         <Rectangle Fill="#00bb00" Grid.Row="2" Grid.Column="3" />  
52.         <Rectangle Fill="#00ff00" Grid.Row="2" Grid.Column="4" />  
53.   
54.         <!--第四行的五列-->  
55.         <Rectangle Fill="#000000" Grid.Row="3" Grid.Column="0" />  
56.         <Rectangle Fill="#440000" Grid.Row="3" Grid.Column="1" />  
57.         <Rectangle Fill="#880000" Grid.Row="3" Grid.Column="2" />  
58.         <Rectangle Fill="#bb0000" Grid.Row="3" Grid.Column="3" />  
59.         <Rectangle Fill="#ff0000" Grid.Row="3" Grid.Column="4" />  
60.   
61.   
62.     </Grid>  
63. </Page>  

效果图如下：

二：Canvas画布布局

作用：定义一个区域可以使用相对于该区域的坐标直接定位子元素。

给工程添加一个新的空白xaml文件，叫做CanvasLayout.xaml。

完整的代码如下：

[html] view plaincopy

1. <Page  
2.     x:Class="LayoutTest.CanvasLayout"  
3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
5.     xmlns:local="using:LayoutTest"  
6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
8.     mc:Ignorable="d">  
9.   
10.     <Grid>  
11.         <Canvas HorizontalAlignment="Center" Height="600" Margin="0"   
12.                 VerticalAlignment="Center" Width="800" Background="Blue">  
13.   
14.             <!--Canvas里子元素通过调整Canvas区域的绝对位置来定位  
15.              Canvas.Left – 以左上角为原点，Canvas X轴的距离  
16.              Canvas.Top – 以左上角为原点，Canvas Y轴的距离  
17.              -->  
18.   
19.             <Ellipse Fill="Red" Height="51" Canvas.Left="400" Stroke="White"   
20.                      Canvas.Top="52" Width="53"/>  
21.             <Rectangle Fill="Green" Height="56" Canvas.Left="415" Stroke="Black"   
22.                        Canvas.Top="105" Width="20"/>  
23.         </Canvas>  
24.     </Grid>  
25. </Page>  

效果图：

三、StackPanel排列布局控件
作用：将子元素排列成一行（可沿水平或垂直方向）
再添加一个空白页，命名为“StackPanelLayout.xaml”，然后把原来的Grid标签删除，在Page标签内添加如下代码：

[html] view plaincopy

1. <Page  
2.     x:Class="LayoutTest.StackPanelLayout"  
3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
5.     xmlns:local="using:LayoutTest"  
6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
8.     mc:Ignorable="d">  
9.       
10.     <StackPanel Background="Black">  
11.         <StackPanel Orientation="Horizontal" x:Name="stackpanel">  
12.             <Button>Test</Button>  
13.             <Button>Test</Button>  
14.             <Button>Test</Button>  
15.             <Button>Test</Button>  
16.             <Button>Test</Button>  
17.             <Button>Test</Button>  
18.             <Button>Test</Button>  
19.             <Button>Test</Button>  
20.             <Button>Test</Button>  
21.             <Button>Test</Button>  
22.             <Button>Test</Button>  
23.         </StackPanel>  
24.         <Button Width="111" Height="111">变换方向</Button>  
25.   
26.     </StackPanel>  
27. </Page>  

此时可以看到一排按钮齐刷刷的排在那里，那么接下来为这个按钮添加监听，监听代码如下：

[csharp] view plaincopy

1. private void Change(object sender, RoutedEventArgs e)  
2.        {  
3.            ///更改Stackpanel控件的内部排列方式  
4.            if (stackpanel.Orientation == Orientation.Horizontal)  
5.            {  
6.                stackpanel.Orientation = Orientation.Vertical;  
7.            }  
8.            else  
9.            {  
10.                stackpanel.Orientation = Orientation.Horizontal;  
11.            }  
12.        }  

打开App.xaml.cs，找到下面这几句代码，把typeof括号里的MainPage改成StackPanelLayout，这里的意思就是应用启动时候显示的页面。

运行一下，便可以看到风骚的效果了。