CODEWITHSUNDEEP
c#listviewxamarin.formsdata-bindingfrontend
kluo
kluo

Reputation: 131

How to solve Xamarin Form ListView ViewCell Overlapping Issue?

I have a ListView with Customized ViewCell. The binding ItemsSource is a list of Biller Class. The ViewCell overlapping only happened when I'm displaying more than 10 items on the screen and I'm scrolling my screen.

Biller Class Definition

public class Biller
{
    public string BillerId { get; set; }
    public string BillerName { get; set; }
    public string BillerShortName { get; set; }
    public string BillerLogoUrl { get; set; }
}

Custom ViewCell Definition

public class CustomBillCell : ViewCell
    {
        public CustomBillCell()
        {
            // instantiate each of our views
            var billerShortNameLabel = new Label();
            var billerIdLabel = new Label();
            var billerNameLabel = new Label();
            var verticalLayout = new StackLayout();
            var horizontalLayout = new StackLayout();
            var billFrame = new Frame();
            var viewBillButton = new Button
            {
                Text = "View Bill",
                HorizontalOptions = LayoutOptions.EndAndExpand
            };

            // set bindings
            billerShortNameLabel.SetBinding(Label.TextProperty, new Binding("BillerShortName"));
            billerIdLabel.SetBinding(Label.TextProperty, new Binding("BillerId"));
            billerNameLabel.SetBinding(Label.TextProperty, new Binding("BillerName"));
            viewBillButton.SetBinding(ClassIdProperty, new Binding("BillerName"));
            viewBillButton.Clicked += ViewBillButtonClicked;

            // Set properties for desired design
            billerShortNameLabel.FontSize = 20;
            billerShortNameLabel.FontFamily = "d-din-bold";
            verticalLayout.Children.Add(billerShortNameLabel);
            verticalLayout.Children.Add(billerNameLabel);
            verticalLayout.Children.Add(billerIdLabel);
            verticalLayout.Spacing = 2;
            horizontalLayout.Orientation = StackOrientation.Horizontal;
            horizontalLayout.Children.Add(verticalLayout);
            horizontalLayout.Children.Add(viewBillButton);

            // Set properties for Frame
            billFrame.HasShadow = false;
            billFrame.CornerRadius = 10;
            billFrame.BorderColor = Color.FromHex("#0C0555");
            billFrame.Content = horizontalLayout;
            billFrame.Margin = 14;

            View = billFrame;
        }

        [Obsolete]
        private async void ViewBillButtonClicked(object sender, EventArgs e)
        {
            var billSignUpPage = new BillSignUpPage();
            Button btn = sender as Button;
            billSignUpPage.BindingContext = btn;
            await Application.Current.MainPage.Navigation.PushModalAsync(billSignUpPage);
        }
    }

ListView Cell Overlapping Image enter image description here

Upvotes: 1

Views: 517

Answers (1)

Junior Jiang
Junior Jiang

Reputation: 12723

This problem should be the cache of Cell not recycling, you can set CachingStrategy="RecycleElement" for LsitView to solve that.

The RecycleElement caching strategy specifies that the ListView will attempt to minimize its memory footprint and execution speed by recycling list cells. This mode doesn't always offer a performance improvement, and testing should be performed to determine any improvements. However, it's the preferred choice, and should be used in the following circumstances:

  • Each cell has a small to moderate number of bindings.
  • Each cell's BindingContext defines all of the cell data.
  • Each cell is largely similar, with the cell template unchanging.

In XAML, set the CachingStrategy attribute as shown in the XAML below:

<ListView CachingStrategy="RecycleElement">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
              ...
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Upvotes: 3

Related Questions