Understand DotNet MAUI Layouts | DotNet MAUI Tutorial

Показать описание

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

Рекомендации по теме

Комментарии

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!

AlbertStraub

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.

thPoundcake

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!

xacompany

This is the best explenation i have seen!

koenboone

I don't usually comment but daym this video saved some of my time so thanks ig

hassannabil

This is incredibly useful. Thank you for your explination

craigchaotic

Very very Nice, I enjoyed and learned so clearly about MAUI Layouts, Thank you so much

tamilvanan

❤ Thanks for this excellent video. I found it extremely useful and helpful

kopilkaiser

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:

<Label Text="L1" AlignControl = "Left">
<Label Text="L2" AlignControl = "Left">
<Label Text="L3" AlignControl = "Right">

nmarks

Best tutorial every everything is very details keep going you deserve million subscriber

manooj

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?

KenlieroGames