如何创建继承CollectionView的自定义控件？

Question

我正在尝试实现一个自定义控件，该控件绑定到元素列表并将它们显示为可滚动列表。它将最终显示为页面底部表格并允许扩展+滚动。为此，我决定将控件基于 CollectionView，理想情况下我希望控件不绑定到 XAML 文件。

问题是我的控件没有显示任何内容，不确定我在这里缺少什么，并且代码直接取自 Microsoft CollectionView 文档。

public class CustomCollectionView : CollectionView
{
    public static readonly BindableProperty MonkeysProperty = BindableProperty.Create(nameof(Monkeys), typeof(ObservableCollection<MonkeyViewModel>), typeof(CustomCollectionView));
    public ObservableCollection<MonkeyViewModel> Monkeys
    {
        get => (ObservableCollection<MonkeyViewModel>)GetValue(MonkeysProperty);
        set => SetValue(MonkeysProperty, value);
    }

    public CustomCollectionView()
    {
        Monkeys = new ObservableCollection<MonkeyViewModel>()
        {
            new MonkeyViewModel("Monkey1"), new MonkeyViewModel("Monkey2")
        };

        var linearItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
        {
            ItemSpacing = 8,
        };

        ItemsLayout = linearItemsLayout;

        this.SetBinding(ItemsSourceProperty, "Monkeys");

        ItemTemplate = new DataTemplate(() =>
        {
            Grid grid = new Grid { Padding = 10, BackgroundColor = new Color(255, 0, 0) };
            grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
            grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });


            Label nameLabel = new Label { FontAttributes = FontAttributes.Bold };
            nameLabel.SetBinding(Label.TextProperty, "Name");    

            grid.Add(nameLabel, 1, 0);
            return grid;
        });
    }

public partial class MonkeyViewModel : ObservableObject
{
    [ObservableProperty]
    private string _name;

    public MonkeyViewModel(string name)
    {
        Name = name;
    }
}

以及我使用它的方式：

 <VerticalStackLayout VerticalOptions="Center">
    <Label Text="A"/>
    <local:CustomCollectionView/>
    <Label Text="B"/>
</VerticalStackLayout>

感谢您对此的任何意见

Answer 1

您需要在自定义控件的构造函数中添加以下行：

CustomCollectionView

才能使其正常工作：

BindingContext = this;

CustomCollectionView.cs：

public class CustomCollectionView : CollectionView
{
    public static readonly BindableProperty MonkeysProperty = BindableProperty.Create(nameof(Monkeys), typeof(ObservableCollection<MonkeyViewModel>), typeof(CustomCollectionView));
    public ObservableCollection<MonkeyViewModel> Monkeys
    {
        get => (ObservableCollection<MonkeyViewModel>)GetValue(MonkeysProperty);
        set => SetValue(MonkeysProperty, value);
    }

    public CustomCollectionView()
    {
        Monkeys = new ObservableCollection<MonkeyViewModel>()
        {
            new MonkeyViewModel("Monkey1"), new MonkeyViewModel("Monkey2")
        };

        var linearItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Vertical)
        {
            ItemSpacing = 8,
        };

        ItemsLayout = linearItemsLayout;

        this.SetBinding(ItemsSourceProperty, "Monkeys");

        ItemTemplate = new DataTemplate(() =>
        {
            Grid grid = new Grid { Padding = 10, BackgroundColor = new Color(255, 0, 0) };
            grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
            grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
            grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });


            Label nameLabel = new Label { FontAttributes = FontAttributes.Bold };
            nameLabel.SetBinding(Label.TextProperty, "Name");    

            grid.Add(nameLabel, 1, 0);
            return grid;
        });
        //key is here
        BindingContext = this;
    }
}

输出：