Xamarin Forms - ListView - Array - Header - xaml

Question

Im working with the ListView component and I would like to set categories which makes use of the Header within a ListView.
The content I have is a list of events that are happening today, tomorrow and the next day
How would I go about adding that to a list
My code so far is below
<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>
I just have no clue how to get two values within the array, and then split them into two groups using ListView headers.
This is just a POC so I don't have a DB with all the content, hence not using a API or connection to a DB.

Answer 1

About ListView Group, Jason have provided one article about detailed info. If you still have some problem, you can also take a look the following sample.
Firstly, create class to hold event info.
public class eventmodel
{
public string eventname { get; set; }
}
Then, a way to group the data, with a heading for each list.
public class eventlist:List<eventmodel>
{
public string heading { get; set; }
public List<eventmodel> events => this;
}
Finally, using Observablecollection to bind to listview. Represents a dynamic data collection that provides notifications when items get added, removed, or when the whole list is refreshed.
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 displaying data.
<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();
}
}
The screenshot: