Welcome back to CodingDroplets, your go
to channel for mastering .NET Applications. In this exciting tutorial, we are diving into the
Incredible World of data presentation with the highly versatile MAUI ListView control. Don't
forget to check the video description for the playlist link, where you can find all the previous
videos in this series. Let's Jump Right In. [Music] MAUI ListView control is a control
which provides a scrollable vertical list of selectable data items. List View manages
the overall appearance of the list while using a data template to define the appearance of
each item using a cell. Dotnet MAUI offers various cell types to display combinations
of text and images, and it also allows for custom cells to display any desired content. List View
includes additional features such as support for headers and footers, grouped data, pull to
refresh functionality and context menu items. In order to ensure a smooth and uninterrupted
learning process, we will continue working with the same project from our previous video. This
approach will enable us to make use of the progress we have already made and expand upon it
within this project. We have a model class named collection item which consists of two important
properties title and description. This model class will form the basis for our exploration
of data binding within the MAUI List View control. To demonstrate the list view control, I'll
create a new content page named "ListViewDemo". Here we will remove the auto-generated vertical
stack layout and label and instead we'll place the list view directly under the content page.
I'll also update the main page in app.xaml.cs to ensure that the application displays this new
content page when launched. Similar to our previous examples, listview provides an item Source
property where we can specify the items to be displayed in the list. In this case I'll create
an array of strings containing 5 different items. Namely item 1, item 2, item 3, item 4 and item
5. Now let's run the application and observe the list view in the emulator. As expected the
items are displayed within the list and we can click on each item to select it. Let's explore
the list views scrolling functionality further. To demonstrate this, I'll copy and paste "Item 5"
multiple times creating a more extensive list. For the last item, I'll change the string to
"Item 100". Running the application again, we can now see that the list view contains all the
items and we can scroll up and down to view the entire list. The list view itself provides the
scrolling functionality eliminating the need of an additional scroll view. Now let's remove the extra
items we added, as they are no longer necessary. The list view also offers an item template property
which allows us to specify the template for each item in the collection. To achieve this we can
use a data template inside the item template. In this case I'll demonstrate using a view cell. View
Cell is a custom cell that defines its appearance using a view. Inside the view cell, I'll place a
stack layout and assign a background color to it. Within the stack layout I'll add a label to
display the string. The text property of the label will be bound to the data. Following the
same approach we used previously. Additionally, I'll format the label by providing a
different text color and font attributes. Running the application once again. We can observe
that the items are now displayed in the list view with the customized design. Let's add some margin
to the label, ensuring it is properly displayed in the emulator. Furthermore, we can align the label
to the center. Upon running the application, we can see the label is correctly aligned to the center.
Next, let's explore how we can assign the Item Source property of the dotnet MAUI list view
from the csharp code and also how to bind complex objects. To begin, in the constructor of the content
page class, I'll declare a list of collection item, which is the model class we created earlier. To
populate this list, I'll simply copy and paste the items we created for the Carousel View. Now let's
provide a name for the list view control. Moving on to the code, we can assign the Item Source property
to our list of collection item. Additionally, we need to modify the Binding property of the label
to title. So that it displays the corresponding title from the model class. Furthermore, we'll add
another label for the description. To enhance the label's appearance, we can apply formatting and
make adjustments to the margin and padding values. The Binding property of the second label should
be set to description to display the appropriate description from the model class. Now let's run
the application in the emulator and observe the list views appearance. We can see that the labels
are properly showing the bound data. However, there seem to be some spacing issues that need to be
addressed. To resolve this temporarily, we can remove the padding of the stack layout which will
improve the spacing between items. As you can see in the emulator, the labels now appear
clearer and properly spaced. But, I need some padding for the stack layout. We'll ensure that
they have a height that accommodates their content. We can achieve this by setting the "HasUnevenRows"
property of the list view to true. This property indicates whether the list can have rows with
varying heights and by default it is set to false. In the emulator, we can observe that the list view
cells now have sufficient space and adjust their height accordingly. Let's try increasing the
padding to 20 and observe the effect in the emulator. As you can see there is now more space
between the list view cells. Additionally, I would like to introduce the SeparatorColor property
which defines the color of the bar that separates items in the list. In this case, I'll set it to red.
When running the application in the emulator, you can see that the separator is now displayed in red.
Continuing our exploration or dotnet MAUI list view. Let's now take a look at different types
of cells that we can use within the List View. To begin, I'll remove the view cell from our
current design and introduce a TextCell. A TextCell is used to display primary
and secondary text on separate lines. In our case, I'll bind the title property to the
text property of the text cell and the description property to the detail property of the text cell.
Running the application in the emulator, you can observe that both the title and description are
displayed on separate lines within the List View. Next, I would like to demonstrate, how we can
disable the selection in the List View. The list view control provides a property named selection
mode which can be set to none if we don't want the list view to be selectable. In the emulator, you
can see that when I click on an item it is not being selected due to the disabled selection
mode. Moving on, let's explore the SwitchCell. A SwitchCell is a cell that consists of a label
and an on-off switch. I'll bind the title property to text property of the switch cell. Running the
application in the emulator, you can observe that the title is displayed on the left side of each
cell accompanied by a switch on the right. By clicking on the switch we can toggle it on
or off. Finally, let's examine the EntryCell. An EntryCell is a cell that includes a
label and a single line text entry field. I'll bind the title property to the label property
of the entry cell. Running the application in the emulator, you can see that each list item now
contains an entry field where you can enter text. As we conclude this tutorial on the MAUI
list view control, we hope you now have a solid understanding of how to use this powerful
tool to create scrollable lists in your Dotnet MAUI applications. By leveraging data binding
and the flexibility of cell templates, you can seamlessly display and interact with your data.
Don't forget to like this video, subscribe to our channel and check out the playlist
for complete Dotnet MAUI tutorial series. Thank You for joining us on this
learning journey and Happy Coding!
