Xamarin.Forms ScrollView not showing all content when elements IsVisible property changes

Question

Xamarin.Forms ScrollView not showing all content when elements IsVisible property changes

Jalza 781

I'm having a problem with ScrollView when I change the IsVisible property of a view that is inside. This example is very easy to reproduce. I have a Switch and a Label inside a ScrollView. At start you can scroll down and see the complete text. If you toogle the Switch the text is hided. If you toogle again the text is visible again. But if you scroll down, you can see that the text below is not rendered. With this code, you can reproduce the problem in Android (I didn't test it in iOS):

MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ScrollAndHideText.MainPage">
    <ScrollView>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Grid Grid.Row="0" Padding="5">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Label Grid.Column="0" Margin="20,10" Text="Show text"/>
                <Switch Grid.Column="0" Margin="20,10" IsToggled="True" Toggled="SwitchToggled"/>
            </Grid>
            <Grid x:Name="hidedGrid" Grid.Row="1" Padding="5">
                <Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
                       in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
                       sunt in culpa qui officia deserunt mollit anim id est laborum."
                       FontSize="Medium"/>
            </Grid>
        </Grid>
    </ScrollView>
</ContentPage>

MainPage.xaml.cs:

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

    private void SwitchToggled(object sender, ToggledEventArgs e)
    {
        this.hidedGrid.IsVisible = e.Value;
    }
}

Why is this happening?

Edit:

I'm using Xamarin.Forms V5.0.0.2196, testing on Samsung Galaxy A8 with Android 9. Here is what it happening:
bo9ELXv

Anonymous

2021-11-11T06:11:40.39+00:00

I used Xamarin.Forms V5.0.0.2012, And I test with Google Pixel 2(Android 11), it worked normally in my side. Please update your nuget package to the latest, if this issue is still existed, please share a mini demo here.
Jalza 781 Reputation points

2021-11-11T07:59:51.167+00:00

Hello @Anonymous I'm using Xamarin.Forms V5.0.0.2196. I don't know why I can't upload a gif (2.24 MB) to show what happens.
Anonymous

2021-11-11T08:03:54.18+00:00

You can post your gif to Onedrive, then share the link to here.
Jalza 781 Reputation points

2021-11-11T08:19:17.7+00:00

First message edited with sample gif.
Anonymous

2021-11-11T08:32:37.28+00:00

I notice you used Samsung Galaxy A8 with Android 9 Please try to use Google native emulator to make a test.
Jalza 781 Reputation points

2021-11-11T14:28:05.26+00:00

I have problems with emulators. Even if I have checked
x86
in
Supported architectures
I get this error running in a emulator:

ADB0020: Android ABI mismatch. You are deploying an app supporting 'armeabi-v7a;arm64-v8a' ABIs to an incompatible device of ABI 'x86'. You should either create an emulator matching one of your app's ABIs or add 'x86' to the list of ABIs your app builds for.

Is there any way to repaint or rerender page content?
Anonymous

2021-11-12T08:26:02.607+00:00

Please check the all the selection(x86_64;arm64-v8a;x86) in supported architectures, And you can right click the xxx.Android project. select the unload project, then it will open the xxxx.Android.csproj file, please check the value from <AndroidSupportedAbis>x86;x86_64;arm64-v8a</AndroidSupportedAbis> tag
Jalza 781 Reputation points

2021-11-15T16:00:52.26+00:00
I have all architectures selected:

armeabi-v7a

x86

x86_64

arm64-v8a

