SilverlightWPF中的布局

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

 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 >

结果：

总结

以上是内存溢出为你收集整理的Silverlight/WPF中的布局全部内容，希望文章能够帮你解决Silverlight/WPF中的布局所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。