Silverlight控件(四)——Grid布局.docx

在这一节，我主要来介绍Silverlight的Grid布局。　　先来让我们复习一下HTML的Table布局。　　在这里这么说：Table布局只是为了为Grid来做个铺垫。因为我们知道，Table是为了容纳数据，而CSS才是我们布局的首选。　　先不管这些，我们看下我们用Table是如何布局的。table　border=1　　tr　　　　td111/td　　　　td222/td　　　　td333/td　　/tr　　tr　　　　td444/td　　　　td555/td　　　　td666/td　　/tr/table　　效果如下：　　当我们用Silverlight的Grid进行布局的时候，也是一样的道理。我们一样需要制定Grid的行和列，不同的是，Grid是先指定，后使用。而Table是边指定，边使用。让我们来看一个使用Grid的例子，使其达到与我们Table布局同样的效果：Grid　x:Name=grdLayoutRoot　Background=White　Width=400　Height=300　ShowGridLines=True　　Grid.RowDefinitions　　　　RowDefinition/RowDefinition　　　　RowDefinition/RowDefinition　　/Grid.RowDefinitions　　Grid.ColumnDefinitions　　　　ColumnDefinition/ColumnDefinition　　　　ColumnDefinition/ColumnDefinition　　　　ColumnDefinition/ColumnDefinition　　/Grid.ColumnDefinitions　　TextBlock　Text=111　Grid.Row=0　Grid.Column=0/TextBlock　　TextBlock　Text=222　Grid.Row=0　Grid.Column=1/TextBlock　　TextBlock　Text=333　Grid.Row=0　Grid.Column=2/TextBlock　　TextBlock　Text=444　Grid.Row=1　Grid.Column=0/TextBlock　　TextBlock　Text=555　Grid.Row=1　Grid.Column=1/TextBlock　　TextBlock　Text=666　Grid.Row=1　Grid.Column=2/TextBlock/Grid　　看Grid中几个重要的属性：　　1. RowDefinitions 和 ColumnDefinitions ：这两个属性主要是来指定Grid控件的行数和列数，内部嵌套几个Definition，那么就代表这个Grid有几行几列。　　2. ShowGridLines : 很明显，就是指定我们的Grid控件行列之间是否显示分割线，与Table中的Border属性非常类似。　　3. 当我们使用其他控件内置于Grid中时，我们需要使用Grid.Row和Grid.Column来指定他所位于的所在行和所在列。　　其效果如下：　　当然，我们还可以指定这些行和列的宽度。(如果默认情况下则默认的是每行，每类的宽度，高度都相等）：Grid.RowDefinitions　　RowDefinition　Height=40/RowDefinition　　RowDefinition/RowDefinition/Grid.RowDefinitionsGrid.ColumnDefinitions　　ColumnDefinition　Width=40/ColumnDefinition　　ColumnDefinition/ColumnDefinition　　ColumnDefinition/ColumnDefinition/Grid.ColumnDefinitions　　产生效果如下：　　继续于Table做类比，在Table布局中，我们可以指定width的百分比。当然，在Grid中，我们一样可以实现这样的功能，方法是用*去代替了%，我们看下：Grid.ColumnDefinitions　　ColumnDefinition　Width=40*/ColumnDefinition　　ColumnDefinition　Width=50*/ColumnDefinition　　ColumnDefinition　Width=30*/ColumnDefinition　　ColumnDefinition　Width=20*/ColumnDefinition/Grid.ColumnDefinitions　　效果如下：这个时候，我们可以很清楚地看到列的比例为40:50:30:20