Silverlight/WPF中的布局

 Silverlight/WPF中有3个强大的布局控件，StackPanel、Canvas、Grid，从字面上理解，StackPanel是一种堆的布局，就是一个挨着一个的布局方式；Canvas是一种基于画板的布局方式，我们把控件放到面板上定义好坐标，这点跟Html中的Div布局类似，只是所有Div的Position都是相对定位的；Grid是一种表格方式的布局，这点很像是Html中的表格布局，把控件一个一个的放在表格里。

下面我们一一进行讲解：

1.StackPanel布局

StackPanel是一种堆的布局方式，其中Orientation属性，决定是水平排列，还是垂直排列，下面例子垂直排列

1 2 3 4 5

< StackPanel Orientation = "Vertical" >      < Rectangle Height = "40" Width = "40" Fill = "Red" ></ Rectangle >      < Rectangle Height = "50" Width = "50" Fill = "Yellow" ></ Rectangle >      < Rectangle Height = "60" Width = "60" Fill = "Green" ></ Rectangle > </ StackPanel >

结果：

垂直排列改为：

1 2 3 4 5

< StackPanel Orientation = "Horizontal" >      < Rectangle Height = "40" Width = "40" Fill = "Red" ></ Rectangle >      < Rectangle Height = "50" Width = "50" Fill = "Yellow" ></ Rectangle >      < Rectangle Height = "60" Width = "60" Fill = "Green" ></ Rectangle > </ StackPanel >

结果：

2.Canvas布局

Canvas是一种基于面板的布局方式，我们需要设置好Canvas.Top，Canvas.Left，Canvas.ZIndex属性，即相对面板的顶端距离，左端距离和显示顺序，因为这种布局是绝对定位的，需要设置好Canvas面板的高度和宽度

1 2 3 4 5

< Canvas Width = "500" Height = "500" >      < Rectangle Canvas.Top = "0" Canvas.Left = "0" Canvas.ZIndex = "3" Height = "40" Width = "40" Fill = "Red" ></ Rectangle >      < Rectangle Canvas.Top = "30" Canvas.Left = "30" Canvas.ZIndex = "2" Height = "50" Width = "50" Fill = "Yellow" ></ Rectangle >      < Rectangle Canvas.Top = "50" Canvas.Left = "50" Canvas.ZIndex = "1" Height = "60" Width = "60" Fill = "Green" ></ Rectangle > </ Canvas >

结果：

3.Grid布局

Grid布局是一种基于表格的布局方式，这种方式更为灵活，可以处理复杂的布局方式，其中要先定义行和列，再设置Grid内控件的Grid.Row和Grid.Column属性，即该控件在表格的第几行，第几列，其中Grid.RowSpan和Grid.ColumnSpan属性分别为跨行和跨列，和Html相似。

1 2 3 4 5 6 7 8 9 10 11 12 13 14

< Grid Width = "300" Height = "200" >      < Grid.RowDefinitions >          < RowDefinition />          < RowDefinition />      </ Grid.RowDefinitions >      < Grid.ColumnDefinitions >          < ColumnDefinition />          < ColumnDefinition />      </ Grid.ColumnDefinitions >         < Rectangle Grid.Row = "0" Grid.Column = "0" Fill = "Red" ></ Rectangle >      < Rectangle Grid.Row = "0" Grid.Column = "1" Fill = "Yellow" ></ Rectangle >      < Rectangle Grid.Row = "1" Grid.ColumnSpan = "2" Fill = "Green" ></ Rectangle > </ Grid >

结果：