0

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.

6
  • use Grouping - learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/… Commented Mar 15, 2021 at 16:36
  • How would that work with an Array? I cant see an example? Commented Mar 15, 2021 at 16:40
  • you need to build some mock data in code, not in the XAML Commented Mar 15, 2021 at 16:44
  • Damn, I was hoping it would be able to get away without that. Commented Mar 15, 2021 at 16:45
  • it would take 5 minutes to do this Commented Mar 15, 2021 at 16:46

1 Answer 1

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:

enter image description here

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.