This video shows you how to get started using the DevExpress .NET MAUI Collection View control
to display data commonly seen in list-style applications.
Before you begin, we recommend that you review our video on how to use our NuGet Gallery
to incorporate our controls into your new .NET MAUI application or review the get-started section in the documentation.
This tutorial also assumes that you have the latest version of Visual Studio with all required workloads installed.
If you’re not familiar with the .NET MAUI framework,
please review Microsoft documentation on how to start using this platform.
Ok. Let's get started.
We're going to be using our sample application available on GitHub.
In the Visual Studio start screen, Click on Clone a repository.
Specify the repository location - you can find a link to this repository in the description below.
And click clone.
When the solution is downloaded, run it on your favorite device or emulator.
Our .NET MAUI controls support both mobile platforms - Android and iOS.
We will be running this example on an Android emulator.
This application consists of a single screen that displays a list of contacts.
Each item consists of a contact name, phone number, and image. Items are sorted and grouped alphabetically.
Now let’s take a look at how this application is implemented and then we will reproduce this list view from scratch.
You will see that it’s actually quite easy.
Take a look at the ViewModel file. It contains a data object represented by the Contact class.
This class exposes the Name, Phone, and Photo properties. Photos are stored in the application resources.
The ViewModel class exposes the Data property that stores a collection of sample data objects.
Now let’s open the MainPage markup file.
At the top of the markup file, you can see the DXCV XAML namespace that contains our Collection View control.
Then you can see that the BindingContext property is set to a ViewModel instance.
The page itself contains an instance of DXCollectionView. It is bound to the Data property of the ViewModel.
Then follow a data template that specifies how to display items in the list.
Yet below the markup specify how to apply grouping and sorting to the list, and specify how to render group headers.
Now let’s reproduce this layout.
Remove the default content and create a new Collection View.
It will be bound to the same collection.
Since the Contact objects contain multiple fields (Name, Phone, and Photo)
we need to specify which field we want to display and how.
For this purpose, we use the DisplayMember and DisplayFormat properties of the Collection View.
Let’s run our application again.
Now it displays a simple list of strings as we specified in our markup.
But this representation does not display all the fields that our data object has.
If we want to display not only the name but also the phone number and photo, we should specify a template for items.
Remove the DisplayField and DisplayFormat properties from the markup, and set the ItemsTemplate property.
We want each item to show the contact photo on the left, and the contact name and phone on the right one under another.
A very simple layout for demonstration purposes.
We use a grid to implement this layout.
The first column for the photo will be 50 pixels, and all the rest space is for the name and phone number in the second column.
We use the Image class to display the photo. The source property is bound to the Photo data field.
We will also round the image edges.
To display the contact name and phone. We use two labels in a vertical stack layout.
The labels’ Text property are also bound to the corresponding data fields.
We also specify paddings, margins, and colors to make our layout clear.
That’s much better!
If we now want to display our list in alphabetical order, we add a SortDescription object in the corresponding collection.
Then we specify the field name and sort order.
Let’s run the app.
Contacts are now displayed in alphabetical order. We can change the order to descending.
The list is updated accordingly.
We can also change the field name and sort by the phone number.
The next feature that we will be using in this tutorial is grouping.
Our Collection View allows you to group items by data value or displayed value, by date (the exact date, month, quarter, or year)
or group values alphabetically.
In this sample, let's group values alphabetically and run the application again.
You can see, that Contacts are grouped and the Collection View now displays group headers.
But the appearance of group headers is not consistent with the appearance of items.
That is because we specified a custom appearance for items, which does not match the default group header appearance.
The Collection View’s GroupHeaderTemplate property allows you to specify a custom data template used to render the group headers.
In this example, we use a stack layout that contains a label and separator.
Let’s run the application for the last time.
You can see the contacts are now sorted and grouped alphabetically.
Contact icons are displayed. Names and phone numbers are displayed according to the templates.
You can also explore the Collection View in our demo application.
A link to the GitHub repository is available in the description below.
Let’s clone this repository
and run the application.
The First Look demo shows almost the same list of contacts but grouped by date.
A user can click a list item to see details on a call.
The Swipe Actions demo shows item-related commands available when a user swipes a row to the left or right.
The Horizontal Scrolling demo shows how to implement a gallery using our Collection View.
The next two demos show how to update the list with the pull-to-refresh gesture
and how to implement infinite scrolling.
And that's it for this video. If you like this video please give us a thumbs up.
If you have questions or comments please leave them below.
And don't forget to subscribe and ring the bell so you get notified whenever we release new content.
Thanks for watching and thank you for choosing DevExpress.