Xamarin Scrollview only showing partial data up to screen end, and then blank when scrolling

Question

Hello,

I have a frame with a stacklayout inside of a scrollview, when I open the page, labels and data show up, but only up to the bottom screen edge, everything after that gets cut (is simply blank). Tapping on a entry field makes the rest of the data and labels show up, but obviously that is undesirable behavior. I have tried changing the VerticalOptions and Grid definitions to multiple combinations, but nothing works.
Any ideas or suggestions as to how to solve this would be greatly appreciated.

Screenshot:

XAML:

Answer

This might be related to this open Xamarin bug which was introduced in Xamarin 5: https://github.com/xamarin/Xamarin.Forms/issues/13597

The workaround mentioned that the ScrollView should be encapsulated in a ContenView. That seemed to work for me.

Hope it helps and hope more that this bug is fixed!

Answer

@Leon Lu (Shanghai Wicresoft Co,.Ltd.)
Thank you for your response and trying it out. That's a bit frustrating that it works for you, since that makes the problem somewhat more difficult to pin-point, since I don't think the code-behind has something to do with it. Here is my viewmodel, I'll try to make a demo and upload it later.

ViewModel:

public class AccountViewModel : INotifyPropertyChanged {

    public AccountViewModel() {  

    }  

    public event PropertyChangedEventHandler PropertyChanged;  
    protected virtual void OnPropertyChanged(string propertyName) {  
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));  
    }  

    #region Values  
    private String userMail = "";  
    public String UserMail {  
        get {  
            return this.userMail;  
        }  
        set {  
            if (value != null && !userMail.Equals(value)) {  
                this.userMail = value;  
                OnPropertyChanged("UserMail");  
            }  
        }  
    }  

    private String mobile = "";  
    public String Mobile {  
        get {  
            return this.mobile;  
        }  
        set {  
            if (value != null && !mobile.Equals(value)) {  
                this.mobile = value;  
                OnPropertyChanged("Mobile");  
            }  
        }  
    }  

    private String address = "";  
    public String Address  
    {  
        get  
        {  
            return this.address;  
        }  
        set  
        {  
            if (value != null && !address.Equals(value))  
            {  
                this.address = value;  
                OnPropertyChanged("Address");  
            }  
        }  
    }  

    private String country = "";  
    public String Country  
    {  
        get  
        {  
            return this.country;  
        }  
        set  
        {  
            if (value != null && !country.Equals(value))  
            {  
                this.country = value;  
                OnPropertyChanged("Country");  
            }  
        }  
    }  

    private String city = "";  
    public String City  
    {  
        get  
        {  
            return this.city;  
        }  
        set  
        {  
            if (value != null && !city.Equals(value))  
            {  
                this.city = value;  
                OnPropertyChanged("City");  
            }  
        }  
    }  

    private String zippostalcode = "";  
    public String Zippostalcode  
    {  
        get  
        {  
            return this.zippostalcode;  
        }  
        set  
        {  
            if (value != null && !zippostalcode.Equals(value))  
            {  
                this.zippostalcode = value;  
                OnPropertyChanged("Zippostalcode");  
            }  
        }  
    }  

    private String firstname = "";  
    public String Firstname  
    {  
        get  
        {  
            return this.firstname;  
        }  
        set  
        {  
            if (value != null && !firstname.Equals(value))  
            {  
                this.firstname = value;  
                OnPropertyChanged("Firstname");  
            }  
        }  
    }  

    private String lastname = "";  
    public String Lastname  
    {  
        get  
        {  
            return this.lastname;  
        }  
        set  
        {  
            if (value != null && !lastname.Equals(value))  
            {  
                this.lastname = value;  
                OnPropertyChanged("Lastname");  
            }  
        }  
    }  
    #endregion  

    #region Enables  
    private bool userMailEnabled = false;  
    public bool UserMailEnabled  
    {  
        get  
        {  
            return this.userMailEnabled;  
        }  
        set  
        {  
            if (!userMailEnabled == value)  
            {  
                this.userMailEnabled = value;  
                OnPropertyChanged("UserMailEnabled");  
            }  
        }  
    }  

    private bool mobileEnabled = false;  
    public bool MobileEnabled  
    {  
        get  
        {  
            return this.mobileEnabled;  
        }  
        set  
        {  
            if (!mobileEnabled == value)  
            {  
                this.mobileEnabled = value;  
                OnPropertyChanged("MobileEnabled");  
            }  
        }  
    }  

    private bool addressEnabled = false;  
    public bool AddressEnabled  
    {  
        get  
        {  
            return this.addressEnabled;  
        }  
        set  
        {  
            if (!addressEnabled == value)  
            {  
                this.addressEnabled = value;  
                OnPropertyChanged("AddressEnabled");  
            }  
        }  
    }  

    private bool countryEnabled = false;  
    public bool CountryEnabled  
    {  
        get  
        {  
            return this.countryEnabled;  
        }  
        set  
        {  
            if (!countryEnabled == value)  
            {  
                this.countryEnabled = value;  
                OnPropertyChanged("CountryEnabled");  
            }  
        }  
    }  

    private bool cityEnabled = false;  
    public bool CityEnabled  
    {  
        get  
        {  
            return this.cityEnabled;  
        }  
        set  
        {  
            if (!cityEnabled == value)  
            {  
                this.cityEnabled = value;  
                OnPropertyChanged("CityEnabled");  
            }  
        }  
    }  

    private bool zippostalcodeEnabled = false;  
    public bool ZippostalcodeEnabled  
    {  
        get  
        {  
            return this.zippostalcodeEnabled;  
        }  
        set  
        {  
            if (!zippostalcodeEnabled == value)  
            {  
                this.zippostalcodeEnabled = value;  
                OnPropertyChanged("ZippostalcodeEnabled");  
            }  
        }  
    }  

    private bool firstnameEnabled = false;  
    public bool FirstnameEnabled  
    {  
        get  
        {  
            return this.firstnameEnabled;  
        }  
        set  
        {  
            if (!firstnameEnabled == value)  
            {  
                this.firstnameEnabled = value;  
                OnPropertyChanged("FirstnameEnabled");  
            }  
        }  
    }  

    private bool lastnameEnabled = false;  
    public bool LastnameEnabled  
    {  
        get  
        {  
            return this.lastnameEnabled;  
        }  
        set  
        {  
            if (!lastnameEnabled == value)  
            {  
                this.lastnameEnabled = value;  
                OnPropertyChanged("LastnameEnabled");  
            }  
        }  
    }  

    private bool loadingFinished = false;  
    public bool LoadingFinished {  
        get {  
            return this.loadingFinished;  
        }  
        set {  
            if (value != this.loadingFinished) {  
                this.loadingFinished = value;  
                OnPropertyChanged("LoadingFinished");  
            }  
        }

And my Content Page:

    public partial class AccountPage : ContentPage  
    {  
        private Logger logger = App.Logger;  
        private AccountViewModel viewModel;  
        private bool buttonEventInProgress = false;  
  
  
        public AccountPage()  
        {  
            InitializeComponent();  
  
            if (Device.RuntimePlatform == Device.iOS)  
            {  
                this.Padding = new Thickness(0, 30, 0, 0);  
            }  
  
            this.viewModel = new AccountPageViewModel();  
            this.BindingContext = this.viewModel;  
            this.viewModel.UserMail = App.AppBrain.UserProfile.Mail;  
            this.viewModel.MobileNumber = UserProfile.MobileNumber;  
              
            var timer = new System.Threading.Timer(  
                e => this.viewModel.refreshActiveTickets(),  
                null,  
                TimeSpan.Zero,  
                TimeSpan.FromSeconds(2));  
  
        }

Answer

Hi... I have the exact issue that Dan is facing.

This was originally a Xamarin.Forms 4.4 (or 4.5 I don't remember) project and Visual Studio 2019 that was not the latest version.
The exact screen setup was working fine.
I tried updating to AndroidX instead of the older Support Library and starting having issues with dependencies and r8 was removing some needed classes and a whole lot of stuff. Eventually I ended up updating to Xamarin.Forms 5 and the latest Visual Studio and all the latest NuGet packages.

This seemed to solve all the issues I had but this particular issue reported here came which wasn't there before.

I'm using Xamarin.Forms 5.0.0.2012
VS Studio 2019 16.9.2
Xamarin 16.9.000.273
Xamarin.Android SDK 11.2.2.1

My setup is a little different. Just a StackLayout inside of a ScrollView with the StackLayout dynamically populated with other controls:

I'd appreciate any help at all. Thanks!

Xamarin Scrollview only showing partial data up to screen end, and then blank when scrolling

3 answers