Welcome to this DotNet MAUI controls tutorial
video, part of a series by CodingDroplets. In this tutorial, you'll learn how to create
beautiful and functional apps using DotNet MAUI controls. These controls are an essential
part of any app development project and mastering them can help you create apps that provide
an exceptional user experience. Throughout this series we'll cover a range of different
controls from simple buttons and labels to more advanced controls like controls to display a
collection of data. In this video we'll start with an introduction to DotNet MAUI
controls including how to use them, what they can do and how they can benefit your
app development projects. So keep watching to find out how dotnet MAUI controls
can revolutionize the way you create apps. I have created a new dotnet MAUI app project. Now
the first thing we need to do is, create a folder to store our content pages. We'll call this folder
Pages. Next we'll create a new content page inside Pages folder I am naming it as common controls.
In this content page, we'll be adding some of the most commonly used controls in dotnet MAUI. By
placing these controls in our pagem we'll be able to see how they work and how we can customize
them to fit our app's design. Now let's add a scroll view to this page. Scroll view will allow
us to scroll down the page if the content is too large to fit on the screen. Let's take a look at
our first control, the frame. This control allows us to wrap a view or layout with a customizable
border. We can configure this border with options such as color, shadow and more. To see the frame in
action, let's run our app in Android emulator. But before we do that, we need to assign our content
page as the main page in App.xaml.cs. Now you can see a white area at the top of the page which
represents the frame. To make the frame more visible, let's add some margin to it. As you can see
now the frame is now clearly visible. We can also customize the background color of the frame. Let's
assign it the same color as the content page. Now you can see that both the page and the frame have
the same color. Next we'll place a vertical stack layout inside the frame and add a label inside the
layout. As you may know, a label is used to display single line and multi-line text and we have used
labels in our previous videos. For this demo, I am going to provide the label text as CodingDroplets.
Now if you take a look at the emulator, you can see the label being displayed inside the frame. Let's
format the label by providing the font size color and centering it horizontally. As you can see
in the emulator, the label is displayed with the provided format. Next I'll copy a new image
to MAUI resources and display the logo above the label. To achieve this, we can make use of the
image control and provide the image file name in the Source property. Additionally I am assigning
the height request property to set the height of the image. If you look at the emulator, now you
can see the CodingDroplets logo displayed above the label. Let's also assign some margin for the
label to create some space between the label and the logo image. As you can see in the emulator, we
now have a good amount of space between the label and the logo image. Next, I'll demonstrate how
to use the border control in MAUI to provide a border for a label. To start I am placing a frame
in the page and inside it, I am placing a label with the text 'Welcome' and assign the horizontal
options property as center. By placing the label inside the border control, we can add a border
to it. Upon running the app on the emulator, you can see the label is now displayed inside a box.
Let's add some padding to the border control and increase the border thickness by assigning
the stroke thickness property of the Border. Additionally, I am assigning a different color for
the Border by providing the Stroke property of the border and setting the background color of
the Border using the background color property. For this example, I will assign the same color
as the page. Now upon running the app, on the emulator you can see the label inside a thick red
border which makes it stand out on the page. We'll now explore the webview control which enables the
display of remote web pages, local HTML files and HTML strings within the app. By assigning the
URL of the page to be displayed in the source property of the webview, we can easily load the
page in our app. To demonstrate this, I have set the source property to the URL of CodingDroplets
GitHub page. Let's take a look at how it appears in the emulator. As you can see the page
content is now displayed within the app allowing us to view it seamlessly. Before we move on to
the next set of controls. Let's create a new content page that allows us to navigate between
different types of control pages. We'll call this page, main page and set its title and background
color. Next we'll create a design with flex layout as we have discussed in the previous videos
and a button that will navigate to the common controls page. We'll provide a click event to
handle the navigation. To ensure that our new content page is displayed when the app launches,
we need to change the main page in App.xaml.cs. We'll set the main page as the root page of
the navigation page. So that we can see the navigation bar and we'll also assign a custom bar
background color for the navigation bar. Let's run the application in the Android emulator to see
how it works. You can now see a button labeled common controls and clicking on it will navigate
to our common controls page. In this section of the video, we'll take a look at the controls that
are commonly used to trigger actions in .NET MAUI application. To do this, we'll create a new
content page called action controls. To begin we'll place a vertical stack layout inside a scroll view.
This will allow us to scroll through the controls on the page if they don't fit within the visible
area. Next we'll add a frame to the page. Inside this Frame we'll place a button. We'll name the
button, demo button and assign a background color. The text of the button will be click me. When the
button is clicked we want to display a message box pop-up. To do this, we'll call the display alert
method in the buttons click event. The display alert method takes three parameters. The title
of the message box pop-up, the message content and the cancel text which is a text displayed
on the button to close the message box. Before we run the application, we'll need to create a
new button on the main page to navigate to the action controls page. We'll call this button,
action controls. Now let's run the application in an emulator. You should see the action controls
button on the main page. When you click this button, it will navigate to the action controls page. On
the action controls page, you will see the demo button. When you click this button you should see a
message box pop-up with the title CodingDroplets, the message content and an OK button to close the
message box. Next we are exploring a different type of button control called image button. First, we'll
place this new button control inside a frame. Let's name the button as demo image button. To display an
image in the button, we need to provide the image source for that. We'll copy a new image to the MAUI
resources and provide the same image name in the image buttons Source property. Next, we'll create a
click event for this button and assign its height using the height request property. In the click
even, we'll show a different message using the same display alert method. Now let's run the application
in the emulator. You can see the download button which is using our image. If you click the button
the application will show a pop-up message. Image buttons are a great way to add visual interest to
your application and using them is very easy with MAUI. Now let's see the search bar control in DotNet MAUI.
The search bar control allows users to search for Content within the app. First we'll be placing
the control inside a frame and naming it demo search bar. We'll also set up the search button
clicked event, which will be triggered when the user searches for a Content. Inside the event
will display the searched content in a pop-up message using the demoSearchBar.Text property to
retrieve the searched content. Let's test it in the emulator. You can see the search bar and when you
enter text and click the search button, a pop-up message will appear displaying the entered text. The
search bar control is a useful tool for allowing users to search for Content within your app and
can help improve the user experience by making it easier to find the desired information. Now let's
have a look at the swipe view control which is a container control that provides context menu
items through swipe gestures. First we'll add a swipe view to our page and place a vertical stack
layout inside it which contains a label with the text 'this is a swipe view'. In the emulator we can
see the swipe view control. But it won't react to swiping, because we need to configure it further. To
enable swiping, we must specify which direction we want to swipe in. For example we can enable swiping
from left to right by adding SwipeView.LeftItems and providing the swipe items. Inside SwipeItems
we can create multiple swipe item objects. Let's create two swipe item objects, Facebook swipe item
and Instagram swipe item. For the Facebook swipe item we'll assign a background color and an icon
using icon image source property. I'm adding some social media icons to MAUI resource folder. Let's
use these images for the icon. We'll also provide an invoked event which will be triggered when a
user clicks on that item. Inside the invoked event, will show a pop-up message. For the Instagram swipe
item we'll do the same by providing an invoked event and showing a message pop-up. When we run
the application in the emulator and swipe from left to right, we can see the two items we created.
Clicking on either of them will display a message box with the text we provided. Note that we can't
swipe from right to left because we haven't added any items on the right. We'll explore how to add
swipe items now. To do this we'll be using the SwipeView.RightItems property and creating two
new swipe item objects inside swipe items. Let's add Twitter swipe item and Linkedin swipe item.
Then we can add the invoked event for both the swipe items to display a message when they are
clicked. Now let's see the swipe view in action in the emulator. You'll notice that we have four
swipe items displayed. Two on the left and two on the right. Clicking on any of the swipe items will
trigger the invoked event and display a message. In this section, let's take a look at the controls
that are used for user inputs. First we'll create a new content page named input controls and make
some arrangements in the content page. Next we'll add an entry control to the page. The entry control
has a property named placeholder which we'll set as 'enter text here'. Now let's try running the
application on an Android emulator. But before that we need to create a new button in the main
page to navigate to the newly created content page. Now we can see the new button named input controls
on the main page which will navigate us to the new content page. Here we have our entry control
and we can see the placeholder as well. When we type in the entry control, the placeholder will be
hidden. We can even provide a custom color for the placeholder by assigning the placeholder color
property of the entry control. Let's set it to red. Now in the emulator we can see the placeholder
displayed in a red color. Now let's move on to the next control, the editor control. The editor control
is used to enter and edit multiple lines of text. It also has a property named placeholder which is
used to display a prompt message in the control. In this case we are just setting the placeholder
text as editor. After making the required changes, let's see the control in action in the emulator.
As you can see the editor control is displayed on the screen and we can enter multiple lines
of text. We can also set the auto size property of the editor control. In this case, we are setting it
to text changes. This means that the editor control will automatically adjust its size based on the
content entered into it. Now we will discuss the checkbox control. Checkbox is a type of button that
can either be checked or empty. When a checkbox is checked it is considered to be on. When a checkbox
is empty it is considered to be off. Let's see how the checkbox control works in the emulator. As
you can see the checkbox control allows us to check and uncheck it. However, what if we need a
text along with the checkbox. In this case we can place a checkbox inside a horizontal stack layout
and place a label next to it. Now you can see in the emulator, that we have a checkbox with text.
Now we'll learn about radio buttons. Radio buttons are a type of input control that allow users
to select one option from a group of options. To demonstrate this, we'll place a vertical stack
layout inside a frame as we need to add multiple radio buttons. The radio button control has a
property named content in which we can specify the text to be displayed. Initially we have one radio
button with the provided text. However, we can add multiple radio buttons by placing them inside the
stack layout. In the emulator we can see the radio buttons and select any one of them. By default
only one radio button can be selected at a time. However, if we need to enable multiple selections,
we can use the group name property of the radio button control. For the first three radio buttons,
we have set the group name property as group 1. Similarly for the other three radio buttons, we
have set the group name property as group 2. In the emulator, we can now select one of the
first three radio buttons as well as one of the other three radio buttons. This allows for two
different selections to be made. Now we'll explore the slider control. A slider is a horizontal bar
that allows users to select a double value from a continuous range. You can manipulate the slider
by moving it left and right. The slider control has a property named minimum which we can assign
to set the minimum value of the slider. Similarly it also has a property named maximum to assign the
maximum value of the slider. The slider control has a value changed event that can be used to listen
for changes in the slider value. Let's add a label below the slider to show the current value of the
slider. We'll name the label 'sliderValueLabel' and set its text to the current value of the slider
in the value changed event handler. By running the application, we can see the label now displays a
double value as we move the slider left and right. In our example, we have assigned a maximum property
value of 100 and minimum value of 1. Therefore the slider value can range from 1 to 100. If we need to
display integer values, we can simply convert the double value to an integer. As a result the emulator
will display integer values instead of decimal values. Next we'll take a look at the slider
control's additional properties. The slider control has a maximum track color property that we can use
to set the color of the track to the right of the slider. Let me assign a red color to the maximum
track color property. Now in the emulator, you see that the track to the right of the slider
is in red. Similarly we can also set the color of the track to the left of the slider using the
minimum track color property. Let me assign black color to the minimum track color property. Now
in the emulator, you can see that the track to the left of the slider is in Black. In addition
to the color properties we can also change the color of the thumb which is the draggable part of
the slider. Let me assign green color to the thumb color property. Now in the emulator you can see
that the thumb of the slider is in green color. Instead of using the default round thumb, we can
also use an image as the thumb of the slider. Let me copy a new image to the Maui resources and
assign it to the thumb image source property of the slider. Now in the emulator you can see that
the slider is showing a diamond image as the thumb instead of the previous circle thumb. Next let's
look at the stepper control. We'll assign the horizontal options property to center to align
it to the center. You can see that the stepper control has two buttons, a plus button and a minus
button. This is how the stepper control looks. The stepper control also has a value changed property
that we can use to listen for value changes. We can set the maximum and minimum properties for
the stepper control to assign the maximum and minimum values. Additionally the stepper control
has a property named increment that allows us to set the increment value on each click. In the
value changed event, I am displaying a message popup with the current value of the stepper as
the message content. When I change the value in the stepper, the message popup is immediately
displayed showing the current value. The stepper control can go up to a maximum of 20 as we have
set the maximum value to 20. Once we reach 20, the plus button will be disabled. Similarly the stepper
control can go down to a minimum of 4 as we have set the minimum value to 4. Once we reach 4 the
minus button will be disabled. The next control in this tutorial is the switch control. The switch
control is a horizontal toggle button that can be manipulated by the user to toggle between
on and off states which are represented by a Boolean value. To align the control in the center
of the screen the horizontal options property has been assigned the value, Center. When running the
application in the Android emulator, the switch control can be seen and clicking it changes its
state from on to off or vice versa representing a Boolean value. The next control we'll be discussing
is the date picker control. The date picker control allows users to select a date by invoking the
platform's date picker control. This control is used to facilitate date selection. As you can see in
the emulator clicking on the date picker control opens a calendar view in which user can select a
date. This is a very useful control for mobile apps that require date selection. Next let's take a look
at the time picker control. The time picker control allows the user to select a specific time by
invoking the platform's time picker control. This control includes options for selecting the hour,
minute and AM or PM designation. As you can see, when I click on the time picker control, a dialog box
pops up displaying a clock face with the options to select the hour and minute. Additionally I
can toggle between AM and PM by clicking the corresponding button. With the time picker control
users can easily and accurately select a specific type making it a valuable tool in any application
that requires time based input. In this section, we'll explore some indicator controls used to
indicate a user's progress within an application. Let's begin by creating a new content page and
naming it indicator controls. We'll also need a new button on our main page to navigate to this new
page. Now let's take a closer look at the activity indicator control. Running the application in the
emulator, we can see that the indicator controls page is empty. To display the activity indicator,
we need to assign the IsRunning property of the control to True. Once we do this the activity
indicator becomes visible. To demonstrate how to change the IsRunning property from the
code, let's add a button with the text activity indicator below the activity indicator control.
We'll also assign a name to the activity indicator control. So that we can access it from the code. In
the buttons clicked event, we'll assign the IsRunning property of the activity indicator control
to its opposite value, allowing us to start or stop the animation. After running the application in the
emulator, we can see that the indicator control is initially running. Once we click the activity
indicator button it stops running and if we click it again it resumes its animation. Moving
on to the progress bar control. We can assign float values from 0 to 1 to the progress property
to indicate progress within the application. For example assigning a value of 0.5 would display
the progress as 50 percentage. We can also change the color of the progress bar by assigning the
progress color property. Now the progress is showing in red color. Next we'll explore some
controls that enable drawing functionalities. To begin with, we'll create a new content page
named drawing controls. The first control we'll see is the Box view. It has a width request
property to assign the width which we will set to 200. It also has a height request property to
assign the height which will set to 100. To center it, we'll assign the horizontal options property.
In addition, we need to create a new button in the main page to navigate to the newly created
content page. After running the application, we can observe a black rectangle in the emulator.
To modify it, we'll change the color to Brown. Additionally, we can utilize the corner radius
property to curve the corners. As a result, you can see a brown rectangle with curved Corners in
the emulator. Moving on, let's explore the rectangle control. The rectangle class is derived from the
shape class and can be used to draw rectangles and squares on the screen. Similar to The Box view
control, the rectangle control also provides width request and height request properties to set the
dimensions of the shape. Additionally, the fill property can be used to assign a fill color to the
rectangle. Running the application in the emulator, will display a black rectangle on the screen. To
make the rectangle's corners curved, we can set the RadiusX and RadiusY values. Furthermore, we
can customize the appearance of the rectangle by assigning different colors to its stroke property.
In this example, we are using the color red as the stroke color and increasing its thickness by
assigning a value to the stroke thickness property. Running the application in the emulator again will
display the newly customized rectangle shape on the screen. The next control we are going to see
is the line control. The line class also derives from the shape class and it is used to draw lines
in a user interface. To draw a line, we can use the X1, X2, Y1 and Y2 properties. These properties allow
us to set the starting and ending points of the line. Additionally, we can use the stroke property
to assign the color of the line and the stroke thickness property to assign the thickness. After
drawing the Line we can adjust the X and Y values to position the line in the desired location. In
the emulator, you can see the Blue Line we have drawn with a thick stroke. Overall the line control
is a simple and useful tool for drawing lines in a user interface. In the next section, we'll discuss
the ellipse control in dotnet MAUI. The ellipse control which derives from the shape class can
be used to draw ellipses and circles. We can set the fill property to assign the Fill color of the
ellipse. In this tutorial we'll set it to Green. We are able to see only a thin line in the emulator
because we have not yet assigned the width and height of the ellipse. To fix this, we can set the
width request property to 150 and the height request property 200. Additionally, we can also set the
stroke color using the stroke property. To make the stroke thicker, we can set the stroke thickness
property to a higher value. After adjusting these properties, the emulator will display an ellipse
with a green fill color and a thick black stroke. The next control we look at is the polygon control.
The polygon class like the previously discussed controls, also derives from the shape class and can
be used to draw polygons, closed shapes that are formed by connected series of lines. To create a
polygon, we can use the points property to specify the points of the shape. For demonstration purpose
some points are provided. We can use the fill property to assign a fill color to the polygon. For
this example let's assign The Fill color as Orange. In the emulator, we can now see an orange polygon
drawn based on the provided points. We can also assign a strong color and a stroke thickness
to the polygon. In the emulator we can see the orange polygon with a black thick stroke. The next
control we look at is the PolyLine. PolyLine is also derived from the shape class and can be
used to draw connected series of lines similar to the polygon control. We can use the points
property to specify the points that form the polyline. We can assign the color of the line using
the stroke property and set the thickness of the line using the stroke thickness property. Once
these properties are set, we can see the drawn polyline in the emulator. The next control we
explore is the path control. The path class again derived from the shape class and it can be used
to draw curves and complex shapes which are often described using geometry objects. The path control
has a data property in which we can specify the shape to be drawn. To generate this data, we
typically use third-party applications which we will cover in an upcoming session. We'll begin
by assigning the stroke property to Black and set stroke thickness property to two. We'll set the
aspect property to uniform which specifies how the content of the path control is scaled to fit
within the bounds of the control. Finally we'll align the control to the center by assigning the
horizontal options property. Next we'll provide the data that we generated using a third-party tool
to the data property. Once we run the application, we can see how the drawing looks like in the
emulator. In this case we can see an image of a bird sitting inside a cage which has been drawn by
the provided data. The path control provides a way to draw any kind of images provided that we have
the corresponding data for it. That's it for this tutorial on dotnet MAUI controls. We have covered
some most commonly used controls including label, button, image, entry and more. In the upcoming
sessions, we'll dive deeper into more advanced controls such as those used to display collections
of data and explore other features of dotnet MAUI. We hope you found this tutorial helpful and
don't forget to subscribe to our channel, CodingDroplets for more dotnet MAUI tutorials and
other programming content. Thanks for watching!
