Silverlight4.0(2) 之 Grid布局

  在这一节，我主要来介绍Silverlight的Grid布局。

  先让我们复习一下HTML的Table布局

  在这里这么说：Table布局只是为了为Grid来做个铺垫。因为我们知道，Table是为了容纳数据，而CSS才是我们布局的首选。

  先不管这些，我们看下我们用Table是如何布局的。

Table代码：

 <table border="1">
        <tr>
            <td>
                第1行第1列</td>
            <td>
                第1行第2列</td>
            <td>
                第1行第3列</td>
        </tr>
        <tr>
            <td>
                第2行第1列</td>
            <td>
                第2行第2列</td>
            <td>
                第2行第3列</td>
        </tr>
        <tr>
            <td>
                第3行第1列</td>
            <td>
                第3行第2列</td>
            <td>
                第3行第3列</td>
        </tr>
    </table>

运行效果：

 

 

当我们用Silverlight的Grid进行布局的时候，也是一样的道理。我们一样需要制定Grid的行和列，不同的是，Grid是先指定，后使用。而Table是边指定，边使用。让我们来看一个使用Grid的例子，使其达到与我们Table布局同样的效果：

 

<Grid x:Name="grid1" ShowGridLines="True">
        <Grid.RowDefinitions>                  <!--定义行-->
            <RowDefinitions></RowDefinition>     <!--第1行-->
            <RowDefinition></RowDefinition>     <!--第2行-->
            <RowDefinition></RowDefinition>     <!--第3行-->
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>                <!--定义列-->
            <ColumnDefinition></ColumnDefinition><!--第1列-->
            <ColumnDefinition></ColumnDefinition><!--第2列-->
            <ColumnDefinition></ColumnDefinition><!--第3列-->
        </Grid.ColumnDefinitions>
        <TextBlock x:Name="Label1" Text="第1行第1列" Grid.Row="0" Grid.Column="0"></TextBlock>
        <TextBlock x:Name="Label2" Text="第1行第2列" Grid.Row="0" Grid.Column="1"></TextBlock>
        <TextBlock x:Name="Label3" Text="第1行第3列" Grid.Row="0" Grid.Column="2"></TextBlock>
        <TextBlock x:Name="Label4" Text="第2行第1列" Grid.Row="1" Grid.Column="0"></TextBlock>
        <TextBlock x:Name="Label5" Text="第2行第2列" Grid.Row="1" Grid.Column="1"></TextBlock>
        <TextBlock x:Name="Label6" Text="第2行第3列" Grid.Row="1" Grid.Column="2"></TextBlock>
        <TextBlock x:Name="Label7" Text="第3行第1列" Grid.Row="2" Grid.Column="0"></TextBlock>
        <TextBlock x:Name="Label8" Text="第3行第2列" Grid.Row="2" Grid.Column="1"></TextBlock>
        <TextBlock x:Name="Label9" Text="第3行第3列" Grid.Row="2" Grid.Column="2"></TextBlock>
    </Grid>

看Grid中几个重要的属性：

　　1. RowDefinitions 和 ColumnDefinitions ：这两个属性主要是来指定Grid控件的行数和列数，内部嵌套几个Row/ColumnDefinition，那么就代表这个Grid有几行几列。

　　2. ShowGridLines : 很明显，就是指定我们的Grid控件行列之间是否显示分割线，与Table中的Border属性非常类似。

　　3. 当我们使用其他控件内置于Grid中时，我们需要使用Grid.Row和Grid.Column来指定他所位于的所在行和所在列

　　grid还有一些常用的属性，比如可以在行或列对高或宽进行设定、对控件进行跨行/列及定位处理：

 

<Grid x:Name="grid1" ShowGridLines="False">
        <Grid.RowDefinitions>                  <!--定义行-->
            <RowDefinition Height="100" MaxHeight="150" MinHeight="80"></RowDefinition>     <!--第1行 进行了Height/Max/Min处理-->
            <RowDefinition></RowDefinition>     <!--第2行-->
            <RowDefinition></RowDefinition>     <!--第3行-->
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>                <!--定义列-->
            <ColumnDefinition Width="100" MaxWidth="150" MinWidth="80"></ColumnDefinition>  <!--第1列 进行了Width/Max/Min处理-->
            <ColumnDefinition></ColumnDefinition><!--第2列-->
            <ColumnDefinition></ColumnDefinition><!--第3列-->
        </Grid.ColumnDefinitions>
        <TextBlock x:Name="Label1" Text="第1行第1列" Grid.Row="0" Grid.Column="0"></TextBlock>
        <TextBlock x:Name="Label2" Text="第1行第2列" Grid.Row="0" Grid.Column="1"></TextBlock>
        <TextBlock x:Name="Label3" Text="第1行第3列" Grid.Row="0" Grid.Column="2"></TextBlock>
        <TextBlock x:Name="Label4" Text="第2行第1列" Grid.Row="1" Grid.Column="0"></TextBlock>
        <TextBlock x:Name="Label5" Text="第2行第2列" Grid.Row="1" Grid.Column="1"></TextBlock>
        <TextBlock x:Name="Label6" Text="第2行第3列" Grid.Row="1" Grid.Column="2"></TextBlock>
        <TextBlock x:Name="Label7" Text="第3行第1列" Grid.Row="2" Grid.Column="0"></TextBlock>
        <TextBlock x:Name="Label8" Text="我跨了三个列" Grid.Row="2" Margin="180,0,0,0" Grid.ColumnSpan="3"></TextBlock><!--进行了跨行及定位处理-->
        <TextBlock x:Name="Label9" Text="第3行第3列" Grid.Row="2" Margin="50,0,0,0" Grid.Column="2"></TextBlock><!--进行了定位处理-->
    </Grid>

 

 

1. 高或宽的设定：

    Height/Width：定义行的高度

    MaxHeight/MaxWidth：单元格拉伸最大高/宽度

    MinHeight/Minwidth：   单元格压缩最小高/宽度

2. 跨行及定位处理：

    <TextBlock x:Name="Label9" Text="第3行第3列" Grid.Row="2" Margin="50,0,0,0" Grid.Column="2"></TextBlock><!--进行了定位处理-->

    告诉grid，当前控件Label9 所处在第三行第三列,距第三列单元格左边50个像素。(Margin="左侧,顶部,右侧,底部" Margin是定义控件距离所在的单元格的边距)

    <TextBlock x:Name="Label8" Text="我跨了三个列" Grid.Row="2" Margin="180,0,0,0" Grid.ColumnSpan="3"></TextBlock><!--进行了跨行及定位处理-->

    告诉grid，当前控件Label8所处在第三行夸了三个列(相当于合并了单元格),距当前所在的单元格左边180个像素

　　好，总结下，Grid是一个很常用的布局控件。他提供了仿照HTML中Table的方式，分行，列来进行布局。在开发C#.Net时，Table可通过View窗口进行调整，而我个人认为在Silverlight中，利用View窗口调整时感觉很不爽，可能是用的还不够熟练，反正我现在都是通过前台代码来实现的，希望大家可以找到更多的方法去进行grid的布局