WPF Grid 创建复杂网格

Grid 元素用于精确定位行和列中的内容

• Grid.RowDefinitions 定义行

• Grid.ColumnDefinitions 定义列

• Grid.ColumnSpan 合并列

• Grid.RowSpan 列合并行

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    
    <!--Grid 元素用于精确定位行和列中的内容-->
    <Grid>
        <!--使用 Grid.RowDefinitions 定义行-->
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <!--使用 Grid.ColumnDefinitions 定义列-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <Border Grid.Row="0" Grid.Column="0" Background="Red"/>
        <Border Grid.Row="0" Grid.Column="1" Background="Yellow"/>
        <!--使用 Grid.ColumnSpan 合并列-->
        <Border Grid.Row="0" Grid.Column="2" Background="Black" Grid.ColumnSpan="2" />

        <Border Grid.Row="1" Grid.Column="0" Background="Blue"/>
        <Border Grid.Row="1" Grid.Column="1" Background="Green"/>

        <!--使用 Grid.RowSpan 列合并行-->
        <Border Grid.Row="2" Grid.Column="0" Background="DarkGoldenrod" Grid.ColumnSpan="4" Grid.RowSpan="2"/>
    </Grid>
</Window>