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

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

 2009-03-09 11:58:16 来源:WEB开发网   
核心提示: <Grid.ColumnDefinitions><ColumnDefinitionWidth="40*"></ColumnDefinition><ColumnDefinitionWidth="50*">

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="40*"></ColumnDefinition>
  <ColumnDefinition Width="50*"></ColumnDefinition>
  <ColumnDefinition Width="30*"></ColumnDefinition>
  <ColumnDefinition Width="20*"></ColumnDefinition>
</Grid.ColumnDefinitions>

效果如下:

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

这个时候,我们可以很清楚地看到列的比例为40:50:30:20

这个相对于Table来说,更多了一分灵活性,因为在Table中,我们只能使用百分比的布局方式,而这个相对来说更加灵活。

在Grid中,我们还可以使用auto来作为宽度和高度的属性,这种情况下,Grid的宽度和高度便随着内部内容的大小而自动发生改变:

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="auto"></ColumnDefinition>
  <ColumnDefinition Width="auto"></ColumnDefinition>
  <ColumnDefinition Width="auto"></ColumnDefinition>
  <ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>

我们还可以为宽度为自动的情况下指定最大和最小的宽度(或高度)。

<Grid.ColumnDefinitions>
  <ColumnDefinition MinWidth="30" MaxWidth="150"></ColumnDefinition>
  <ColumnDefinition Width="Auto" MinWidth="30" MaxWidth="150"></ColumnDefinition>
  <ColumnDefinition Width="Auto" MinWidth="30" MaxWidth="150"></ColumnDefinition>
  <ColumnDefinition Width="Auto" MinWidth="30" MaxWidth="150"></ColumnDefinition>
</Grid.ColumnDefinitions>

另外,如果我们实现这样一种情况,就是说要求一个控件跨越两个列,如下图所示:

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

看代码:

<Button Grid.ColumnSpan="2" Grid.RowSpan="2" x:Name="btnTest" Width="50" Height="30" Content="Text" Grid.Row="0" Grid.Column="0"></Button>

里面的关键代码:Grid.RowSpan=”2”。我也不多解释了,就是跨越两行。

好,总结下,Grid是一个很常用的布局控件。他提供了仿照HTML中Table的方式,分行,列来进行布局。

上一页  1 2 3 

Tags:Silverlight 控件 Grid

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