Workaround for ScrollView not scrolling inside a StackLayout in Maui

Question

I have a page that presents a list of items in a CollectionView within a ScrollView. I want the user to be able to add a new item to this list by hitting an "add" button or tapping an image at the top of the page. I first tried this using the hierarchy of views shown below. The code below is an abbreviated version of the real thing. I discovered that putting a ScrollView within a VerticalStackLayout breaks the scrolling in Maui! Here is the reported bug.

I tried deleting the VerticalStackLayout that precedes the ScrollView and the scrolling still doesn't work.

<ContentPage.Content>

<VerticalStackLayout>
    <VerticalStackLayout HorizontalOptions="Center">
        <Image Source="add.png">
           <ImageGestureRecongnizers>
               <TapGestureRecognizer... Code to add new item to MyCollection...]/>
           </ImageGestureRecognizers>
        </Image>
    </VerticalStackLayout>
    <ScrollView>
        <CollectionView ItemsSource="{Binding MyCollection}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    [Layout for displaying items in MyCollection...]
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ScrollView>
<VerticalStackLayout


</ContentPage.Content>

I'd greatly appreciate suggestions on a workaround to allow the viewing of the scrollable list and adding an item to the list by tapping an object (button or image) that's always visible on the page regardless of how the list is scrolled.

Answer 1

Actually for the Xaml, this will work...

<?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="MauiAppTest01.MainPage">

<Grid RowDefinitions="30,*">

        <CollectionView ItemsSource="{Binding MyCollection}"
Grid.Row="1">

            <CollectionView.ItemTemplate>

                <DataTemplate>

                    <VerticalStackLayout  >

                        <Label Text="{Binding Name}" FontSize="Large" />


                    </VerticalStackLayout>


                </DataTemplate>

            </CollectionView.ItemTemplate>

        </CollectionView>


    <Image Source="dotnet_bot.png" HeightRequest="100" WidthRequest="100" 
 Margin="0,0,50,20">

        <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
        </Image.GestureRecognizers>

    </Image>
</Grid>

Adjust your RowDefinition(30) for the image! Sorry if my code is not neat, as I'm on mobile.