Learn Live - Customize layout in .NET MAUI XAML pages

foreign [Music] look right into the webcam yes we got the instructions because before we were looking all over the place but now James I'm looking at you Molly looking at me customization awesome week three we're back we're back to it we're almost halfway through almost halfway there well next week yeah I guess we'd be more than halfway through because there's seven modules so no not till next week will be five yeah 3.5 next week 3.5 next week three this week then four next week yes like halfway through next week stream 45 minutes into next week's stream he'll be like hey yeah we're halfway down we'll have to everybody can finally stop have a bio break go grab a coffee halfway through done good to go uh this is a super exciting one because I actually got to work on this one a whole bunch and update it for all the new Dynamite goodness so if we recap a little bit if you've been following along at home feel free to leave comments in the YouTubes and the Twitches wherever folks are at right now you know we have been on the seven week Learning Journey for Microsoft learn the training Microsoft training yep it's new you hotness um training live is that what we're calling this now that's what I think there's a new branding we have to change it yeah branding updated come on LaRon get on it um so it's really exciting because there's a whole learning path you can get it via that aka.ms right there and we're gonna have learn modules and this is the third one in the series so the first one we just kind of you kind of built out a very simple Don and Maui application it was like a little phone dollar thing and then last week we learned about xaml basic so Matt went over that and then this one's really going to be talking about layout so you know you want to put controls on a page and you want them to do things and you know kind of be in different organization sometimes you want things vertically stacked you want things in grids you want them to to wrap you want a whole bunch of stuff so that's what really this week is all about so if you're just sort of following along at home you can do the learn module along with us which is which is quite awesome yeah super cool you gotta love those layouts get everything on the page to look what your designers want or in my case what I have in my mind's eye and when I get you know onto the screen looks nothing like I want but in my head I know it's beautiful and you can do it if you had any graphic Talent which I don't there you go most of my applications just put a big number on the screen so that seems fairly fairly good uh that being said I'm pretty excited Matt because you missed out I was talking to Monique ahead of time he's an amazing producer behind the scenes people don't understand I got awesome producers doing stuff we just get to click buttons do stuff but you know magical producers behind the scenes you and also I was telling her and Chloe as well is that um I'm using yeah I have one big monitor in front of me so if you've ever if people don't know I used to be like double triple John Galloway our amazing moderator has 18 monitors he's got like he's got a whole command station and it seems inappropriate so I was like I'm gonna have one but I'm gonna do an ultra wide you know Costco Bargain Bin Ultra wide slightly curved does it wrap around you sure no it it's like uh there you can't really see it but it's it's I know it's a smaller Ultra wise not one of The Crazy Ones I have any bananas but when I do presentations you know I got to put it in 1920 by 1080 share the screen blah blah blah but here's what I'm doing today Matt did you know that from Windows to Windows you can wirelessly project and use another Windows machine as a wireless display it's built in yes yep so I have my Surface laptop 4 over here a lovely device and it is just a monitor and and that's what you're seeing on the screen is like it's over there it's just chilling right now so I can see everything I can do everything we'll be able to code in my beautiful little Visual Studio over here yeah and then I can see I can see the stream yard I can see the teams chat I can see nice slides that's a beautiful day so you have real estate on your huge huge Ultra ride curve monitor yep and then you just have a little 1280 by or 1920 by 1280 surface 4 wireless displayed it's perfect it's a waste of its processing power but I love it it's so cool um so cool good to see everyone in the chat a lot of people back from the last sessions which is cool um so hopefully yeah things are good this is the right side it's the right session we're good to go this is the customized layout yep perfect I got John in the chat um perfect super cool all right John says next update hololens yeah yeah virtual mind I'm saying uh so I'm James montemagno I'm a program manager over here Microsoft on our developer Community team and with me as always Mr masoka how's it going buddy yep I'm doing well I'm doing program management too according to the slide which yep that's what they call us now so we do two sides same coin we're both we love.net we love.net Maui are we product product manager program manager I think it's program managers product managers yeah something else something John news John's yeah John can answer and uh in the chat let us know and by the way John's in the chat uh he's a senior program manager we're just program managers but yeah John actually it's not even right hold on hold the phone because that is incorrect whoa I just got promoted nice congratulations John wow congratulations John that's a big move that's uh that just happened that's good we got to update that see that happened before the slides were made and boom there you go say John hi John congratulations live live promotion learn live that happened um way to find out foreign yeah that that would be something you know and in Microsoft like if if um if we don't if like you're a manager so Matt and I are both managers if if someone on your team gets a promotion you don't tell them you don't schedule your meeting by September 1st it just updates in the system and they're like oh like oh oops oops Yeah uh anyways uh this is the learn module we're gonna be doing today it is the customized layouts in Donna Maui's ample Pages that's what we're doing today um and you can follow along at home I'm going to be following along at home Matt's going to be following along at home oh and I'm running hot bits latest previewbits.net seven bits you don't have to have.net seven the the pro the apps and done at six but I tested I was like you know I have a big Presentation tomorrow for learn live let's just update everything to.net 7 rc1 you know David put out a blog post it'll work fine and it did Matt can you believe it oh my gosh yep what's cool is.net Maui is part of net dot net seven hit well RC one hit last week boom everything works RC RC just means everything works now right release candidate everything's fine I think so yeah cool it's good you can go do the devblogs.microsoft.com there's a.net button you can read all about it it's really cool John will put it in the chat uh David put a great post post here's what we're going to learn today what are we going to learn Matt I'll let you read them number one number one we're gonna arrange some user interface elements in an app and then size them so when we're arranging them we're gonna have to be using some layouts and that's what it means so that's when I have my perfect app page in my mind and I want to use the layout and I could and I do but it's still I can't do it but James you're going to show us how to do it and do it well I am next up will be display views in vertical or horizontal list using stack layouts and some new optimize stack layouts and that's that's this is the thing I use all the time it's like my number number one and number two because number two is Matt oh the grid where you can do it's like a stack layout double we're a great you can just say you got your rows and you got your columns you know so I did row and go you got your columns and you got your rows and you can do to put anything where you want and the best thing about a grid is that you can have a column column but you can say I want to span my columns and say Carlsbad too or Rose fan two or three so you can if you had a two by two grid you can make an element in that grid span all two rows on all two columns and just have like a big one stack layout long story short a grid is super duper flexible and yeah I don't know I'm not sure which one I use more between the vertical and horizontal stack or the grid um it's pretty close between those I bet I use more stack layouts and vertical and horizontal stack layouts then I do grids but I think that probably the grid has more controls in it because they include sometimes the stack layouts in them yeah lazy so yeah that's me all right here we go introduction um let's talk about it I added special Graphics man I really upped our our game by the way so I just wanna I really was real excited because I was going through the slide deck and and what's cool is that these are like half auto-generated for us which is really nice because like we from the learn modules so if you're learning you're like oh this is like in the learn modules but I think what's really cool is that um I decided to spice it up a little bit so uh what's cool here is that Donna Maui layouts you know layout panels if you will um controls they help you create a consistent user interface across a wide range of devices so if you're creating things on phone or desktop or mobile or do service Duo you can really optimize your layouts based on how you want them which is really cool so for example if you were building like in like a tip calculator you could really you know specify what it looks like um in in an organization and then done in Maui sort of handles the different screen sizes and pixel densities for you automatically so if you specify a number or you specify um like a size it's going to automatically know how to adjust that base on the sizes um of the device automatically so in this series today we're going to take a look at how we can optimize those and make them look good using the stack layouts and the grids yeah and one thing I just want to call up before you switch it over look at that duo surface Duo where you have the list of the podcasts over on the left but you have the play controls over on the right and that's something that we can do in my way we're making perfect use of the form factor to make the app super well useful based on what on the screen real estate that we have which is really neat exactly so let's talk about why we need to really specify the size of our views right because when we design user interfaces we want them to be consistent across multiple devices and of course every device has different sizes in general they have different pixel densities if you will so here's a screenshot I took from open signal and this is an older screenshot too so if you take a look at this what you're going to see is that this is sort of all of the different resolutions of different Android devices on the market so when we're looking at it right you have even here like in my in my hand I have a I have an iPhone there's an old iPhone 8 plus and then I have a pixel pixel 4 maybe and you know they're they're different sizes the screens are different pixel densities and they're they're just different completely you know one fits literally inside the other one you know in general so and then if you took a look at my phone right which my actual day phone that I use is an iPhone SE second generation it fits even inside I'm like I can mirror like what's happening on the screen there and that's just phones on my those are just phones lying on my desk yeah I was just sitting there can you imagine what's laying around in your living room I mean gosh who knows which is good um and you know what's nice is that you know especially around the world these things are going to vary as well because you know different places have different sizes and especially more Android heavy you're gonna have a lot more different resolutions out there which is cool so we want to be able to do that now that's not only just saying that we're also thinking about what about laptops right there's you know things like service laptops that have more of a two by three or some have a 16x9 or my ultra wide that's like we're all crazy right you want to make sure they look super good there and that's why we use layout panels and there's a few of them built into Dynam Maui these are just a sampling of them there's actually a bunch more that we're going to talk about today but you consider it layouts as sort of collection container if you will right so let's say you have a a shoe box and you need to fit two shoes in there there's many ways to organize your shoes especially if they're sandals you can put the shoes like stacked this way or like this way or you could scrunch them down you could like try to wrap you know I mean you know that's sometimes you're going to put them in different areas so things um inside of a stack layout and why we want to use them and we also also use the term view or child views is you want to add multiple things so every page in Dynamo I can have one child element inside of it one child's View and then the layouts can hold multiple so you always have a page and then layouts inside of it and you can go to town there so things like stack layout there's a relative layout absolute layouts Flex layout grids um and then we'll talk about stack layouts have optimized in Donna Maui vertical stack layout and horizontal stack layout which is what you should use in general and we'll talk in depth about these we're not going to get into absolute or relative or Flex um in general to me they're a little bit more complicated but um you know you definitely take a look at some of those in the amazing documentation so yeah so cool so James you kind of hit on it before and we talked about it before but we can Nest a layout within another layout you can have grids inside of grids inside of grids layouts and stack layouts inside of Stack layouts you can have as many as you want yeah um you can consider just another element you can have a stack layout that has four stack layouts inside of it would you want to do that probably not but it's that you could you know um it depends yeah and then of course you wanna you wanna also optimize and think about this As We Lay It Down today is you may not want to do that you may want to consider what's the best layout for my screen that my my my mind or my designer has given me because once you start like a recursive pattern of adding a bunch of things instead of just one base layout you may have some implications on performance so you know if you have a tons of Stack layouts that's not going to be as performant as maybe like a grid or a flex lab or a relative layout for example and Donna Maui does its best to optimize as much as it can but you know if you give it a thousand layouts that's probably not going to be as nice as a single layout gotcha yeah perfect so like I said here the panel we will use the term view or child view and that's the control place inside of of a of a layout panel and again that could be a label a button entry it could be any visual element including another layout like you said with Don and Maui now um by default if you don't specify the size of a view it will automatically grow to be exactly large enough to fit its content so it's gonna attempt to do whatever it wants to do basically how big it needs to be so for example this is a label on a page so it's just a bill label and um by default we're doing Center and Center so we we set the background color here to Silver and the text color to Black so you can kind of see the defaults here is it's only using as much space as it needs because you also don't want it to draw across the screen unless necessary especially if you weren't setting the background color because those are things that the the CPU or GPU are going to need to render and you want to right not render it so this what this looks like here is it's a very simple label and that's all it does now you may want to control this size right so for example if you wanted to set a specific height and width um on an element you can also do that which is nice so again this is something super duper common uh inside of applications you might have an image where you want it to be uh you know a perfect you know box so you want it to be 100 by 100 we'll talk about what those mean but here for example for building a UI we're gonna you want to specify those properties and the properties you specify are the with request and height request now the reason that it's called a request is because it's Dynamo is going to do its best to get it to that size but if for some reason your layout is constricting it and saying you know it can't be bigger than 50 pixels by 50 pixels or we'll talk about here in a bit 50 by 50 it can only get so big based on your layout constraints right but here in this instance that we just saw there are no layout constraints it's one big element on the screen so the whole screen is the element now again the other part would be oh what if uh you know the screen is smaller it can only get so big on the screen so it's going to do its best to actually um to to to do that there now notice though that even though the vertical and horizontal options are still Center Center you know it's still going to center it on the screen as much as it can so the middle hello is there kind of in the center of the screen so it's still going to center it in the center because those are the options that we set there on the screen and we'll explore these different vertical options here in a second so I've been talking about numbers and pixels in general um but what are those things so this with requests and height requests and almost any other time you're setting something that you would consider pixels in your mind they're not actual pixels and you use these literal values like 100 or 300. um on the different devices I I call them sort of density pixels uh you know dip is what they call it on Android a density independent pixel on iOS I call it points and kind of like on on kind of like Windows and Mac OS are kind of the same thing um for these density independent pixels so what this means is that if you were to somehow measure you know something on your screen it's not actually going to be a pixel it's going to be a density pixel because on iOS you have a 1x 2X and 3X on Android you have low DPI mdpi hdpi extra high density extra extra high density extra extra high density okay you have all these different densities and the whole idea is that you have all those different screen real estate sizes so a hundred on one device should look exactly the same as 100 on another device because their density independent pixels does that make sense Matt it does I tell you what I missed the days when our screens were so bad like way back when we're just dealing with monitors where we could actually count out pixels and didn't have to worry about the density independence of anything but now our screens are so great that we have to worry about it but we don't because.net Maui kind of takes care of it for us or the operating system below it so honestly I just I just think of it as 100 and let iOS or Android take care of it yeah knowing that it'll it's 100 it's all relative it's density independent correct no matter which screen it's on now I think you also have to realize though that there's only so many pixels on the left or on the right right so for example just because if I design if I design my application and I've done this before if I design that's a great example if I design my application on an iPhone plus device right it's very large it's got a big screen and and if I deploy it onto this device just because I set things at 100 100 they're going to look if I put a perfect box of 100 they're going to look the same but if I put a bunch of boxes next to each other right at some point on this one the bigger one can fit more of those boxes the smaller one cannot fit that many boxes yep right so we're going to talk about how we would sort of adjust some of that stuff today as we talk about grids uh in general which is great so cool uh the other thing you know that we need to know is because it's up to the layout to determine the size of the view um you usually can't use a with request or height request to tell you the actual size of the run time right so it's a request so that's it's you could actually get the uh resolution if you want like you can Loop into different controls there is um a width and a height property that you can get when things are measured so every every element while it has a heightened request you can't it has a height and a width you can't set it you can only set the request right now you can get access to the width and the height properties if you actually need to get those sizes so once it's rendered you wouldn't want to use the with request or height request to get the actual rendered pixels that are there you're going to need to actually dip in to the measured width and height sizes okay yeah okay there you go if you need to I've never really if you need to yeah yeah the other thing is that we can set the position so one thing you saw earlier there is that Center Center so if you want to you'll probably want to you know use the position you know appropriately every view has a default in general that you have that you can set and inside of um Danielle Maui there's a property called um there's these layout options that have alignments on here and we'll talk about how we can do these and there's also this bull that is called expand but I'll talk about in a bit that basically that old Boolean comes from xamarin forms um and was dropped in Dona Maui so even though it's still there it doesn't actually do anything in general it's more of an optimization so these layout alignments that you would set um there's four of them specifically and again all of the controls sort of have a default you know in general it's going to be either you know fill or start or something like that and there'll be a start Center and in fill so every property you can set not only the horizontal um alignment but also the vertical alignment and the properties that we use are called horizontal options and vertical options and you set it to an enum of layout alignment so what that looks like in code for this exact display is we see we have horizontal options of Start Center and and fill so those are the horizontal options and of course there's vertical options too so if you remember that label it was Center Center yep okay so far so good it makes sense intuitively it makes sense yeah and John makes a great points like in CSS you have like a Min width Max width so it's kind of similar but not 100 with those with requests it's more of like I would like for it to be this big yeah um type of scenario it doesn't adjust yeah it's like being it's very polite it's saying if you have the room I'll take it but if not you know I'm not gonna I won't complain yeah yeah it's there because everything's different your screen size could be completely different and so yeah we're not guaranteeing it yeah and mostly on these devices right you're not often resizing things too much so there's that aspect to it and I I think it's like when we look at grid for example it gives you really good use case of how you can you know kind of um explore these options now one thing is what if you want things to expand is another good option and that's a a layout option that you'll see in the code when you go through there's like a start and expand Center and expand and then expand fill and expand you can ignore those because this was a Boolean property that basically said hey um if there's extra space go fill it and this is obsolete this is a performance this is a layout rendering option under the hood that the team removed it's still in there just for backwards compatibility but um just know that it just doesn't have any effect so you can set it it just won't do anything and under the hood if you actually look at the Dynam Maui source code it just sets it to false pretty much there but we will explore the grid to see if we can achieve the same effect of expanding and making things fill space automatically now of course as we saw here like you can have things fill right so you fill fill is the exact same thing but there's not like a center and expand type of scenario um right in general so you'd want to kind of be aware of some of those those things okay yeah and expands does not exist was that that can be a knowledge check I didn't look at our knowledge checks no no we have one question now let's check time no let's check you can go to AKA dot Ms forward slash polls we can see it here I think someone has to publish it I think Monique has to publish it I don't know so I'm going to publish it who publishes this we don't publish it do we publish it it's Mooney do you publish it I think so you can go to aka.ms forward slash poll should do it there we go let's look at that people it's happening so what does a layout panel do I like that this thing is in code but there's there's a thing that's not really a layout there's layout panel is not a control but like the the concept of a layout panel Matt does it a hold a collection of child views and determines the size and position does it be arrange its child abuse in a single row or column or does it encapsulate layout options such as a layout alignment and expands all right well let's take that last one because we just talked about that last one and then it's not that's not it right that's all yeah it can't be expands right so that's all about well the available alignment itself so it's not that's not it and the next one is child abuse in a single row or column that sounds like a stack layout it sounds like a specific layout yeah yeah so a right holds its collection of child views and determines their size and position so layout panels like the the bass this is a foundation it's something that things would probably inherit from maybe kind of so yes take a look you did it man yeah so it's gonna hold a collection of views right they can be in multiple rows multiple columns there can be multiple items in there right now remember that that actually the reason it's not C even if it didn't have that expands thing in there to kind of really make it clear is on the control the control not the layout panel the control is is the thing that's requesting a layout alignment right the collect the layout panel is the one that is determining if it can do it or not yeah you want to explore this puppy ooh a transition wow yeah you had that in as part of the spice that you added no that was in there that was automatically oh wow yeah fancy that's cool all right so here's what we're gonna do in the in the learn module this is part three this is an exercise we're gonna explore just using a starter solution we're going to explore the source code and we are going to see um how um we can use those different layout alignments to place objects on the screen so that's what we're going to do so let's go ahead and do that so what I'm going to do Matt is I'm actually going to stop sharing my slides because again I'm using that second Monitor and what I'm going to do is I'm going to start sharing visual studio so I'm going to stop that right Boop and now what I'm going to do is I'm going to share a window and I'm going to share this right here boom there we go that money boom awesome cool here we are amazing so what I did is I cloned there's a GitHub repo part of the module so if you're on exercise three there's a GitHub repo that's there and um and what we can see is that I've put it into D my D drive learn Maui part three I just renamed it so it has a very long name and if you're on Windows you want to make that a little bit shorter and go there and there's going to be three different exercises that we're going to go through today inside here so it's exercise one exercise two and exercise three so we're just going to open up exercise one and it's called alignment.sln so I'm just going to go ahead and open that there so I just open the folder and now we can we can see it come up there which is cool oh oh I guess we're back hold on let's get in now boom okay cool now we're back again Perfect all right when you open a project or solution yeah we're good yeah it redoes visual yeah yeah three does it so cool it's a new window so I'm sharing a window I was being fancy yeah being fancy okay so let's see what's actually happening here so um what we have here is we have a grid and we haven't talked about grids yet so I don't expect people to kind of know what's going on but but pretty much we have a bunch of buttons inside of here that have that says horizontal and vertical and our whole goal is what we want to do is we have a bunch of space at the bottom of the screen here and what we want to do is move this label around so if I look at the source code in the code behind it's very very uh simple so I'm just going to control KF then do it okay cool what have I love necessarily these this code style in here but basically what we can see is if I press horizontal it's going to set the horizontal options to start if I click on Center it's going to set it to Center if I do end to end XYZ I can even make this a little bit bigger here and then I can do the power of wrap there we go cool this gives us a little bit better view here so horizontal if I tap on that button it's gonna like I said Start Center and fill so very simple if you're just kind of exploring these things there you can do that as well and then over here we have the vertical Start Center there Chris let me know if that's big enough for you that should be huge 200 percent should be good as well so that's all it's going to do this entire application is just going to move that label around on the screen that's it so if I go ahead and re run this on my machine I can run this on Android I can run this on Windows it doesn't really matter our application is going to compile up and then it is going to open up inside of my Windows machine so let's give it a second here to compile up okay I don't know why my screen my window stops sharing let's try it again interesting there we go cool I'm gonna bring it back up for me Monique Monique there you go all right thank you cool all right so uh by default over here it is going to be and I'm going to see this why I did it this way I was trying to be fancy Matt see look at that it's like inside of it and what we can see is I have my app running over here so this is my app and all we're going to do is when we you know click on horizontal option um Start Center these different buttons we can actually have it Center on the screen so this is kind of cool right um inside of here so I can actually make this even bigger so we can get the full resolution boom that's cool but that's the zamo live preview you're using right now so that's not an emulator or a simulator that's part of Visual Studio yeah so my app is running on my other side on the other side of my ultra wide and then boom I can just kind of put this right here which is pretty cool so here's what's nice is by default we can see that it is filling as much as possible but if I make the horizontal option start I just click on start horizontal we can see that horizontally it's moved all the way to the start if I want to move vertically as well which is going to be up and down we can see now the background color is there right so we have start there I want to move it into the center moves into the center and end fill fill so I have this big space right there's a huge amount of space under there that that is enabling me to really do that so if I was to come in and change a few properties so like if I made the background color of this this big area let's say background color of orange there we go now we have orange and then if I that's the whole part of it but if I was to say you know background color of white or wheat I guess let's make it wheat and then I did same thing so I'm going to do wheat there we go so you can see the the grid itself the Big Grid that we're in has a huge amount of space here right so it's really big but the label can only move underneath these basically right there's there's areas and you can see that we also have a talked about it before the the padding right so that's in there so I did zero for example we can we can move it move it over actually if I made zero zero for spacing now you can really see this at this point right the the the actual label can move in this big orange space so if I say hey horizont or vertically go to the end see now it goes all the way to the bottom so it has the full space but if I move that padding back on the grid the container it can't go outside the container it's restricted to The Container okay that makes sense that makes sense now if you wanted to though James and this is actually the power of uh I'm kind of going up to script just a tad you could actually go down to uh where the label is itself in the xaml code and then you can actually start specifying the alignment within there without having to mess with the buttons at all if you really wanted to show the pre or the power of hot reload totally yeah so yeah that's even better yeah if you were if you were doing like horizontal options of Center it's going to now make it Century that's very true you don't even need any bundter oh my gosh look at that so if we had like um that's really funny if you do vertical options of Center there we go yeah and then now if we did this wow look at that yeah now the question is we also need to then give this thing one row and then here we would say grow row zero there we go amazing so it's 10 mil so now um Matt you're so good at this so here I can say horizontally start and then it's going to move to the start right in fact if we move that you know padding back to zero then you can really see it boom this is amazing yep yeah that's great um so yeah so this is really so this is a great way of just exploring right start start if I want things to be vertically you know fill that's good now the other thing is I could still make the width of this right so if I came in and say with requests and I said you know 300 notice that it the width is 300 still right before when I didn't specify a width it just said make it as wide as it needs to be right now if I come in and I said I said height request I said 300. notice that that even though I've told it vertically fill it's still going to respect my height request that's a good good thing to point out because a lot of times you're going to see the vertical options of filling why isn't it taking the whole thing because height request supersedes or takes precedence over the vertical options or the whatever vertical yeah okay yeah it makes sense right because if I wanted this to be uh you know horizontal or sorry a with request of you know 300 and I wanted it to be a height request of 3001 to be this here like okay cool like now I have this big label so then you might be saying like Okay well how do I get that text you know centered right because like I wanted to be in the center of the Box well on labels for example there's actually a vertical text alignment and you could say Center it and that will Center the text horizontally right so that's the label itself right so here where the box right there's the control and then there's the text inside the control does that make sense gotcha yep yeah so amazing that's cool though so this is just a fun thing just to really just start to play around with say okay how do I really how do I really want my controls to be laid out on my screen I have this here how is it really going to impact especially as we start to specify different layout different types yeah I do this all the time just to kind of get things where I want to with the hot reload because that makes it makes life so much easier especially like you said with the height requests and the vertical options of fill sometimes it's not totally intuitive until you actually see it on the screen yep that's why things are going to come out looking like yep so same thing here right we get the fill now it's in the center you want this stuff so again now I think what's important here and a lot of times people will set the background color to see like what it's doing um and there was a library that was called like debug rainbows I think that would automate a set of background color automatically um well what's important here is if you look whatever is colored is what's rendered by the screen so if you need your text to be centered here on the screen you may not want to fill you may instead want to use the you know Center horizontal and start because now the GPU and CPU together on your operating system only need to render that background and that text if you do fill right horizontally it's going to render the whole thing has to do a whole render loop on that entire all those pixels if that makes sense yep yeah it does cool that's it that's the whole the whole demo let's go back to the slides share screen this one boom so there is one comment James from our good friend principal John Galloway and we get up could we get a color for orange whip is John is that from uh Blues Brothers orange whip orange whip orange whip so anyways we'll just let it go for now but anyways I'm talking uh we got dark orange orange and orange red those are the only options we have all right no orange whip sorry is there a book Pie there is papaya whip actually um there is papaya whip uh which is quite entertaining actually it kind of is like a wheat color in my opinion a little bit anyways all right let's get back to it over here all right let's do it um okay um Perfect all right boom so we took a look at aligning some different controls that's super duper good so well now what we need to think about is well how would we really arrange different views all we did was just put one View and moved it around that's cool I guess you know what I mean like that's that's fine yeah it wasn't like amazing mind-blowing you had fun I had fun yeah yeah as long as you had fun that's all that matters at the end of the day just want to make sure that you are in a good State of Mind where you're like super happy and enjoying life yeah so that's good okay well we want to arrange some things in Stacks so we are going to use a stack layout or one of many stack layouts if you will um specifically and the whole goal of a stack layout is to stack stack things vertically or horizontal you can't you can't diagonally stack not a thing you can't do it just two two rows um what's cool here is that basically the you can think this as a grouping like an iOS UI kit there's like a group control and then like in Android XML there is like a layout the vertical different layouts and and you would set these options basically so when you think about it the stack layout there's a stack layout a vertical stack layout and a horizontal stack lab we'll talk about which ones you want to use when but pretty much it just Stacks things from the left to the right and the top to the bottom left to right top to bottom and you're good to go the stack layout itself has an additional number of children views um because it's a layout so layout T is the base class here that all the different layouts in here from um and everything in Dynamo is a view so it can handle adding multiple views including itself now vertical stack layout in that final bullet I'm at and horizontal stack layouts are brand new in Maui and they are finely tuned and optimized layouts that you should use over the generic stack layout the generic stack layout you need to tell it which mode to go into right and there's additional processing that.net Maui and the underlying control system has to do so if you have a vertical you should use vertical if you have horizontal you should use a horizontal stack layout yeah and I think most of the time you're going to find yourself using the horizontal or vertical stack layouts because how often before did you change the regular stack layouts orientation not very much no not very often so that would be the only time that you would need to in general and um a guy Incognito in the chat says stack layout seems similar to flex and CSS kind of the difference is flex layout will wrap things accordingly and that's what a flex layout would do in done in Maui so if you need things to wrap or these aren't going to wrap they're just going to go over as much as possible now one option that many people have is they put a stack layout inside of a scroll view so if you go bigger than the width or the height you can scroll left or right based on based on that different layout yep yep cool so all three of these work exactly the same the only difference is stack layout you have to specify horizontal or vertical but as far as the functionality Works they are the same so if you have a stack layout over here there we go you can add different elements in the xaml OR in C sharp so if you want to add it in C sharp you can totally do that and you would just add the items create the Box views add the items there inside the xaml we'll take a look at that you just simply add the stuff into the views automatically so actually what that looks like I'm going to actually update this slide in real time because I think it's way more important to see it so I'm actually going to do this and do this there we go cool let's inserted a new slide wow so there is there is that now because those are smaller what we want to do is want to bump up those fonts yeah I know it's happening in real time this is very impressive I know so can we get the coloring there James I mean I want my okay no so so this these this code is exactly the same basically besides the height request that is set in the code but you get that idea as you can create them you can add them as children and then boom you can add them here right now the defaults in a stack lab is a vertical stack layout so if you're just using that it's there but again you should just use a vertical stack layout in fact this code would be exactly the same as vertical exactly out there we go just like that same exactly cool uh so like I said these are ordered um based on when you add them into the collection right so that's the order the order that you add them is the order they show up um and of course you may want to add some space in between them so here we have those silver blue and gray boxes right here that you can see and if you want to add that space in between them you don't want them to just be stacked on top of each other all three of those layouts have a spacing property and the spacing are density pixels those independent pixels that are there and you would set it up there you go just like that additionally like we talked about before if you wanted to still use the stack layout if for some reason you needed to change it dynamically while your app is running you could use it and in this instance you would set the orientation of it to horizontal or vertical right okay so now we're stacking those things vertically right horizontally now we're stacking these things horizontally I gotta mix up all the time too I have to honestly to go like this or that and think about it yeah but yeah and then of course you should be aware of specifically you know the height and the width and the spill properties of your boxes for example here uh like I said uh every view has a vertical option and horizontal option that we explored earlier um so you can use these properties to set the position um inside of that that area that we saw earlier and of course we have the optimized stack layouts a vertical stack layout and horizontal stack layout that have predefined orientations and again they work exactly the same not exactly the same except faster for the rendering engine except faster that is correct uh q a time oh there we go now the check time now let's check all right sorry click the button all right yeah here we go all right all right yeah it's up it's there all right good all right Master forward slash poles it is there should be there it's coming it's not the question is how can you add child views to a stack layout Matt is it a adding child views to the child views property in C sharp can you do it through xaml or c-sharp code or do you declare the child views and then use either horizontal or vertical options depending on how you'd like the views to be displayed let's go back to the question how would you add them to the stack layout all right so the first one's a little bit tricky because there might be a children property and C sharp but there's no child abuse ah I see let's see what we did there yes yeah so let's let's cross up a as not correct yeah and then C let's see declare the child views all right so we declared a label or we declared a box or whatever and then use either horizontal options or vertical options depending see that's kind of a little tricky one too you know you just had like a generic stack layout and you put them in that's not right either nope um if you wanted to go horizontal or vertical ideally you just use the horizontal stack layout or the vertical stack layout instead and put it that way or if you were insisted on using stack layout you would use the orientation and Asian property um so that leaves us with B you can do it through xaml or C sharp code and it goes into the children property yes um and xaml you don't have to worry about specifying it saml just takes care of it for you and C sharp you actually have to say children dot add exactly yep that is correct very simple very straightforward cool all right now what we're going to do is we are going to build a little bit of a user interface over here we're actually going to do a little tip calculator this is the inside of the learn module and we're going to build something that looks a little bit like this we'll make it look a little bit prettier even yeah in general better so we're going to fix up the UI so we're going to see where it starts and how we can actually change it to the thing on the right so the thing on the left is what we're going to start with and the thing on the right is what we're going to change it to using stack layouts okay that's what we're going to do so quick question James for the audience is there any reason to prefer a stack layout over a flex layout with the option of no wrap I'll tell you my answer um I don't understand how Flex layout works so I don't use it Matt yeah well I'm my I exactly it's gonna be faster right I mean it's going to render faster I mean if you know that you're not gonna need the power of the flex layout why would you yeah bother and horizontal and vertical exactly are already faster than the normal stack layout so that's going to be I mean if yeah I think it's a good question for Jonathan peppers on the Don Maui team who focused on performance if there is performance implications my assumption is that the vertical and horizontal psych layouts are faster like you're saying Matt yeah that was my assumption that'd be my guess yeah but yeah assumption so but if you are a flex layout Pro that may be Maybe I wouldn't but that's you okay all right um let's go ahead I'm going to share my visual studio over here stop this I'm going to share my window boom here we go cool all right so inside of the learn module there is that GitHub repo the same one that we cloned earlier I've now opened up exercise two which is the tip calculator and I have it running right here which is quite nice look at that [Music] let's do fit with there you go I can actually make it a little bit you know make it a little bit smaller oop I'll fit with perfect amazing cool so what this looks like you can see over here is that we have um I can enter a bill amount so let's say that we went out to a fancy dinner I took Matt out uh ten dollars that was ten dollars yeah and I can adjust this tip to an inappropriate zero or to my standard amount 25. I would say now tipping is uh different in all parts of the world so uh us is a very tip-centric um country I would say um so here we have this I can also tap these different percentages so I can do um I guess uh you know a 15 a 20 because if I did like seven five what's a round down do okay so it's like rounds up and down different numbers I guess so if I did you know 15 I could say round up that's gonna round up I guess to some percentage to some I don't know what it's doing something I have to look at that percent I have to look at it so if we look over here in the solution I could actually I guess see what it's doing is um there is a calculate tip so whenever we click on these buttons basically there's a bunch of math here that's going to do some percentages based on the percentage based on the XYZ it's going to like Round Up round down a dollar or up and down basically and do a bunch of stuff but we can see there's a normal tip a generous tip 25 is even above and beyond this depends on the service that you get is the idea so there's a bunch of math back here but this Matt is not what we want to necessarily look at we want to change it so it's a little bit prettier okay the first thing I might do for all of our folks uh is actually set some uh font uh sizes let's do like yeah four let's open that up make these bigger again I'm not even going to follow along I'm just going to make these real big so I find just making the fonts bigger makes the app look better overall yeah I can I'm just gonna make things real big it's going to be great so there we go perfect amazing look at that it already looks a thousand times better and again I can adjust this here this is cool you can see the tips updating a new real near real time which is cool um pretty awesome now um I guess I should actually look at what I'm supposed to do okay cool so we're gonna change it uh to make this look a little bit nicer okay so the very first thing that we want to do is on this vertical stacklight we see everything is just vertically stacked up over here right um which is good we're going to add a little bit of padding so let's add some padding in here let's do 40 I don't know that looks um pretty okay and let's give a little little padding there I'm going to make this a little bit bigger there we go just do fit with there we go cool so now we have a little bit of space in there that looks good and then let's just give everything a little bit of spacing to like 10. 10 that's looking a lot better so I get a little bit of spacing in here right but now we can see that it's kind of filling the screen this isn't super nice this isn't super nice either it'd be pretty cool if we could you know set things to be side by side yeah that'd be cool but my phone's ringing oop cool so what we could do is we could set some of these properties over here so for example if I wanted to I could say this label of of a bill I could say you know um vertical options I could say Center and um It's Not Really Gonna not gonna do anything right because it's it's nothing to Center because it's just in this vertical so it's just going to tap it down I could center it there but I can't I want to get these side by side right I really like to get that stuff side by side so what we're going to do is we're actually going to wrap each of these in a horizontal stack layout okay so that's going to be kind of nice so right here we're going to say okay horizontal horizontal and look at that now we have things horizontals cool but we're going to fix this up a little bit we'll give this a little bit of spacing too so now we get a little bit of room there that's cool I also don't necessarily love that it's like side by side 100 like it's just really in there so here what I could do is I could say let's give this a with request like 150 maybe just there we go do a hundred that's maybe a little bit better right you know I know I definitely want it to be maybe aligned with that tip percentage perhaps maybe we'll do that um yeah let's let's do let's do uh that that'll look good one 150 maybe there you go the bill so now the bill is all the way over there and this is looking pretty good um now we've got to copy and paste this a little bit too so if we wanted to uh inside of here we could we could go and now say okay let's let's just copy and paste this over here and just start to stack these things up right so stack that up stack that up now we get that tip let's do the same thing here I'm just going to go ahead and do some spacing here there we go there we go there we go looking better and then let's go ahead and do this one more time for the labels and Uncle now we're actually using like our space accordingly now the other thing I'd want to do also is kind of like a line so we have that with request so we'll just kind of copy that with request up put this with request up there it's looking better and to percentage all right well it probably needs to be a little bit bigger so let's make it the font's so big you get 180 there we go and then we'll make the rest of these 180 so I'm kind of kind of going a little uh off the rails here we kind of get the idea right so you kind of get this here looks better though I like it looks better in general yeah so now we have all those widths in there we have the spacing in there now if we wanted to we could also even though we have you know this we have this General spacing here if we wanted to we could also use the stuff we learned last week which was like not only padding and spacing but also margin so if I wanted to add a little bit of space up top I could add as margin and then give it just a little bit of space what I mean just a little bit of space there let's make that nice how's that look perfect cool I love it so now what we need to do is we need to put these I want to put these 15 and 20 side by side and the round side by side too so again we're going to use the power of our stack of our horizontal stack layouts here I'm just going to put these in here and I'm going to go ahead and these in there there we go good looks good looking good there now what we could do at this point is we have uh these buttons in here but what we might also want to do is come in to each button and give those a um different with request too so I can say let's give it a with request let's give that a with request same thing here there we go that looks good awesome and then what we're also able to do is we could add specifically over here the horizontal option so I could say horizontal options of Center and this one I think I also have to give the center as well do anything here I need to say oh we lost the screen oh my window gosh we did oh it's coming back here we go odd okay there we go oh it's back it's back cool all right I don't know why that left that's odd but anyways it's there cool all right so we have our our space we have our Sliders in here and now we have um these in here too so it's kind of looking quite a lot better uh in general um that we have going on here right so if we have this all here until I get to go and well it's looking pretty good if we wanted to we could of course we've set the space here of 10. we could also make things if we want to add margins and other things like that we could do it but now we get this you know nice number in here so I do you know our meal was 80 uh 0.00 and we can see that's adjusting to our size so we might also want to come up and say oh that bill input let's also make that the um um um with request of you know 100 for example I'm not looking one thing going fancy inside of here now because of hot reload um all my things aren't going to work anymore because all the events have been disconnected because I made them in the code behind but you get the idea we've laid out the controls nice and neat basically inside of our application cool now James I'm going to bring you off the rails here and ask you something that has nothing to do with this particular module but would I ever want to use like a table view to build up this form as opposed to going this way cable View no okay cable views um it's a great question okay so I was trying to get these centered horizontally and now we can actually see those horizontally here so this is a good this is a good example of like I actually don't need these properties because the the the container needs to be centered horizontally so there's there's that which is nice I probably need to update this learner module so perfect um so anyway we kind of get that idea in there we get these things centered on the screen so good question would we ever need a table view well table views um that's probably how I would do it I would probably use a grid which we're about to learn next but table views are an older system that I think was even deprecated in xamarin forms like don't use this anymore and they recommend not using it going forward either so okay yeah perfect don't use it don't use it there you go but hopefully this makes some sense here we got this spacing with these buttons we're kind of over here we're setting these different different heights because we're stacking these side by side and um yeah now everything's nice and aligned let me think of that looks great cool looks so much better it does look a lot better all right I like the fact that we went to a better restaurant eighty dollars rather than 10. I did step it up you're welcome yeah thank you all right cool let's go back to let's get back to the slide okay cool um perfect all right so let's talk about the grid the grid um that's Tron reference um so let's say we're building a page that has a bunch of images in it right like seven by five grid or let's say we're building a tip layout that has two columns and a bunch of rows should we use multiple stack layouts like we just did would that cause performance issues is there a better way Matt what do you think I'm guessing since we're going to be talking about a grid there probably is a better way yes grids grids are amazing because they enable us to create a consistent layout of rows and columns so you can think of these as each individual cells um that that are there so you place views inside of each cell and additionally every single child view inside of one of those cells can occupy um one by default row or column or it can span across multiple rows or columns so what we can see here in our image is that most of them here are utilizing a one by one so each of them are using one row one column but some of them here that big blue one is spanning across it automatically which is pretty cool yeah yeah so that's really neat yeah and each each cell so to speak can contain a view or its own control or exactly more than one if you wanted to but you wouldn't be able to see the one in the back exactly totally yeah and you can have you can have a layout inside of that layout if you want again not necessarily the most uh optimized thing but you can do it there now to Define these rows and columns there's a property called row definitions and column definitions which you'll set with row definition and a column definition so you define these rows and column definitions because every grid has these properties and you give them a bunch of rows and a row has a height and a width now Matt yeah you can see that that's not like a double this is different than a with request or a height request correct it's a it is length it's uh looks like a struct or a gnome yeah yeah it specifically enables us to set the height and the width of these rows and columns in different ways because sometimes you do want them to be absolute 100 by 100 for example but sometimes and most likely you want them to just automatically adjust for you based on the width and the height of the object or you may want to Define columns and widths based on the available screen real estate so you might want to say the first row First Column I should say if we had three columns is is is is is uh 25 then 50 then 25 and based on your resolution it'll automatically dynamically adjust for that automatically which is cool so those are the three types the Absolute Auto and star and you define them in different ways they have built-in type converters which we'll talk about but basically the um grid length has a grid unit type which is what I just kind of talked about and a value so how you make these is you can make them in code or you can make them inside of xaml so for example if you wanted to define a height of 100 you could create the row definition either in code or in the xaml and say equals new grid length of 100 or just set it to 100. if you wanted it to be Auto you would create a new grid length in code or in xaml instead it's Auto so as long as you just type Auto you're totally good and then you can also create a new grid length of one so one is the default that first number is thrown away it doesn't matter because then Auto is set automatically so that's how you would create it there in code now star is very very interesting and and I use this quite often when I want to specify different you know basically you don't want things to be hard coded I want things to be dynamic based on how my users uh maybe rotate their device or have larger devices or tablets that's when you use the star unit so there's a lot of text here yeah but basically think about this is that it automatically will determine the available space and it'll divide that space accordingly so um the grid scans all the rows that don't use the star size first so if you have like five rows and only one of them or two of them use the star it scans all those first and it says how much space is now available so let's say you add a thousand and you had two rows that were each 100 well 800 is available for the star stuff to split up and proportionally size itself does that make sense okay yeah yeah cool now then it just divides the space accordingly and it uses it as sort of a fraction so for example if you use a star and you have another one that's a star well those are going to split things 50 50. or you could have two star eight star that's 20 percent and eight percent or eighty percent right you can have 0.2 and 0.8 so it kind of takes in and adds them up into different numbers accordingly based on those values yeah so I like to use um um like 0.1.2 because I kind of in my mind if it adds up to one that's 100 so that's kind of how I do it there so star is different than so great question so Chris was asking how is starred and auto different so Auto will only make the the height or width the size of the control and size of it inside of it right where star will make it as big as it can based on the different objects and we'll kind of take a look at as we go through the code so for the Stars this is how you would Define it so you know you'd give it a grid length you say 2 of star or two star for example now again you're not just gonna have one row you're gonna have multiple multiple rows so this is exactly what this would look like in code so here for example to sort of Chris's question we have four rows the first one is a hundred the second one is Auto and then the other one is one star and two star so what this means is Row one is always 100 pixels always guaranteed guaranteed that's as big as it's allowed to be that's it no more no less row two is auto which means it is going to be as big or as small as it needs to be based on the object and control you put inside of it so if you put a box inside of it that's 200 in height it's going to be 200 if it's 50 it's 50. okay now what that means is that on your on your screen if you have a thousand pixels in height the last two rows are going to fight and Duke it out for the rest of those pixels so let's say it was 100 on the first one and then you put a box of 200 so you have 100 and 200 because Auto is going to space automatically then the bottom ones are going to fight for the last 700. now what this means with one star two star is that the the second one will be twice as big as the first one if that makes sense yeah so kind of 2x over 1X is a great example make sense great yep the stars are fun to work with they're fun and that's why you have to have the hot reload and really kind of shows you how everything works at once and you can lay it out but yeah grids are super flexible but now that's verbose that's a very verbose xaml there it is so that's gross and ugly so um you don't want to write that code because you can just give it an inline which is very very nice look at that automatically so you can Define the rows and the columns automatically in your code you can mix and match those types as well look at that isn't that pretty that's a great so much better that was introduced like when xamarin forms what four something or other and it's just so so much better anyway yeah look at that that's nice cool so definitely do that that's how we do all of our code so Additionally you can just be be aware of that by default the rows and columns are set to one star so that's the default there now if you do have a bunch of rows and columns and all that stuff you you could leave it off right so here for example this is a bunch of rows that you would Define they're all going to default to Star so you'd have three rows and two columns so 33 33 33 with the threes and then fifty percent fifty percent on columns you can also do that same as xaml directly in that shorter syntax like we just talked about that as well but you'd have to Define you have to Define them right and tell them what you're using so you have to put the stars there mm-hmm okay gotcha yeah um perfect so how do we add things into our grid and specify the different rows what's a good thing so everything is zero index so this is a perfect image to really Define as everything starts at zero zero so in this instance we see we have four rows and two columns okay so let's say we wanted to put a box well now we're actually that's silly that we just removed that but anyways so now let's say why would they do that the image anyways let's say you didn't have a fourth row um you have three rows so you have you have this is perfect this is actually the code that we specified earlier that's so funny anyway so you have zero one two and zero one how would you put it inside of grid the grids row of one and the column of zero well Matt you would Define and set the grid row property on the box View that's useful that the Box view is able to actually specify for itself where it wants to go exactly it's able to for all intents and purposes it's able to go off and start to access the properties of the parent control these are those extension properties that we talked about last week yep it's kind of cool attached properties I think attach properties formal name right and essentially saying hey grid I know these are your properties but listen to me this is where I want to be this is where I want to go rendered yeah yep so this is a little bit different because the Box view if you had a bunch of controls there it doesn't matter where it's at in there it just it's going to look at those rows and columns and the default is zero zero so actually inside of that if you wanted to you don't actually need grid dot column zero because that's the default right so you could leave that off if you wanted to it doesn't hurt though um now what if you wanted to span across multiple so you could do that as well so you would still set your grid uh row and grid column but there's two other properties which are row span and column span those attached properties so what's cool here is actually it says attach properties which is fine is you can just set that automatically so now we have column span equals two and then boom you get it there which is cool all right super flexible five ten minutes left perfect cool all right let's get into our knowledge check knowledge check all right so this we had a lot of good questions inside of the chat about star grid unit type the the star not Auto not absolute but star star power what is the purpose of star inside this thing is it a map fixed sizing of a column or Row the size is determined by the number specified is it B proportional sizing of a column a row the size is determined by the total available space and the ratio that each or column asks for that sounds familiar or is it C automatically allow the grid to determine the size of the row or column based on the child view it contains Now Matt a B and C are the three options yes these are all three valid options but only one of them is star yes or is it C is it automatically or proportionally yeah and I think for C when you want to automatically grow something you probably would put the word Auto in that seems right right you just say auto correct I would say so so it'd probably be and in fact boom it is B amazing that's when you'd use the start to indicate the proportional sizing based on the available size left so let's go ahead and build some stuff so we're going to build pretty much the same exact view but we're going to do it with a grid and it's going to be easier I find grids there's gonna be less yeah basically me less stacked vertical horizontal layouts less stack layouts yes if you noticed before yeah there was a lot of like oh I got to do this I got to do this I got to do this so let me hop over to my visual Studio One More Time there we go share screen and let me know if it does disappear this is a good experiment that I'm running now the screen is back and we have the exact same application that we saw earlier okay but it's uh the exercise three is the one that I opened so again I'm going to make these font sizes a little bit bigger see 20 over there and I'm just going to make this fit with perfect and I'm going to make this it's running a little bit smaller there we go cool awesome I'm gonna make these a little bit bigger so we can see them on the screen because why not label and label there you go good old the hot reloading all right cool so there we go all right so here's what we want to do is the first thing that we want to do is we're using a vertical stack layout here so instead of vertically stack laying it we want to basically take this and we want to Define and actually give a bunch of space in between here so we're going to have um two columns in our grid so if we split that up we want those buttons side by side and we want those tips to also be side by side in the middle too so on two columns but we're going to have one two three four five six seven um rows inside of here so one for Bill one for tip one for total one for percentages that's what we want to do there so um that's what we're gonna do so for each of those there so these are going to be it right there perfect so what we can do is we can change this to a grid and oh my gosh everything is stacked on top of these itself everything's zero zero so let's give it a column definitions first of star star and we do that and now we can see we have two things there right so we have two things so if for example I did uh grid dot um column one we now have those two buttons side by side and they're at the bottom of the grid so they're stacked on the VA on the Z axes there but we're also going to want a bunch of rows so let's do row definitions and I'm just going to do auto auto auto for the first three and I'm gonna put the the rest of it at the bottom so I'm actually going to put a star here so the middle one is going to be fill the rest of it so we can actually have the buttons and the tip percentage at the bottom then I'm gonna have three more here of Auto auto okay all right so the first three of this will be the bill the tip the total this will be the star which is the percentage in a bunch of space and then we have the slider the 15 the 20 um the 1520 and the Roundup round down so now all we need to do Matt is we need to start popping in yeah properties right so you're going to start popping these in so here I'm just gonna I'm just gonna add one to every single one there we go and this is the default so nothing's really happening here so that's cool go ahead and do this in here do this in here do this in here perfect oops I already have this here because I already said that all right okay now all we need to do is just start specifying some stuff so for example here we have Bill um let's start at the bottom this is going to be row six again zero index so six six now it's down there that's cool down here this is going to be five this will be one boot look at that that's pretty cool now we have the slider so this is going to be row four this will be grid dot column span two look at that now it's filling it up oh yeah I know that's pretty cool now we have this tip percentage this is in the star one okay so this is going to be three and three and one so there we go it's there now the other thing we can do is we can move these to the end though so we can use those properties that we learned about earlier for our tips that we have I'm just going to make these a little bit bigger here on the screen and I'm going to say um vertical options end I was going to move it to the bottom right same thing here and it looks pretty cool tip percentage and if we wanted to we could set the horizontal options as well it's kind of like up to us if we want maybe that tip percentage to be horizontal options and it can move that all the way to the right for example okay yeah so what's cool here is that you'll notice that the it's taken yeah you just did it it's taken the whole thing all the space all the space space yep yep so there we go so now we have this thing at the at the um at the start but it's down at the bottom over here so now we'll do is we'll just move these up so this will be two and two and again we'll do one perfect I got total total over here we're going to do is we're going to do one and one and one perfect tip tip tip total total total and again thing here we're going to put that input over here at one so there we go we get that and that's going to fill automatically so we get that nice and aligned up automatically inside of our application so everything is aligned and totally good to go we've set this grid over here and of course we can now come in to our um our grid and we could say you know grid dot padding sorry just padding of 20 for example and if we wanted to we could say spacing we have column spacing so here we could say 10 between the columns so we can actually see that very visible down here we could also do row spacing of 10 as well and now we get a little bit more space in between all of those so we can actually spice it up quite a lot more and now our application is looking pretty it looks better than the stack in horizontal layouts yeah even easier to to play around with and we can see here it's updating in real time I can enter 10 and then we should be able to look the events aren't hooked up anymore so it's not actually going to go ahead and update the UI I think I should be able to let's restart it and let's see if that probably makes my screen go it's interesting that the screen goes away when um I toggle I just reload the application let me bring it up one more time here so we get it inside there we go bring it back up for me here my application is huge so you can actually see it so I'm on an ultra wide right I've actually very happy around your head yep there we go fit with so it's big and then we can make it smaller and you can see it really automatically figuring out where things need to go same thing up and down but notice that that tip percentage because that is the The Fill now look if it gets real small it starts to disappear and that's not good you don't want that um but you can now get this in here and you can say 10 and then now we're going to get those those tips in there automatically and get that up there so it's really good bam amazing yeah it looks great it does look great so so nice to have it does it does looks nice all right cool there you go we just did it and I think it took a lot less time right we didn't have to wrap things we have to do something this is going to be way more optimized um automatically in our code yeah real cool all right okay let's wrap it up on the slides um here we go boom a few more slides of summary we did it awesome we arranged user elements automatically in the size of the app so those are the the different options the center fill start all those things we've also displayed views um in a vertical and horizontal stack layout and use the new vertical and horizontal stack layouts as well and then finally we displayed rows and columns in a grid now that's only two we only went through two that's there and that's how we did it and Guy Incognito asked can a grid be put inside of a scroll view absolutely so in that instance Matt where the things got too small and they went away you'd want to put that inside of a scroll view because right then once it gets so small where it needs more space it'll just end up scrolling automatically so great question in the chat you can learn more by going to this aka.ms so this is the summary screen there I think someone maybe will post that there we'll see what it goes um there we go awesome so this is the summary and of course if you hadn't finished and followed along with us you can also still do it um you can go there and next week no not next week no we're next week is starting ignite right we're we have a couple weeks off we have a couple weeks off in fact one month off it was really one month off wow yeah is that correct AKA dot Ms slash Maui learn live over here we have yeah that's correct October 26th so if you haven't done those yet you can go do that they're all there that's funny there we go and the next show will be on October 26th you have a whole month to finish those learn modules and follow along continue your journey and then we'll be continuing it over here we have a whole bunch of that good stuff running and um that's it that's going to be the next we're going to be doing designing consistent Don and Maui xaml pages with shared resources someone was asking about in the chat that's gonna be a fun one so do that now also Matt right after this in three minutes we're going to be doing live conversations with anyone that wants to join we've been doing these continue the conversations which is fun Matt and I hop onto a team's call you can hop on it right now at AKA dot Ms forward slash llctc learn live continue the conversation those akas are hard to get you got it that's a good one so what you can do is you can go and um join up we'll head over there in the next few minutes uh and then you can come hang out chat you can turn on your camera turn off your camera turn on your microphone turn off your microphone it's up to you whatever you want to do just ask us stuff we didn't get your question to answer come hang out do all that stuff we did a Matt that was easy we did it that was great I love it the grid layout it's all you need to know unless you just want to go one dimension there you go it's vertical all right um thanks to John for moderating in the chat thanks to Monique for also coming in and being an amazing producer behind the scenes super appreciate that um let's head over to the teams bye

Channel: Microsoft Developer

Views: 7,428

Keywords: dotnet, dotnet-maui, vs, developer, beginner

Id: p9Oo3aT8wyk

Length: 92min 56sec (5576 seconds)

Published: Wed Sep 21 2022