开发学院图形图像Flash 玩转Silverlight控件(四)——Grid布局 阅读

玩转Silverlight控件(四)——Grid布局

 2009-03-09 11:58:16 来源:WEB开发网   
核心提示:在这一节,我主要来介绍Silverlight的Grid布局,玩转Silverlight控件(四)——Grid布局,先来让我们复习一下HTML的Table布局,在这里这么说:Table布局只是为了为Grid来做个铺垫,而Table是边指定,边使用,因为我们知道,Table是为了容纳数据

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

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

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

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

<table border="1">
  <tr>
    <td>111</td>
    <td>222</td>
    <td>333</td>
  </tr>
  <tr>
    <td>444</td>
    <td>555</td>
    <td>666</td>
  </tr>
</table>

效果如下:

玩转Silverlight控件(四)——Grid布局

当我们用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>

1 2 3  下一页

Tags:Silverlight 控件 Grid

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接