Elements do not fit into the ScrollView when Visibility of Elements are changed in MAUI

Question

Hi all

I am not sure whether it is a bug or not.

Well, I have a kind of form and users can visible-invisible items/element by checking switches.

I don't think that this is only a MAUI issue but also Xamarin.

If some elements were already invisible (becuse I want to edit a record) and if I uncheck some switches then I see more elements on the form. But the ScrollView does not update itself. I tried many things to solve but could not make it. I recorded a video that you can see the problem.

https://www.veed.io/view/529dce80-f208-4696-8479-a7705c2b2b16

I created a simple example

Just create an empty page and add the following codes

<Grid RowDefinitions="*,auto">  
  <ScrollView Grid.Row="0" Grid.Column="0" x:Name="newEntryScrollView" VerticalScrollBarVisibility="Always">  
        <Grid x:Name="layout">   
           <StackLayout>  
                <StackLayout HeightRequest="100" BackgroundColor="White" >  
                        <StackLayout.GestureRecognizers>  
                           <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />  
                        </StackLayout.GestureRecognizers>  
                        <Label Text="Label 1"></Label>  
                </StackLayout>  
                <StackLayout HeightRequest="100" BackgroundColor="LightGrey"><Label Text="Label 2"></Label></StackLayout>  
                <StackLayout HeightRequest="100" BackgroundColor="White"><Label Text="Label 3"></Label></StackLayout>  
                <StackLayout HeightRequest="100" BackgroundColor="LightGrey"><Label Text="Label 4"></Label></StackLayout>  
                <StackLayout HeightRequest="100" BackgroundColor="White"><Label Text="Label 5"></Label></StackLayout>  
                <StackLayout HeightRequest="100" BackgroundColor="LightGrey"><Label Text="Label 6"></Label></StackLayout>  
                 <StackLayout HeightRequest="100" BackgroundColor="White"><Label Text="Label 7"></Label></StackLayout>  
                <StackLayout HeightRequest="100" BackgroundColor="LightGrey"><Label Text="Label 8"></Label></StackLayout>  
                <StackLayout x:Name="s3" IsVisible="False" HeightRequest="100" BackgroundColor="White"><Label Text="Label 9"></Label></StackLayout>  
                <StackLayout x:Name="s1" IsVisible="False" HeightRequest="100" BackgroundColor="LightGrey"><Label Text="Label 10"></Label></StackLayout>  
                <StackLayout x:Name="s2" IsVisible="False" HeightRequest="100" BackgroundColor="White"><Label Text="Label 11"></Label></StackLayout>  
                <StackLayout HeightRequest="100" BackgroundColor="LightGrey"><Label Text="Label 12"></Label></StackLayout>  
             </StackLayout>  
        </Grid>  
  </ScrollView>  
 <Rectangle Grid.Row="1" Fill="Black" WidthRequest="500" HeightRequest="100" HorizontalOptions="End" />  
</Grid>  

and in your xaml.cs add these code

void TapGestureRecognizer_Tapped(System.Object sender, Microsoft.Maui.Controls.TappedEventArgs e)     
{  
        s1.IsVisible = true;   
       s2.IsVisible = true;   
       s3.IsVisible = true;    
 }  

So basically I have several stacklayout and 3 of them are invisible. When you tap the first stackLayout (Label 1) then these 3 Stacklayouts will be visible in the ScrollView. But when you try to scroll, you will not be able to reach bottom items.

Somehow the scrollview cannot adjust itself when new items are added.

If I change * with auto in the RowDefinitions then it does not scroll. I tried a lot of things to solve this problem but unfortunately nothing worked.

PS: I tried with my iphone. I am using .net 7.0 FW, VS 2022 17.4 and ios 15.6.1

Answer 1

Hello @Ertan Dagistanli ,

It is caused by the ContentSize of UIScrollview in native iOS, the height of s1/s2/s3 becomes 0 when you set IsVisible = false, so you could change the height of ContentSize of UIScrollview on iOS.
First, you should use native iOS namespace:

#if IOS  
using UIKit;  
#endif  

Then, you can get the native control (UIScrollview) via Handler with MAUI and set the ContentSize property. After that, you can deal with the IsVisible logic, and change the height, I define a bool field for testing the open/close effect, you can refer to the following code:

 void TapGestureRecognizer_Tapped(System.Object sender, System.EventArgs e)  
    {  
        s1.IsVisible = !s1.IsVisible;  
        s2.IsVisible = !s2.IsVisible;  
        s3.IsVisible = !s3.IsVisible;  
     
    MessagingCenter.Send<NewScrollowPage>(this, "hi");// trigger this method, send message to change height   
}  

