Windows Phone开发之路(8) Silverlight三大布局容器

　　Silverlight继承了WPF最重要的组成部分，那就是极其灵活的布局模式。使用这种布局模式，你可以将内容组织到一组不同的布局容器中。每个容器有其本身的布局逻辑，一种用来摆放元素(StackPanel)，另一种使用一个硬编码的坐标系(Canvas)，最后一种用来将元素排列在不可见的单元格中(Grid)。甚至你可以创建自定义布局容器。

　　因为最顶层的UserControl定义了一个Silverlight页面，仅能容纳一个元素。要想装载一个以上的元素，并且构建一个更加实用的用户界面，你需要将容器放在网页上，然后将其他元素添加到这个容器中。

　　Silverlight提供了三个Panel类的派生类来排列布局:StackPanel，Canvas和Grid。下面来分别介绍这三种布局容器。

StackPanel

　　StackPanel的布局逻辑是：将一组元素从上到下或从左到右排列(取决于Orientation)。

　　这里利用StackPanel布局，它定义了一段文本和一个按钮。代码如下：

<StackPanel Background="White">
        <TextBlock x:Name="lbMsg" Text="Hello StackPanel" Margin="5"></TextBlock>
        <Button x:Name="btnClick" Content="Click me" Margin="5"></Button>
</StackPanel>

　　效果如图：

Canvas

　　Canvas画布是Silverlight三个容器中最简单的一个。它的布局逻辑是：用精确的坐标来放置元素。要在Canvas中布局元素，需要设置3个属性：left坐标，top坐标以及ZIndex层。

　　要在XAML中设置附加属性，要使用一种两段式的语法。这两部分用句点隔开，句点的左边是要定义属性类的名称(例如Canvas)，右边是该属性的名称(例如Top)。下面是关于Canvas布局的一个例子，在画布中创建了一个矩形Rectangle和一个椭圆Ellipse，代码如下。

<Canvas>
        <Rectangle Name="rtg1" Canvas.Left="5" Canvas.Top="5" Width="100" Height="50" Stroke="Red" StrokeThickness="3"/>
        <Ellipse Name="ell1" Canvas.Left="5" Canvas.Top="60" Width="100" Height="50" Stroke="Red" StrokeThickness="3"/>
</Canvas>

　　效果如图：

　　注意，坐标起始于左上角，如果没有设置Left和Top属性，它们都默认为0，即该元素将被放置于Canvas的左上角。

Grid

　　Grid(或称网格)是Silverlight中最强大的布局容器，Grid将元素分开放置到多行和多列组成的看不见的网格中，注意，尽管网格被设计成看不见的，但是可以通过将Grid.ShowGridLines属性设置为true来使它显示出来。

　　创建基于Grid的布局有两个步骤，第一，选择想要的列数事行数。第二，给包含的元素赋予合适的行和列。

　　下面是一个创建基于Grid的布局的例子，代码如下：

<Grid ShowGridLines="True" Background="White">
        <!--定义行和列-->
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <!--给放入的元素赋予合适的行和列-->
        <Button Content="Top Left" Grid.Row="0" Grid.Column="0"/>
        <Button Content="Middle Left" Grid.Row="0" Grid.Column="1"/>
        <Button Content="Bottom Middle" Grid.Row="1" Grid.Column="1"/>
        <Button Content="Bottom Right" Grid.Row="1" Grid.Column="2"/>
</Grid>

　　效果如图：

　　注意：1,没有必要在RowDefinition或ColumnDefinition元素中提供任何信息，如果它们为空，Grid将让所有的行和列均匀共享该空间。
　　　　   2,要把单独的元素放入一个单元格中，需要使用Grid.Row和Grid.Column这两个附加属性。且这两个附加属性都是采用0作为默认的索引数字的。
　　　　   3,如果要把元素放在第一个单元格中，可以不设置这两个附加属性的值，因为它们默认值为0，但最后是显示地指定，因为这样看起来更加清晰。

　　当然Grid还有3种尺寸调整策略和关于Grid的嵌套布局的内容可以结合实际使用的时候再去了解，今天要总结的就是这三种布局容器，下一篇将要总结的内容是关于Silverlight动画，希望大家继续支持，谢谢！