Silverlight中的Grid布局方式

时间:2022-03-13 09:48:53

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

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

 

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

 

[c-sharp] view plaincopyprint?
  1. <Grid x:Name="LayoutRoot" ShowGridLines="True">  
  2.     <Grid.RowDefinitions>  
  3.         <RowDefinition x:Name="r1"></RowDefinition>  
  4.         <RowDefinition x:Name="r2"></RowDefinition>  
  5.         <RowDefinition x:Name="r3"></RowDefinition>  
  6.     </Grid.RowDefinitions>  
  7.     <Grid.ColumnDefinitions>  
  8.         <ColumnDefinition x:Name="c1"></ColumnDefinition>  
  9.         <ColumnDefinition x:Name="c2"></ColumnDefinition>  
  10.         <ColumnDefinition x:Name="c3"></ColumnDefinition>  
  11.     </Grid.ColumnDefinitions>  
  12.   
  13. </Grid>  

 

 

行分别命名为r1,r2,r3

 

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

 


 

示例1,仅以行做示例:

[xhtml] view plaincopyprint?
  1. <RowDefinition x:Name="r1" Height="40*"></RowDefinition>  
  2. <RowDefinition x:Name="r2"  Height="40*"></RowDefinition>  
  3. <RowDefinition x:Name="r3" Height="40*"></RowDefinition>  

  

 

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

 

示例2:

[xhtml] view plaincopyprint?
  1. <RowDefinition x:Name="r1" Height="20*"></RowDefinition>  
  2. <RowDefinition x:Name="r2"  Height="40*"></RowDefinition>  
  • <RowDefinition x:Name="r3"></RowDefinition>  

 

 

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

 


 

示例3:

[xhtml] view plaincopyprint?
  1. <RowDefinition x:Name="r1" Height="20*"></RowDefinition>  
  2. <RowDefinition x:Name="r2"  Height="40*"></RowDefinition>  
  3. <RowDefinition x:Name="r3" Height="auto"></RowDefinition>  

 

 

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

 


 

示例4:

[xhtml] view plaincopyprint?
  1. <RowDefinition x:Name="r1" Height="20*"></RowDefinition>  
  2. <RowDefinition x:Name="r2"  Height="40*"></RowDefinition>  
  3. <RowDefinition x:Name="r3" Height="auto" MaxHeight="100"></RowDefinition>  

  

 

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

 


 

示例5:

[xhtml] view plaincopyprint?
  1. <RowDefinition x:Name="r1" Height="20*"></RowDefinition>  
  2. <RowDefinition x:Name="r2"  Height="40*"></RowDefinition>  
  3. <RowDefinition x:Name="r3" Height="50*" MaxHeight="200"></RowDefinition>  

 

 

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

 


 

示例6:

[xhtml] view plaincopyprint?
  1. <RowDefinition x:Name="r1" Height="20*"></RowDefinition>  
  2. <RowDefinition x:Name="r2"  Height="40*"></RowDefinition>  
  3. <RowDefinition x:Name="r3" Height="500" MaxHeight="200"></RowDefinition>  

 

 

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

 


 

示例7:

[xhtml] view plaincopyprint?
  1. <RowDefinition x:Name="r1" Height="100"></RowDefinition>  
  2. <RowDefinition x:Name="r2"  Height="200"></RowDefinition>  
  3. <RowDefinition x:Name="r3" Height="50"></RowDefinition>  

 

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

Silverlight中的Grid布局方式

 

来源:http://blog.csdn.net/hwj383/article/details/5707932