按钮在网格布局 MAUI XAML 中被截断

Question

我遇到了一种情况，我在 MAUI XAML 中创建的按钮被切断，我不知道如何纠正这个问题。不幸的是，我正在尝试开发的应用程序需要以某种模式排列多个按钮，因此我需要大量的网格行和列。如何使按钮变小以适合网格内的“单元格”。

感谢您提前的帮助。

随附以下代码结果的链接。

<?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" />
        
        <Button Text="Two"
                TextColor="Black"
        
                FontSize="16"
                FontAttributes="Bold"
        
                BorderColor="Black"
                BackgroundColor="Orange"
        
                Grid.Row="0"
                Grid.Column="9"
                Grid.ColumnSpan="3" />

        <Button Text="Three"
                TextColor="Black"

                FontSize="16"
                FontAttributes="Bold"
                
                BorderColor="Black"
                BackgroundColor="Red"

                Grid.Row="0"
                Grid.Column="15"
                Grid.ColumnSpan="3" />

        <Button Text="1"
                TextColor="Black"
        
                FontSize="11"
                FontAttributes="Bold"
        
                BorderColor="Black"
                BackgroundColor="DarkSlateGrey"
        
                Grid.Row="1"
                Grid.Column="2" 
                MaximumHeightRequest="10" />

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

</ContentPage>

Answer 1

我从概念上看到，您有一个简单的外部网格定义，如下所示：

	水平按钮
垂直按钮

因此，如果您定义 3 个网格，一个用于外部网格定义，另一个用于水平按钮，另一个用于垂直按钮，您的 XAML 将大大简化，例如

<Grid RowDefinitions="Auto, *"
      ColumnDefinitions="Auto, *">
    <Grid ColumnDefinitions="*,*,*,*,*,*" Grid.Column="1">
        <Button Text="One"/>
        <Button Text="Two" Grid.Column="2"/>
        <Button Text="Three" Grid.Column="4"/>
    </Grid>
    <Grid RowDefinitions="*,*,*,*,*,*" Grid.Row="1">
        <Button Text="Four"/>
        <Button Text="Five" Grid.Row="2"/>
        <Button Text="Six" Grid.Row="4"/>
    </Grid>
</Grid>