Subscribe the message in ContentPage

public partial class NewScrollowPage : ContentPage  
{  
      public NewScrollowPage()  
      {  
            InitializeComponent();  
        bool isOpen = false;  
        Microsoft.Maui.Handlers.ScrollViewHandler.Mapper.AppendToMapping("MyCustom", (Handler, View) => {  
            MessagingCenter.Subscribe<NewScrollowPage>(this, "hi", (sender) => {  
#if IOS  
            UIScrollView scrollView = Handler.PlatformView;  
           var  height =  scrollView.ContentSize.Height;  
           isOpen = !isOpen;// you can set different height according to your needs, you should decrease/increase the height when you set IsVisible to false/true.  
          scrollView.ContentSize = new CoreGraphics.CGSize(scrollView.ContentSize.Width, height+ (isOpen?300:-300));  
#endif  
  
            });  
        });  
    }  

Best Regards,
Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Unfortunately there is a problem. this is really very weird.

Well on my page (form) there are switches and if these switches are in the stacklayout which are invisible in the beginning, I cannot tap (or I am tapping but it does not toggle)

To test, just add Switch in the stacklayout as follow

  <StackLayout HeightRequest="100" BackgroundColor="LightGrey"><Label Text="Label 2"></Label></StackLayout>  
                 <StackLayout HeightRequest="100" BackgroundColor="White"><Label Text="Label 3"></Label></StackLayout>  
                 <StackLayout HeightRequest="100" BackgroundColor="LightGrey"><Label Text="Label 4"></Label></StackLayout>  
                 <StackLayout HeightRequest="100" BackgroundColor="White"><Label Text="Label 5"></Label></StackLayout>  
                 <StackLayout HeightRequest="100" BackgroundColor="LightGrey"><Label Text="Label 6"></Label></StackLayout>  
                  <StackLayout HeightRequest="100" BackgroundColor="White"><Label Text="Label 7"></Label></StackLayout>  
                 <StackLayout HeightRequest="100" BackgroundColor="LightGrey"><Label Text="Label 8"></Label><Switch HorizontalOptions="EndAndExpand" /></StackLayout>  
                 <StackLayout x:Name="s3" IsVisible="False" HeightRequest="100" BackgroundColor="White"><Label Text="Label 9"></Label><Switch HorizontalOptions="EndAndExpand" /></StackLayout>  
                 <StackLayout x:Name="s1" IsVisible="False" HeightRequest="100" BackgroundColor="LightGrey"><Label Text="Label 10"></Label><Switch HorizontalOptions="EndAndExpand" /></StackLayout>  
                 <StackLayout x:Name="s2" IsVisible="False" HeightRequest="100" BackgroundColor="White"><Label Text="Label 11"></Label><Switch HorizontalOptions="EndAndExpand" /></StackLayout>  
                 <StackLayout HeightRequest="100" BackgroundColor="LightGrey"><Label Text="Label 12"></Label><Switch HorizontalOptions="EndAndExpand" /></StackLayout>  

The switches which are in s1,s2 and s3 will not be clickable. but others work.

How to solve this problem? Thank you again

Edit: It is not related with switch. I put also an Entry, I cannot also tap on it. It behaves like they are disabled.
And it is not related whether they were disabled or not. Because Label 10,11 and 12 did not work on my iphone 11 but label 9 is OK. so somehow if they are very bottom, then it does not work.
In my app, some times when I change a switch value by tapping, then the other switches are also clickable. Somehow we have to refresh the page or focus on the element

Answer 3

This code helped me to solve this problem. (UpdateContentSize and PlatformArrange)

public static MauiApp CreateMauiApp()  
	{  
		var builder = MauiApp.CreateBuilder();  
		builder  
			.UseMauiApp<App>()  
			.ConfigureFonts(fonts =>  
			{  
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");  
				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");  
			});  
#if IOS  
		ScrollViewHandler.Mapper.AppendToMapping("ContentSize", (handler, view) =>  
		{  
			handler.PlatformView.UpdateContentSize(handler.VirtualView.ContentSize);  
			handler.PlatformArrange(handler.PlatformView.Frame.ToRectangle());  
		});  
#endif  
		return builder.Build();  
	}  
  

https://github.com/dotnet/maui/issues/9209#issuecomment-1304614755