ITPub博客

首页 > Linux操作系统 > Linux操作系统 > WPF and Silverlight 学习笔记(八):WPF布局管理之Grid

WPF and Silverlight 学习笔记(八):WPF布局管理之Grid

原创 Linux操作系统 作者:iDotNetSpace 时间:2009-04-17 13:28:05 0 删除 编辑

一、Grid

Grid是以表格形式组织控件的一种布局方式,与Java AWT中的GridLayout类似,但区别在于

  • WPF中的Grid的每一个单元格中可以放置多个控件,但控件可能会层叠在一起
  • WPF中的Grid支持单元格的合并,类似于HTML中的table td中的rowspan和colspan
  • Grid中的行和列可以自定义高度(Height)和宽度(Width)
    在设置高度和宽度时可以采用两种写法:
    1)Height=”60”:不加“星号”表示固定的高度
    2)Height=”60*”:加“星号”表示“加权”的高度,在调整窗体大小时,此高度或宽度会按窗体大小改变的比例进行缩放

如:

   1: <Grid>
   2:     <Grid.RowDefinitions>
   3:         <RowDefinition Height="60" />
   4:         <RowDefinition Height="202*" />
   5:     Grid.RowDefinitions>
   6:     <Grid.ColumnDefinitions>
   7:         <ColumnDefinition/>
   8:         <ColumnDefinition/>
   9:     Grid.ColumnDefinitions>
  10:     <Button Grid.Column="0" Grid.Row="0" Height="30" VerticalAlignment="Top">ButtonAButton>
  11:     <Button Grid.Column="0" Grid.Row="0" Height="30" VerticalAlignment="Bottom">ButtonBButton>
  12:     <Button Grid.Column="1" Grid.Row="0">ButtonCButton>
  13:     <Button Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2">ButtonDButton>
  14: Grid>

Grid

二、使用GridSplit分割

可以使用GridSplit控件结合Grid控件实现类似于Windows应用程序中SplitContainer的功能,如下面的应用程序:

SplitDemo

要实现以下的功能:

  • ButtonA和ButtonB、ButtonC组成的整体,可以左右拖动,改变两者的宽度
  • ButtonB和ButtonC可以上下拖动,改变两者的高度

实现以上功能的XAML代码如下:

   1: <Grid>
   2:     <Grid.ColumnDefinitions>
   3:         <ColumnDefinition Width="88*" />
   4:         <ColumnDefinition Width="Auto" />
   5:         <ColumnDefinition Width="190*" />
   6:     Grid.ColumnDefinitions>
   7:     <Grid.RowDefinitions>
   8:         <RowDefinition Height="172*" />
   9:         <RowDefinition Height="Auto" />
  10:         <RowDefinition Height="90*" />
  11:     Grid.RowDefinitions>
  12:     
  13:     <Button Content="ButtonA" Margin="3" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" />
  14:     <Button Content="ButtonB" Margin="3" Grid.Row="0" Grid.Column="2" />
  15:     <Button Content="ButtonC" Margin="3" Grid.Row="2" Grid.Column="2" />
  16:     
  17:     <GridSplitter Width="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
  18:                   Grid.Row="0" Grid.Column="1" Grid.RowSpan="3">GridSplitter>
  19:     <GridSplitter Height="3" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" 
  20:                   Grid.Row="1" Grid.Column="2">GridSplitter>
  21: Grid>

其核心想法为:

  • 定义3*3的表格,其中放置分割线的列(下标为1)和行(下标为1)的宽度和高度设置为Auto
  • ButtonA放置在Row=0、Column=0、RowSpan=3的单元格中
  • ButtonB放置在Row=0、Column=2的单元格中
  • ButtonC放置在Row=2、Column=2的单元格中
  • 竖直分割线放置在Row=0、Column=1、ColSpan=3的单元格中
  • 水平分割线放置在Row=1、Column=2的单元格中

如下图所示:

Split2

三、UniformGrid

UniformGrid 控件为控件提供了一种简化的网格布局。当控件添加到 UniformGrid 时,它们会排列在一个网格模式中,该网格模式会自动调整以使控件之间的距离保持均匀。单元格的数目将进行调整,以适应控件的数目。例如,如果四个控件添加到 UniformGrid 中,它们将安排在包含四个单元格的网格中。

如:

   1: <UniformGrid>
   2:     <Button Content="ButtonA" />
   3:     <Button Content="ButtonB" />
   4:     <Button Content="ButtonC" />
   5:     <Button Content="ButtonD" />
   6:     <Button Content="ButtonE" />
   7:     <Button Content="ButtonF" />
   8:     <Button Content="ButtonG" />
   9:     <Button Content="ButtonH" />
  10: UniformGrid>
UniformGrid

在使用UniformGrid的时候:

  • 各单元格的大小完全相同
  • 单元格的数量取决于放入的控件的数量,且单元格一定是行、列数相同的,即1*1、2*2、3*3、4*4…的单元格分布

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/12639172/viewspace-590776/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2008-01-04

  • 博文量
    2376
  • 访问量
    5309316