MAUI XAML网格布局按钮被截断，如何调整按钮适配单元格？

你的按钮被截断是因为默认按钮带有内边距，且未设置填充单元格的布局属性，结合以下几点调整就能解决问题：

• 减小按钮内边距：默认按钮的内边距会占用额外空间，给按钮设置更小的Padding（比如Padding="0"或Padding="1,0"），减少内部空白，让按钮能贴合单元格大小。
• 设置按钮填充单元格：给按钮添加HorizontalOptions="Fill"和VerticalOptions="Fill"，让按钮自动填充所在的网格单元格，避免超出边界或留白。
• 合理控制尺寸与字体：去掉不必要的MaximumHeightRequest（它会强制限制按钮高度，反而容易导致内容截断）；如果单元格尺寸很小，可适当缩小FontSize，同时保留FontAutoScalingEnabled="True"确保适配不同设备的缩放规则。

修改后的示例代码（关键修改已标注）：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Test3.MainPage"
             Shell.NavBarIsVisible="False">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Button Text="One"
                TextColor="Black"
                FontSize="16"
                FontAttributes="Bold"
                BorderColor="Black"
                BackgroundColor="Green"
                Grid.Row="0"
                Grid.Column="3"
                Grid.ColumnSpan="3"
                Padding="2,1" <!-- 调整内边距 -->
                HorizontalOptions="Fill" <!-- 填充水平方向 -->
                VerticalOptions="Fill" /> <!-- 填充垂直方向 -->
        
        <Button Text="Two"
                TextColor="Black"
                FontSize="16"
                FontAttributes="Bold"
                BorderColor="Black"
                BackgroundColor="Orange"
                Grid.Row="0"
                Grid.Column="9"
                Grid.ColumnSpan="3"
                Padding="2,1"
                HorizontalOptions="Fill"
                VerticalOptions="Fill" />

        <Button Text="Three"
                TextColor="Black"
                FontSize="16"
                FontAttributes="Bold"
                BorderColor="Black"
                BackgroundColor="Red"
                Grid.Row="0"
                Grid.Column="15"
                Grid.ColumnSpan="3"
                Padding="2,1"
                HorizontalOptions="Fill"
                VerticalOptions="Fill" />

        <Button Text="1"
                TextColor="Black"
                FontSize="11"
                FontAttributes="Bold"
                BorderColor="Black"
                BackgroundColor="DarkSlateGrey"
                Grid.Row="1"
                Grid.Column="2"
                Padding="0" <!-- 最小内边距 -->
                HorizontalOptions="Fill"
                VerticalOptions="Fill" /> <!-- 移除MaximumHeightRequest，改用填充 -->

        <Button Text="1"
                TextColor="Black"
                FontSize="11"
                FontAttributes="Bold"
                BorderColor="Black"
                BackgroundColor="DarkSlateGrey"
                Grid.Row="2"
                Grid.Column="2"
                FontAutoScalingEnabled="True"
                Padding="0"
                HorizontalOptions="Fill"
                VerticalOptions="Fill" />
    </Grid>

</ContentPage>

如果调整后仍有局部截断，可以进一步微调Padding和FontSize，或者给特定网格行列设置Height="Auto"，确保单元格能容纳按钮内容。

内容的提问来源于stack exchange，提问作者Killer Queen