And this is the xml content of xxx.Android.csproj content (I'm working in debug):

<PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' "> ... <AndroidSupportedAbis> </AndroidSupportedAbis> </PropertyGroup> <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU' "> ... <AndroidSupportedAbis>armeabi-v7a;arm64-v8a</AndroidSupportedAbis> ... </PropertyGroup>

I don't know why debug
AndroidSupportedAbis
is empty...

If I change the file with this value:

<AndroidSupportedAbis>armeabi-v7a;x86;x86_64;arm64-v8a</AndroidSupportedAbis>

And run the app in the emulator, I get this error in the splash screen:
Android.Views.InflateException: 'Binary XML file line #18: Binary XML file line #18: Error inflating class <unknown>'
Anonymous

2021-11-16T06:37:21.717+00:00

Can you share a mini demo that include splash screen code? I can test it and check if the android emulator issue or the code issue.
Jalza 781 Reputation points

2021-11-16T08:04:32.297+00:00

I tried with the demo project (the code in the main post) and it run in the emulator, but the rendering problem remains. The main project has a binding library, maybe it fails in the emulator because of that. If you want to check the demo project: ScrollAndHideText. But it has the same code of the first post.

Accepted answer

0 additional answers

Your answer

Anonymous

2021-11-11T06:11:40.39+00:00

I used Xamarin.Forms V5.0.0.2012, And I test with Google Pixel 2(Android 11), it worked normally in my side. Please update your nuget package to the latest, if this issue is still existed, please share a mini demo here.
Jalza 781 Reputation points

2021-11-11T07:59:51.167+00:00

Hello @Anonymous I'm using Xamarin.Forms V5.0.0.2196. I don't know why I can't upload a gif (2.24 MB) to show what happens.
Anonymous

2021-11-11T08:03:54.18+00:00

You can post your gif to Onedrive, then share the link to here.
Jalza 781 Reputation points

2021-11-11T08:19:17.7+00:00

First message edited with sample gif.
Anonymous

2021-11-11T08:32:37.28+00:00

I notice you used Samsung Galaxy A8 with Android 9 Please try to use Google native emulator to make a test.
Jalza 781 Reputation points

2021-11-11T14:28:05.26+00:00

I have problems with emulators. Even if I have checked
x86
in
Supported architectures
I get this error running in a emulator:

ADB0020: Android ABI mismatch. You are deploying an app supporting 'armeabi-v7a;arm64-v8a' ABIs to an incompatible device of ABI 'x86'. You should either create an emulator matching one of your app's ABIs or add 'x86' to the list of ABIs your app builds for.

Is there any way to repaint or rerender page content?
Anonymous

2021-11-12T08:26:02.607+00:00

Please check the all the selection(x86_64;arm64-v8a;x86) in supported architectures, And you can right click the xxx.Android project. select the unload project, then it will open the xxxx.Android.csproj file, please check the value from <AndroidSupportedAbis>x86;x86_64;arm64-v8a</AndroidSupportedAbis> tag
Jalza 781 Reputation points

2021-11-15T16:00:52.26+00:00

I have all architectures selected:

armeabi-v7a

x86

x86_64

arm64-v8a

And this is the xml content of xxx.Android.csproj content (I'm working in debug):

<PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' "> ... <AndroidSupportedAbis> </AndroidSupportedAbis> </PropertyGroup> <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU' "> ... <AndroidSupportedAbis>armeabi-v7a;arm64-v8a</AndroidSupportedAbis> ... </PropertyGroup>

I don't know why debug
AndroidSupportedAbis
is empty...

If I change the file with this value:

<AndroidSupportedAbis>armeabi-v7a;x86;x86_64;arm64-v8a</AndroidSupportedAbis>

And run the app in the emulator, I get this error in the splash screen:
Android.Views.InflateException: 'Binary XML file line #18: Binary XML file line #18: Error inflating class <unknown>'
Anonymous

2021-11-16T06:37:21.717+00:00

Can you share a mini demo that include splash screen code? I can test it and check if the android emulator issue or the code issue.
Jalza 781 Reputation points

2021-11-16T08:04:32.297+00:00

I tried with the demo project (the code in the main post) and it run in the emulator, but the rendering problem remains. The main project has a binding library, maybe it fails in the emulator because of that. If you want to check the demo project: ScrollAndHideText. But it has the same code of the first post.

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

I tried with your demo. Please use Stacklayout to wrap the ScrollView like following layout. this issue is disappear in my side.

   <StackLayout>  
       <ScrollView>  
           <Grid>  
               <Grid.RowDefinitions>  
                   <RowDefinition Height="Auto"/>  
                   <RowDefinition Height="Auto"/>  
               </Grid.RowDefinitions>  
               <Grid Grid.Row="0" Padding="5">  
                   <Grid.ColumnDefinitions>  
                       <ColumnDefinition Width="*"/>  
                       <ColumnDefinition Width="Auto"/>  
                   </Grid.ColumnDefinitions>  
                   <Label Grid.Column="0" Margin="20,10" Text="Show text"/>  
                   <Switch Grid.Column="0" Margin="20,10" IsToggled="True" Toggled="SwitchToggled"/>  
               </Grid>  
               <Grid x:Name="hidedGrid" Grid.Row="1" Padding="5" PropertyChanged="hidedGrid_PropertyChanged">  
                   <Label Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.   
                          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor   
                          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,   
                          sunt in culpa qui officia deserunt mollit anim id est laborum.   
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.   
                          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor   
                          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,   
                          sunt in culpa qui officia deserunt mollit anim id est laborum.   
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.   
                          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor   
                          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,   
                          sunt in culpa qui officia deserunt mollit anim id est laborum.   
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.   
                          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor   
                          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,   
                          sunt in culpa qui officia deserunt mollit anim id est laborum.   
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.   
                          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor   
                          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,   
                          sunt in culpa qui officia deserunt mollit anim id est laborum."  
                          FontSize="Medium"/>  
               </Grid>  
           </Grid>  
       </ScrollView>  
       </StackLayout>

Best Regards,

Leon Lu

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.

Jalza 781 Reputation points

2021-11-17T13:07:01.017+00:00

Thank you!! This works!! Also works with a
Grid
. Is there any technical reason for needing to wrap the
ScrollView
in another layout?

Share via

Xamarin.Forms ScrollView not showing all content when elements IsVisible property changes

0 additional answers

Your answer