如何解决 Xamarin 表单 ListView ViewCell 重叠问题？答案

【问题标题】：How to solve Xamarin Form ListView ViewCell Overlapping Issue?如何解决 Xamarin 表单 ListView ViewCell 重叠问题？
【发布时间】：2020-11-22 08:17:32
【问题描述】：

我有一个带有自定义 ViewCell 的 ListView。绑定的 ItemsSource 是 Biller Class 的列表。只有当我在屏幕上显示超过 10 个项目并且我正在滚动屏幕时，才会发生 ViewCell 重叠。

Biller 类定义

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

自定义 ViewCell 定义

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 单元格重叠图像

【问题讨论】：

更改 ListView 的缓存策略

标签： c# listview xamarin.forms data-binding frontend

【解决方案1】：

这个问题应该是Cell的缓存没有回收，可以设置CachingStrategy="RecycleElement"为LsitView来解决。

RecycleElement 缓存策略指定 ListView 将尝试通过回收列表单元格来最小化其内存占用和执行速度。此模式并不总是提供性能改进，应执行测试以确定任何改进。但是，它是首选，应在以下情况下使用：

每个单元格都有少量到中等数量的绑定。
每个单元格的 BindingContext 定义了所有单元格数据。
每个单元格都大体相似，单元格模板不变。

在XAML中，设置CachingStrategy属性，如下面的XAML所示：

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

【讨论】：