XAML content is not updated properly in a .net MAUI app

Question

In my .Net MAUI app, I have page 1 and page 2. On page 1, there is a StackLayout which is hidden or displayed based on viewmodel's data. Here is a simplified xaml code:

<StackLayout>
   <ActivityIndicator IsVisible="{Binding IsBusy}"
                      IsRunning="{Binding IsBusy}"
                      HorizontalOptions="FillAndExpand"
                      VerticalOptions="CenterAndExpand" />

   <ScrollView>
       <StackLayout Margin="30">
           <Label 
               Text="{Binding ComingAppointmentInfo}"
               FontAttributes="Bold"
               HorizontalOptions="Center" />

           <StackLayout IsVisible="{Binding ComingAppointment, Converter={StaticResource ComingAppointmentToVisibilityConverter}}">
               <Grid ColumnDefinitions="*, 3*" RowDefinitions="*, *" Margin="50, 20">
                   <Label Grid.Row="0" Grid.Column="0" Text="Date:" FontAttributes="Bold" />

                   <Label Grid.Row="0" Grid.Column="1"
                       Text="{Binding ComingAppointmentDate}"
                       Margin="0,0 "/>

                   <Label Grid.Row="1" Grid.Column="0" Text="Time:" FontAttributes="Bold"  />

                   <Label Grid.Row="1" Grid.Column="1"
                       Text="{Binding ComingAppointmentTime}"
                       Margin="0,0 "/>
               </Grid>

               <Label Text="{Binding AppointmentCountdownText}" />

               <Button 
                   Command="{Binding MakeVideoCallCommand}" 
                   Text="{Binding ButtonPhoneText}" 
                   IsEnabled="{Binding JoinCallEnabled}"
                   Style="{StaticResource ButtonStyle}"
                   Margin="0, 20"/>

               <Frame HorizontalOptions="Center"
                   BackgroundColor="Transparent"
                   BorderColor="Transparent"
                   HasShadow="False">      
                   <Label Text="{Binding CancelAppointmentText}"
                       FontFamily="FontAwesome"
                       TextColor="Blue"
                       TextDecorations="Underline"
                       HeightRequest="75">
                       <Label.GestureRecognizers>
                           <TapGestureRecognizer Command="{Binding CancelAppointmentCommand}" NumberOfTapsRequired="1" />
                       </Label.GestureRecognizers>
                   </Label>
               </Frame>

               <BoxView HeightRequest="1" Color="DarkGray" HorizontalOptions="FillAndExpand" Margin="0,30,0,30" />
               
           </StackLayout>

           <Label 
               Text="Schedule a new video call"
               FontAttributes="Bold"
               HorizontalOptions="Center"
               Margin="0,20"/>
           
           <Button 
               Command="{Binding ScheduleAppointmentCommand}" 
               Text="{Binding ButtonScheduleAppointmentText}" 
               Style="{StaticResource ButtonStyle}" />
       </StackLayout>
   </ScrollView>
</StackLayout>

Initially, that StackLayout is invisible, so only a label and a button under it are displayed.

The user navigates to page 2 using the following call from the viewmodel:

await Shell.Current.GoToAsync(nameof(AppointmentSchedulePage), true, scheduleParameter);

On page 2, the user takes some action after which he returns to page 1 by calling the following from the page 2 viewmodel:

            await MainThread.InvokeOnMainThreadAsync(async () => 
            { 
                await Shell.Current.Navigation.PopAsync(); 
            });

Due to the changes made on page 2, now the StackLayout on page 1 becomes visible.

But for some reason, the page still has only enough room for the initially visible two elements. So most of the content is pushed down and not displayed, unless you scroll to it. Moreover, the button and clickable label are now not responsive.

This problem exists only in iOS (on my iPhone) and not on Android.

If I close my app and re-open it, the content is displayed properly, everything is visible, fits the screen, and is responsive.

I tried to replace PopAsync() with GoToAsync(), but it did not help. I also tried to set VerticalOptions of the parent StackLayout to FillAndExpand or StartAndExpand, but that did not help either. I also tried ForceLayout() on the page 1, but no luck.

Answer 1

The issue is fixed by setting the scroll view's vertical options to FillAndExpand.