如何创建一个简单的 Xamarin.Forms 项目视图答案

【问题标题】：How to create a simple Xamarin.Forms Items View如何创建一个简单的 Xamarin.Forms 项目视图
【发布时间】：2021-04-22 07:50:33
【问题描述】：

如果您是 Xamarin.Forms 开发人员，您很可能遇到了内置 ListView 的问题。使用 DataTemplate 使用简单的 repeater 绑定 ItemsSource 不是更容易吗？我就是这么想的。

在 SL / WPF 中有一个 ItemsControl 就是这样工作的 - 没有设计，没有选择，只是重复项目。

现在 XLabs 中有一个，但如果您不想要所有这些包，这里有一个更简单的解决方案，基于 QiMata 的 this article。

工具：

Visual Studio 2015 @ Win 10（或在 OS X 上使用 Xamarin Studio）
Xamarin 4 稳定版（VS 插件）
Xamarin.Forms 2.1.0.6529

【问题讨论】：

这是个问题吗？

标签： c# xaml xamarin.forms repeater

【解决方案1】：

在 Xamarin.Forms PCL 项目中创建一个新类。我命名了我的 HliItemsView（因为“视图”是 XF 中“控件”的术语，而 Hli 是我的品牌）。

粘贴此代码并根据需要进行修改。

我的观点基于ScrollView，因为它是一个列表。这样项目就会像ListView一样自动滚动。

using System;
using System.Collections;

using Xamarin.Forms;

namespace HLI.Forms.Controls
{
    public class HliItemsView : ScrollView
    {
        public static readonly BindableProperty ItemTemplateProperty = BindableProperty.Create(
            "ItemTemplate",
            typeof(DataTemplate),
            typeof(HliItemsView),
            null,
            propertyChanged: (bindable, value, newValue) => Populate(bindable));

        public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create(
            "ItemsSource",
            typeof(IEnumerable),
            typeof(HliItemsView),
            null,
            BindingMode.OneWay,
            propertyChanged: (bindable, value, newValue) => Populate(bindable));

        public IEnumerable ItemsSource
        {
            get
            {
                return (IEnumerable)this.GetValue(ItemsSourceProperty);
            }

            set
            {
                this.SetValue(ItemsSourceProperty, value);
            }
        }

        public DataTemplate ItemTemplate
        {
            get
            {
                return (DataTemplate)this.GetValue(ItemTemplateProperty);
            }

            set
            {
                this.SetValue(ItemTemplateProperty, value);
            }
        }

        private static void Populate(BindableObject bindable)
        {
            var repeater = (HliItemsView)bindable;

            // Clean
            repeater.Content = null;

            // Only populate once both properties are recieved
            if (repeater.ItemsSource == null || repeater.ItemTemplate == null)
            {
                return;
            }

            // Create a stack to populate with items
            var list = new StackLayout();

            foreach (var viewModel in repeater.ItemsSource)
            {
                var content = repeater.ItemTemplate.CreateContent();
                if (!(content is View) && !(content is ViewCell))
                {
                    throw new Exception($"Invalid visual object {nameof(content)}");
                }

                var view = content is View ? content as View : ((ViewCell)content).View;
                view.BindingContext = viewModel;

                list.Children.Add(view);
            }

            // Set stack as conent to this ScrollView
            repeater.Content = list;
        }
    }
}

【讨论】：

在 2021 年，您应该改用 CollectionView。早在 2016 年，这是一个不错的选择，除非您有许多当前滚动到看不见的项目。由于它不虚拟化项目，它会在开始时创建所有项目，这需要大量时间和内存。

【解决方案2】：

WPF 中的 Xaml 和 Xamarin 之间存在一些差异，您可以看到 here。

但是有一个 ItemsControl 示例实现（源代码），功能齐全，来自 Xamarin GitHub 存储库，您可以找到 here。

示例用法如下：

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
...
             xmlns:local="clr-namespace:YourNameSpaceHere" 
...

然后你像这样实例化 ItemsControls：

        <local:ItemsControl x:Name="CardsPicked" ItemsSource="{Binding Path=Deck.CardsPicked, Mode=TwoWay}" Grid.Row="3" Orientation="Horizontal" HorizontalOptions="Center" >
            <local:ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding CardType, Converter={StaticResource CardTypeImageConverter}}" MinimumHeightRequest="140" Aspect="AspectFit" Margin="4"></Image>
                </DataTemplate>
            </local:ItemsControl.ItemTemplate>
        </local:ItemsControl>

【讨论】：