Grid元素是以行和列的形式对内容进行精确定位的最常用布局控件,它的展现类似于HTML语言里面的Table控件。
一个单元格对象里面可以包含多个子控件。
Grid元默认包含一个行一个列,用户要对Grid元素添加行或添加列,需要对Grid元素添加RowDefinition 集合或者 ColumnDefinition命令。下面的例子展示了如何添加两行两列。
它的大小设置可以是一个抽象的单位,如百分比或自动填充。
<Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="28" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="200" /> </Grid.ColumnDefinitions></Grid>
往Grid元素里面添加Controls需要把控件定义在开始标签<Grid>与结束标签</Grid>之内,并确保Controls控件要放在RowDefinition与ColumnDefinition元素之后。
Grid元素对Controls控件附加了两个属性,分别是Grid.Row和Grid.Column,用于定位当前控件将存放在Grid元素的第几行和第几列。
<Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="28" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="200" /> </Grid.ColumnDefinitions> <Label Grid.Row="0" Grid.Column="0" Content="Name:"/> <Label Grid.Row="1" Grid.Column="0" Content="E-Mail:"/> <Label Grid.Row="2" Grid.Column="0" Content="Comment:"/> <TextBox Grid.Column="1" Grid.Row="0" Margin="3" /> <TextBox Grid.Column="1" Grid.Row="1" Margin="3" /> <TextBox Grid.Column="1" Grid.Row="2" Margin="3" /> <Button Grid.Column="1" Grid.Row="3" HorizontalAlignment="Right" MinWidth="80" Margin="3" Content="Send" /></Grid>
WPF提供了一个GridSplitter控件,该控件可以像其他Contorls一样添加到Grid元素的单元格当中,特殊的是它将自动与最接近的网格线整合在一起,当拖动GridSplitter控件时,单元格的宽度和高度将会发生改变。
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Label Content="Left" Grid.Column="0" /> <GridSplitter HorizontalAlignment="Right" VerticalAlignment="Stretch" Grid.Column="1" ResizeBehavior="PreviousAndNext" Width="5" Background="#FFBCBCBC"/> <Label Content="Right" Grid.Column="2" /></Grid>
对齐Splitter最好的方法是把它放到一个auto-sized的列当中,这样做可以防止重叠相邻的单元格。
设置ResizeBehavior属性为PreviousAndNext值可以使拖动时,前后的单元格一起发生变化。
默认值为BasedOnAlignment.
ResizeBehavior属性是一个枚举类型:GridResizeBehavior,这个枚举包含以下类型:
BasedOnAlignment:根据VerticalAlignment和HorizontalAlignment属性来确定分割线移动后,有哪些项被移动.
CurrentAndnext:Grid当前所在的区域以及下一个区域被影响。
PreviousAndCurrent:前一个区域与当前区域影响。
PreviousAndNext:前一个和后一个区域被影响。
<GridSplitter ResizeDirection="Columns"/>
这Grid元素共享标尺特性允许同步更新多个Grid元素的列宽。这特性针对于把Grid元素做为DataTempalte元素添加到多列ListView视图当中非常有用。
因为每一个ListItem都包含一个自身的Grid对象,它们的列将不会相同。
通过设置Grid元素的上一级元素的附加属性Grid.IsSharpSizeScope为True值可以把指定范围内的列宽将被共享。
去同步两个ColumnDefinintition的宽度,需要设置属性SharedSizeGroup为相同的名称。
它指定范围内的Grid的拥有相同SharedSizeGroup组名的列的宽度将保持一致。
<ItemsControl Grid.IsSharedSizeScope="True" > <ItemsControl.ItemTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition SharedSizeGroup="FirstColumn" Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <TextBlock Text="{Binding Path=Key}" TextWrapping="Wrap"/> <TextBlock Text="{Binding Path=Value}" Grid.Column="1" TextWrapping="Wrap"/> </Grid> </DataTemplate> </ItemsControl.ItemTemplate></ItemsControl>
Columns and rows that participate in size-sharing do not respect Star sizing. In the size-sharing scenario, Star sizing is treated as Auto. Since TextWrapping on TextBlocks within an SharedSize column does not work you can exclude your last column from the shared size. This often helps to resolve the problem.
有用提示:
Columns和Rows设置了"*"标尺的不参与标尺共享设置,在标尺共享方案中,"*"设置被看待成自动设置,从TextWarpping on (技术不够,未能翻译)。s
日期:2011-04-16
标签:WPF,Grid
本文摘取翻译于:http://www.wpftutorial.net/GridLayout.html