Как решить проблему перекрытия Xamarin Form ListView ViewCell? - PullRequest
Новая
       142

Как решить проблему перекрытия Xamarin Form ListView ViewCell?

0 голосов
/ 01 августа 2020

У меня есть ListView с настраиваемой ViewCell. Привязка ItemsSource - это список класса Biller. Перекрытие ViewCell происходило только тогда, когда я отображаю на экране более 10 элементов и прокручиваю свой экран.

Определение класса 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 введите описание изображения здесь

1 Ответ

1 голос
/ 03 августа 2020

Эта проблема должна быть связана с кешем Cell без повторного использования, вы можете установить CachingStrategy="RecycleElement" для LsitView, чтобы решить эту проблему.

The RecycleElement Стратегия кэширования указывает, что ListView будет пытаться минимизировать объем памяти и скорость выполнения путем повторного использования ячеек списка. Этот режим не всегда обеспечивает улучшение производительности, и необходимо провести тестирование, чтобы определить какие-либо улучшения. Однако это предпочтительный выбор, и его следует использовать в следующих случаях:

  • Каждая ячейка имеет небольшое или умеренное количество привязок.
  • BindingContext каждой ячейки определяет всю ячейку data.
  • Каждая ячейка во многом похожа, но шаблон ячейки не меняется.

В XAML установите атрибут CachingStrategy, как показано в XAML ниже: 

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