学Silverlight 2系列（3）：界面布局

当然我们也可以指定为水平排列，通过Orientation属性指定：

<StackPanel Background="#46461F" Orientation="Horizontal">
　　<Rectangle Fill="#0099FF" Stroke="White"
　　　　　　　 Width="100" Height="50" Margin="10"/>
　　<Rectangle Fill="#0099FF" Stroke="White"
　　　　　　　 Width="100" Height="50" Margin="10"/>
　　<Rectangle Fill="#0099FF" Stroke="White"
　　　　　　　 Width="100" Height="50" Margin="10"/>
</StackPanel>

运行后界面显示效果如下：

在这里为了让各个控件之间有一定的距离，使用了Margin属性，该属性类似于HTML中的Margin。

Grid

Grid控件类似与HTML中的Table，只不过子元素不用放在单元格中。通过<Grid.RowDefinitions> 和 <Grid.ColumnDefinitions>来定义Grid的行和列，使用Grid.Row和Grid.Column两个附加属性指定子元素在Grid中显示的位置，这是一种非常灵活的布局方式。如下面的XAML声明：

<Grid x:Name="LayoutRoot" Background="#46461F" ShowGridLines="True">
　　<Grid.RowDefinitions>
　　　　<RowDefinition Height="120"/>
　　　　<RowDefinition Height="*"/>
　　</Grid.RowDefinitions>
　　<Grid.ColumnDefinitions>
　　　　<ColumnDefinition Width="100"/>
　　　　<ColumnDefinition Width="*"/>
　　</Grid.ColumnDefinitions>
　　<TextBlock Grid.Row="0" Grid.Column="0" Text="UserName:" VerticalAlignment="Center" Foreground="White"></TextBlock>
　　<TextBlock Grid.Row="1" Grid.Column="0" Text="Password:" VerticalAlignment="Center" Foreground="White"></TextBlock>
　　<TextBox Grid.Row="0" Grid.Column="1" Width="200" Height="30" HorizontalAlignment="Left"></TextBox>
　　<TextBox Grid.Row="1" Grid.Column="1" Width="200" Height="30" HorizontalAlignment="Left"></TextBox>
</Grid>

定义一个两行两列的Grid，做一个简单的用户登录的布局，为了明显起见，把ShowGridLines属性设为True，以便能够显示出边框线。同时，我们指定了第一行的高度为120，而第二行的则是剩余的高度，用*来指定。运行后效果如下：