WPF教程(三十一)Grid网格跨越

2016-11-01 08:24:51来源:CSDN作者:seanbei人点击

Grid默认每一个控件占据一个单元格,但是有些情况下你需要某个控件占据多行或者多列。在这种情况下,可以使用ColumnSpan和RowSpan这两个附加属性来实现。这两个属性默认的值都是1,也就是一个单元格,你可以指定大于1的数字来让控件跨越多行或者多列。

下面的例子使用了ColunmSpan属性:

<span style="font-size:14px;"><Window x:Class="WpfTutorialSamples.Panels.GridColRowSpan"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="GridColRowSpan" Height="110" Width="300">        <Grid>                <Grid.ColumnDefinitions>                                                <ColumnDefinition Width="1*" />                        <ColumnDefinition Width="1*" />                </Grid.ColumnDefinitions>                <Grid.RowDefinitions>                        <RowDefinition Height="*" />                        <RowDefinition Height="*" />                </Grid.RowDefinitions>                <Button>Button 1</Button>                <Button Grid.Column="1">Button 2</Button>                <Button Grid.Row="1" Grid.ColumnSpan="2">Button 3</Button>        </Grid></Window></span>
A Grid with column spanning applied to one of the controls

我们定义了两行两列,分配一样的空间。前两个按钮和正常使用一样,第三个按钮使用了ColumnSpan属性,使得它占据了第二行的两列。

上面的场景比较简单,因此联合几个面板也可以实现这个效果,但是在某些复杂的场景下,上面的功能就非常有用了。下面继续来看一个例子:

<span style="font-size:14px;"><Window x:Class="WpfTutorialSamples.Panels.GridColRowSpanAdvanced"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="GridColRowSpanAdvanced" Height="300" Width="300">    <Grid>                <Grid.ColumnDefinitions>                        <ColumnDefinition Width="*" />                        <ColumnDefinition Width="*" />                        <ColumnDefinition Width="*" />                </Grid.ColumnDefinitions>                <Grid.RowDefinitions>                        <RowDefinition Height="*" />                        <RowDefinition Height="*" />                        <RowDefinition Height="*" />                </Grid.RowDefinitions>                <Button Grid.ColumnSpan="2">Button 1</Button>                <Button Grid.Column="3">Button 2</Button>                <Button Grid.Row="1">Button 3</Button>                <Button Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Grid.ColumnSpan="2">Button 4</Button>                <Button Grid.Column="0" Grid.Row="2">Button 5</Button>        </Grid></Window></span>

A Grid with both column and row spanning applied to several child controls

三行三列就能产生9个单元格,但是在这个例子中,我们将5个按钮填充到了对应的空间。一个控件可以跨越多行、多列、或者同时跨越多行多列,像按钮4一样。

总之,在Grid里跨越多行或者多列非常容易。在后面的文章中,我们将通过一个更加实用的例子,来演示使用其他Grid技术实现跨越。



最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台