Unable to Scroll to Bottom of List in a MAUI Application

Question

Context: I'm working on a mobile application that tracks the programs performed by a user each day.

Problem: I'm experiencing an issue where, upon clicking on a user's profile and viewing their program history, I cannot scroll down to the bottom of the list if the user has completed a large number of programs.

Here is my implementation:

-> View (Program History):

Code modified by the first solution (but impossible to scroll to the bottom of the list)

<?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="ProjetSport.Views.ExerciceActivitiesView"
             xmlns:vm="clr-namespace:ProjetSport.ViewModels"
             Title="ExerciceActivitiesView">
    <ContentPage.BindingContext>
        <vm:ActiviteExerciceViewModel></vm:ActiviteExerciceViewModel>
    </ContentPage.BindingContext>
    <ContentPage.BackgroundColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="iOS" Value="#FEFAE2" />
            <On Platform="Android" Value="#FEFAE2" />
            <On Platform="UWP" Value="#FEFAE2" />
        </OnPlatform>
    </ContentPage.BackgroundColor>
    <Grid RowDefinitions="Auto,*">
        <VerticalStackLayout Grid.Row="0">
            <HorizontalStackLayout HorizontalOptions="Center" Margin="0,20,0,20">
                <Label Text="Vous avez effectué : "></Label>
                <Label Text="{Binding Avancee}" FontAttributes="Bold"></Label>
                <Label Text="%" FontAttributes="Bold"></Label>
                <Label Text=" du programme selectionné"></Label>
            </HorizontalStackLayout>
            <HorizontalStackLayout HorizontalOptions="Center">
                <Border Stroke="#000000"
            StrokeThickness="5"
            StrokeShape="RoundRectangle 50,50,50,50"
            BackgroundColor="#DFDBC6"
            HorizontalOptions="Center">
                    <Button Text="Afficher les exercices" Clicked="Button_Clicked" HorizontalOptions="Center" BackgroundColor="#FEF8BF" TextColor="#000000"></Button>
                </Border>
                <Border Stroke="#000000"
            StrokeThickness="5"
            StrokeShape="RoundRectangle 50,50,50,50"
            BackgroundColor="#DFDBC6"
            HorizontalOptions="Center">
                    <Button Text="Réduire" Clicked="Button_Clicked_1" HorizontalOptions="Center" BackgroundColor="#FEF8BF" TextColor="#000000"></Button>
                </Border>
            </HorizontalStackLayout>
        </VerticalStackLayout>
        <CollectionView Grid.Row="1"
                WidthRequest="350"
                x:Name="CollectionView"
                IsVisible="true"
             ItemTemplate="{StaticResource Exercices}"
             BackgroundColor="#FEFAE2"
             ItemsSource="{Binding SelectedProgramActivity}"
            />
    </Grid>
</ContentPage>

-> Code-behind :

public partial class ExerciceActivitiesView : ContentPage
{
    public ExerciceActivitiesView()
    {
        InitializeComponent();
    }

    private void Button_Clicked(object sender, EventArgs e)
    {
        CollectionView.IsVisible = true;
    }

    private void Button_Clicked_1(object sender, EventArgs e)
    {
        CollectionView.IsVisible = false;
    }
}

-> DataTemplate

            <DataTemplate x:Key="Activite">
                <Border Stroke="#000000" StrokeThickness="3" BackgroundColor="#F2EED5" StrokeShape="RoundRectangle 10, 20, 20, 10" Margin="0,10,5,20">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <HorizontalStackLayout Margin="50,20,0,20">
                            <Label Text="{Binding Name}"
                   Grid.Column="1"
                   HorizontalTextAlignment="Center"
                   FontSize="Small"
                               Margin="-10,0,0,0"
                               TextColor="#100905"
                    ></Label>
                        </HorizontalStackLayout>
                        <HorizontalStackLayout Margin="240,15,0,0">
                            <Label Text="{Binding Date, StringFormat='{0:dd/MM/yyyy}'}"
                   Grid.Column="2"
                   HorizontalTextAlignment="Center"
                   FontSize="Small"
                               Margin="-10,0,0,0"
                               TextColor="#100905"
                            />
                        </HorizontalStackLayout>
                    </Grid>
                </Border>
            </DataTemplate>

I would appreciate any guidance on how to fix this scrolling issue. Thanks in advance!

Answer 1

You can also try this to allow scrolling of your data if you have a lot of it

   <ContentPage.BackgroundColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="iOS" Value="#FEFAE2" />
            <On Platform="Android" Value="#FEFAE2" />
            <On Platform="UWP" Value="#FEFAE2" />
        </OnPlatform>
    </ContentPage.BackgroundColor>
    <ScrollView>
        <VerticalStackLayout>
          
            <!-- The code of your project  -->
           
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>