Silverlight专题（8）-布局介绍

核心提示：问题：大家应该看过不少Silverlight的网站肯定有时候有时候会很纳闷自己做得网页为什么那么难看而网络上的一些范例那么好看事实上就是布局的功劳（当然配色也是很重要的）正如带兵打仗，不会排兵布阵，Silverlight专题（8）-布局介绍，有再好的兵也枉然 设计：Silverlight为咱们的排兵布阵提供了三个神兵利

问题：

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

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

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

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

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

设计：

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

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

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

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

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

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

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

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>

运行结果如下：