WPF Grid跨行、跨列

开发工具与关键技术：MVC、WPF
作者：刘俊杰
撰写时间：2019年05月15日

Grid顾名思义就是“网格”，以表格形式布局元素。在Grid布局中除了使用Row和Column附加属性在单元格中放置元素，还可以使用另外两个附加属性使用元素跨越多个单元格，这两个附加属性是RowSpan(跨行)和ColumnSpan(跨列)。
通过下面代码了解跨行、跨列：

<!--网格布局-->
    <Grid>
        <!--创建行标签-->
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <!--创建列标签-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">菜单一</TextBlock>
<!--跨列合并单元格-->
<TextBlock Grid.Row="1" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.ColumnSpan="2">菜单二</TextBlock>
<!--跨行合并单元格-->
<TextBlock Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" VerticalAlignment="Center" HorizontalAlignment="Center">标题</TextBlock>
</Grid>

图一：
“菜单二 ”合并
WPF Grid跨行、跨列

图二：
“标题”合并
WPF Grid跨行、跨列
跨列和跨行可以合并跨越的同一个单元格，所以当他们两个同时合并时里面的值会重叠在一起。
图一所示”菜单二“使用的是跨列合并单元格，因为设置了垂直居中和水平居中，所以“菜单二”位于第一列和第二列的中间。
图二所示“标题”使用的是跨行合并单元格，因为也设置了居中的效果，所以“标题”位于第一行和第二行之间。

WPF Grid跨行、跨列

相关推荐