Workaround for ScrollView not scrolling inside a StackLayout in Maui - scrollview

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.

Answer 2

I ended up creating a "fancy" floating button on the bottom right of the page by:
Creating a one-row Grid
Putting both the CollectionView and Image in the one row
Defining the Image after the CollectionView so that the Image sits on top of the CollectionView
I also got rid of the ScrollView per Jason's suggestion.
<ContentPage.Content>
<Grid
<CollectionView ItemsSource="{Binding MyCollection}">
<CollectionView.ItemTemplate>
<DataTemplate>
[Layout for displaying items in MyCollection...]
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<Image Source="add.png" HeightRequest="40" HorizontalOptions="End"
VerticalOptions="End" Margin="0,0,50,20">
<ImageGestureRecongnizers>
<TapGestureRecognizer... Code to add new item to MyCollection...]/>
</ImageGestureRecognizers>
</Image>
</Grid>
</ContentPage.Content>

Answer 3

If you want to allow the viewing of the scrollable list and add items to the list by tapping an image, you can just wrap them with a Grid.
Here's the code snippet below for your reference:
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="MauiAppTest01.MainPage">
<Grid>
<CollectionView ItemsSource="{Binding MyCollection}">
<CollectionView.ItemTemplate>
<DataTemplate>
<VerticalStackLayout >
<Label Text="{Binding Name}" FontSize="Large" />
</VerticalStackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<Image Source="dotnet_bot.png" HeightRequest="100" WidthRequest="100" HorizontalOptions="End" VerticalOptions="End" Margin="0,0,50,20">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Image.GestureRecognizers>
</Image>
</Grid>
</ContentPage>
Code-behind:
public partial class MainPage : ContentPage
{
public ObservableCollection<MyModel> MyCollection { get; set; }
public MainPage()
    {
            InitializeComponent();
MyCollection = new ObservableCollection<MyModel>
{
new MyModel{ Name="1"},
new MyModel{ Name="2"},
};
BindingContext = this;
}
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
for (int i = 0; i < 10; i++) {
MyCollection.Add(new MyModel { Name = i+"" });
}
}
}
Model:
public class MyModel
{
public string Name { get; set; }
}