Hi. Welcome to CodingDroplets and thank you
for watching this video. This is the third video of DotNet MAUI tutorial series. You can find the
playlist link in the video description. In this video I'll walk you through the different
types of layouts that we can use in dotnet MAUI. DotNet MAUI layout classes allow you to
arrange and group UI controls in your application. Choosing a layout class requires knowledge of
how the layout positions and sizes its child elements. In addition it may be necessary to nest
layouts to create your desired layout. We are going to see more about StackLayout, Grid, Absolute
Layout and FlexLayout. So let's get started. I have created a new dotnet MAUI project and
we'll be creating multiple pages with different layouts. This project will be available in our
GitHub repository. First let's see about stack layout DotNet MAUI StackLayout organizes child
views in one-dimensional stack, either horizontally or vertically. Let me create a new folder named
Pages. Then inside that I'm creating a new content page with the name stack layout demo. We don't
need these child elements. I'm removing those. Let's also format the content page title
and assign a white background color. Now inside the stack layout, I am placing a
button. Let the button text be Demo Button 01. Let's create one more button with
the text demo button 02. Now in the app.xaml.cs, let's assign the newly
created content page as the main page. Let's run the application and see how the
buttons are arranged. Now we can see the buttons are arranged vertically. Let's
add some padding for the stack layout. So now we have some space around the buttons.
Let's also add some spacing between the buttons. Now you can see there is a small space between
button 1 and button 2. So by default a stack layout is oriented vertically. But we can change
it. Let me assign the orientation property and make it oriented horizontally. It got arranged
horizontally now. We can also use properties named horizontal options and vertical options to
align the elements. Lt me assign the horizontal options property as Center and you can see the
buttons are aligned to the center of the screen. Let me change the value to end
and now it is aligned to the right. Start value is the default one. The buttons will
be aligned to the left. Let me assign a different color for the stack layout. So that we can see
the exact position of it. Now if I'm using fill and expand, you can see that the stack layout is
expanded and covering the whole available width. Now I am changing the orientation to vertical
and providing the vertical options value as end. You can see that the buttons are now aligned to
the bottom. In this way we can align the elements by using horizontal and vertical options. Let
me remove the stack layout background color. We can use this page to navigate to other content
pages. So let me place a label above the buttons. Let the label text be .NET MAUI
layouts. Let me also format it. I need to show you one more thing. Let's place
more elements in the content page. I am changing the final button text to demo button 100. Now if we
need to see all the elements, we need a scrolling functionality. But currently we can't scroll down.
Let's see how we can implement that. We can place a scroll view on the top and move the stack layout
inside the Scroll View. Scroll view is a view that is capable of scrolling its content. Now we are
able to scroll down and see the last button named demo button 100. Scroll View also have orientation
property and by default scroll view Scrolls its content vertically. We can choose horizontal option
to make it scroll horizontally. Also we have a BOTH option which allows the view to scroll both
horizontally and vertically. Currently for this page we need vertical orientation. I'll show you
horizontal orientation in another page. Let me remove the additional buttons. We don't need them.
In DotNet Maui, we have vertical stack layout and horizontal stack layout elements which we can use
instead of assigning the orientation property of a stack layout. Vertical stack layout organizes the
child views in a one-dimensional vertical stack and horizontal stack layout organizes the child
views in a one-dimensional horizontal stack. Both are more performant alternative to a stack layout.
So let me create a new content page and name it as vertical stack layout demo. Let me format the
title and assign the white background color. We already have a vertical stack layout as the
child element of the content page. I'm assigning a padding of 20 and also assigning
some spacing. Now inside this vertical stack layout, let me place some labels with background
color and horizontal options as fill and expand. So that it will cover the available width. Now in
our previous stack layout demo page, I am changing the button text and also assigning a name for
the button. We'll navigate to the new page on this button click. So in the click event, we can
call navigation dot push async method and provide the object of the new page as a parameter. Let's
create the navigation page object and assign it as the main page. I'm running the application now
we can navigate to the new page by clicking this button. So you can see there are so many labels
arranged vertically in the page. Same like a stack layout with vertical orientation property.
We also need a scroll view to see all the labels. Now we are able to scroll vertically. Next, I'll show you how the horizontal stack
layout is. Let me create another content page for that. Page name is horizontal stack layout
demo. We don't need this vertical stack layout. Let me modify the title and assign the background
color. Now I am placing a horizontal stack layout here. Then providing padding and spacing inside
this layout. I am placing so many labels as before. Now let's use the second button in the home page
to navigate to this horizontal stack layout demo. Here we also need a scroll view to
scroll horizontally. So I'm placing this layout inside a scroll view with
horizontal orientation. Now you can see the labels are arranged horizontally and
we are also able to scroll horizontally. Hope you are clear with stack layout, vertical
stack layout and horizontal stack layout. Next we are going to see grid. Grid is a layout that
organizes its children into rows and columns which can have proportional or absolute sizes. Let me
create a new content page with the name grid demo. We can remove this vertical stack layout. Just
modifying the title and assigning background color. I am just placing a grid inside the
content page. Now let's place two labels inside this grid and see how it looks. Just
before running the application, I'm creating a new button in our home page and assigning the
button click to navigate to this grid demo page. Let's run it now. Now you are able to see only
one label. It is because both labels are on the same position. By default a grid contains
one row and one column. To arrange elements in a grid we need to create multiple columns and
rows. For creating rows we can use grid dot row definition and inside that we can place multiple
row definition elements. Row definitions is a list of row definition objects that defines the height
of the grid rows. Currently we need two rows. So I am placing two row definition objects. Now for
each label, we can assign the row number in which they have to be placed. The row and column indexes
start from zero. Now you can see both the labels in the app. In the same way we can use grid dot
column definitions for creating multiple columns. So let me create two columns as well. Now assigning
The Columns for each label. You can see the labels are arranged horizontally. Because we haven't
assigned row index now. So MAUI will place the labels in the first row. Next, let me place two
labels with background color. So we can see the exact space used by the labels. We have two rows
in the grid and both the rows are taking equal height. Let me remove one row now you can see that
the labels are having the same height of the page. Let me create multiple rows and the row height is
arranged accordingly. In the same way we can add more columns and you can see the column height
is arranged accordingly. Let's place more labels in the same row. But the columns are different. We
can provide spacing in Grid as well. But there are two properties, row spacing and column spacing.
Let's assign column spacing first. Now you can see the spacing between the columns. Before assigning
the row spacing, let's place labels to the next row. Now the labels are showing. But there is no
space between the rows. Let's assign row spacing. So now we have labels in two rows. Let's
add the labels to the other rows as well. Now the whole grid cells are having elements
in it. Next, I need to show you how we can assign different heights for rows. We have a property
named height for row definition. We can provide star symbol if we need to use the available
space. There is no difference in the app as it is already using the available space. So we
can remove this property and let me provide auto value for the height property of the second
row. Auto value will only take the needed space. You can see here, the second row is only taking the
space to hold the labels inside it. The remaining space is shared equally among all the other
rows. In the same way, we can assign auto value for width property of column definition. Now the
fourth column width has been changed. We can even provide the values in units. A unit is the height
a row can use, based on the total number of rows. Let me show you how to assign the values
in units. For the third row, I am assigning the height as 0.4*. That means the height
should be 0.4 units. In the app, you can see now the row height is reduced. For the fifth row,
I'm assigning 0.2 units. Here is the last row. Let the rows 1 and 3 use all the available space.
It will use the available space even if we don't assign star here. Star is same as 1* or 1
unit. Now we can assign the column width in units. Let the column 1 use 0.3 units. So now the First
Column width has been changed. Next thing what I need to show you in Grid is how to make a
label or a view use multiple columns or rows. From our design, I am removing this particular
label and you can see that we have an empty space here. Now we need this label to use this empty
space. For that I can assign grid dot rowspan property. For that label I have given the value
as 2. That means the label will use two rows. Now in the app we can see the label is using two rows.
Let's change the color of this label. So that it will be easier to identify. Next, I am going to
remove this label from our design and let the previous label use two columns. I'm also changing
the color. This is the label which we have modified now. Next, how about using rowspan and column span
together. Let's see that as well. Let me remove this label from the design. Then assigning row span
for the label in the first row. Now we need to remove two more labels for assigning the column
span. This is the first label to be removed. Next we need to remove this label as well. Now let
me assign column span property. So now the blue color label is using two rows and two columns. Hope
you are clear with grid. Next we are going to see about absolute layout. DotNet MAUI absolute
layout is used to position and size children in explicit values. The position is specified by
the upper left corner of the child relative to the upper left corner of the absolute layout, in
device independent units. In addition unlike some other layout classes absolute layout is able to
position children, so that they overlap. An absolute layout should be regarded as a special purpose
layout to be used only when you can impose a size on children or when the elements size doesn't
affect the positioning of the other children. Let me create a new page and name it as
absolute layout demo. Instead of this vertical stack layout, we can place an absolute layout.
Now inside this absolute layout, I am placing two buttons. The first button with a text demo
and the second button with a text demo button 2. Let's create a new button in home page for
navigating to this absolute layout demo page. Let's run the application and see how the buttons
are arranged. Both the buttons are arranged on the top left corner of the page. This is how the
absolute layout arrange the child elements, if we have not mentioned the positions. So let's
assign the positions now. We can use absolute layout dot layout bound property for assigning
the position and size. Here we can provide the x position, y position, width and height (separated
by commas). So let me provide x value as 10. Then y value as 20. Width as 200 and height as 50. Next
for the second button, let the x value be 10. Then y value be 90. Width be 300 and height be 50. Now you
can see the buttons are arranged properly as per the provided dimensions and sizes. Absolute layout
also implements a proportional positioning and sizing feature. Let's see how it is. We can make use
of absolute layout dot Layout Flags property for that. There are different options available for the
layout Flags property. Let's go one by one. First, I am using height proportional. So now, I can provide
the height value in percentage. Let it be 0.2. That means 20 percentage. The button is now using
exactly 20 percentage of the page height. Let me change the button text to height proportional.
Also we can change the first button text. Let it be fixed. Next, I am creating one more button with
width proportional. Then changing the Y value to 300 to avoid overlapping. And now, I can provide the
width in percentage. Let it be 40 percentage. Then height 50 and let me also change the button text.
So here, we have the third button. To show you this clearly, let me run the application in Windows
machine. Just before that, I am assigning the background and text colors for all the buttons. Now
let's run it. So here we have the absolute layout demo page. Now let me try to resize the window. You
can see those two buttons are changing their size based on the page size while resizing. Second
button is only changing its height and the third button is only changing its width. Let's also
have a look on the other pages in Windows app. In horizontal stack layout demo page, we are able
to scroll horizontally. Then in vertical stack layout, we can scroll vertically. Let's see the
grid demo page. We can resize the page and the grid is also arranging the contents accordingly.
Let me assign the colors for the home page buttons. Now we can clearly see the home page buttons.
Next let me create one more button and this time in the Layout Flags property, I am using
size proportional option. Now in the layout bounds, we can provide both width and height
values in percentage. So, let the x value be 10. Then y value be 300, width 40 percentage
and height 20 percentage. Let me change the Y value of the above button. So, here we have our
size proportional button. Let's try resizing the window. The new button is changing both width and
height proportionally. Next, we can create another button with X proportional option in Layout
Flags. Then in the Layout Bounds, I am providing the x value in percentage. So the new button is
changing its X position while resizing the window. Now another button with Y proportional
value in Layout Flags. Let me also change the background color of the button to identify
it easily. You can see now, it is changing the Y position proportionally. Next another button with
position proportional value. We can provide both X and Y values in percentage. The new red button is
changing its X and Y coordinates proportionally. Now we can place the final button in absolute
layout page with ALL option in Layout Flags. Let the button color be black. In layout bounds,
we can provide all values in percentage. You can see now the button is changing its X, Y
width and height proportionally while resizing. Hope you're clear with absolute layout. Let's
also see how it looks in android emulator. We have all the buttons arranged accordingly. Now
let's move to flex layout. DotNet MAUI flex layout is a layout that can arrange its children
horizontally and vertically in a stack. It can also wrap its children if there are too many elements
to fit in a single row or column. So let me create a new page named Flex layout demo. We can place a
flex layout instead of this vertical stack layout. Now let me place two buttons inside the flex
layout. Let's also create a new button in the home page to navigate to this Flex layout demo page. Now
let me run the application and I'll show you how the buttons are arranged. So the buttons are using
the complete height and arranged horizontally one after the other. For the flex layout there is a
property named direction in which we can assign four different values. Column, Column Reverse,
Row and Row Reverse. Let me use column first and you can see the arrangement got changed. Now
the buttons are arranged as different columns. So the column value indicates that the children
will be stacked vertically. Let's change the direction to column reverse. Now the buttons are
arranged as separate columns but aligned to the bottom or we can say that the children are stacked
vertically in reverse order. Let's see how the row direction looks like. We have seen this arrangement
before while we have not implemented the direction property. So the children are stacked horizontally
and the default value of Direction property is Row. Now let's try row reverse. The children are stacked
horizontally in reverse order. There is another property named align items. Let me align items
to center. Now we can see the buttons are aligned vertically to the center. Let's change the property
value to start. Now the buttons are aligned to the top. End value will align the buttons to the bottom.
Let's try the stretch value now. You can see the buttons are stretched. The stretch value is the
default value for Align Items property. Next I'll show you the properties that we can use in child
elements of a flex layout. FlexLayout.Grow property is an attached property that specifies
the amount of available space the child should use or the main axis. It is also a float type as
we have done before to mention percentage. So the value 1 means the child should use 100 percentage
of the available space. You can see now the button 1 is taking all the available space. Let me change
the background color of button 1. So you can see it clearly. Now the button is clearly visible.
Next property is FlexLayout.Basis which is an attached property that defines the initial main
axis dimension of the child. The default value for this property is Auto. So you can't see any changes
in the app. Let me change it to 200. Now you can see button 2 is taking more space. I am changing
it to 100. Now the button 2 size reduced. Again I am changing it to 50. now the button 2 width
reduced again. The value specified by this property is the size along the main axis of the parent
Flex Layout. Therefore this property indicates the width of a child when children are arranged
in rows, or the height of a child when the children are arranged in columns. Next property what I need
to show is FlexLayout.Order which is an attached property that determines whether the child should
be laid out before or after other children in the container. I am providing the Order Value as -1. Now
you can see the order got changed. Now the button 2 is on the left side. Usually children are arranged
in the order in which they are added to the flex layout. However, this order can be overridden
by setting this property to a non-zero integer value on one or more children. The flex layout
then arranges the children based on their order property values. Children with the same order
property values are arranged in the order in which they are added to the flex layout. Next, let
me show you how we can create a design in which we have a header footer and sidebars using Flex
layout. First, let me place a label inside the flex layout. Assigning some background color and text
for this label. This label will be the header of our page. We need to change the direction of the
flex layout to column. Let me also format the label. Next element inside the flex layout is a vertical
stack layout. Then another label after the vertical stack layout. This label will be the footer of our
page. Now you can see both the labels in the page. But we need to make the vertical stack layout grow
and use the available space. So let me provide Flex layout dot grow property. Now the footer is at the
bottom of the page. Next, we need two sidebars. So instead of vertical stack layout, we can use flex
layout itself. Then I am placing a vertical stack layout inside it. This vertical stack layout is the
left sidebar. So, let me assign the width using Flex layout.basis property. Now another vertical stack
layout for the page contents. Let me change the background color to white and we don't need the
basis property. But we need to mention the grow property for this layout to use all the available
space. Let's assign some dark color for the sidebar. I am also assigning the flex layout direction as
Row. This is not mandatory, as we know that the row value is the default one. In the app you can see
the sidebar. Now let's place one more sidebar on the right side. So I'm just placing one more
vertical stack layout of the same color and basis property value. Now we have a page with
header, footer and two sidebars. In the content area, let's place a label. This is how we can use
flex layout. Just try creating different designs with multiple layouts and share your thoughts
in the comments. So, hope you're clear with all the different types of DotNet MAUI Layouts. In
the next video, we'll be seeing different types of DotNet MAUI controls. So that's it for this
video. See you all in the next video. Thank You!
