Silverlight布局介绍

问题：
大家应该看过不少Silverlight的网站
肯定有时候有时候会很纳闷自己做得网页为什么那么难看
而网络上的一些范例那么好看
事实上就是布局的功劳（当然配色也是很重要的）
正如带兵打仗，不会排兵布阵，有再好的兵也枉然

设计：
Silverlight为咱们的排兵布阵提供了三个神兵利器Grid,StackPanel和Canvas
下面我分别对这三种布局控件做下介绍
Grid：一个有点类似Table（表格）的控件
如下所示，我将Grid分成了三行两列，行的高度以及列的控件如代码所示

你可以通过给放置在Grid的控件设置Grid.Row以及Grid.Column来设定该控件该放在哪一行哪一列（默认值都为0）

此外还可以通过设定Grid.RowSpan,Grid.ColumnSpan来设定控件占据几行几列（默认值都为1）

范例如下（模拟登陆页面）：

< Grid >   
     < Grid.RowDefinitions >   
         < RowDefinition Height ="Auto" />   
         < RowDefinition Height ="Auto" />   
         < RowDefinition Height ="Auto" />   
     </ Grid.RowDefinitions >   
     < Grid.ColumnDefinitions >   
         < ColumnDefinition Width ="Auto" />   
         < ColumnDefinition Width ="Auto" />   
     </ Grid.ColumnDefinitions >   
      
     < TextBlock Foreground ="#ED3798" Text ="User Name:" HorizontalAlignment ="Right" VerticalAlignment ="Center" Margin ="5" FontSize ="18" />   
     < TextBox Grid.Column ="1" Margin ="2,5" Width ="200" />   
     < TextBlock Foreground ="#ED3798" Text ="Password:" Margin ="5" Grid.Row ="1" HorizontalAlignment ="Right" VerticalAlignment ="Center" FontSize ="18" />   
     < TextBox Grid.Row ="1" Grid.Column ="1" Margin ="2,5" Width ="200" />   
     < Button Content ="Submit" FontSize ="18" Grid.Row ="2" Grid.ColumnSpan ="2" HorizontalAlignment ="Center" VerticalAlignment ="Top" Margin ="0,5" Padding ="4,2" />   
</ Grid >

运行结果如下：

StackPanel：以水平或者垂直方向依次排列放在里面的控件（通过Orientation这个属性来决定，Horizontal为水平排 列，Vertical为垂直排列-默认模式）

如下所示为水平方向放置：

< StackPanel Orientation ="Horizontal" >   
     < Image Width ="80" Source ="Image/blue.jpg" Margin ="2,0" />   
     < Image Width ="80" Source ="Image/red.jpg" Margin ="2,0" />   
     < Image Width ="80" Source ="Image/green.jpg" Margin ="2,0" />   
     < Image Width ="80" Source ="Image/orange.jpg" Margin ="2,0" />   
</ StackPanel >

运行结果如下：


最后一种布局工具是Canvas：一种通过绝对坐标来定位控件放置位置的布局控件

其使用两个属性Canvas.Left（离左边多远，为double型数据）和Canvas.Top（离顶端多远，为double型数据）来定位放置在 Canvas中的控件的绝对位置

范例如下：

< Canvas >   
     < Rectangle Fill ="Blue" Canvas.Left ="20" Canvas.Top ="20" Width ="80" Height ="80" />   
     < Rectangle Fill ="Red" Canvas.Left ="110" Canvas.Top ="20" Width ="80" Height ="80" />   
     < Rectangle Fill ="Green" Canvas.Left ="200" Canvas.Top ="20" Width ="80" Height ="80" />   
     < Rectangle Fill ="Orange" Canvas.Left ="290" Canvas.Top ="20" Width ="80" Height ="80" />   
</ Canvas >

运行结果如下：


最后再介绍下Border控件
这个控件在布局的时候经常会用到
特别是它的圆角功能，屡试不爽^_^
如QQ TM版本的登陆界面的圆角（CornerRadius属性）就可以用Silverlight很快实现

大致的模拟下上面部分如下：

< Border Width ="180" Height ="600" CornerRadius ="8,8,8,15" Margin ="10" >   
     < Border.Background >   
         < LinearGradientBrush StartPoint ="0.5,0" EndPoint ="0.5,1" >   
             < GradientStop Offset ="0.05" Color ="#73CFFF" > </ GradientStop >   
             < GradientStop Offset ="0.05" Color ="#D7EDFF" />   
             < GradientStop Offset ="1" Color ="#D7EDFF" />   
         </ LinearGradientBrush >   
     </ Border.Background >   
     < Grid >   
         < Grid.RowDefinitions >   
             < RowDefinition Height ="30" />   
             < RowDefinition />   
         </ Grid.RowDefinitions >   
  
         < Grid Margin ="5,0" >   
             < TextBlock Text ="QQ 2009 Preview" Foreground ="White" VerticalAlignment ="Center" />   
             < StackPanel HorizontalAlignment ="Right" VerticalAlignment ="Top" Orientation ="Horizontal" >   
                 < Image Width ="20" Source ="Icons/2.png" />   
                 < Image Width ="20" Source ="Icons/1.png" />   
                 < Image Width ="20" Source ="Icons/3.png" />   
             </ StackPanel >   
         </ Grid >   
     </ Grid >   
</ Border >

运行结果如图（图标没有严格按照qq自己的图标，大家见谅，毕竟我不是美工，呵呵）：