Understand DotNet MAUI Layouts | DotNet MAUI Tutorial
DotNet MAUI Tutorial Series: • .NET MAUI - Learn DotN...
This is video is part of a series named .NET MAUI Tutorial. In this video, we'll discuss about different types of layouts [DotNet MAUI Layouts] that we can use in .NET MAUI. You'll learn how to create MAUI Responsive Layout.
The demo project showing in the video is developed in Visual Studio 2022 with .NET 7 & C# (C Sharp).
.NET Multi-platform App UI (.NET 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 its child elements, and how the layout sizes its child elements. In addition, it may be necessary to nest layouts to create your desired layout.
1. MAUI StackLayout:
DotNet MAUI StackLayout organizes elements in a one-dimensional stack, either horizontally or vertically. The Orientation property specifies the direction of the elements, and the default orientation is Vertical. StackLayout is typically used to arrange a subsection of the UI on a page.
1.a. MAUI VerticalStackLayout:
DotNet MAUI VerticalStackLayout organizes child views in a one-dimensional vertical stack, and is a more performant alternative to a StackLayout. In addition, a VerticalStackLayout can be used as a parent layout that contains other child layouts.
1.b. MAUI HorizontalStackLayout
DotNet MAUI HorizontalStackLayout organizes child views in a one-dimensional horizontal stack, and is a more performant alternative to a StackLayout. In addition, a HorizontalStackLayout can be used as a parent layout that contains other child layouts.
2. MAUI Grid:
DotNet MAUI Grid, is a layout that organizes its children into rows and columns, which can have proportional or absolute sizes. By default, a Grid contains one row and one column. In addition, aGrid can be used as a parent layout that contains other child layouts.
The MAUI Grid should not be confused with tables, and is not intended to present tabular data. Unlike HTML tables, a Grid is intended for laying out content.
3. MAUI AbsoluteLayout:
DotNet MAUI AbsoluteLayout is used to position and size children using explicit values. The position is specified by the upper-left corner of the child relative to the upper-left corner of the AbsoluteLayout, in device-independent units. MAUI AbsoluteLayout also implements a proportional positioning and sizing feature. In addition, unlike some other layout classes, AbsoluteLayout is able to position children so that they overlap.
An AbsoluteLayout should be regarded as a special-purpose layout to be used only when you can impose a size on children, or when the element's size doesn't affect the positioning of other children.
4. MAUI FlexLayout
DotNet MAUI FlexLayout is a layout that can arrange its children horizontally and vertically in a stack, and can also wrap its children if there are too many to fit in a single row or column. In addition, FlexLayout can control orientation and alignment, and adapt to different screen sizes.
Video Chapters:
0:00 - Intro
0:58 - MAUI StackLayout
5:17 - MAUI VerticalStackLayout
6:42 - MAUI HorizontalStackLayout
7:42 - MAUI Grid
14:22 - MAUI AbsoluteLayout
20:25 - MAUI FlexLayout
24:49 - Sample MAUI Design
#dotnetmaui #netmaui #visualstudio2022 #maui #codingdroplets #dotnet6 #dotnet7
Пікірлер: 55
⭐ Join Us on Patreon: www.patreon.com/CodingDroplets .NET MAUI Tutorial Series: kzread.info/dash/bejne/gWdhzKiuiNSng6g.html
@pashaahmed5794
Жыл бұрын
Thanks... I watched all these three... Good explanation...
@CodingDroplets
Жыл бұрын
You are welcome! Thank you for sharing your feedback.
This is the clearest explanation I have seen yet. Strange how most demos assume you already know what they are talking about. Thank you for the education!
@CodingDroplets
2 ай бұрын
Thank you for your feedback! I'm delighted to hear that you found the tutorial clear and helpful.
Very very Nice , I enjoyed and learned so clearly about MAUI Layouts, Thank you so much
@CodingDroplets
13 күн бұрын
I'm glad you enjoyed the tutorial and found it helpful! Thank you for your kind words.
Today after many hours, I completed the video following along and doing it at my own pace! Please keep up the great work! you are the best teacher around!
@CodingDroplets
Жыл бұрын
Thank You so much! Really glad to hear that. ❤
You have the best MAUI tutorials by far. Most people immediately push mobile development via MAUI and you let us see the fundamentals and easy examples. Fantastic.
@CodingDroplets
Жыл бұрын
Thank you so much for your kind comment! I appreciate your support and I'm glad to hear that you found the tutorial helpful and enjoyed the approach we took in focusing on the fundamentals and providing easy-to-follow examples. Happy learning and stay tuned for more exciting content in the future! 😊📚🚀
I don't usually comment but daym this video saved some of my time so thanks ig
@CodingDroplets
4 ай бұрын
I'm really glad to hear that the video was helpful to you! Thanks for taking the time to leave a comment!
This is the best explenation i have seen!
@CodingDroplets
14 күн бұрын
Thank you so much for your kind words! Glad to hear that you found the explanation helpful.
Brilliant! Thank you very much for this super tutorial on Maui layouts!
@CodingDroplets
Жыл бұрын
You are welcome! Glad to hear that.
This is incredibly useful. Thank you for your explination
@CodingDroplets
3 ай бұрын
Most welcome!
More than excellent. Thank you so much.
@CodingDroplets
4 ай бұрын
I'm glad to hear that you found the tutorial helpful! Your feedback is greatly appreciated.
This is excellent! Thanks so much. I’m new to Maui and mvvm
@CodingDroplets
Жыл бұрын
Thank you for your positive feedback on the .NET MAUI Layouts tutorial video! I'm glad to hear that you found the tutorial helpful as a newcomer to MAUI and MVVM. If you have any further questions or topics you would like to see covered in future videos, please don't hesitate to let me know. Good luck with your continued learning and development with .NET MAUI!
Amazing quality and content! Thank you very much Sir!
@CodingDroplets
Жыл бұрын
So nice of you
Best tutorial every everything is very details keep going you deserve million subscriber
@CodingDroplets
10 ай бұрын
Thank you so much for your fantastic feedback! We're delighted to hear that you found the tutorial detailed and helpful. Your encouragement means a lot to us.
Beautiful. Thanks.
@CodingDroplets
Жыл бұрын
Thank you for your comment! I'm glad you found it beautiful and helpful.
❤ Thanks for this excellent video. I found it extremely useful and helpful
@CodingDroplets
7 ай бұрын
You're very welcome! Glad to hear that.
Great Course Sir from your community channel.
@CodingDroplets
4 ай бұрын
Thank you so much for your kind words! I'm delighted to hear that you're enjoying the tutorial videos.
Perhaps the Flexlayout's functionality could be enhanced by adding 'Left' and 'Right' alignments. For example:, suppose you have three labels L1, L2 and L3. You want L1 leftmost, L2 next to it and L3 on the right so they appear as 'L1 L2 L3' on the screen. Wouldn't it be nice simply to say something like:
@CodingDroplets
Жыл бұрын
Thank you for your comment and feedback on the tutorial video! I appreciate your suggestion to enhance the functionality of the FlexLayout by adding 'Left' and 'Right' alignments. Indeed, having the ability to specify alignment options like 'Left' and 'Right' would provide more flexibility in positioning elements within the FlexLayout. While the current version of FlexLayout does not have built-in support for these specific alignment options. Alternatively, you can explore other layout options available in .NET MAUI, such as Grid or StackLayout, which may better suit your specific layout requirements.
Excellent!
@CodingDroplets
Жыл бұрын
Thank you for your comment! I'm delighted to hear that you found the tutorial excellent. It's always encouraging to receive positive feedback.
Excellent description on how layouts work. I have a question though. Is it possible to override Grid, so that it continue outside screen and is scrollable?
@CodingDroplets
Жыл бұрын
Thank you for your kind words about my tutorial on .NET MAUI Layouts! To answer your question, yes, it is possible to override the Grid layout in such a way that it can continue outside the screen and be scrollable. You can try by placing your Grid inside a ScrollView. I haven't tested it yet.
great tutorial.
@CodingDroplets
Жыл бұрын
Thank you for watching the video and leaving your positive comment. I'm glad to hear that you found the tutorial helpful and informative.
you are the best
@CodingDroplets
Жыл бұрын
Thank You so much!
Does grid layout, scrollview support?
@CodingDroplets
Жыл бұрын
Are you trying to present tabular data in Grid?
@pashaahmed5794
Жыл бұрын
I m not working on any app, i m just asking for knowledge.
@CodingDroplets
Жыл бұрын
By default, Grid will use the entire height of the parent container. In the video we've placed Grid directly in the Content Page. So Grid will use the exact height of the Content Page. Grid is intended for laying out content. It should not be used to present tabular data. There are controls like ListView or CollectionView for presenting the data. We'll be covering those in upcoming videos.
can you say about BindableLayout?
@CodingDroplets
25 күн бұрын
Certainly! BindableLayout is a great feature in .NET MAUI that allows you to bind collections of data to layout elements in your user interface. It's particularly useful for dynamically displaying lists or collections of items without manually creating each UI element. I'll definitely consider creating a detailed video tutorial specifically covering BindableLayout in .NET MAUI soon.
when is the next video
@CodingDroplets
Жыл бұрын
Thank you for watching the video and taking the time to leave a comment. I appreciate your interest in my content and your enthusiasm for the next video. Regarding your question about the next video, I am happy to inform you that it is currently in production and will be released soon. In the meantime, I would like to recommend that you check out the video on .NET MAUI Controls, which is the next video in this series (kzread.info/dash/bejne/dYGt26umqriyis4.html). This video covers some interesting and useful information about controls in .NET MAUI, and I hope you find it helpful and informative. Thank you again for your support and for watching my videos.
@oktjona
Жыл бұрын
Yes pliz I am learning net maui and blazor from you sir. I am from uganda 🇺🇬
@CodingDroplets
Жыл бұрын
It's wonderful to know that my tutorials are reaching viewers from all over the world, including Uganda 🇺🇬.
I hate when another click at corner in any programming..
@CodingDroplets
Жыл бұрын
😊