Xamarin Forms - 复杂的 ListView 或 CollectionView 实现

Question

我有一个 Xamarin 表单应用程序，想创建一个复杂的屏幕，但我真的不知道该怎么做。下图显示了我想要创建的内容。

如何使用 Xamarin 表单实现此目的。我应该为此使用列表视图、集合视图还是其他东西？正如你所看到的，每个cell/block都是不同的，即使是第一个以1234 14-rt-gk开头的也大不相同。

Answer 1

您可以在 ListView 的帮助下完成此操作。您可以制作 DataTemplates 和 DataTemplateSelector。 DataTemplateSelector 所做的是根据特定值在运行时选择 DataTemplate。这是实现这一目标的唯一途径。我将分享一个 link 用于 DataTemplateSelector 实现。

Link 1:- https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector

Link 2:- https://docs.microsoft.com/en-us/samples/xamarin/xamarin-forms-samples/templates-datatemplateselector/

Answer 2

我不确定这是否是最佳解决方案，但我之前已经通过创建带有数据绑定和列表视图的视图单元格模板来完成此操作。

在你的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;
      }
   }

然后在绑定上下文发生变化时进行必要的更改，例如更改图像源、文本内容等：

 protected override void OnBindingContextChanged()
    {
        base.OnBindingContextChanged();
        MediaImage.HeightRequest = ImageHeight;
        MediaImage.WidthRequest = WidthRequest;
    };

Xamarin Forms - 复杂的 ListView 或 CollectionView 实现

Xamarin Forms - Complex ListView or CollectionView implementation

listview

user-interface

xamarin.forms

binding

collectionview