如何让按钮出现在 Windows 上的 ScrollView 下？

Question

我们的布局使得提交按钮在 Android 上正确显示在左下角，但是当尝试在 Windows 中启动应用程序时，无论窗口有多大，该按钮都不再显示。

这是代码

<?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"
             xmlns:models="clr-namespace:TOTools.Models"
             xmlns:scheduler="clr-namespace:TOTools.Scheduler"
             x:DataType="scheduler:SchedulerEventPage"
             x:Class="TOTools.Scheduler.SchedulerEventPage"
             Title="Event Scheduler">
    <ContentPage.Content>

        <Grid
            ColumnDefinitions="*, auto, auto"
            RowDefinitions="auto, *, auto, auto"
            Margin="16, 16, 16, 16">

            <Label Text="Event Link"
                   FontSize="31"
                   Grid.Column="0"
                   Grid.Row="0" />

            <Label Text="Start Time"
                   FontSize="31"
                   Grid.Column="1"
                   Grid.Row="0" />

            <ImageButton Source="settings.svg"
                         Clicked="OnSettingsImageButtonClicked"
                         Grid.Column="2" />

            <ScrollView
                Grid.Row="1"
                Grid.ColumnSpan="3">
                <CollectionView
                    x:Name="MatchList"
                    ItemsSource="{Binding Events}">

                    <CollectionView.ItemTemplate>
                        <DataTemplate x:DataType="models:EventLink">
                            <Grid
                                RowDefinitions="*"
                                ColumnDefinitions="*, auto, auto">
                                <Label Text="{Binding Link }"
                                       FontSize="31"
                                       Grid.Column="0">
                                </Label>
                                <Label Text="{Binding StartTime }"
                                       FontSize="31"
                                       Grid.Column="1">
                                </Label>
                            </Grid>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
            </ScrollView>

            <ImageButton Source="plus.svg"
                         HorizontalOptions="Start"
                         Grid.Row="2" />

            <Button Text="Submit"
                    Grid.Row="3"
                    FontAttributes="Bold"
                    VerticalOptions="Center"
                    HorizontalOptions="Start"
                    Clicked="SubmitButtonClicked" />

        </Grid>

    </ContentPage.Content>
</ContentPage>

请注意，该按钮位于第一列最后一行。第一列是星号大小，因此第一列中的标签应设置第一列大小，就像在 Android 上一样。另请注意，最后一行具有自动调整大小，因此最后一行应包裹按钮。

我错过了什么？

Answer 1

<Grid
ColumnDefinitions="*, auto, auto"
RowDefinitions="auto, *, auto, auto"
Margin="16, 16, 16, 16">

<!-- Header Labels -->
<Label Text="Event Link"
       FontSize="31"
       Grid.Column="0"
       Grid.Row="0"
       HorizontalOptions="StartAndExpand" />

<Label Text="Start Time"
       FontSize="31"
       Grid.Column="1"
       Grid.Row="0" />

<ImageButton Source="settings.svg"
             Clicked="OnSettingsImageButtonClicked"
             Grid.Column="2"
             Grid.Row="0" />

<!-- Scrollable Content -->
<ScrollView
    Grid.Row="1"
    Grid.ColumnSpan="3"
    HorizontalOptions="Fill"
    VerticalOptions="Fill">
    <CollectionView
        x:Name="MatchList"
        ItemsSource="{Binding Events}">

        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:EventLink">
                <Grid
                    RowDefinitions="*"
                    ColumnDefinitions="*, auto, auto">
                    <Label Text="{Binding Link}"
                           FontSize="31"
                           Grid.Column="0" />
                    <Label Text="{Binding StartTime}"
                           FontSize="31"
                           Grid.Column="1" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ScrollView>

<!-- Buttons Below ScrollView -->
<ImageButton Source="plus.svg"
             HorizontalOptions="Start"
             Grid.Row="2"
             Grid.Column="0" />

<Button Text="Submit"
        FontAttributes="Bold"
        Grid.Row="3"
        Grid.Column="0"
        VerticalOptions="Start"  <!-- Ensures row wraps button -->
        HorizontalOptions="Start"
        Clicked="SubmitButtonClicked" />

主要变化：

提交按钮上的

• VerticalOptions="End"

  ：这可确保按钮放置在网格行的底部，这将使其在跨平台上更具可预测性。
• 行定义：行定义的结构保持不变，但请确保放置按钮的行有足够的空间。假设内容高度不超过可用空间，底行（

  Row 2

  和

  Row 3

  ）的 auto 应允许按钮正确显示。 其他注意事项：
• 检查特定于平台的调整：有时，特定于平台的怪癖可能需要额外的调整。如果这不能在所有平台上解决该问题，您可以考虑使用特定于平台的约束或使用

  OnPlatform

  或

  OnIdiom

  进一步调整布局的 Windows 样式。