Silverlight学习笔记—3

在上一次学习了helloworld的项目结构，这次主要学习了silverlight的布局管理。

 

a.      Grid：网格布局。通过<Grid.RowDeFinitions> 和 <Grid.ColumnDeFinitions>来定义Grid的行和列，使用Grid.Row和Grid.Column两个附加属性指定子元素在Grid中显示的位置，这是一种非常灵活的布局方式。如下面的XAML声明：

<Gridx: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，而第二行的则是剩余的高度，用*来指定。

 

b.       

StackPanel

StackPanel支持用行或列的方式来进行页面布局，默认情况下所有的子元素会垂直的排列显示，如下面的XAML声明三个矩形：

<StackPanelBackground="#46461F">
    <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>

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

<StackPanel Background="#46461F" Orientation="Horizontal">