Silverlight中的Grid布局方式

概述SL中Grid布局类似HTML中的表格,但是又不太一致! 为了测试新一个3行3列的Grid   方了方便,剔除掉其它XAML代码   <Grid x:Name="LayoutRoot" ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition x:Name="r1"></RowDefin

SL中GrID布局类似HTML中的表格,但是又不太一致!

为了测试新一个3行3列的GrID

 

方了方便,剔除掉其它XAML代码

 

<GrID x:name="LayoutRoot" ShowGrIDlines="True"> <GrID.RowDeFinitions> <RowDeFinition x:name="r1"></RowDeFinition> <RowDeFinition x:name="r2"></RowDeFinition> <RowDeFinition x:name="r3"></RowDeFinition> </GrID.RowDeFinitions> <GrID.ColumnDeFinitions> <ColumnDeFinition x:name="c1"></ColumnDeFinition> <ColumnDeFinition x:name="c2"></ColumnDeFinition> <ColumnDeFinition x:name="c3"></ColumnDeFinition> </GrID.ColumnDeFinitions> </GrID>

 

行分别命名为r1,r2,r3

 

其中行用高度,列用宽度来指定大小，同HTML不同的是用*表示百分比，确切的说不叫百分比。

 

 

示例1，仅以行做示例:

<RowDeFinition x:name="r1" Height="40*"></RowDeFinition> <RowDeFinition x:name="r2" Height="40*"></RowDeFinition> <RowDeFinition x:name="r3" Height="40*"></RowDeFinition>  

如果按百分比，三个行已经超过了100%，但是实际上SL是三个行平分的，可以想象成分成120份，每行占40份，就是每行1/3。平均分配

 

示例2：

<RowDeFinition x:name="r1" Height="20*"></RowDeFinition> <RowDeFinition x:name="r2" Height="40*"></RowDeFinition> <RowDeFinition x:name="r3"></RowDeFinition>

 

r3行占20*吗？实际上r1的高度是r3的20倍，r2的高度是r3的40倍,r2的高度是r1的2倍

 

 

示例3：

<RowDeFinition x:name="r1" Height="20*"></RowDeFinition> <RowDeFinition x:name="r2" Height="40*"></RowDeFinition> <RowDeFinition x:name="r3" Height="auto"></RowDeFinition>

 

 r3根据里面的控件高度占用高度，余下的r1和r2按比例分，即r2是r1高度的2倍

 

 

示例4：

<RowDeFinition x:name="r1" Height="20*"></RowDeFinition> <RowDeFinition x:name="r2" Height="40*"></RowDeFinition> <RowDeFinition x:name="r3" Height="auto" MaxHeight="100"></RowDeFinition>  

 如果对r3的高度指定为自动，则不会受Min/MaxHeight高度的限制，只会受内部控件高度影响

 

 

示例5：

<RowDeFinition x:name="r1" Height="20*"></RowDeFinition> <RowDeFinition x:name="r2" Height="40*"></RowDeFinition> <RowDeFinition x:name="r3" Height="50*" MaxHeight="200"></RowDeFinition>

 

此时r3的高度受Min/MaxHeight高度控制，若50/(20+40+50)*总高度  > 200，则按200显示，否则按50/(20+40+50)*总高度 显示

 

 

示例6：

<RowDeFinition x:name="r1" Height="20*"></RowDeFinition> <RowDeFinition x:name="r2" Height="40*"></RowDeFinition> <RowDeFinition x:name="r3" Height="500" MaxHeight="200"></RowDeFinition>

 

此时r3的高度一直保持200，余下的r1和r2按比例分配，即高度大于最大高按最大高度显示，高度小于最小高度按最小高度显示。

 

 

示例7：

<RowDeFinition x:name="r1" Height="100"></RowDeFinition> <RowDeFinition x:name="r2" Height="200"></RowDeFinition> <RowDeFinition x:name="r3" Height="50"></RowDeFinition>

各行按实际高度展示，若总宽度不等于350，默认r3高度适应（但是ActualHeight = 50）

总结

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

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