.NET MAUI and Layouts

now it has been time to talk about layouts in dotnet maui so tune in [Music] hi and welcome to another video about net maui in this video we'll cover layouts the basic components that you use when you want to structure your content in the apps so we will cover stack layout including vertical and horizontal stack layout grid flex layout and bindable layout so what should we do now we should go to visual studio our tool that we use when we building.net maui apps okay here i have created a demo app just from the template i have also added some view models that we will use later when we are going through bindable layout but for now we can start just with editing the saml so the most common layout is probably stack layout if you have done windows development stack layout is very similar to stack panel but with a different name and with dot net maui we also got a vertical stack layout and horizontal stack layout they are basically the same as the stack layout but you don't have to set orientation to either horizontal or vertical for performance reason i recommend you to use vertical stack layout or horizontal stack layout but i will show you all of them today so we can start with the regular stack layout that you also had in xamarin forms stack layout and here as the name say we can stack content if we add items to it it will stack them vertically by default to make that be in a horizontal direction we need to set orientation to horizontal so we can add a label text hello now we can add another label text world like this and now we can see that we have two items in a vertical row if you want to change the orientation you just go here to just stack layout and then we set orientation to horizontal and now you can see that they are in the not in the other direction but this doesn't look that good because they are without space between so we can go here to the stack layout and we can set spacing like say 10 to make it obvious and now we have space between them if you want to use the more performance stack layout we can change here to vertical stack layout first and we can see that we have the same behavior as with setting orientation to vertical or just leaving it because on stack layout vertical is the default value so you don't you don't have to set that but we can also change to or horizontally out and they are added in a horizontal way so that is stack layout it's not more more complicated than that so let's go to grid one of my other favorite controls and in many cases i recommend you to use grid over stack layout because grid is much more performant because when the ui renders if you use grid you don't have to do that much of calculations so that is a recommendation but if you have a few items in a stack layout that is often okay so we can remove this and instead create a grid with the grid you need to define columns and row definitions so you can do that either by doing this dot row of definitions and add a row definition and a row definition can be an absolute value like 200 or you can use a star to cover all available area like this so now the second row will be 200 and the first row will be the rest of the space but you can also do auto even if that is not recommended because that will be a lot of calculations then then you can use stack layout instead if you want to but it is possible to use outline can be usable in some cases and we can do the same with the column definitions just like this but you have to set width instead so there are also another way that is less verbose so we can remove this and we can just write row definitions star 2 star this means that we will have a relative height of it so this will be one third of the available space and this will be two thirds of it now we can do the same with column definitions we can have two but they can be in the same size like this so now we can start to add content to them so let's say we can have a box view color red just to make it clear where we have our columns and rows so to place it in a row we can add a grid dot row is zero but this will be the default value so if you don't want to you don't have to set a zero value but it's more clear i think right now so we can create another one we can have it in grid row one and in column one yellow another one in row one but in column one and then the last one in row one and column no zero so let's change colors to green and blue so now we all must have like a flag here but if we want to add some space between the columns and rows we can also do that we can go here and set column spacing to 10 and let's say row spacing to 20. and now you can see that we have added spaces here okay another layout that we can use is absolute layout and that makes it possible to tell where the item should be in a component so we can remove this and change to an absolute layout and then we don't need this grid definitions it's enough with two right now so then instead we go and say absolute layout dot layout bounce like fifty hundred thirty eighty and then we have placed our box view on that position and the layout bound is always relative to the component that they are inside of so if we add a grid with the row definitions like star star and then we place it in the second row the row within this one we we can now see that we moved it down because it's relative from the start of the absolute layout okay so let's go and cover the next layout flex layout if you have done web development with css you have probably used flexbox flex layout is a flex box but for dotnet maui and the flex layout we can add some box views this is how this will look by default without setting any properties to the flex layout but we can for example add a wrap and set it to wrap and then it will wrap when there are no available space so now they will have the correct size instead of as you saw before that was not the case so we can also set justify content for example to space between space between means that we have space between them and not around them as you can see here we not have it in the start of the flex layout just between the items here if we want to have it also in the start we can set space around like this then we will have equal space there we can also set to be in center or in start or in end or also the last option here is space evenly like this it's a lot of problems that you can play around with when it comes to flex layout what the problem is that i have shown is the one that i use the most when i use flex layout so the last thing i want to show in this video is bindable layout if you want to use the layouts with a collection of data but you don't want to use a carousel view or a collection view maybe because it's just a few rows or that you want to use it inside of a collection view because you don't want to have nested collection views so if you want to do that we can for example use a stick layout a vertical stick layout then we can go here and say bindablelayout.item source is binding dot cors because in the view model that i already created here i have a property that is named cars and it's an observer collection of strings with just car models so we can do that and when we have a binding to a data collection we also need to specify a data template so we do that like saying bindablelayout.item template and we add a data template to it and we can have a content view for example so we can have some padding then and inside of it we can add a label and bind it to the string that it contains so now we have all the data stacked here without having to add them manually so this is how you can easily add data bindings to your layouts if you want to you can use this with grid too and you can use it with flex layout and also with absolute layout if you want that but i often use it with either flex layout or stack layout because i think that is where it is most useful thank you for watching this video about layouts in dotnet maui i promise you there will be more videos about net maui just basic videos and also with some more advanced stuff if you want me to cover a specific topic go to my twitter and write to me and i will do my best to cover all your wishes so like this video subscribe to the channel so you don't miss any new content that will be out every week see you next time bye bye

Channel: Daniel Hindrikes

Views: 5,922

Keywords: .net maui, dotnetmaui, dotnet, .net, visual studio, app development, ios development, android development

Id: 3G3aZp0qKgs

Length: 12min 44sec (764 seconds)

Published: Tue Jun 14 2022