Xamarin 表单 - ListView - 数组 - 标题

Question

我正在使用 ListView 组件，我想设置在 ListView 中使用 Header 的类别。

我拥有的内容是今天、明天和后天发生的事件的列表

我将如何将其添加到列表中

到目前为止我的代码如下

        <ListView>
            <ListView.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Event 1 - Today</x:String>
                    <x:String>Event 2 - Today</x:String>
                    <x:String>Event 3 - Today</x:String>
                    <x:String>Event 4 - Today</x:String>
                    <x:String>Event 1 - Tomorrow</x:String>
                    <x:String>Event 2 - Tomorrow</x:String>
                    <x:String>Event 3 - Tomorrow</x:String>
                </x:Array>
            </ListView.ItemsSource>
            <ListView.Header>
                <Label Text="Today"/>
            </ListView.Header>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Label Text="{Binding}" Style="{StaticResource listViewRacecourse}" />
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

我只是不知道如何在数组中获取两个值，然后使用 ListView 标头将它们分成两组。

这只是一个 POC，所以我没有包含所有内容的数据库，因此不使用 API 或连接到数据库。

Answer 1

关于 ListView Group，Jason 提供了一篇关于详细信息的文章。如果还是有问题，也可以看看下面的示例。

首先，创建类来保存事件信息。

public class eventmodel
{
    public string eventname { get; set; }
}

然后，一种对数据进行分组的方法，每个列表都有一个标题。

 public class eventlist:List<eventmodel>
{
    public string heading { get; set; }
    public List<eventmodel> events => this;
}

最后，使用Observablecollection 绑定到listview。表示一个动态数据集合，在添加、删除项目或刷新整个列表时提供通知。

public class eventgroup
{
    public ObservableCollection<eventlist> eventgroups { get; set; }
    public eventgroup()
    {
        eventgroups = new ObservableCollection<eventlist>();

        var list1 = new eventlist()
        {
            new eventmodel() { eventname= "Event 1 - Today" },
            new eventmodel() { eventname= "Event 2 - Today" },
            new eventmodel() { eventname= "Event 3 - Today" },
            new eventmodel() { eventname= "Event 4 - Today" }
                                                         
        };
        list1.heading = "Today";
        var list2 = new eventlist()
        {
            new eventmodel() { eventname= "Event 1 - Tomorrow" },
            new eventmodel() { eventname= "Event 2 - Tomorrow" },
            new eventmodel() { eventname= "Event 3 - Tomorrow" },
            new eventmodel() { eventname= "Event 4 - Tomorrow" } 
        };
        list2.heading = "Tomorrow";

        eventgroups.Add(list1);
        eventgroups.Add(list2);

       
    }
}

ListView 显示数据。

<ListView IsGroupingEnabled="true" ItemsSource="{Binding eventgroups}">
            <ListView.GroupHeaderTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Label BackgroundColor="Red" Text="{Binding heading}" />
                    </ViewCell>
                </DataTemplate>
            </ListView.GroupHeaderTemplate>

            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Label Text="{Binding eventname}" />
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

 public partial class Page6 : ContentPage
{
    public Page6()
    {
        InitializeComponent();
        this.BindingContext = new eventgroup();
    }
}

截图：