How do you get a button to appear under a ScrollView on Windows?

Question

We have a layout such that a submit button correctly appears on the bottom left on Android, but when trying to launch the app in Windows, the button no longer shows up no matter how big the windows is.

Here is the code

<?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>

Notice that the button is in the first column and last row. The first column is star sizing, so the Label in the first column should set the first column size like it does on Android. Also notice that the last row has auto sizing, so the last row should wrap the button.

What am I missing?

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" />

Key Changes:

• VerticalOptions="End" on the Submit button: This ensures the button is placed at the bottom of the grid row, which will make it more predictable across platforms.
• Row Definitions: The structure for row definitions remains the same, but make sure the row where the button is placed has enough space. The auto for the bottom rows (Row 2 and Row 3) should allow the button to appear correctly, given that content height isn't exceeding available space. Other Considerations:
• Check Platform-Specific Adjustments: Sometimes, platform-specific quirks might require additional tweaks. If this doesn't resolve it across all platforms, you can look into using platform-specific constraints or styling for Windows using OnPlatform or OnIdiom for adjusting the layout further.