Xamarin XAML 分组 CollectionView 示例不起作用答案

【问题标题】：Xamarin XAML Grouped CollectionView Example not workingXamarin XAML 分组 CollectionView 示例不起作用
【发布时间】：2020-06-07 05:17:07
【问题描述】：

我已经研究了一个复杂的 collectionview 几个小时，在没有成功使其正确模拟之后，我从 Microsoft 的网站转移到一个非常简单的示例，以确保它正常运行，但我仍然遇到问题。我没有收到任何错误。当我模拟时，我只看到空白。我的代码中有什么明显的遗漏吗？

来源：https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/grouping

Animal.cs 文件：

using System;
using System.Collections.Generic;
using System.Text;

namespace Tester
{
    public class Animal
    {
        public string Name { get; set; }
        public string Location { get; set; }
        public string Details { get; set; }
        public string ImageUrl { get; set; }
    }
}

AnimalGroup.cs 文件

using System;
using System.Collections.Generic;
using System.Text;

namespace Tester
{
    public class AnimalGroup : List<Animal>
    {
        public string Name { get; private set; }

        public AnimalGroup(string name, List<Animal> animals) : base(animals)
        {
            Name = name;
        }
    }
}

GroupedAnimals.cs 文件

using System;
using System.Collections.Generic;
using System.Text;

namespace Tester
{
    public class GroupedAnimals
    {
        public List<AnimalGroup> Animals { get; private set; } = new List<AnimalGroup>();


        public void CreateAnimalsCollection()
        {
            Animals.Add(new AnimalGroup("Bears", new List<Animal>
        {
    new Animal
    {
        Name = "American Black Bear",
        Location = "North America",
        Details = "Details about the bear go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/0/08/01_Schwarzbär.jpg"
    },
    new Animal
    {
        Name = "Asian Black Bear",
        Location = "Asia",
        Details = "Details about the bear go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/180px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG"
    },
    // ...
}));

            Animals.Add(new AnimalGroup("Monkeys", new List<Animal>
{
    new Animal
    {
        Name = "Baboon",
        Location = "Africa & Asia",
        Details = "Details about the monkey go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
    },
    new Animal
    {
        Name = "Capuchin Monkey",
        Location = "Central & South America",
        Details = "Details about the monkey go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg"
    },
    new Animal
    {
        Name = "Blue Monkey",
        Location = "Central and East Africa",
        Details = "Details about the monkey go here.",
        ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/BlueMonkey.jpg/220px-BlueMonkey.jpg"
    },
    // ...
}));
        }

    }
}

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="Tester.MainPage">

    <CollectionView ItemsSource="{Binding Animals}"
                IsGrouped="true">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="10">
                    <Image Grid.RowSpan="2"
                       Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="60"
                       WidthRequest="60" />
                    <Label Grid.Column="1"
                       Text="{Binding Name}"
                       FontAttributes="Bold" />
                    <Label Grid.Row="1"
                       Grid.Column="1"
                       Text="{Binding Location}"
                       FontAttributes="Italic"
                       VerticalOptions="End" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

【问题讨论】：

看起来不错，但您没有显示您是否创建/填充了“动物”属性。您确定您的视图模型已正确设置为页面的绑定上下文吗？
嗨，你的意思是this sample porect 也不起作用？检查ViewModel 以及如何将其绑定到 CollectionView 。您也可以在这里分享您新创建的示例项目链接，我会检查的。
@BenReierson 感谢您指出这一点！抱歉，我忘记发布我的 GroupedAnimals.cs 文件。我编辑了我的帖子以包含它。您现在是否在此文件中看到任何需要修复的明显内容？
@JuniorJiang-MSFT 我有您链接的下载，并已在模拟器上成功运行其中的分组集合视图。但是，当我尝试将此下载中的概念应用到我自己的项目时，它不起作用。所以我找到了一个更简单的版本（我在我的帖子中提到的），以确保我理解基本概念并可以运行它。但是，当我将简单示例中的代码按原样放在 Microsoft 网站上时，它似乎不起作用。
@boodaloo1 我看到你有一个名为 CreateAnimalsCollection 的方法，看起来不错，但我看不出你在哪里/何时调用它。 Animals 属性是一个列表，因此如果您在页面呈现后向其中添加项目，它们将不会显示，因为不会触发任何事件来告诉绑定更新。确保您正在调用 CreateAnimalsCollection，并考虑将 Animals 更改为 ObservableCollection。

标签： c# xaml xamarin xamarin.forms

【解决方案1】：

我没有在 MainPage 中调用 CreateAnimalsCollection() 函数。一旦我在 MainPage.cs 中添加了这个，项目就运行了。

【讨论】：

您可以接受您的回答，这将帮助更多有类似问题的人。