WPF 布局Grid使用案例

一、Grid（网格布局）
核心功能：通过行（RowDefinition）和列（ColumnDefinition）定义网格，支持复杂的多区域布局。
关键属性：
RowDefinitions/ColumnDefinitions：定义行和列（支持固定值、比例（*）、自动尺寸（Auto））。
Grid.Row/Grid.Column：附加属性，设置子元素的位置。
Grid.RowSpan/Grid.ColumnSpan：合并单元格

 

二、代码示例：

<Window x:Class="WpfAppNet8.GridOne"
        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:WpfAppNet8"
        mc:Ignorable="d"
        Title="GridOne" Height="500" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="250*"/>
            <RowDefinition Height="250*"/>
        </Grid.RowDefinitions>
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200*"/>
            <ColumnDefinition Width="200*"/>
            <ColumnDefinition Width="200*"/>
            <ColumnDefinition Width="200*"/>
        </Grid.ColumnDefinitions>

        <Button Grid.Row="1" Grid.Column="1"  Content="1-1单元格"/>
        
        <Label Grid.Row="0" Grid.Column="0" Content="0-0单元格" Foreground="#FFC11010" Background="#FFFFB7B7"   />

        <Image Grid.Row="0" Grid.Column="3" Source="/aeebd7c79497c886a4bdf5ba68f923f.jpg" />
    </Grid>
</Window>

 

展示效果：

 

更多：

WPF 布局整理

WPF 控件使用整理-Control

WPF 资源样式使用整理