WPF Grid布局中的Grid.RowSpan和Grid.ColumnSpan

注意,只有在Grid布局中,对整体布局/大布局划分行列,才可以使用Grid.RowSpan和Grid.ColumnSpan起到效果

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>

在这里插入图片描述

我们定义了两行两列,分配一样的空间。前两个按钮和正常使用一样,第三个按钮使用了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>

在这里插入图片描述

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

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

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读