Welcome to CodingDroplets. In this
video, we'll explore the powerful features of CollectionView control in
Dotnet Maui. Whether you are new to dotnet Maui or looking to enhance your
skills, join us on this exciting journey as we unlock the full potential of the
collection view. Let's dive in together. The Collection view control in dotnet
MAUI, offers a powerful alternative to the traditional list view control providing
enhanced functionality and a more modern approach to display collection of data. It provides more
flexibility in terms of layout options allowing you to choose between lists, grids, carousels and
other visually appealing arrangements. Collection view offers advanced features such as item
selection, refreshing and the ability to add headers and footers. In summary, the Collection
view in dotnet MAUI, offers a more versatile and feature-rich solution for displaying collection
of data. We'll continue using the same project that we used in the previous videos to demonstrate the
Carousel View and List View controls. First we need to create a new content page named CollectionView
demo inside the pages folder. Then, let's navigate to the app.xaml.cs class and modify the main page
property to point to our newly created collection view demo page. This ensures that the page will be
loaded when launching the application. Within the collection view demo page, we can start by removing
the automatically generated vertical stack layout and the label. Instead, we'll directly place a
collection view in the content page. Similar to the Carousel View and List View controls, the
Collection View also has an ItemSource property, where we can provide the items to be displayed. In
this case, we'll use an array of strings as we did in the previous videos. Let's begin with the first
item labeled as item one. Following this, we can duplicate the item and update the values to create
item 2, item 3, item 4, item 5, item 6 and item 7. Now let's run the project and observe the collection
view in the emulator. You will notice that the items are listed similarly to a list view control.
However when attempting to interact with the items, you may notice that they are not selectable by
default. The selectable property of the collection view is disabled. Ee'll soon demonstrate how
to enable the selection in the collection view control. Furthermore, the CollectionView
control, also offers the flexibility to define the appearance of each item through the item template
property. Within the item template we can utilize a data template to specify the layout for each
item. To begin let's place a vertical stack layout within the data template. Inside the vertical stack
layout, we'll include a label to display the actual content of each item. We can bind the text property
of the label to the corresponding item in the ItemSource. Since we are using a string array as the
ItemSource, we can use a DOT symbol to reference the current item. Additionally, we can enhance the
visual presentation of the items by providing a background color for the vertical stack layout.
Once we run the application and observe it in the emulator, you will notice that the items are
now displayed with a specified background color. To further refine the layout we can assign some
padding for the vertical stack layout. Additionally we can horizontally center align the label
within the vertical stack layout. Upon running the application in the emulator, you will see that the
items are now separated by some space and the text is aligned to the horizontal center. To create a
better visual separation between the items we can also provide some margin for the vertical stack
layout. As a result in the emulator you will notice a distinct white space between the items providing
a clearer distinction. Another important property of the collection view is the ItemsLayout. Items
Layout allows us to define the layout style to be used for displaying the items. By default the
ItemsLayout value is set to VerticalList. This layout represents a single column list that grows
vertically as new items are added. In the emulator you might not notice any visible difference as we
have assigned vertical list which is the default layout. Let's explore the horizontal list items
layout next. This layout represents a single row list that grows horizontally as new items are
added. In the emulator, you will see that the items are arranged in a horizontal list and we can
scroll from left to right or vice versa. Moving on, we'll now examine the vertical grid items layout.
This layout represents a multi-column grid that grows vertically as new items are added. It is
important to specify the number of columns to be displayed. For this demonstration, let's set
the column count to 2. In the emulator you will observe that the list is arranged as a grid with
two columns. Let's modify the column count to 3 and see the changes. Now you can see that the list
are ranged as a grid with three columns providing a different visual representation. Next we'll
explore the horizontal grid items layout. This layout represents a multi-row grid that grows
horizontally as new items are added. Similar to the vertical grid, we need to specify the number
of rows to be displayed. For this demonstration, let's set the row count to 2. When observed in
the emulator, you will notice that the list is arranged as a grid with two rows. Let's adjust the
row count to 3 and see the result. Now you can see the list is arranged as a grid with three rows
providing a different visual layout. Additionally, let's explore how we can enable selection in
the collection view control. The collection view provides a property called selection mode which
offers three different options: Multiple, None and Single. By default the selection mode property is
set to "None". Meaning that no selection behavior is enabled. In this state clicking on any item will
not select it. Let's try single selection mode next. In the emulator, you'll notice that I am now
able to select any one of the items. Upon selection the selected item will be visually highlighted
indicating the active selection. Now let's explore the multiple selection mode. In the emulator, you
will observe that I can select multiple items by clicking on them. Additionally, clicking on a
selected item, will deselect it allowing for easy manipulation of the selected items. The ability to
enable selection in the collection view provides flexibility in interacting with the items based
on the specific user requirements. Moving forward, let's explore how we can assign the ItemSource
property of the collection view from csharp code. To begin, let's remove the previously provided
ItemSource from the xaml file as we'll now populate the collection view dynamically. Before
proceeding further, let's create a new model class named country inside the models folder. This
model class will represent the data structure for displaying countries in the collection view. Within
the country class we can define the properties such as country name to store the name of the
country, ISO code to store the iso code and flag URL to store the URLs of the images representing
the country flags. Now inside the collection view demo.cs class, let's create a new method named get
countries, that will fetch the country list. This method will return a list of country objects. For
this demonstration we will hard code a few country objects in the list as an example. You can expand
this logic to fetch the data from any data source. Once the list of country objects are created,
we need to assign a name to the collection view in the xaml file. So that we can access it from
the csharp code. Finally, within the collection view demo.cs class, we can assign the list of
country objects to the ItemSource property of the collection view. This will dynamically populate
the collection view with the country data fetched from the get countries method. By assigning the
ItemSource from the csharp code, we can gain the flexibility to fetch and display data dynamically
based on various conditions and data sources. Next let's proceed with making modifications to the
collection views item template design. We'll start by removing the previous vertical stack layout
and create a new design for the items. First let's place a frame with some margin to provide
visual distinction. Inside the frame, we'll add a grid. Within the gridm we need to assign the grid
dot column definitions. For this demonstration, let's set the grid to have two columns with
assigned widths. Now we can add an image to the item template. We'll bind the image source property
to the flag URL property of the country object. Additionally, we can assign the grid cell position
to place the image in the first column. In the second column of the grid, we'll add a vertical
stack layout. To enhance the visual appearance, we can assign some padding for the vertical stack
layout. Additionally we'll set the vertical options for the vertical stack layout to Center. Within
the vertical stack layout, we'll add a label to display the country name. We can bind the country
name property to the text property of the label. To improve the readability, we can increase the
font size and make it bold. Next we need another label to display the iso code. We can bind the iso
code property to the text property of this label, To differentiate it we can make the font style
italic. Now let's run the project and observe the collection view in the emulator. You will see that
that the countries are populated along with their respective flag images and ISO codes as per the
modified item template design. Let's try changing the items layout to VerticalGrid with the two
columns and see the changes in the emulator. You will notice that the items are now arranged in
two columns and the size of the image is adjusted accordingly. Next let's explore a property of the
collection view called EmptyView which allows us to show a custom message when the item source is
empty. To demonstrate this feature, let's provide the message "no data available" as the content of
the EmptyView property. Additionally, we'll assign an empty list as the ItemSource property. This
will trigger the display of the custom message when the collection view does not have any items
to display. Let's run the application and observe the changes in the emulator. You will see that it
now shows the custom message "no data available" when the collection view is empty. To further
improve the visual representation, let's change the items layout property to VerticalList. This layout
will ensure that the message is displayed in the center of the collection view. Moving forward,
let's explore how we can assign a header to the collection view. The collection view control
provides a property called header which allows us to define a custom header for the collection
view. To demonstrate this we'll place a vertical stack layout inside the header property. Within the
vertical stack layout, we can assign a background color and padding to enhance the visual appearance.
Inside the vertical stack layout, we'll add a label with the text "Countries". We can align the label
to horizontally center and format the font size and font attributes as desired. Now let's run the
project and observe the changes in the emulator. You will see that a header labeled countries is
displayed above items in the collection view. The ability to assign a header to the collection view
provides a way to add descriptive information or titles to the collection of items enhancing
the overall user experience. Additionally, the collection view control offers a property called
footer which allows us to display a custom footer for the collection view. To demonstrate this
feature, we'll place a vertical stack layout inside the footer property. Inside the vertical stack
layout, we'll add a label with the text "Coding Droplets". This can serve as a footer message or
any other relevant information. Now when we run the project and observe the changes in the emulator,
you will notice that as you scroll down the footer labelled "Coding Droplets" is displayed at the
bottom of the collection view. The footer provides a way to add additional content or information at
the end of the Collection View enriching the overall user experience and allowing for enhanced
customization. Now let's observe how the header and footer appear when using different items layout
options. First let's explore the vertical grid items layout. As you can see in the emulator, the
header is positioned at the top and the footer is placed where the items end. This layout provides
a vertical grid arrangement for the items while maintaining the position of the header and footer.
Next, let's try the horizontal list items layout. In the emulator, you'll notice that the
header is positioned on the left side and as you scroll to the right you will find
the footer at the right end. This layout offers a horizontal list arrangement while
preserving the placement of header and footer. Similarly, in the case of horizontal grid the
header is located on the left side and the footer is positioned on the right side maintaining
the consistency of the horizontal list layout. For the purposes of a current design it is
recommended to switch back to the vertical list items layout as it aligns well with the
design elements we have created providing a visually appealing and cohesive user experience.
Congratulations on completing this exploration of powerful collection view control in dotnet
MAUI. Make sure to check out the playlist link in the video description to access the full range
of tutorials and expand your knowledge further. Thank you for joining us on this exciting
journey through .NET MAUI. Stay inspired, keep learning and continue pushing the boundaries
of app development. Until next time, Happy Coding!
