Welcome to CodingDroplets, your ultimate guide
to master DotNet Applications. This video is part of our ongoing tutorial series on dotnet MAUI.
In this fifth video of .NET MAUI tutorial series, we'll focus on two essential controls, the
dotnet MAUI Carousel View and Indicator View. Get ready to unlock the true potential of data
presentation as we explore these powerful tools. 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 dive
right in and discover the exciting world of DotNet mobile data presentation. Initially
let us explore how to work with the Carousel view control in dotnet MAUI. MAUI Carousel view is a
powerful control that allows you to present data in a scrollable layout where users can swipe to
move through a collection of items along the way. We'll also cover some of the basic features of
Carousel view including how to use the indicator view to show which item is currently selected.
I have created a new DOTNET MAUI app project with the name Maui Collection Controls. First,
let's create a new folder named Pages inside the project. Within this folder, we'll create a
Content page named Carousel View Demo. By default, this page will have a label which we don't need.
In order to make this a main page, we'll assign it in the app.xaml.cs class. To format the title
of the new page, we'll make use of the title property. Now let's add a carousel view to the content page.
We'll place the carousel view inside a vertical stack layout. Next we'll make use of the Item
Source property of the carousel view to provide the items to be displayed. We'll need to provide
an array of objects to the item Source property here. We'll provide an array of strings. To do this,
we'll use the following syntax X colon array type equals x column type Space X string. Inside
this array, we can provide multiple strings. For this example, let's have five strings in total.
The first string will be item 1. Let's copy and paste the string for the remaining four items and
change the string value for each to be item 2, item 3, item 4, and item 5. Now let's run the project in
the emulator to see how it looks. In the emulator, you can see the items are placed horizontally.
We can scroll horizontally to view each item. Now let's explore how we can modify the appearance of
the Carousel View. To achieve this, we can use the CarouselViewItemTemplate property. By opening
a data template, we can define the structure of each item within the carousel view. Inside the data
template, I am adding a vertical stack layout. This layout will serve as the container of our item. To
enhance its visual appeal, I'll apply a background color and padding to the vertical stack layout.
Moving on, I am placing a label inside the vertical stack layout. This label will be responsible for
displaying the data for each item. To ensure a clean and consistent look, I'll format the label
accordingly. Now, let's assign the text property of the label. Here comes the interesting part, binding
data to an element in .NET MAUI. By enclosing the desired property within curly braces and using
the Binding keyword, we can establish a binding. Since we are working with a string array, we need
to bind the item itself. To achieve this, we can simply provide a DOT symbol. With the modifications
in place, let's run the project in the emulator and observe the changes. As you can see, the string
is now displayed within the label and we can easily scroll left or right to view other items
in the carousel view. Moving on, let's explore the indicator view control in dotnet MAUI. MAUI
indicator view control is designed to display indicators that represent the number of items
and the current position within a Carousel View. To begin, let's provide a name for the indicator
view control. We'll name it indicator View. Additionally, we can assign some margin to ensure
proper spacing. Next, we need to establish the connection between the Indicator View and the
Carousel View. Fortunately, Carousel view provides a property called indicator view, where we can
specify the name of our indicator view control. With everything set up, let's run the application
and witness the indicator view in action. As you can see, the indicator view is displayed and as
I scroll the carousel view, the indicator view accurately reflects the current position. To
further enhance the visual presentation, let's align the indicator view to horizontal
center, ensuring a balanced appearance. Now, the indicator view is perfectly displayed
at the center. In addition to position, we have the flexibility to customize the colors of the
indicator dots. First, let's modify the indicator color to Green. When we run the application in the
emulator, you'll notice the indicator dots are now displayed in a pleasant green color. Furthermore,
we can change the color of the currently selected indicator. By using the selected indicator color
property, we can set it to Red. You'll see that the selected indicator is now highlighted in
a vibrant red color providing a clear visual distinction. By leveraging these customization
options we can effortlessly enhance the appearance of indicator View and tailor it to our specific
design requirements. Next, let's see how we can assign the ItemSource property of the carousel
view from csharp code and explore how to use complex objects in the ItemSource property. Before
we proceed, let's remove the item source section we mentioned in the xaml file. To begin, I am creating
a new folder named models within our project and adding new class named collection item in this
folder. In the collection item class, I am including a string property named title and another string
property named description. We'll display these two values within the carousel view. Moving on, in
our content page class within the Constructor, I am creating a list of collection items. The
first item in the list has the title value as CodingDroplets and the description as Welcome
to CodingDroplets. I am copying and pasting these objects to have a total of five items making sure
to change the numbers to differentiate them. Let's also assign a name for the carousel view. So that
we can access the control from the csharp code. Then assigning it in the item Source property within the
code. However, when we run this code, we encounter an issue. A null reference exception. This
occurs because we are trying to assign the item Source property of the carousel view before
it is initialized. To resolve this issue, we need to move the code below the initialize component
method. By doing so, we ensure that the carousel view is properly initialized before attempting to
access it. Now let's try running the application. However, we encounter another issue. The carousel
view displays the name of the model object instead of the desired properties. To address this, we need
to provide the proper binding in the item template. Within the label text property, I am changing
the binding to title which corresponds to the first property in our model class, CollectionItem.
Additionally, we want to display the description. So I am adding another label and modifying its font
size and font attributes accordingly. We can then assign the Binding for the description which is
the second property of our model class. Now let's run the application and see how it appears. You
can observe the carousel view shows both the title and description. Specifically, it currently displays
CodingDroplets as the title and welcome to coding droplets as the description. We can scroll through
the carousel view to view the other items and all the items are being displayed correctly. With this
we have successfully covered the usage of Carousel View and indicator view controls. I hope you now
have a clear understanding of how to work with these controls and incorporate them into your
dotnet MAUI applications. Congratulations on completing this chapter of our dotnet MAUI tutorial
series. We hope you found the exploration of dotnet Carousel View and Indicator View and lightening
and inspiring. If you enjoyed this video, please give it a thumbs up and consider subscribing to
our channel for more informative tutorials on dotnet MAUI and other Cutting Edge Technologies.
Stay tuned for our next video where we'll dive into fascinating world of dotnet MAUI list
view control. Keep coding and Keep exploring!
