Xamarin form-UWP - black cell showing before data is visible on fast scrolling of list

Question

When i scroll the list fast, each cell appears as black before data is loaded.If i scroll slowly data black cells won't appear. This behavior is happening only for Xamarin UWP project. Please find the below image for reference.

Answer 1

Fixed the issue by writing custom ViewCell and by making use of native datatemplate. Now there is no black cells on fast scrolling. I am posting my answer so that someone may find it useful.

For eg: If you have a list of names to be displayed follow:

First add custom viewcell as follows

        public class CustomViewCell : ViewCell
       {
        public static readonly BindableProperty NameProperty =
            BindableProperty.Create("Name", typeof(string), typeof(CustomViewCell), "");

        public string Name
        {
            get { return (string)GetValue(NameProperty); }
            set { SetValue(NameProperty, value); }
        }

       }

Now add the ListView in XAML as follows:

            <ListView 
            ItemsSource="{Binding Products}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <custom:CustomViewCell  Name="{Binding Name}"/>
                </DataTemplate>
            </ListView.ItemTemplate>
            </ListView>

Then you have to write the DateTemplate style in App.xaml of UWP project as follows:

        <ResourceDictionary>
        <DataTemplate x:Key="CustomTemplate">
            <Grid Padding="10">
                <TextBlock  Foreground="#333333" FontSize="14" VerticalAlignment="Center" Text="{Binding Name"/>
            </Grid>
        </DataTemplate>
        </ResourceDictionary>

Finally write a CustomRenderer to replace the native viewcell to our our ListView.

    public class CustomViewCellRenderer : ViewCellRenderer
    {
    public override Windows.UI.Xaml.DataTemplate GetTemplate(Cell cell)
    {
        return App.Current.Resources["CustomTemplate"] as Windows.UI.Xaml.DataTemplate;
    }
    }

Now list works perfectly without any black cell rendering issue.

Answer 2

This is not a problem with your code. When you scroll too fast the system doesn't have time to render the cells as quickly as you are scrolling, so the black cell appears.