Canvas的布局基本就和之前的Winform一致了，都是以左上角为中心，按照上下距离左上角的坐标为标准的。如果想要改变button的位置，就要给button控件设置Canvas.Left、 Canvas.Top、Canvas.Bottom 和Canvas.Right这四个属性。

所以Canvas得重点在绝对布局，对要求不太高的界面和比较固定的界面可以用这样的方式拖拽控件布局。

2、 Grid

WPF窗体程序的默认布局就是一个Grid，先看如下代码：

<Grid> <Button Content='btn1' Margin='10'/> <Button Content='btn2' Margin='10'/> </Grid>

看到这里，你也许会说，这不是和上面的Canvas一样吗？但是真的一样吗？他们的窗体如下所示：

相信你一定看出来了，不错，和Canvas不同，Grid窗体默认的显示是以中心为基准的，不像Canvas布局是以左上角为标准。

那么Grid布局有什么样的好处呢？看下面这些代码：

<Grid> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Button Content='btn1' /> <Button Grid.Row='1' Grid.Column='1' Content='btn2' /> </Grid>

然后在看看生成的窗口：

相信你一定可以看明白，知道Grid是把窗体分成了一块块的网格，而分割这个功能是通过Grid.RowDefinitions和Grid.ColumnDefinitions两组属性定义的，分别在其中定义了行和列，将窗体分为了几行几列，行的高度和列的宽度可以根据Width属性设置。

如上图，利用xaml定义了一个两行两列的Grid，并且在第0行0列放置btn1（如不显示定义，则拖入的控件默认放在此网格。），第1行1列放置了btn2.

关于网格属性做以下几个说明。

RowDefinition 表示网格的行，其只有一个Height属性而没有Width属性，*表示该行占据窗体剩下的所有的高度，如都设为*则表示平分窗体。如上所示，你还可以让窗体3:1，只要将两个行定义分别设置为3*和*就可以了。

ColumnDefinition 表示网格的列，其中只有一个Width属性而没有Height属性，*号的用法同RowDefinition的用法，不过相对RowDefinition分割窗体的高度而言，在这里*表示分割窗体的宽度。

可以说，Grid实现的是一种网格布局，这种布局是相当强大的，可以并且用起来也非常灵活。

3、 StackPanel

StackPanel布局遵循的默认原则是从窗口中间部位，从顶部开始，从上到下排列控件。先看下面代码：

<StackPanel> <Button Content='btn1' /> <Button Content='btn2' /> </StackPanel>

表现出来的窗体如下：

如上图所示，控件的布局默认是竖向布局，那么如何设置控件横向布局呢？我们只需要设置StackPanel的Orientation属性就可以了：

Orientation='Horizontal' 横向布局，从窗体中部，左侧开始从左向右排列控件。

Orientation='Vertical'纵向布局，默认属性。

横向布局的实例如下：

<StackPanel Orientation='Horizontal'> <Button Content='btn1' /> <Button Content='btn2' /> </StackPanel>

窗口显示：

4、 DockPanel

Dockpanel默认布局原则，从左中位置开始，控件依次排列，最后一个控件将剩余区域从中心填充。看下面代码：

<DockPanel> <Button Content='btn1' /> <Button Content='btn2' /> <Button Content='btn2' /> <Button Content='btn2' /> <Button Content='btn2' /> <Button Content='btn2' /> </DockPanel>

该布局的窗体显示如下：

同StackPanel不同，Dockpanel布局依靠的是它的四个附加在其余控件上的附加属性，看下表：

DockPanel.Dock属性

说明

Top

顶部，如果设置，从中间顶部开始依照上述原则布局

Left

左部，默认布局

Right

右部，如果设置，从中间右侧开始依照上述原则布局

Button

底部，如果设置，从中间底部开始依照上述原则布局

看下面实例，xaml代码：

<DockPanel> <Button DockPanel.Dock="Bottom" Content="btn1" /> <Button DockPanel.Dock="Bottom" Content="btn2" /> <Button Content="btn2" /> <Button Content="btn2" /> <Button Content="btn2" /> <Button Content="btn2" /> </DockPanel>

界面表现如下：

有上述描述代码可知，此处StackPanel从底部开始布局两个btn，在剩余的空间中（窗体上部），然后从默认位置左部开始依次放置btn，最后一个btn将最后剩余的空间填充。

5、 WrapPanel

WrapPanel布局遵循的原则是从窗体左上角开始，多控件的自动换行。同StackPanel一样，它也有表示纵向和横向的Orientation属性。看下面xaml代码：