Xamarin Forms - сложная реализация ListView или CollectionView - PullRequest
Новая
       21

Xamarin Forms - сложная реализация ListView или CollectionView

0 голосов
/ 03 апреля 2020

У меня есть приложение форм Xamarin и я хочу создать сложный экран, но я действительно не знаю, как это сделать. На изображении ниже показано, что я хочу создать.

enter image description here

Как этого добиться с помощью форм Xamarin. Должен ли я использовать списки для этого, представления коллекции или что-то еще? Как видите, каждая ячейка / блок отличается, даже первая, начинающаяся с 1234 14-rt-gk, сильно отличается.

Ответы [ 2 ]

0 голосов
/ 03 апреля 2020

Я не уверен, что это лучшее решение, но я делал это раньше, создав шаблон ячейки представления с привязкой данных и представлением списка.

В вашем ContentPage.cs: 

MyListView.ItemsSource = MyObjectCollection;

В вашем ContentPage.xaml свяжите свойства вашего объекта со свойствами viewCell: 

 <ListView>
 <ListView.ItemTemplate>
                    <DataTemplate>
                        <MyViewCell x:Name="MyViewCellName">
                                 ImageHeight="{Binding ImageHeight}"
                                 ImageWidth ="{Binding ImageWidth}"
                                 AuthorPicture="{Binding AuthorPicture}" 
                                 Author="{Binding Username}"

                    </DataTemplate>
   </ListView.ItemTemplate>
   </ListView>

Viewcell.cs объявите ваши привязываемые свойства, добавьте методы доступа и создайте ваши компоненты в конструкторе: 

    public class MyViewCell: ViewCell {
        Image MediaImage;
        public static readonly BindableProperty ImageHeightProperty = BindableProperty.Create("ImageHeight", typeof(int), typeof(MyViewCell), 300);
        public static readonly BindableProperty ImageWidthProperty = BindableProperty.Create("ImageWidth", typeof(int), typeof(MyViewCell), 300);

        public int ImageHeight
        {
            get => (int)GetValue(ImageHeightProperty);
            set => SetValue(ImageHeightProperty, value);
        }

       public int ImageWidth
       {
            get => (int)GetValue(ImageWidthProperty);
            set => SetValue(ImageWidthProperty, value);
       }

       public MyViewCell() {
           MediaImage = new Image
           {
               HeightRequest = ImageHeight,
               WidthRequest = ImageWidth

           };
           var frame = new Frame {
              Content = 'your components in a grid/stack'
           }
       View = frame;
      }
   }

Затем вы вносите необходимые изменения при изменении контекста привязки, например, изменение источников изображения, текстового содержимого и т. Д. c: 

 protected override void OnBindingContextChanged()
    {
        base.OnBindingContextChanged();
        MediaImage.HeightRequest = ImageHeight;
        MediaImage.WidthRequest = WidthRequest;
    };
0 голосов
/ 03 апреля 2020

Вы можете сделать это с помощью ListView. Вы можете сделать DataTemplates, а также DataTemplateSelector. DataTemplateSelector выполняет выбор DataTemplate во время выполнения на основе определенного значения. Это единственный способ достичь этого. Я поделюсь ссылкой для реализации DataTemplateSelector.

Ссылка 1: - https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector

Ссылка 2: - https://docs.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/templates-datatemplateselector/

...