Xamarin.Forms XAML 101 + Hello World! (& .NET MAUI)

welcome back everyone to another episode in our xamarin 101 series i'm james montemagno and today i'm going to actually describe what is involved in a hello world application describing xaml what it is how we use it and how we increase a counter from zero up to infinity so tune in welcome back everyone to another episode of xamarin 101 i'm james montemagno a program manager over at microsoft and a long time xamarin developer almost a decade and on my channel here on youtube we have been building out an application together from scratch sort of the what does it look like to build a xamarin application in late 2020 going into 2021 these videos are a little bit longer but i really take the time to describe exactly what i'm doing what every little setting is property is how i'm building the application and what is involved in it instead of shorter sort of you know snippets of video or documentation you might read so we've been building out my my coffee application which will have a list of coffee equipment how to grind the beans how to you know make coffee and truck attract my coffee consumption and that's what we've been building out so if you haven't seen the previous episodes i'll put them up there in that corner or down there in the show notes definitely take a look at those they're a xamarin 101 playlist and additionally don't forget you subscribe and hit that notification bell so you get notified whenever i put a brand new video out alright today we are going to understand hello world button clicking events and what it means to create our user interface in xaml okay so let's go ahead over to my desktop in the previous episode we cleared out our xamarin form shell template and we started by adding a brand new page in our application so it is blank it has a beautiful orange background we can see here and it's a blank page we added a page to our xaml now there are two ways to build user interface with xamarin forms either by xaml and xml markup which i prefer personally or with c sharp or f sharp with just code i may create a video on how to describe the exact same thing i'm doing here with that but i prefer xaml so that's what i'm going to go with okay so let's actually describe xaml well let's say xml based markup here and what it does is it describes what the user interface is here we see that we have a content page and that content page has content inside of it which we can see here now fascinatingly enough there are parts of xaml or xml that are implied automatically in the xaml so for example the content page dot content is implied by whatever's inside of it so if i wanted to i could delete this here and it will work just fine it's the same you know background here if i go back to white for example here we can see it's still valid xaml markup whether i have content or content page that sort of dot is a property on the page and which is what you would access in the code behind so here we can see that i have resources content triggers toolbar items i can set these properties some of them up on the direct node of content page or by adding them in here so i'm going to add a an array of toolbar items for example or i may set the dot resources inside of here which you can see is is a bunch of resources that i could access in code here so some of them are implied automatically which the route to the default of a content page is content so that's automatically implied here now i will say this is that we're going to be putting different layouts and views or controls inside of this content page the nice thing about xaml is the spacing the indenting it doesn't matter any at all it doesn't matter these are on new lines that they're not on new lines anything like that it doesn't matter as long as it's valid as long as it can be parsed you're good to go so um a few other things in the xaml before we continue is i want to point out that we have some information up here some default namespaces the default is the xamarin forms namespace we have another namespace which is x here we can also note that if i was to go to my app shell xaml up top here we see we have my own namespace of local so you can create your own namespaces just like you would have a using statement inside of c sharp same thing here so if you had a a model or a view model you could access it there and then we have properties so background color white for example is a property that we can set there now if we look at what's in this page we have a stack layout which is a stack of controls which are horizontal or vertical and by default they stack on top of each other vertically there are other properties inside of here such as orientation which i can set to horizontal or vertical but many controls have default properties set on them so they don't need to be overwritten i don't need to explicitly say that it is vertical the xamarin team has decided that that is the default that most people are going to use now if you want to get access and look a little bit further into what's available you can go to docs.microsoft.com xamarin that will take you to the xamarin documentation here under xamarin forms you can see all xamarin forms docs which i think is great and then here you'll see user interface and say see more and what this is going to do is it's going to give you concepts views command type controls different settings that you may have and i really like these concepts pages layouts views and this is going to describe what's available on each of those so here's the layouts and we noted here that in our code we had a stack layout every page can have one item inside of it so you have to have one layout inside of it or one control if i didn't put a stack layout and try to add multiple labels i it wouldn't be valid xaml so for instance if i was to remove this stack layout here this is still valid what's not valid is me trying to put multiple sort of items inside of the content so you can see content is set more than once it's not valid anymore so we'd have to remove those and that's where layouts come in it allows you to have multiple views inside of some sort of layout if you will which describes how those controls will be set out so for example we have a scroll view which can scroll a bunch of things inside of it a frame which has frame a frame with a border with rounded on it which can have items inside of it stack layout absolute relative grid or flex i mostly use stack layout and grid grid's my favorite it's rows and columns flex layout is comes from the web it's a little bit more involved but this will walk you through what all of these are and you can tap on for documentation then views on the other hand are things that you put inside of layouts so things like a box view an ellipse an expander a label a line an image a map these are all the controls built on oh there's me built into xamarin forms so polygons rectangles web views buttons image buttons radio buttons refresh views search bars all these things and that's just stuff that's built into xamarin forms there's tons of third-party controls that you can get access to as well of course um too so all sorts of things here so let's go back to our code and let us for example add some other items in here so i'm going to add that stack layout again there we go and i'm going to go ahead and push this down underneath it so we have opening tag close tag i want to point out here that here stack layout has an open tag items inside of it and then a close tag this label can be described in multiple ways i can put a label with a open and close tag and then i could do label dot text color and i could describe that color as a property it could be very verbose but most of the time you can just auto close it with a forward slash and then a carrot here and what this is going to do is say this is where it ends this is the same as open slash label the close tag this is a close tag now let's bop around a little bit in here because we see that this says horizontal options and vertical options what this is saying is where do you want to put this label inside of this stack layout and it's saying go to the center and expand horizontally also go to the center and expand vertically so if you want to see what this is doing you can always set the background color to let's say orange and see that this stack layout is housing this label which is inside of this that has a label inside of it that's in the center and is expanding things out as much as possible and we note that the orange is only surrounding it if i was to put let's say a button down here and say text click me what we're going to note is that the background of this label is still in the center but it's expanding and taking up as much room as humanly possible okay that's really important to note that this is trying to say i am going to take up as much room as humanly possible on this page and anything above below left or right of me i get priority i'm going to expand or contrast as much as i want so that's that means if i put a button on top of it that we're going to see that that label continues to stay in the middle try to take up as much room as possible in the layout but the label itself is just inside of it right it's just inside of it and it's it's only drawing this much space but the layout is handling this for me now comparatively if i was to have a grid here for example which is my favorite we can see that now there's a big button inside of here and in fact there this will probably be click me too the grid has rows and columns and right now i've said that it has one row one column and it is just stacking items on top of each other so if i really wanted to recreate that view what i could do is say row definitions and i can say star comma auto and what this will do is it'll say i'm going to define two rows one star being as much of space as possible and then the second one or zero this is zero base so zero one one is going to be only as big as it needs to be so by default everything is in grid row 0 column 0. so if i want to move this button into grid dot row 1 i type grid.row 1. and we get our view again which is nice here and i can then define this different if i want to so for example if i really wanted to um let's say make this button and this you know be squished in the center i may do something such as [Music] star auto auto star here which is four rows as much as room possible small small as you need to be as big as possible here i might do grid dot row one and grid.row two and now we can see that they're stuck in the middle here and really at this point this center option it becomes a little mute because here i'm just gonna tell it you know just only center it you're good to go and i can of course move this back if i wanted to say horizontal option center then it's going to be center again in our screen and we're good to go so stack layout just stacks things on top of each other you can combine these things for example too so if i wanted to put a stack layout inside at column zero up here if i was to say background color red for example now we can see it's filling that up i could then put you know a label in here and i say label text hello right and then i can really fill this up with as many as i want and it'll it'll be as big as it needs to be to fill those items but what this is saying is this should be equal size as take up as much space as possible and i'll link to documentation for grids and stack layouts too but you'll see this here being able to combine these things but again i also want to note that i could change this horizontal to to orientation to horizontal and i see hello move horizontally stacked all right well let's get back to what i actually came to build um which was a button clicker and understanding uh what and how i interact with these items so so far here we have welcome to xamarin forms we can make the font size uh our text the font size there we go font size here let's say large make it larger on the screen it's going to create a little bit more room here and we want to interact with this label and this button because when i click me i want it to actually update this label now there's many ways to do this and we're going to use mvvm or model view view model architecture and data binding in a future episode but i want to show you what xaml is how things are created and how you access these items so i mentioned up top that there's some default namesprac namespaces that were brought in and the default with no extension is everything xamarin forms that is why if i was to let's say just stop debugging here and bring out the toolbox over here all of these items i don't need to add anything onto i don't need to add forms colon whatever colon anything like that it is in the default namespace but there are extensions and custom controls and other things that are inside of new namespaces and x colon gives us extension into the xaml language by default so a good example here is that button and label are just views on our page and in fact if i go over into our properties over here we should be able to um see let me close this down a little bit there we go we should be able to see that on our label over here we have background color automation class id effects all sorts of things on here right we have all sorts of different items on here and one of the most important things is to get access to this from our code behind and remember that we have code behind here and what i really want to do is add a click handler and then increment that count right but here i don't have like a button i have i can create a button and i have image buttons and i have radio buttons but i don't have access to those ui elements i kind of do actually um if i was to go into this dot content i could look at all of those items inside of here and iterate through them find by name find i could try to find them right it would be a little bit tedious to loop through all the items but technically the code behind has access to the ui but we want to keep it simple right we want to just access these buttons and access these labels automatically okay so let's first do a few things here i'm going to clean up my my code space here and the first thing we want to do is get access to this label so what i'm going to do is go x colon and this is an extension inside of xaml that works with all xaml it's a default sort of implementation it gives me access to a data type field modifiers uid but more importantly name and here i'm going to say label count okay and this is going to do some special things for me same thing here with this button i'm going to say x colon name button click okay and what's cool is that as soon as i give it a name i can go into my code behind here and i can say label count and i have access to that view automatically so if i wanted to i could say hello from code behind ok and if i run this application it'll no longer say welcome to xamarin forms it is now going to say label count it'll be set to hello from code behind and let's actually take a look here as this compiles up and deploys i can access i can set i can modify any property anything at all inside of my code behind directly so for example here let's let's let it run and we'll see that in our ui it's going to say hello from codebehind just like i said now we want to add a button click onto this so i could come in and i could say button click which is the name of the control and we can see that i have all sorts of different properties and events here in my intellisense i can get access to focused pressed released unfocused here my intellicode is going to say clicked so i could actually say plus equals and tab it'll create the event handler for me that'll just do that for me there that's kind of nice or if i wanted to what i could do here is actually go back into my xaml and go ahead and add the clicked event right in my xaml notice here that when i do this it says new event handler and it will automatically use the name of the button that i gave it here and add a clicked event just like we saw in the code behind and it go ahead and it adds it right here same exact thing both of them accomplishes the same thing but less code in my code behind it's sort of descriptive that when i look at the xaml oh there's an event back there like where are these things coming from i think that's also an important thing to to take a look at and if i go over into visual studio there's the show all files inside of here and if we drop down and where is it at it's somewhere in um not in there obj file maybe yep i think it's inside of here appazamel where's the coffee view views here it is it took me a little bit to find it it this will show us like all of the hidden files that were generated for me and there is this xaml g dot cs and that is a generated of code file for us and i want to show you this just because you may go through your entire life of xamarin development and never realize that this stuff is automatically generated for you by the ide automatically so here what this is doing is it's saying that there is a generated code attribute right here of label count button click here's extensions that are being created for me automatically and it is basically doing the find by name for me automatically and creating that for me and setting it up all automatically so i don't have to worry about it later inside of my code file here and that's what those x names and different events are handling for me automatically some of them are in the file some of them when i parse it it will try to detect that there is a button clicked here automatically so it's important to know that when i add those it is generating that code behind for me but i just don't have to do it it's just there for me automatically so that's nice all right the next thing we're going to do is do a button click handler right so here i'm going to say int count equals zero down here i'm going to say int plus or count plus plus there we go and then notice here that you gotta kind of be careful of your butt and click handlers because you could assign this click handler to multiple buttons technically so if we were doing this right and i wanted to access that button i could cast that sender like i could say var button equals sender as button okay and i could i could check that here right so is this actually a button and then if it is i could do button you know don i could i could add and inspect the variables here but we're going to use the label which you know exists so i'm just going to say label dot count label count dot text i mean and set it equal to you clicked and then here we're going to use string interpolation and i'll say times so one time two times just put that right there so we're going to increase it put it here and we're going to increase the button count every single time we click it and we can have breakpoints here so we can add a break point inspect variables here maybe instead of saying hello from the code behind because we don't really need that we'll just go ahead and update it in my xaml and say click me there we go and then i'm going to hit debug here so i'll go ahead and debug this application so again what's nice here is that this clicked event is automatically going to be registered it's going to be parsed it's going to be located in the code behind these label counts were exposed for me automatically which is really cool and we'll get our application up and running again and we'll be able to click on our page and debug it too i think is also really cool by adding that breakpoint so let's go ahead and click our button there we go we get a break point here we can see count is currently zero if i step over it count is now one here we'll see that it is one as well we can go ahead and go down and see that the text is you clicked one times click events are going to happen on the ui thread so it's it's okay to access other ui elements here and we've incremented our click there we go which is very cool now if i don't like that orange i can remove that background color there and it'll automatically update there too and now notice it sort of kept its state it didn't refresh the page it didn't remove everything and that is because i have inside my option under hot reload the changes only so that means i don't have to save this is the new implementation of hot reload 2.0 so you can double check that under debugging hot reload changes only preview that's what i use it is fantastic and it keeps my state of my page so i have to refresh it so yeah so i can come in i can modify it if i want this to be small it'll be small if i want it to be large now it'll be large again and now we're hopefully understand a little bit of xaml what it means how things are defined how we lay out items either in a stack layout or a grid you know we're going to get in more details in future episodes but i wanted you to understand xaml its relationship to the code behind where things are things are automatically generated for you and more importantly before you get too involved looking at things like mvvm just hey how do i slap down some code get something on the screen and start prototyping and moving through my application really quick anyways i hope that you enjoyed this video we're at the beginning of this application don't worry we're ramping up in these xamarin 101 videos i like to go a little bit deeper so they are a little bit longer but i think this is great valuable implementation and or sorry great valuable knowledge hopefully coming from me on to you and if you do like these videos make sure you give them a thumbs up and if you really want more of them hit that subscribe button and that notification bell so you get notified when i come out with new episodes in this series or any series here on my youtube now don't forget that i also live stream on friday at twitch.tv slash james montemagno i will leave a link in the show notes to the project in all of the previous episodes that you can catch up on so you know how to start your application and get to where we are today and in the next videos we're going to start to take a look at mvvm model view view models understand data binding understand commanding and everything that goes into that which is really what we're going to be using for everything going forward in our application all right thanks everyone for tuning in again hope you have a great day and thanks for watching

Channel: James Montemagno

Views: 18,565

Rating: 4.9941778 out of 5

Keywords: xamarin, xamarin.forms, xaml, ios, android, visual studio, visual studio for mac, uwp

Id: GLfR2uosoSw

Length: 28min 10sec (1690 seconds)

Published: Thu Dec 31 2020