Silverlight专题（8）-布局介绍

问题：

大家应该看过不少Silverlight的网站

肯定有时候有时候会很纳闷自己做得网页为什么那么难看

而网络上的一些范例那么好看

事实上就是布局的功劳（当然配色也是很重要的）

正如带兵打仗，不会排兵布阵，有再好的兵也枉然

设计：

Silverlight为咱们的排兵布阵提供了三个神兵利器Grid,StackPanel和Canvas

下面我分别对这三种布局控件做下介绍

Grid：一个有点类似Table（表格）的控件

如下所示，我将Grid分成了三行两列，行的高度以及列的控件如代码所示

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

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

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

 <Grid>
2     <Grid.RowDefinitions>
3         <RowDefinition Height="Auto"/>
4         <RowDefinition Height="Auto"/>
5         <RowDefinition Height="Auto"/>
6     </Grid.RowDefinitions>
7     <Grid.ColumnDefinitions>
8         <ColumnDefinition Width="Auto"/>
9         <ColumnDefinition Width="Auto"/>
10     </Grid.ColumnDefinitions>
11     
12     <TextBlock Foreground="#ED3798" Text="User Name:" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="5" FontSize="18"/>
13     <TextBox Grid.Column="1" Margin="2,5" Width="200"/>
14     <TextBlock Foreground="#ED3798" Text="Password:" Margin="5" Grid.Row="1" HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="18"/>
15     <TextBox Grid.Row="1" Grid.Column="1" Margin="2,5" Width="200"/>
16     <Button Content="Submit" FontSize="18" Grid.Row="2" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,5" Padding="4,2"/>
17 </Grid>

运行结果如下：

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

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

 

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

运行结果如下：

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

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

范例如下：

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

运行结果如下：

最后再介绍下Border控件

这个控件在布局的时候经常会用到

特别是它的圆角功能，屡试不爽^_^

如QQ TM版本的登陆界面的圆角（CornerRadius属性）就可以用Silverlight很快实现

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

 <Border Width="180" Height="600" CornerRadius="8,8,8,15" Margin="10"> 
2     <Border.Background> 
3         <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"> 
4             <GradientStop Offset="0.05" Color="#73CFFF"></GradientStop> 
5             <GradientStop Offset="0.05" Color="#D7EDFF"/> 
6             <GradientStop Offset="1" Color="#D7EDFF"/> 
7         </LinearGradientBrush> 
8     </Border.Background> 
9     <Grid> 
10         <Grid.RowDefinitions> 
11             <RowDefinition Height="30"/> 
12             <RowDefinition/> 
13         </Grid.RowDefinitions> 
14 
15         <Grid Margin="5,0"> 
16             <TextBlock Text="QQ 2009 Preview" Foreground="White" VerticalAlignment="Center"/> 
17             <StackPanel HorizontalAlignment="Right" VerticalAlignment="Top" Orientation="Horizontal"> 
18                 <Image Width="20" Source="Icons/2.png"/> 
19                 <Image Width="20" Source="Icons/1.png"/> 
20                 <Image Width="20" Source="Icons/3.png"/> 
21             </StackPanel> 
22         </Grid> 
23     </Grid> 
24 </Border>

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

如何布局谋篇大家还是需要在实际的项目中去学习和总结

我在这里只是粗略的介绍下，希望对大家有所帮助