C# MAUI中的Grid布局怎么设置行和列 MAUI Grid教程-C#.Net教程-PHP中文网

C# MAUI中的Grid布局怎么设置行和列 MAUI Grid教程

畫卷琴夢

发布： 2025-12-21 14:31:49

原创

502人浏览过

MAUI中Grid通过RowDefinitions和ColumnDefinitions定义行列尺寸策略：Auto自适应内容、固定值以dp为单位、星号*按比例分配；子控件用Grid.Row/Grid.Column定位，支持跨行跨列；代码中需手动调用Grid.SetRow等方法设置位置；未定义行列则默认1行1列，调试可启用ShowGridLines。

c# maui中的grid布局怎么设置行和列 maui grid教程

MAUI 中的 Grid 是最常用、最灵活的布局容器之一，设置行（RowDefinitions）和列（ColumnDefinitions）是它的核心用法。关键在于理解“定义”不是直接写宽高，而是用 GridLength 描述每行/列的**尺寸策略**。

怎么定义行和列

在 XAML 中，通过 Grid.RowDefinitions 和 Grid.ColumnDefinitions 集合来声明。每个 RowDefinition 或 ColumnDefinition 指定一行或一列的行为：

Auto：该行/列高度/宽度刚好容纳其子元素（内容自适应）
固定值（如 100）：单位为设备独立像素（dp），固定大小
星号（*）：按比例分配剩余空间，* = 等分，2* = 占两份

示例：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="100" />
        <RowDefinition Height="2*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
</Grid>

登录后复制

怎么把子控件放进指定行列

使用附加属性 Grid.Row、Grid.Column（从 0 开始计数）定位控件位置：

Grid.Row="1" 表示放在第 2 行（索引为 1）
Grid.Column="0" 表示放在第 1 列（索引为 0）
可跨行/列：Grid.RowSpan="2" 或 Grid.ColumnSpan="3"

例如让一个按钮占满第 0 行全部三列：

Quicktools Background Remover

Picsart推出的图片背景移除工具

查看详情

<Button Text="全宽按钮" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" />

登录后复制

代码中动态添加行列（C# 方式）

适合运行时根据数据调整布局：

var grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(2, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(100) });
<p>// 添加子元素并设置位置
var label = new Label { Text = "动态添加" };
Grid.SetRow(label, 1);
Grid.SetColumn(label, 0);
grid.Add(label);

登录后复制

注意：Grid.Add(child) 默认加到第 0 行第 0 列；必须手动调用 Grid.SetRow() 等方法才能准确定位。

常见坑和提示

实际开发中容易忽略的细节：

没定义 RowDefinitions 或 ColumnDefinitions？默认只有 1 行 1 列，所有子控件会堆叠在左上角
Auto 行/列里放了 VerticalOptions="Fill" 的控件？它不会撑开 Auto 行——Auto 只看内容自身所需尺寸
想让某列“尽量小但不为零”？用 Auto；想“至少 80 宽，有剩余再扩展”？目前 MAUI 不支持 MinWidth，需用 GridLength.Star + 内部嵌套 StackLayout 控制最小尺寸
调试时开启网格线：Grid.ShowGridLines="True"（仅 Debug 模式有效，XAML 中加即可）