Listview doesn't render viewcell until scroll back to the view

Question

Listview doesn't render listview item when navigated to. If I start scrolling then all items get visible. I had checked INotityPropertyChanged for models as well as to list (Itemsource to listview). XAML code for listview `

<ListView x:Name="HospitalResultListView" CachingStrategy="RecycleElement"                 
                          SeparatorVisibility="None"
                          ItemsSource="{Binding HospitalList}" VerticalOptions="FillAndExpand"
                          RowHeight="150" ItemTapped="HospitalResultListView_ItemTapped"  >

                <ListView.ItemTemplate>
                    <DataTemplate>
                        <local:HospitalListViewVC Address="{Binding Address}" Name="{Binding Name}" Type="{Binding Type}" Rate="{Binding Rate}" Distance="{Binding Distance}" HospitalImageURL="{Binding HospitalImageURL}" />
                    </DataTemplate>
                </ListView.ItemTemplate>

            </ListView>

`

and viewcell code `

class HospitalListViewVC : ViewCell
    {
        Label addressLabel, distanceLabel, typeLabel, rateLabel, nameLabel;
        Image hospitalImage;
        CachedImage cachedImage = null;

        #region Bindable properties
        public static readonly BindableProperty HospitalImageURLProperty =
            BindableProperty.Create(nameof(HospitalModel.HospitalImageURL), typeof(string), typeof(HospitalListViewVC), null, BindingMode.OneWay);
        public string HospitalImageURL
        {
            get { return (string)GetValue(HospitalImageURLProperty); }
            set { SetValue(HospitalImageURLProperty, value); }
        }

        public static readonly BindableProperty AddressProperty =
            BindableProperty.Create(nameof(HospitalModel.Address), typeof(string), typeof(HospitalListViewVC), null, BindingMode.OneWay);
        public string Address
        {
            get { return (string)GetValue(AddressProperty); }
            set { SetValue(AddressProperty, value); }
        }

        public static readonly BindableProperty DistanceProperty =
            BindableProperty.Create(nameof(HospitalModel.Distance), typeof(string), typeof(HospitalListViewVC), null, BindingMode.OneWay);
        public string Distance
        {
            get { return (string)GetValue(DistanceProperty); }
            set { SetValue(DistanceProperty, value); }
        }

        public static readonly BindableProperty TypeProperty =
            BindableProperty.Create(nameof(HospitalModel.Type), typeof(string), typeof(HospitalListViewVC), null, BindingMode.OneWay);
        public string Type
        {
            get { return (string)GetValue(TypeProperty); }
            set { SetValue(TypeProperty, value); }
        }

        public static readonly BindableProperty RateProperty =
            BindableProperty.Create(nameof(HospitalModel.Rate), typeof(string), typeof(HospitalListViewVC), null, BindingMode.OneWay);
        public string Rate
        {
            get { return (string)GetValue(RateProperty); }
            set { SetValue(RateProperty, value); }
        }

        public static readonly BindableProperty NameProperty =
            BindableProperty.Create(nameof(HospitalModel.Name), typeof(string), typeof(HospitalListViewVC), null, BindingMode.OneWay);
        public string Name
        {
            get { return (string)GetValue(NameProperty); }
            set { SetValue(NameProperty, value); }
        }
        #endregion

        #region constructor
        public HospitalListViewVC()
        {
            var grid = new Grid
            {
                Margin = new Thickness(10),

                BackgroundColor = Color.FromHex("#00FFFF"),
                IsClippedToBounds = true,
                ColumnDefinitions = {
                    new ColumnDefinition { Width = new GridLength(4, GridUnitType.Star) },
                    new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }
                }
            };

            cachedImage = new CachedImage { Aspect = Aspect.AspectFill};
            nameLabel = new Label();

            addressLabel = new Label();
            distanceLabel = new Label();
            typeLabel = new Label();
            rateLabel = new Label();
            var informationStack = new StackLayout { Padding = new Thickness(5) };
            informationStack.Children.Add(addressLabel);
            informationStack.Children.Add(distanceLabel);
            informationStack.Children.Add(typeLabel);
            informationStack.Children.Add(rateLabel);

            grid.Children.Add(cachedImage, 0, 0);
            grid.Children.Add(nameLabel, 0, 0);
            grid.Children.Add(informationStack, 1, 0);

            View = grid;
        }

        #endregion

        #region Bindings

        protected override void OnBindingContextChanged()
        {
            cachedImage.Source = null;
            base.OnBindingContextChanged();

            if (BindingContext != null)
            {
                cachedImage.Source = HospitalImageURL;
                addressLabel.Text = Address;
                distanceLabel.Text = Distance;
                typeLabel.Text = Type;
                rateLabel.Text = Rate;
                nameLabel.Text = Name;
            }
        }
        #endregion
    }`

any pointer will be really helpful.

Attaching gif of android emulator to understand problem better GIF of android emulator

Answer 1

i had the same problem today. The problem is that iOS renders the ListView in a different way than Android.

Please create a custom ListView which extends the normal ListView and insert the following Code.

public class ListView : Xamarin.Forms.ListView
{
    public ListView() : this(Device.RuntimePlatform == Device.Android ? ListViewCachingStrategy.RecycleElement : ListViewCachingStrategy.RetainElement)
    {
    }

    public ListView(ListViewCachingStrategy cachingStrategy) : base(cachingStrategy)
    {
    }

}

And then use your custom ListView in the Xaml Page.

The difference is here:

public ListView() : this(Device.RuntimePlatform == Device.Android ? ListViewCachingStrategy.RecycleElement : ListViewCachingStrategy.RetainElement)

I hope this is the solution for you!

Kind regards, Nick

Answer 2

https://github.com/xamarin/Xamarin.Forms/issues/6810

found this post while searching for a solution, it looks like they fixed this in Xamarin.Forms 4.0.0/4.1.0 release