.NET MAUI Tutorial Full Course

well hello Internet and welcome to my.net Maui full course in this tutorial I'm going to present to you basically everything you'd want to know about.net Maui so that you can develop for multiple platforms so we're going to be able to develop with one code base for Android iOS Mac OS and of course Windows it has numerous different layout options as well as different page types including numerous third-party libraries because.net's been around for so long also Maui uses data binding so when data changes that's going to automatically show up inside of your UI and it will allow you to develop much faster and of course because it's dot net which has been rated number one for numerous years in a row and stack Overflow as the most loved framework you know that you got a great tool here so what exactly is going to be covered this is basically a rundown of the main part words that I will cover in this tutorial along with installation and numerous different examples and I have a lot to do so let's get into it okay so now what I'm going to do is I'm going to take you through the process of installing Visual Studio setting up the emulators and then ultimately showing you how to connect your mobile device and use that to run your programs what we're going to need to do of course very first is go and get visual studio if you just type in visual studio.microsoft.com you get to a page like this and you want to click on download visual studio here on the left or if you're on a Mac click on the center area we are going to be using the free version which is called community 2022. and after you download it's going to pop up and you're going to have to click on that you want to open up the file of course and an installer is going to come up click on continue and then what you're going to want to select this is kind of up to you but we're going to do desktop development you can see where I have all the check marks of course you want.net multi-platform app UI development you have to click on that universal windows platform development I also have a check in C plus plus later I'm going to do an updated Unity tutorial so if you want to watch that go and download that as well and then you're just going to wait for it to go and install after you do that you're going to open up visual studio and basically what I did was I set up my system so that I could have as many errors as humanly possible so that hopefully I can solve any errors that you might have so what we're going to do is we're going to click on tools we're going to go and set this up for Android I'm not going to set it up for iOS because I have to buy a developer's license and all that stuff we're just going to use Android for now everything is going to work for IOS as well but you're going to have to buy a developer's license okay so click on tools click on Android then go to Android device manager and you're going to want to click on new you're more than likely not going to have pixel 5 inside of there so click on new whenever you do it's going to say create a default Android device you're going to say create and you're going to have what you have here on the screen right now now if I go and click on start you're going to see that it says turn on hyper-v feature to switch to the native all that stuff okay well you're going to need that if you want your emulator to work well otherwise you're going to be going and building and waiting forever for to test your application so we're going to install hyper-v and this is specific to Windows in this situation so we're not going to click on run anyway we're just going to close this and then what we're going to do is we're going to come down here and we're going to say Windows features is what we're going to type into our little box down here and you are more than likely going to want to upgrade to Windows 11. now if you go and open up Windows features what you're going to see here is the hyper-v is not checked it's at the very top of the little box here on the screen we can go in and we can check it but it's still not going to work so I put the check inside of there and I'm going to click on OK and then it's going to search for the files and it's going to install the files what you're going to also need to do is go and get dot net 7. so you're just going to click on this and you're going to click on the x86 version and you're going to download that and whenever you do it's going to show thanks for downloading and all that and you're going to click in the lower left hand corner to install that so just click on open and this is going to open up you're just going to click on install and click on close after it installs all right so now what we're going to do is we're going to come in and go file new and click on project and you're going to want to open up a net Maui app you can search for C sharp but just make sure you select that and you're going to click on next in the lower right hand corner and you can name it whatever you want to name it and then dotnet6 I know we have seven but we're just going to use.net6 for now and click on create all this stuff's going to open up here you can click on start without debugging and it's going to say that it is not accelerated see I set it up so that things are going to go wrong and I'm going to fix them okay so you can go and run that if you'd like it's going to be terribly slow but what we're going to do instead is just go into Android and then Android device manager and you can come in here and you're going to see your device and we're going to click on it and we're just going to delete it okay so it can't be done done no problem delete it okay sorry I took you through that wheel but I just wanted to show you all of the problems you're gonna have and then I'll show you how to solve them okay so if up here we have our emulator and we can create a new device if we would like and here creates a new device and now what we're going to do is we're going to go and get the command prompt open so we're going to type CMD open that and if we type in systeminfo.exe you're going to see all this information about your your computer so we're going to scroll down to the bottom and you're going to see here that we said we wanted to install hyper-v and to a certain extent it did but virtualization enabled in firmware is marked as no now this is going to be 100 percent determined based off of the type of computer you have and the setup you have so what you're going to want to do is you want to type into Google enable virtualization in BIOS followed by whatever the name of your motherboard is so you're going to type in that stuff and then it's going to tell you exactly what to do to enable the ability to use virtualization with hyper-v okay so there's that's up to you sorry I can't do that for every single type of setup after you do that then it's going to say virtualization enabled in firmware marked as yes whenever you search for that again systeminfo.exe all right then we're going to open up Windows features again just going to type that Windows features down there and you're going to see here we have hyper-v checked we're going to go in now and we are able to check hyper-v hypervisor hyper-v services and hyper-v platform and then click on OK actually you're also going to want to scroll down before you click on okay and hopefully you just type in Windows features again and pull this up and you're going to type in uh also put a mark where it says Windows hypervisor platform and click on it and it's going to go and do that and it's going to require a restart so click on restart now and what we're going to do is go into Android Android SDK manager and we are going to go and make sure we put a check mark where it says Android emulator hypervisor driver for AMD if you have an AMD processor in your computer all right so you're going to apply changes to that and it's going to bring up a little agreement window just click on accept and we're going to go Android Android device manager again and here we are and we can click on start and it's going to open up with the emulator and it is going to be considerably faster and this is the application you get by default whenever you are first developing a Maui application and this is what it looks like now if you ever see an error that looks like this where it says another emulator is still running wait for a sec okay well the if this does not if this continues to persist this error here what you're going to want to do is go down in the search box and type in task manager and you're going to specifically look for qemu sometimes this hangs and you just click on that and and then click on end task and that will end that problem but now if you don't want to go through all of the issues that I just covered there a lot of them can be covered just by simply plugging your telephone into your computer and I'll show you how to set up your phone for developer modes and get it working inside of visual studio now okay so plug your phone in USB and open up settings and then you're going to go down to the settings area click on that and then you're going to click on about phone and and we're going to scroll until we see build number and you click on that seven times and after you do that you enter in your PIN number and you are a developer developer okay then we're going to click on system and then after that we're going to be making a couple other little changes here we're going to go down to developer options click on that and we're going to set it up so that we can use it both with USB as well as Wi-Fi first off we're going to hit this little check mark where it says USB debugging turn that on and click on allow that and it's going to give you a little message that that's been enabled at the top of the screen like this and then we're also going to set it up for wireless debugging also might use it might not always allow a network click on allow and now you have that capability now we're going to go back into visual studio and just say newproject.net Maui app just like we're gonna do all the time come down here and click on next and you can name it whatever you'd like because this is just testing to make sure that your telephone is going to be able to go and load your custom apps that you have so I just call it this test Android device go down here and click on next we're going to leave it.net6 for now and then you just go and just use the what came up but we're going to change this from Windows machine to Android local devices and your phone should be on there if you have it plugged into a USB port and then we're just going to say we want to run it and it's going to take a while to build this and load it onto your device but then after it does that you'll be able to update and test a whole bunch of times without any problems at all and it's going to say that it found device as the final part and then it's going to say that the application has loaded C found device Android application running and this is what it looks like so there you go okay so now I'm gonna give you a rundown of what it's what actually goes into creating an application so we're going to go new project and it's going to open up and we're going to select.net Maui app you can come up here and select C sharp if you would like all platforms now that's fine just make sure you have that selected and then come down here and click on next and we are going to name this Maui app one we're just going to use the default you could save it wherever you would like to save it and that's all good click on next again and we're going to leave it at net six click on create and here we are so here is our application now basically it's a good idea to understand all of the concepts of what is going on here I'm going to be using the emulator if you have an Android device I highly recommend you use it or if you have an iOS device I would use that I'm going to use the emulator just so that I can be able to show you on the screen what is going on so after I select the emulator I'm going to click on the play button and it is going to build and you can see it loaded really really quickly on the screen and that is because I have the hyper-v and all the other stuff set up with it and then you can see here is our final application and just simply what it does is whenever you click on it it goes and continues to add how many times it's been clicked and that took on my computer just starting the emulator from the very beginning to loading everything right around 30 to 40 seconds but as we continue working with the emulator don't close it just keep it on a side screen or minimize it or whatever and then whenever you continue to make changes and run as it's going to automatically update and unload really really quickly well let's get into what exactly is going on with these files over here if we click on dependencies basically this is just showing that we're going to be able to develop on all these platforms so Android iOS Mac and windows and we'll get more into the specifics of that as we continue inside we have properties and inside of there we have launch settings and this is just going to Define different configurations that we'll get into more as we continue onwards with our tutorial and we have platforms and it's going to contain specific content for each platform that we're going to be developed for and as you can see all of that information that is right there down inside of resources this is going to contain all the elements that are common for all of our different projects we you can see there's that robot that was in the emulator there it is that's where you're going to store your images and then you're going to have custom fonts app icons and all sorts of other different styling and so forth stored inside of resources which we'll get into whenever we start actually making real applications app.xaml right here we're going to Define resources that are going to be used in our application I can close that inside of app shell this is going to Define the initial content for our application and main page is going to Define elements like images and labels and buttons and everything's going to be structured using this HTML like format and I'll get more into the specifics of exactly what's going on there and then finally we have the Maui program.cs and this is going to be the code that underlies everything else so we go and we create the different let's go here okay so we can create the images and the labels and the buttons so you can see right here this is called counter button and you can see the text that's on it but more importantly click what that's saying is whenever this is clicked it's going to go and execute a function inside of main Cs and you can see it right here on counter clicked is the same as on counter clicked so every time they click on that button what is going on is we're going to be incrementing a counter and then we're going to go by referencing counter button right here What's this called it's called counter button and we're going to be able to go and change the text that shows up inside of the counter button just that simply so you can see that is basically just how we are going to be able to handle events in combination with the xaml files as well as the code files that we have here now I'll dive more specifically into what exactly is going on in this main xaml file now what we have right here we'll get into Pages that's what I'm going to cover next actually the different types of pages that we can use but basically here is where the namespaces are going to be defined and they provide data basically that we can use on our different pages and most specifically they deal with specific versions now the first that we have up here is going to refer to a specific version of Maui that's what this guy is used for right here and uh we Define here also the class that works with this xaml file and you can see right here that Maui app one is going to be the namespace for our project and we get down into our actual code that we have down inside of here and basically this xaml code is going to be used to create the graphical user interface and they are our three xaml files that are Auto created being app and app shell and main page as you saw previously and each of those is going to have a c-sharp code file that is associated with them so if we open this up you're going to see the CCR files that are associated with those xaml files and I showed you previously how they work together basically app the app xaml file that we have here has an application tag and it's going to Define let me just go and open it up if I don't already have it opened up no I do not so here we are so here we go and this is going to have like I said an application tag right here and it defines basically the page initially launched for our application then we have main page xaml and it has a Content page tag at the top as you can see right here and it displays a layout as either a grid or stack layout we'll get into those after we cover pages and then we have app shell and it has as you can see right here a shell tag and here we're going to Define features the app has and we can describe visuals and navigation elements and or navigation options and a whole bunch of other different things uh what else would I like to cover here well basically um we have here a scroll View and it is basically just a Content view that's going to allow for the scrolling of the content on the page and it is going to surround all of the content inside of your page then you have our vertical stack layout this layout is going to surround child elements and stack them vertically and it has property attributes as you can see right here and spacing more specifically is going to define the space between each child padding is going to define space between the layout and the children and we can also Define the children should be centered as we have right here um down here inside of image as you may guess this is going to load an image from a local file in your Resources directory and it has a description defined height and in the a situation a request to be centered we have our labels as well and basically labels Define text that you want to display and the heading is a defined size of one to nine that we will get into here is just something important to know and you can also Define many different font attributes including the font you want to use the size the color and a whole bunch of other different things and then finally we have our button down here and basically a button can be interacted with and its name can be defined in the code like I showed you before to manipulate the button dynamically and we'd find that every time the button is going to be clicked that the on counter function or method is going to be executed and the text inside of the button is going to be updated that's a good rundown of exactly everything that goes into the application and now I'd like to start messing around with Pages all right so now I want to give you a rundown of different pages you can use and all this code is going to be on GitHub for free so what we're going to do is we're going to create a new project so we'll just select.net Maui app and next and Maui app2 perfectly fine click on next and I'm Gonna Leave that.net6 create and I'm keeping all these separate so that it's very easy for you to be able to locate all the different Parts okay you're mainly going to use content pages but there's also going to be what are called flyouts and they're also going to be tabs so I'll show you all of them now the first thing I want to do is I want to go into app xaml and specifically I want to open up the code and what I'm going to do here is we're going to Define our initial page which is basically what is going on right here but what we want to do is we want to go and actually create a navigation page and then we're going to make some changes to it and then assign a main page and then we're going to have a page that's going to just have buttons on it and those buttons are going to allow us to jump to all of our other different pages so to create this guy I'm going to call it let's just call it nav page is equal to and new navigation page is that selected there we are and I'm going to have it go to the main page so I'll say a main page like this and there we go and then what we're going to be able to do is set different properties and I'll just show you a couple so we'll do nav page Dot and let's say we want to have the background color be set to I'm going to say colors and keep this simple and just say purple now it's very often very useful to be able to see all these different color options you have if you just type in Wiki and web colors it's going to show you on this page all these different colors this can make a little bit easier to make nice interfaces and the names that you're going to use are going to be the same as is available here so that's something so Wiki web colors remember that and it should make designing nice interfaces a little bit easier I'm also going to define the text let's just copy and paste this and this is called bar text color so text color and let's make that white just to keep it simple now that we have all that set up we can have our main page be equal to our nav page let's come in here get that and go nav page like that and that is basically just going to Define like I said the initial page now what I want to do is I want to create some more pages and like I said previously you're mainly going to be using content pages so let's create a new page here I'm just going to right click on this I'm going to come down where it says add and I'm going to say new item and you're going to want to click on.net Maui over here and then what we're going to say we want to create is a Content page so we're going to select this xaml file and let's just call this content page or something I'm going to call every single one of these demo so we got that created so let's create it and what is this I do not need this so I'm going to close it because we're going to be working with a lot of pages and I don't want to get overwhelmed with too many of these different pages okay so we have the xaml file and you're also going to see there's a Code file associated with it and we might as well open that up also so let's go in here to this page and I'm just going to make a couple changes here I'm going to add some buttons to it that's mainly what I'm going to do so I can leave this label inside of here that's perfectly fine and you can see it's labeled as a Content page up here whenever we create the other different page types we are going to have to change them so I want to create a button and here it is and I'm just going to give it X is equal to and it's going to say main page on it and this isn't going to be a pretty interface this is just what I'm doing here so don't worry too much about me I'm not worried about it being pretty okay so whenever I do this it pops up new event handlers what it says here with a little icon next to it I'm going to click on that it says button clicked and if you jump over here you're going to see this event handler automatically was created for us which is really great and I can just go and close that off and create a couple more buttons and then I can go and Define over there in those methods what exactly happens what else am I going to have I'm going to have a fly out page so I'm going to call this fly out page and let's just go and whoops let's get rid of this part right here and see if it'll automatically create it for me or if it doesn't like the fact that I went and closed that off um it doesn't like that so I'm gonna I'm gonna create this on my own you can just go button and clicked and one or whatever whatever and then we're also going to have a tabbed page so tabbed page like that and um I don't need page twice and this is the text that's going to appear on our buttons and we'll just make this to just to stick with their naming conventions and this is a vertical stack layout everything's going to be stacked vertically okay so we got this here now what am I going to want to do over in the actual code area well I'm going to want to come in here and I'm going to want to redirect to a new page how we do that is we say navigation dot push asynchronously and just go just like this and this is actually going to be the new the main page is where this is going to take us so we're going to leave it exactly like that and then because I went and copied and pasted it didn't go and recreate these for me so I'm going to create them here live and what's this going to do this is let me look it is the flyout page so make sure I have the right thing here set up and this is going to be called uh fly out demo is what I'm going to call it's going to give me an error of course so let's do fly out demo hopefully it doesn't get too mad at me for doing that and copy and paste and then this was Button two and for this one we're going to call it a Tab demo and everything there is perfectly fine I am going to just go and save that and of course it's giving me errors because nothing is there so what I got to do is actually go and create these and then hopefully they'll go away so I'm going to go up here and right click and say add and new item again.net Maui make sure you click on the xaml option and then down inside of here this is going to be let's create flyout demo so fly fly out demo xaml and add that inside of there and then let's also go and create the other one and it is called see it went away the error went away Tab demo let's just copy this so we make sure we name it the right name and we're going to create this so we'll go here add new item very important.net Maui and make sure that you have the xaml file selected and then this one is going to be called app demo boom both those errors should go away that were inside of there where were they why does this keep opening I don't need this or do I oh it's updating that's why okay so we'll just save that and um here's this there's the content page and you can see both of these errors that were previously there are now gone so what else do I need to do with this content page nothing really um this is just going to be a navigation page very very very very simple so what I'd like to do now is go and get the main application part so let's go to this is main page xaml and I'm going to make a couple little minor changes here as well main change is down here I'm just going to leave this be called counter button and uh the text is going to be demo page and this is going to again switch different pages and so forth and then we have on counter clicked well now it's not going to update the button now it's just going to navigate away so let's come in here and let's just go and comment this out just for simplicity's sake so this is commented out and there we go so now like what would I like to do inside of here well I'm going to just navigate to our content page that we have that we created so I'm going to say navigation Dot and push async and new and then this is going to be the content page demo is it there no it is not content age demo on 10 page demo and parentheses and a semicolon at the end and that is all I'm going to do there so this is going to be the main code area and I can get rid of that and I can get rid of that because very often I get overwhelmed whenever I have too many different files open okay so now we'll get back over into our flyout now this is labeled as a Content page it's an auto content page it's a flyout page so we have to change that so we'll say fly out page and a flyout is uh like an application where you can drag like here I'll bring it over here okay here's my emulator it's still running and I'm not closing my emulator every single time if you want this to run fast you don't want to do that content page is if you put your finger or your mouse in this circumstance on the left side and then move it this way it's going to open up a pane that's going to have other content on it so it's like a draggable little interface okay so I changed this to file page automatically changed that to fly out page and then I just have to think about what I would like to do with this well I have my title set out for fly out demo I'm also going to Define what type of flyout behavior there's multiple different ways to use flyouts pop over is going to be to the fault you're also going to have a split which doesn't hide the fly out and then there's a [Music] um let me think and the other options um um I think that's good I think that's that's basically the main idea with the flyouts so we got this so we have to Define this I'm going to say fly out layout behavior and this is going to be pop over I don't need to do pop over um but I'm just going to type it in there because that's the default way of working with it and you can go in there and type in Split instead and experiment to your heart's content to see what that looks like and we're not going to have this so we're going to get rid of the vertical stack layout we have inside of here and what we have to do is Define what content is going to be on the fly out and what content is going to be on the detail page so let's come in and do that so we'll say fly out page dot Bligh out and there we go and then I'm going to create a content page and the title I'm just going to call it my fly out this and there's my content page and then I'm just going to keep it simple and just type in label and some text and the text is just going to be fly out test like that and then you can Define all kinds of different properties so I'm going to say something like horizontal text alignment that works and let's just have it be centered and then also we have vertical text alignment let's also make that centered and I'll make prettier looking stuff here later on but for now we're just going to keep it simple because I want you to completely understand everything that's going on okay so we have the fly out part now we need the detail part so let's just copy this because it's largely the same and this is just going to be changed from fly out to detail like that automatically updated and I'll call this fly out detail how about that there we are and um what else would I like to do here actually no I don't even want the title I don't even need a title on this let's just get rid of that and instead we'll do fly out detail here um okay and leave it centered and everything and all that is good make sure all your tags are all closed that you have open here okay and we will save it and now what we need to do is go into the the I'm just going to close this I'm gonna go fly out demo open up the code area this says content page you cannot have that has to say fly out page otherwise you will not have a working program other than that you don't need to change anything so you can just save that and then close it once again then we're gonna have our um our tabbed page or I can accidentally clicked on this let's open up the xaml area inside of here and this is going to be changed to tabbed page so tabbed page like that and Tab demo don't change any of that stuff and we can also come in here and make a whole bunch of different changes here so I'm going to say I'm going to use icons and a whole bunch of other different things so that everything isn't too terribly ugly so I'm going to have my background color so there's the background color and let's just make it navy blue and then select it and if you're not getting these blues and all this stuff popping up inside of here I can tell you why you probably did something like this probably went add a new item and then you clicked on you didn't click on.net Mallet and you didn't click on this saml file okay let's just cancel that but that's probably you're not seeing all these different things or you're having struggles with Visual Studio not automatically generating what you need well that's probably your problem all right why did I type selected here it didn't mean to do that okay so let's get rid of that and then what we're going to do is maybe we want to Define our bar text color and let's make that white and we'll do selected tab color tab color and we'll make that remember I'm going to use the wiki colors here to try to make this look half decent so light sky blue and then one more let's do unselected you should have all of the if you're using tabs otherwise it'll look God awful terrible okay and uh dark slate blue okay slate blue and you can see it pops up there all right good now what I'm going to do is I'm going to have some different icons and I used some icons from an image library that Microsoft actually provides and it's the code it's in the description it's on GitHub so get it and you can get this link but if you just type in Visual Studio 2022 image Library it'll it'll take you there or you can just you know go here but we're not gonna leave that there obviously okay so what do I want to do now that it uh I I have my different images I just have to get them so here it is and I'm gonna go over in my Resources Director I just copied them from a folder and I'm going to click on images and paste and there they are so there's all those all right so now what I'm going to do underneath my label I have here I am going to come down here and do I want to have that there wait a minute I don't want this at all so let's get rid of this vertical layout don't need that and we'll just throw in our different um other content page inside of here so we label these as content pages so content page and then we give them titles so I'm gonna go call this tab one and then if I want to use an icon I go icon image source source and add favorite dot sfd that's what this is right here so I'm just gonna these are not going to do anything they're just gonna look semi nice so s VG file and then we'll close this off like this and content page all right so we have to do this for all of them so let's move this over here a little bit so we can see this a little better and paste this inside of here oh I guess I forgot to copy let's go and copy it copy and then paste it inside of there and this is going to be Tab 2 so Tab 2 and for this one let's go add friend so friend and then another one we'll call this tab three and this is going to be what did I not use add image so let's throw image inside of here there we are so we have all of our content there for our different tabs as well last thing we need to do here as far as I know um let's go and save that again is to go and go to our tabbed code so Tab demo and here is our CSS code you have to change this to tabbed page otherwise you are going to have all kinds of problems now go file and do a save all and then I am going to use my emulator so I'm going to go Android emulator this guy right here my emulator is still open on my screen by the way see here it is all right just keep it open let it sit there and hang out and then I'm going to run it and see if I typed anything you have any errors here I very well might and here we are so if we click on our demo page to take us those buttons are horrible but whatever I'll I'll get into the next example actually I'll start getting into things like margins and spacings and things like that now if we click on main page we go back to this and if we click on our flyout page you can see there this is where the detail part goes and if I click and hold you can see this is the fly out that I can drag over there I can also I have my back functionality and here is our tabs and of course we could have additional content inside of all of these different tabs all right so moving up there with the information hopefully it's all manageable and up next I'm going to cover a multitude of different layout options for you all right so now we're going to talk about layouts and other related formatting options along with a whole bunch of elements so we're going to create a new project just so it's easy and Maui app 3 is what it's going to be called and I'm going to say next that's all fine and create all right just setting that up so it's very easy for you to figure out what's going on all right Bird first thing I'm going to do I'm going to go over here to Maui app three and I'm going to go down here where it says add and I'm going to add a new item again make sure you're real careful about what you pick here dot net Maui xaml and then I'm going to come in here and I'm going to call this stack demo and we're going to talk about the stack layout first so let's just click on ADD and it's going to create that for us okay so with a stack layout let's go do I have it selected yes there's the xaml file all right so we have content page that stays the same we are going to change this from a vertical layout which of course is going to loud everything vertically this also could be horizontal stack layout we're going to stay with just a regular old stack layout however all right so we have that set up and what it's going to do is it's going to stack elements vertically by default but you can also set it as a horizontal orientation just by coming in here and saying orientation and then horizontal okay so if that's something that you'd like to do that is an option I'm going to leave it as vertical which is the default so let's go here and let's go and add some different attributes here let's talk about maybe margin let's set margin to be equal to 10 and this is just defining the distance between elements and the layout and then I'm also going to do spacing and this is going to be the distance between each of your elements let's make that eight just for the heck of it all right and do I want anything let's just leave the label here that's perfectly fine and what I'd like to do is also talk about frames now a frame is going to wrap a view or a layout with a border so let's create one so we'll say frame and I said it has a border so of course we're going to be able to Define border color and let's just say I want this to be a dark gray that looks good and then I can add padding and let's say that we want that to be five or something along those lines um Corner radius let's set that for five and Corner radius is just going to define the roundness of your corner and you can also set has Shadow if you would like so has Shadow like this and set it to true or false wouldn't make any sense to set it to false because that's the default but we're just going to not have anything be on that so there we go and we just created a frame now you can have multiple stack layouts nested together if you would like maybe I want to get this label and move it out of here so we can see a little bit better so we're going to come in and I'm going to say that I want to Stack layouts and I'm going to set even though it doesn't make any sense I'm going to set the orientation to Vertical just so you can see what that looks like and vertical yep accidentally hit my caps lock key all right vertical there we go and I'm going to set the spacing for this to be 15. all right so we have that all set up and there is our stack layout now I'm going to throw let's go and get this label in here and let's talk more about labels because there are a ton of different options you can have for labels so I'm going to bring the text up here and I'm just going to call this label one so let's go label and one and that is just a text that's going to show up inside of your labels vertical options I'm going to have it be centered vertically horizontal options again uh centered vertically but you could also let's go and set it to start what that simply means is horizontally it's going to start over on the leftmost side of the screen and if you are wondering and is going to do the opposite um we can set a background color and let's set our background color to midnight blue again I'm using the wiki colors thing which I talked about before to find these colors and maybe we want our text color let's go and have text color and let's make that white so that we can see that well and let's continue on here also we can have different font attributes that we would like to set so let's say that we want our font to show up as bold another option that we can have is maybe we want text decorations and whenever you're typing these in you can see all of the different options so you have non-strikethrough and underline maybe we want it to be underlined for some unknown reason and then we can also request a width for this label so we'll say with request and let's have this be 80 and then let's also do a height request and there you can set that to 40. all right just to test out a whole bunch of different ideas for Designing interfaces um let's go and create another label inside of here because a couple other different things I'd like to talk about so let's say that we have label again and this is going to have text inside of it and let's say that we want this to be label two but then we'd like to have a new line and then have another line for our label underneath of it how you do that is go ands and hash symbol and there you go now you have a new line and then you could say line two this is not going to be a nice interface if you're wondering I'm just going and uh adding a whole bunch of different options here just so you can see all of them let's just keep this simple and have this be Center and we'll do horizontal text alignment or horizontal options let's do horizontal options also make that Center and let's do a background color just so that it shows up a little bit background color and let's make this dark green and a final one let's say that we want our text color and let's make that white as well okay just adding a whole bunch of functionality just so you can see all of the capabilities available to you and also why don't I talk about some more different horizontal options because I think it's important to wrap your head around all of those because there are a bunch of them all right let's create another label let's just call this three we don't need a new line here so let's go there it is label three vertical options let's leave that be Center and then horizontal options let's have this be Center and [Music] we could do uh there's a whole bunch of options you can have so we can do Center and expand there we go and what else on here background color for this let's make this be dark red just so everything is different text color white that looks good um why don't I also show you what end looks like whenever you use it for a label so again come down here paste this in and then we'll do this with label four leave that as Center and we'll do this as horizontal options so this is going to be end and let's make this dark blue in white that's all good and why don't we do one more I'd like to show what fill and expand looks like so we'll do label five and center and horizontal option is going to be fill and expands and we'll make this Indigo in in White and the rest of it is perfectly fine let's make sure I have everything closed off so I have a stack layout inside of a frame and all of those are inside of another stack layout so there we go and just provides a whole bunch of functionality for laying out your screen now what I need to do is I'm going to go and create inside of my main xaml file a whole bunch of buttons that you're just going to be able to click on and jump through all of these different types of layouts so you can see them all in one place so to do that I'm going to create a new button and let's go give it a name and let's do s layout button that sounds good and what else would I like let's do the text that shows up inside of it let's just have this be stack layout and maybe we want to properties describe what we have going on with this button so semantic properties and this is going to be hint and we'll say opens stack layout and if you go and you code along with me I think you're really going to get a lot is this stuff's just going to gel in your brain so um I want to do a new event handler so let's go and create that s layout button clicked uh that sounds good enough for me and let's just do a very simple horizontal option which is going to be that we want to Center this button and then close that off of course and then jump over into Main and what we're going to do in here is just go and call for our uh our specific code to be created on counter clicked no I don't even want that so let's just get rid of it all together we got rid of it didn't we think so yeah we got rid of it so I just deleted it that's perfectly fine and then over inside of here to go and actually get our new page our stack layout page to pop up when that button is clicked we say of course navigation Dot push async and we'll just do this and then we called it stack demo that's it stack demos over here so we'll say stack demo exactly like that then we're going to say file save all and then we're going to run it and this is not a Windows machine and I'm going to use the emulator we set up before so I can show you the results on the screen because that's useful and we will go and run it and here we are and this is what it's going to look like and we're going to click on stack layout and you can see how everything lines up here let's see if I can do this in a way that makes sense all right so the very first part you can see that we have our horizontal option set for start and that's just going to move it over to the left side of the screen you can also see that I defined a width as well as a height for it and that's the reason why it's different you can see here we have our horizontal options Center and you can see here is the new line which is another option and then after that for label three you can see Center and expand how that lays out you can see end it's going to push it over to the right and then fill and expand it's going to actually have a start like it was start it's going to completely fill the whole entire frame that is surrounding all of my different labels alright so there's a run down all the stack layout and how that one can work of course you could go in there and change this into a horizontal layout and a whole bunch more to go and test some other different options what I want to do now is talk specifically about horizontal stacks so what are we going to do we're going to come over here and we're going to create a new one so we'll go add add new item and as the xaml file selected there for me and let's come in and select this and I'm just going to call this h stack demo and that name looks good and let's create that all right so basically if you know you will use a horizontal format or a vertical format it is better to use a horizontal stack layout versus a stack layout or a vertical stack layout we're using a horizontal so let's go and change this to a horizontal stack layout all right good and what do we want to put inside of here well we can just leave these be set up here I'm just going to play around with the different colors and and not much more because basically I think it's pretty easy to understand what this is going to look like so let's just go and copy this and actually let's change the background color just so they stand out a little bit but it's a very simplistic concept so it's going to stack horizontally so there's no point in me going and complicating it so let's go midnight blue and a text color text color and have it be white and create that I just want to show you what it looks like all right so let's go and create let's say three labels and drag this down here so there we are and we're just going to leave these names be the same and I'm just going to change the colors that's all I'm going to do dark green because believe me the other layouts are going to get a lot more complicated so there's no point in overly complicating something that is rather easy to understand and let's just change this to dark uh red there we go and let's save that and of course we need to go into our main file that we have here our xaml file and then we need to create a button that is going to allow us come in here and work with this let's just copy that part and paste that inside of there go like this new event handler and it goes and creates a half decent name for me and let's go and just copy the rest of this and paste that inside of there so boom and boom looks good to me all right and we'll save that and then whenever we go and set up our button inside here there's everything let's just go grab this guy right here and paste that inside of here and now let's just change this part and what did we call it we called it an H stack demo so I just have to put an H in front of that and we'll say file and save all and we will run it and you'll get to see the Simplicity of a horizontal stack layout whoops I was going so fast here I didn't actually pay attention what I was doing let's change this to an HS you can't have the same name for the buttons inside of your xaml file actually it's kind of a good thing that that happened and let's go and let's change all this so that it's all properly set up so I'm gonna go and text is going to be or uh zontal stack layout and opens and we'll change this to zontal stack layout and everything else looks good so let's just save that and let's run it again all right and you can see here is our emulator and a horizontal stack layout guess what Stacks everything horizontal and since we set it that we wanted it to be set for horizontal option Center everything is all smashed together and you can also see it runs off the screen so something to be well aware of and uh you're gonna have to adjust your application as needed all right so that was rather simple what I'd like to do now is go and cover something a little bit more complicated which is a grid layout so we're going to come over and we're going to say add and new item and this is selected and I'm gonna go and let's call this grid demo grid demo and add and here is our grid demo now with grid layouts we position using columns and rows and it's also important to understand that elements can take up the space in one or in multiple rows as well as in columns and I'll demonstrate that in this specific example so let's come in here we're not using a vertical layout anymore we're going to use grid and some options that you have here let's say I want to do row spacing and we'll set that to be six spacing defines the distance between rows or columns let's also do column spacing so column spacing let's make that six as well now you're going to have what are called row and column definitions now there is a long way of doing it and then there's a shorter way of doing it I'm going to use the shorter wave and I'm also going to show you the long way so we're going to go row definitions and we are going to say here that we want three rows so we're going to say star star oops and star okay there you go that means that we want three rows likewise you could go and instead after the grid you could come inside of here and Define like this all right you may see this somewhere but this is not I mean it's just no don't do that okay so what we're going to do is we're going to keep it rather simple all right so if you have row definitions you're also going to want to Define how many columns you're going to want and to do that you're going to use column definitions we're going to say column definitions and just to keep this simple we'll say that we want to have three columns as well now uh just so that I can cover more ideas here I'd also like to talk about box views let's create a box View and let's say that it has a color of green okay so there you are box View and we're going to need a closing tag oh no we don't need a closing tag in this circumstance basically what a box view is going to do is it's going to draw a defined rectangle that can hold other elements so and what we're going to do here is we are going to have text a label inside here so let's go like this and let's define what row and column this is supposed to be in so that we can match it up whenever we're analyzing what we designed here so I'm going to say row is 0 and column is going to be zero Also let's go and Define our text color as well and our text color is going to be white and let's just go and have vertical options be Center and then also have this be Center by default whenever if you don't Define the specific columns you want to place your items into they are going to go in the zero zero position all right so let's go and let's create another one so I'm going to say copy and if you don't Define them and you throw a whole bunch of elements in what it's going to do is it's going to stack them on top of each other so be well aware of that believe me you'll you'll notice very very quickly so what I want to do here is I want to Define that I want to put this in row 0 and column one so this is going to be this and to do this what we need to do with our box view that we have here let's change this into blue instead so there is blue and what we want to do with our box view is that we want to say that we want it to be in column one if you don't put anything inside of it it's automatically going to assume you want zero so we could just leave that there that's perfectly fine now down inside of our label I already changed the text on this you just do the same thing so it's just like this box views drawn and then in that specific 0 1 column and what the label is going to do is it's going going to print over top of it everything else here is perfectly fine as well so let's go Drew another one so boom and you're going to see just how useful grid layouts really are now for this guy what I'd like to do is what color do I want it to be let's just have it be teal because teal color all right so for the this one we are going to say that we want the row to be one and what's the column going to be zero because we didn't we don't need to type that in so we'll change this to also to row always defaults to zero and then we're going to say that we want this to be in row one and everything's Zero indexed by the way and this is going to be in column 0 and everything else there is fine so let's go and copy this and create another one because we want this to be a little bit more complicated than what we have covered already in this circumstance we want the row to be defined but we also want the column to be defined we are going to put this in the one one space so let's say it looks like this paste that inside of there now we have or whenever I type in column we are going to define the placement we want for this and we'll change the purple change this to purple all right so that's purple again we're going to do the same thing for our column here so let's just copy this and let's paste that inside of there and anything else I'd like to do well how about what I'll also demonstrate that we want to actually take up two columns so what we're in essence doing is we're starting at Row one and column one but we want to take up two additional spaces two additional columns so to do that what we do is we say grid dot column span and we'll set this to two Okay so that means start at column one but also expand over into column two all right and all of that looks pretty good now for our last one we are going to do much the same so why don't we just come in here and copy this and come down and paste that in there and for this one what we actually want to do is we want to start we want to be on row two but we want to be in columns 0 and one another thing that's important to know is you cannot put and symbols like that inside here just wanted to make you aware of that because it's just something that popped into my head okay so what do we do we say that we want to go in Grid row two because it is going to be zero column we do not need to Define this so let's get rid of that and the color that I want to use here I'm going to change this to Red so there's red and then um I also said that I wanted this to span multiple different columns so we'll say grid dot columns fan and let's set that to two so it's going to take the column 0 and the column one as well now got all that set I'm going to need to come in here and do likewise right here so this is going to be why don't I just copy this it's so much easier so let's just copy this and let's paste this inside of there there we go I have that set and um why doesn't it like this not sure set more than once oh I set it down here okay let's just get ready boom boom and that Arrow will go away all of this is good and we'll have this be set for white and also for Center and I think that's it so we have our grid closes and then our content page closes also so we need to go into Main and set up a button that's going to allow us to open this so we'll go copy and paste this inside of there and what are we going to call this guy I don't want to make the same mistake I made last time by not giving my button a name so let's say grid button and this is going to be a grid layout opens and we'll change this to grid layout as well and this part right here let's just go get rid of all of that so let's just copy the or cut that and then let it generate every the name for me so I'm gonna go like this new event handler and close that off paste that inside of there and that looks good so grid button clicked it needs updated over here there's a grid button clicked let's go to navigation copy that paste that right there and then I call this grid demo I believe yes I did so let's go grid demo and we will go file save all and then we will run it and you get to see the magic of grids and let's bring this up here so you can sort of scroll through and see what exactly we did and here is our emulator let's bring it over here and here is a grid layout and you can see exactly how all of those different parts were set up inside of here you can also see that this is not spanning like I want it to why is that I forgot to put column span so let's go get rid of this and let's go and put column span inside of the Box view you have to do it for both very important so let's go inside of here paste that there move that down I think everything else looks good yeah everything else looks great okay so let's go and save that and let's rerun that all right so we got that set up and grid layout and now you can see it's stretched over all right so what do we have here we defined we wanted three columns and three rows three columns and three rows is what you have by the way if you would go and Define like a fourth column it would just be white space which I think you saw whenever I made that little error and the same would be true down here so everything is going to be broken up equally inside of here and we'll get into uh absolutely outs and flex layouts and all that other stuff here coming up so here we are we just placed everything in rows and columns here we used column span to jump over and likewise we use column span here to start in the uh this is row two zero one two like that and we said column span should be two and we didn't Define a column so it automatically defaulted to zero and then it stretched over okay so I think you can get the vibe of exactly how you can use grid demo or grid layouts to do pretty nice tight layouts and what I'd like to do is go and actually show you another one so that I can do a little bit more complicated things and also show you entry which is another element we can use inside of net Maui so what I want to do is create the beginnings anyway of a basic calculator interface so new and let's call this calc demo sounds good and calc demo good got that created all right so this is going to be a little bit more complicated but it's going to be a grid layout just like before so we're going to come in here and we're going to change this to grid and then we're going to Define padding so let's just do something like padding is going to be equal to say 16 and I'm gonna do row spacing is going to be equal to 2 and then let's also do column spacing and set that to two so that we have pretty much the same type of idea here another thing I'd like to do is of course you can change the background color for your whole entire application and how you would do that you can also change the title of course so let's come down here and let's do background color Tab and if you ever wondered what the default purple is for.net Maui I'm sure you've thought you've been wondering but it's it's useful to know this is the hex code for it all right so that's the dot net Maui default Purple colors so that's just what we're going to use just for this and then I have these all set up and of course I need to do row definitions and this time I'm going to say that I want let's say six rows it's going to be a little bit more complicated than what we had before and and six rows and then let's say we want four um columns so we'll say column definitions and we'll say this is going to be an extremely simple calculator all right so we have that all set up I would like to talk about entries let's get rid of this label all together I'm going to slam an entry in here just so that I can talk about entries not necessarily because you would use an entry for a calculator all right so basically an entry allows for entering text so how you create them just type entry of course and you have to give it a name so I'm going to say name is equal to and we'll keep this very simple let's just have it be entry that works then we are going to say that we want placeholder text so what's going to show up whenever it opens so I'm going to say placeholder text this is a calculator it starts off at zero so I'm going to leave it be zero I'm then going to have horizontal text alignment and let's have that be end that means that it's going to show up at the far right of our entry window you can also come in and Define font size and let's have that be 22 well you can also do max length let's say we only want to do calculations of a certain size and let's say that that is going to be equal to 10 digits um you can set it for read only so let's say that we do not want the user to be able to come in here and Define or change anything kind of defeats the purpose of an entry and of course it is false by default but I'm just covering this just to cover it then what we need to do because this is a grid layout we need need to Define what row we want this in I'm going to say that I want this to be grid row and have it be equal to zero and I'm also going to say that I want column grid column to be equal to zero also and finally I want the the uh entry window to take up four spaces so we're going to say grid Dot and column span whoops hit the wrong one there in there column span and we'll say that we want this to take up four columns so let's just do it that way all right so we have that all set up close that off and that is our entry window now for a calculator of course we're going to need a whole bunch of buttons that the user can interact with so I am going to come in and say button and let's just throw in some common calculator types of things so there we are that allows them to define the sign I'm going to say that I want this to be set up in the second row or the first in this circumstance I'm going to say that I want column I want it to be on the left most sides so that's going to be 0 Also let's go and do font size let's have it be exactly the same as the entry window that that kind of makes sense and then we have to Define clicked and what will we say here all this is clicked like this there we go and for this boy let's say that we want to change it why did it just should automatically come in there uh new event handler and do I wanna I'm gonna go and use my own actually so I'm going to call this assign change clicked like that and I'm gonna have to put it you know in there automatically so let's go over into calculator remember our calculator demo the code is underneath of it like this and then I'm just going to borrow it from one of these other Pages we have here all right let's go into the main code and let's just copy all of this stuff so copy and then here is our code window it's outside of that initialization method we have inside of there and then let's grab this oops where is it um I called it sign change clicked there it is and let's go and change this to that same exact name and then if you ever want a function that just doesn't do anything then you just you just do open and closing curly brackets make sure that you accidentally deleted that Curly bracket however all right so that's good there we are have all that set up and then we just are going to do the same thing we're going to create a whole bunch of additional buttons so let's just go grab this and let's do the whole entire row of buttons so for the next one let's say that we want to allow them to put decimals inside of there and in this circumstance it's going to be Row one because we want this on the same row however we want this on a different column and that's the next column which is going to be one and then we'll change this to decimal clicked mole clicked we can go and copy this jump over into our code and just throw a method inside of here called decimal clicked like that and decimal clicked just out of there and and paste that right there okay just to show you how these are matching up uh let's create another button so let's copy this paste that inside of there and let's say that we want them to be able to get a value so we'll throw equal sign inside of there we want this to the the next place over on the right so we'll change that to two and then we'll change this to equal clicked equal collect boom and jump over here and let's go and copy this and paste that in there and then change this to equal clicked equal clicked um any other ones I think I'm I might as well just do this over inside of here I'm going to use the same method for any of the operators so the plus minus multiplication and division I'm going to have those all have the same name and those are going to be on operator clicked like that and I'm going to have the same one for every number that is clicked also so we'll come in here and paste that there and then we'll just call this number clicked and then we'll figure out what number it was so number clicked and later on we'll get into passing data from the xaml file interface over into the code and so forth in a more complex way all right uh the final operator I want to have inside of here this is going to be a divisions we're going to division multiplication and uh plus an and adding and subtracting of course all this is fine and I said for this I want to use the same exact method every single time so operator clicked that and whoops exactly hit that twice okay good and then we'll have a whole bunch of numbers that we're going to be using so this is going to be the next column so we're going to or actually the next row so what we're going to do for this is change our grid row to be equal to 2 and our column we're going to start back at zero so this is how we're going to stack up all of these and this is called number clicked that's how we had that set up and the text for this is going to be seven so I'll get this copy and paste and this is just simply going to be changed to eight and then of course we have to move over to the next column other than that everything's the same this is going to be nine of course this is going to move over to the next column which is going to be two number clicks still fine and then we're going to have multiplication here so this is going to be multiplication and this is going to go to column three that's fine and this is called on operator clicked copy so this is a little bit more complex in regards to setting up an interface so we'll say save all and then we will run it and see if we have any errors here well I know we're not going to get any errors but I did forget to put the uh the way of of opening the calculator up on the screen so let's just go and copy this and copy and paste this down inside of here whoops didn't get the copy the first time all right let's go and try this again so copy and paste there we are and I'm going to call this calc button so calc button and this is just going to be um let's just call this uh calc grid layout because it is a grid layout and we'll call this opens calc grid layout and that is going to be the same there and then I'll say on um on calc clicked and there we are so then we have to create this copy that jump over into Main and bounce here go get this guy copy paste okay and that's how that's going to line up with that and then I'm just going to copy this one all right there we are and then this is called calc demo so it's called calc demo save and now run the emulator and everything should work fine as long as I saved everything and it looks like it did let's bring the emulator over here click on calc grid layout and there you can see is uh our calculator layout and then of course we could add all kinds of different functionality to it to make it a more proper good looking calculator all right so there's another example of how we can use grid layouts and next I want to talk about Flex layouts okay so I'm of course going to come over and create another xaml file with some code and so that we'll be able to easily switch between these I'm going to call this Flex demo Flex demo and that's fine and we'll say add all right so for this guy what we're going to do is this is going to be changed into a flex layout and basically a flex layout is going to arrange horizontally and vertically and it's going to be what what separates is it's going to adapt depending on the screen size and orientation it's sort of similar to the CSS flexible box layout if you've ever seen those before so what we're going to do is inside of flex layout here I'm not going to use labels I might use buttons or something instead we'll say Flex layout and then we're going to define the direction and the direction is going to Define if we align based on if there is a single row or column in which to lay out elements okay so our direction that we're going to put inside here is going to be row so we'll say row and then we're going to say that we want to align items and this of course just defines how to align in a layout which is I'm going to show you a whole bunch of them all right so align items I'm going to do stretch here first and then I'm just going to throw a whole bunch of buttons inside of here and then play around with these different options so that you can see how they affect the interface so I'm going to say button and text is going to be equal to and I'm just going to say that this is label one and the text color let's make that be white so it's very easy to see and then background color is going to be let's make this blue okay and then of course I have to close this off and let's make two buttons that's more than enough for what we need to demonstrate at least in this example I'll make something a little bit more complicated here in a minute I just want to get it so you can understand how what happens whenever we change row and stretch and all of these other different options so we'll make this be equal to Green green good and I got that set up okay so now that we have that set up we of course have to create a new button so let's go let's go here and copy that don't worry there's I'm going to get a more complex type of layout here in a second and what do we want to call this let's just call this Flex button because that looks okay so we'll say Flex button and this right here is going to be a flex layout so so Flex layout opens and we'll just call this Flex layout and the name on this is going to be on Flex clicked and uh what Flex button clicked you know what um that sounds fine okay so let's just do Flex button clicked and Center all good and then Flex button click to automatically create it here let's go and copy this paste this here and then this is called Flex demo X demo save file save all and let's run it okay and then I'm gonna go and change a whole bunch of different things here with these uh directions and align items just so you can see how they change all right so here it is and flex layout and you can see exactly how those line up okay and you can also see how they stretch and you can also see that how we have it set up here in this specific situation where we are saying that the direction should be row this is defining um if this is going to be set up on a single row or not or column or whatever let's change these okay so here we have row so what happens if we change this to column okay so that's row let's change this to column only thing we're changing column there we are and save it and run it again so boom this and load it very very quickly and flex layout and now you can see there they are now they're set up on a column you can also change these so you can do column reverse so we'll do reverse like this save and run it again and let's just bring it over here loads very very quickly emulator getting bigger all right there we are Flex layout and now you can see there at the bottom and the same thing is going to happen if you do row reverse the rows are going to be over here on this all right so what else can we do well we can also there's multiple different other options here available to us let's set this back to the direction being equal to row you already saw what stretch does it stretches and fills in that area we can also do Center so we'll do Center first it's just kind of giving you an overview of what happens whenever you go and change all these different options okay so here's Center Flex layout and now they are centered in the center instead of being stretched out like they were previously and we can also do start and end guess what start's going to do it's going to put it in the upper left-hand corner but I will show you I'm not going to show you end because I think you'll get it so let's just go set that for start and here we are bring this over again and if we get this up here we just click that and look at that it's exactly where you thought it was going to be all right so there is an overview of flex layouts now what I want to do is show you how you can create something a little bit more complex so what we're going to do in this circumstance is we're going to Define these as columns so going to be column and you know how that works because you just saw that and I'm just going to get rid of align items I'm just going to use the default and then what I'm going to do is I'm basically going to set up an HTML page directly inside of our application with headers and Footers and all that stuff and a flex layout that's inside of it so what am I going to do I'm going to say that I want label and let's say text is equal to and we'll just have this be header is the text that's going to show up in the label and I'm going to do font size which is going to be equal to 18 and background color which is going to be equal to red and then the text color is going to be white and the I'm just going to have this be centered horizontal the text is going to be centered so we'll say Center like that then I'm going to have the footer B at the bottom then we're going to have another Flex layout that is going to lie in the center of these two guys so I'll paste that there and we're just going to change this to footer so footer and I'm just going to leave it be red just so that that is very easy to understand all right so there we go okay so now that we have this this is going to be at the top that's going to be at the bottom obviously based off the names and what I want to do here is create another Flex layout so I'll do Flex layout inside of another Flex layout now for this guy I'm going to say that I want to have this be Flex layout dot grow and set that to 100 or 1 and what does that mean well grow means we want all the space not needed for the header and the footer to be taken up by everything that we have inside of our new flex layout so we're gonna do is we're going to say that we want to create a label and text for it is going to be the words content and then we're going to find that we want our font size to be equal to 18 and our background color to be equal to Gray and then we will have let's just say we want everything to be set up in the center so we'll say Center like that and vertical text alignment is equal to Center and then we're going to use grow again and again this is going to say that we want to take up all space available after all of the other different elements in this Flex layout take up the the required space they require and we can also go in and Define sizes and so forth as you will see so we're going to say Flex layout and grow so this is going to be like an arbitrary sort of size depending upon how much space the other different pieces take and for this I'm going to use a box View and talked about box views before so I'm going to say box View and for this special Flex layout options I'm going to use basis Asus whoops basis like this and I'm going to set that to 50 and bassist is going to Define um or be used anyway whenever we want a specific width for this box View and I'm going to say Flex layout and if I want this item to be the very first item inside of the flex layout now normally it would be this one because it comes up first but what I'm saying here is I actually want this to supersede and go above it well if you want to move it around you're going to go negative one and that will give you that option and then I'm going to say that I want the color for this to just be a simple blue and let's go and close that off and then we are going to go and put in another another box View and I'm going to say box and of course you can put labels and texts and elements and stuff all over the place if you would like so we'll say Flex layout and for this one I'm going to have the the basis be exactly the same so basis is going to be equal to 50. also and just to make it stand out I will change its color to be equal to Green and there that is and there we are okay I think that's good I think that's enough information let's go and create this over inside of our xaml file or our main xaml file so that we can open this up so we're gonna go right here and just copy this and paste this down inside of here and we can call this Flex button two I don't know that's fine and the text Flex Flex layout and we'll just call this two also open Flex layout two looks good Flex button two clicked horizontal options fine all good and then we'll jump down here and create this method also paste that there Flex button uh two clicked and then um I don't know what I'm gonna do you know what why don't we just go and get rid of what we had before so just to keep this a little bit more simplistic we're creating all these extra buttons and we don't need to do that all right so let's just come up here and we don't need this Flex button too we're just going bye bye so let's just get rid of it all together we don't need it all right save that and then we'll go back into our flex and this is good this is good yeah I deleted all that so there's no point in creating another one all right save file save all and run all right and here it is bring it over here Flex layout and there you can see we basically created an interface like is common with a regular old website okay we're almost through all the different layout options uh the last one that's available to us is one that's pretty crazy it's called absolute layout so let's create it so we're going to come over here we'll go add and we'll say new item and I'm going to call this what absolute demo good got that set up okay for our absolute uh layouts what it's gonna do is it's actually going to allow you to position elements explicitly based off of the upper left hand corner so this is also something that everyone should be well aware of if you've been programming for a while anyway um and it's also important to understand that if the position isn't defined the elements will stack on top of each other just like we saw with our grid layout and they will all stack on top of each other in the upper left-hand corner just like we saw with our grid layout and I'm going to show you a couple different examples so I'm going to go we can go and actually use almost like uh pixels for defining Heights and widths and position or we can actually use a percentage also as an option so I'm just going to call this label one so we'll go label one and different options I want here well basically I'm going to do absolute layout and then what I'm going to say is I need to Define my layout bounds and this is going to be X and Y as well as width and height you have to Define all of them so I'm going to say that I want and this is very much absolute positioning and I'm going to show you percentage based positioning here later so we have X and Y starting in the upper left hand corner I'm saying that I want this to be a hundred width and 50 height and then after this let's go and Define a whole bunch of other different things so we'll do background color analysis make that be red that's fine and our text color is going to be equal to White and horizontal and everything else being centered is perfectly fine let's go and copy this and go and create another label and then I'll show you what it looks like whenever they are out on or laid out on the screen so very very precise X okay so I'm saying that I want this to be X position 120 and 10. so I want these to be put on the screen stack next to each other and then you're going to manually Define spacing and things like that whenever you're using an absolute layout so we're going to say that we want this to have a background color of blue everything else here is perfectly fine all right so what do we need to do we need to go into our main xaml file and we need to go and create a way to click and open this so let's go here copy and paste and we'll call this absolute button absolute button and the text is going to be absolute layout and opens absolute layout absolute layout centered all fine and then let's call this on absolute clicked on absolute clicked seems good enough for me and let's just have that be that okay so I'm going to copy this and where is my main there it is and uh wait a minute not this one nope don't want this one close that um oh there it is it got bounce off the screen somehow okay and let's go and copy this and specifically open up our absolute page which we have so let's get this boom paste this inside of here like that and then new and this is called absolute demo right absolute demo yes absolute demo I'll save I think I did everything right rather simplistic so we shouldn't have any problems and let's run the emulator whoops there it is all right so here's our absolute layout and we click it and you can see that yes indeed they position themselves exactly the way that we uh okay so let's go and do something a little bit more interesting though what I'd like to do now is I want to Define everything based off of a percentage layout all right so how we're going to do that we're going to do everything in our xaml file once again and what we're going to use now is what are called layout flags and what they do is they basically provide proportional positioning and sizing so we have our same two labels we're not going to change that and absolute layout we're just going to uh go and change what we have inside of here so what I'm going to do is I'm going to have this be 10 and 10 that's perfectly fine however I am going to define the width and height as a percentage so I can put this as point 2 5 and now they were going to take up the available space that we have allotted to them and one additional thing we're going to need to do is we're going to need to go absolute um there we are absolute layout like this and then go layout Flags and what we're going to do here is we're going to say that we want to size proportionally so Flags is equal to size proportional because that is the part that has changed we um we're only changing the sizes for proportionality we are not changing our positioning proportionally so size proportional fine red white center Center also fine let's also go and change these down here let's make this 150 10 and 0.25 for sizing proportional change this to 0.25 Also let's go and copy this part right here I'm going to show you also how to lay out proportionally also so that's good don't need to do anything else of that I think that looks good and let's run it and here it is an absolute layout and now you can see that we have those also set up that way all right so good stuff let's go and keep changing some things though however now what we want to do is come in here and size based off of position as well as as size okay so how we do this absolute layout layout bounds and we're going to make this be 0.05 0.05 like this and 0.05 like this and whoops I actually figured out something I did something incorrect let's do this I forgot to do the same thing I keep forgetting to do let's go into Main and I have to actually uh change this let's see did I do that so well oh no that's fine everything's fine okay cool never mind I did it right and I thought I did it wrong absolute click absolute demo all right good so let's go and get this right here and start sizing different okay so this is going to be a positional change I'm going to have this be 0.05 based off of the upper left-hand Corner 0.05 once again I'm Gonna Leave This be 25 25 and then for this part right here to accommodate the size that's going to be or the room that's going to be needed to accommodate both of these labels I'm going to change that to 0.05 now you can actually go in and type in size proportional and then also put in um position proportional that you have size proportional and then put a comma Insider here here I'll just show it to you and this is also going to be position proportional okay but that's kind of silly because you can also just write all so we're just gonna rail inside of there something that you may see somewhere but kind of unlikely um so all right we got all those set up and these are all based off of percentages also so save that file save all and run it whoops I had a little bug here we're going I have uh you want to want the text alignment to be centered I accidentally went and typed in horizontal or vertical options and horizontal options that'll give you an error so just make sure that you have horizontal and text alignment and if we do that then we see that we get the results that we expect with our absolute layouts which is this all right so there you go a whole bunch of information on layouts and up next I'm going to do more on the different elements that we can work with in our applications and messing around with different components all right so now I'm going to show you how to use a ton of different controls so we're just going to create a new app I want to keep everything all nicely divided up and we have that set for crate and here we are all right so the very first thing we're going to do not sure how I want to organize this so I'm going to stick with my normal thing where I go and create multiple different buttons so I'm going to get rid of this label that is I'm in the xaml file for main I'm going to get rid of that so that is gone and then I'll just keep this button right here for now and I'm just going to change the name of it let's say that I want to call this control button instead so we'll go control button and it might give me an error because I just got rid of the button that's assigned to a method inside of the main code file and what do I want to do here I'm just going to put the text on here is going to be controls and then I'm going to give this a little description and I'll just say a bunch of controls and then down here I am going to define a new method that I want to use for this and let's go and see what it just Cooks up for us control button clicked seems perfectly fine and this might be the only thing we do with this and then we come in here this function or method is no longer called so we can just go and delete it and then inside of our control button event handler right here what I'm going to need to do is just go in and push it to a page that's just going to be about all the controls so I'll say again navigation there it is and Dot and push a sink and there we are and the new page is going to be called control demo so we're going to come up here and we're going to say that we want to add a new item and remember we want to click on.net Maui like this and a xaml page right like this and then I'm going to give this the name of about control demo so control that seems fine and let's add that in there and then what we can do over here is say control demo is going to be the name of the page that we are going to use so there it is all right that might be the only thing we do with the main programs here okay so now let's get into the actual controls so what am I going to want to do here well I have a stack layout I'm probably going to have so many controls I'm going to try to cover pretty much every one of them so I might need the ability to scroll through them so I'm going to create a scroll view so that I can scroll through all of these controls there's a good number of them so let's go get that and then after the stack layout throw the scroll view inside of here all right so what's the very first thing I'd like to do how about uh one thing you can do is you can actually use images as buttons so I am going to go and just show you how to do that so let's go and get rid of this label here all together and instead we're going to create an image button so image button and x and name is going to be very simple it's just going to be image etn and the source why don't we keep this nice and simple I'm going to show you how to use custom images in the in a couple minutes but for now let's just go over here to our Resources directory and our images and use this.net bot thing just so that we can use something that's there so dot net and Bot dot SVG and you normally don't even have to put the SVG in there as long as you don't have multiple images with the same name but I typed it okay and then I'm going to say clicked and let's just say that we want to create a image or a Handler so let's go like this and there we go so we have image button clicked and then we have to make image button clicked do something so where is there's the code file there's our code file and there is our image button clicked file so what I want to do for this is just quite simply I'm going to open up an alert that shows that yes indeed this works so display alert and I'm going to say alert and then I'll say uh what do we want on you clicked the image and then for our button it's just going to say okay like that all right so we did some stuff here and uh let's go and let's just verify that everything is running here so I have this set for Windows machine I do not want that I am going to say Android emulators pixel 5 just like before remember you can use your phone and such but I don't want to I want to I accidentally I think it's going to try to create there are no no I do not want to do that okay so I accidentally clicked uh on the wrong thing so let's go and play this in the emulator and see exactly what's going on with it all right and after a few seconds we have our little application we click on controls there's our image and now it should go and do a little alert for us and it does okay so everything so far is working beautifully now of course we can go in here and actually throw in regular buttons and because I'm talking about controls again I know I covered buttons before but why not do it again so here we are this is how we create a button I'm just going to give it the name of button works good text is going to be equal to alert and then we'll say when it is clicked we want button clicked or something is what it's going to give me here right there and then let's do horizontal options and send to or put this in here as centered and of course have to go over into the code area and figure out what we want to put inside of here let's just say that we want to go and do another alert don't worry these are going to get way more complicated I'm going to be doing carousels and all kinds of cool things alert and in this one I'll say uh you click the button or something so there we are you click the button and okay let's trust that that worked and uh we'll test it in a bit what I want to talk about now are radio buttons so the radio buttons are either going to be on or off in regards to the group they're in as long as they are actually in a group well you know what let's do something a little bit more interesting let's do a search bar that allows the user to enter some information so let's come in and I'm going to go and create a label that's data is going to change based off of interactions we have with our controls so I'm going to call this um let's give it a name of xname and uh or let's give it a name of info label okay there we are and there is our label and we're going to be changing its value based off of interactions with the control and the very first thing I'm going to do is I'm going to allow the user to enter some information multiple ways of doing this in this situation I'm going to use a search bar and I'm going to call this uh what should we call it let's just call it search bar pretty simple so there we are and then after that you have to say search button pressed and I'm just going to generate a Handler for that and what should we do with it let's go and put this on a separate line and let's close that off that's all you have to do for that all right now jump over into our code and actually figure out what's going to happen whenever they click on it well what I want to do is I want to take this label and I want to update information inside of there for that label so how we do that is how we update information is we reference the name we gave it so info label and the text is going to be equal to let's go like this text is going to be equal to and let's go and grab whatever text they have in the search bar now I just want to use raw text so I'm going to put a dollar sign inside of there and then I'll say searching 4 and if we want to get the data that was passed over inside of the search bar that we created you just say search and bar and text and there it is and now we're able to go and get that and display it in our little label that we have and then we'll also test that our button works so let's go and run it and here we are looks like it's going to work let's go controls and there's our little alert we should put space inside of here so these aren't all butted together you can see there's the alert and I can just type in my name or something and hit enter and you can see searching for Derrick pops up inside of there let's go and clean up the spacing on this a little bit all right and where we do that of course is in the xaml file and what I want to do is I want to throw Marge around everything all the controls so they're not butted up against the inside and then I'm also going to throw spacing between the controls and we do this in our vertical stack layout so I'm going to say margin is equal to 20 and spacing is going to be equal to 10 and that'll make everything look a little bit nicer okay so what do we want to do next um let's oh I said I want to do radio buttons so so oh so what we're gonna do here is say that I want a radio button and we're going to say checked changed we're going to have a specific method called whenever the radio buttons State changes and in this situation I'm going to put the content which is going to be the text that is tied to it I'm going to have this be man and then I'm going to put both these radio buttons in the same group that's how you when one's turned on the other one automatically turns off that's how that operates and that's normally the only way you should use radio buttons If you want a the different controls to not be tied together you should use check boxes and I'll cover check boxes next so we'll say group name and we'll call this sex group so we're going to be asking the user for whether they are a man or a woman so let's just throw this right here and our value is that and there we go and then let's go and create another radio button for one so let's copy this and paste and this is all going to stay the same this is going to be woman and remember the group's the same so they'll be tied together and if you want to add multiple radio buttons but in different groups we just change the group name there you go pretty simple stuff so we have those set up and then we have radio button check changed so those I'm going to create a function that is going to be handling both radio button operations so there it is radio button and check changed and then what we're going to do here is I'm going to go radio button like that and we'll call this sex button is equal to and it's going to be equal to the sender which we want to be called a radio button and then what we're going to do is just update our label again with the information we received and this is how to receive the information and it's also how to use it in a label all right so I see you are a and then to get the information whoops I put an extra space inside of there to get the information from that sex button you just say six oops I accidentally hit capsule up all right sex button there we go and contents and that is how we're able to get the information back but of course you have to throw a quote inside of there okay so let's run that you can see how the radio buttons work and of course this is exactly how we're going to operate everything let's drag this over Snappy and quick and you can see if I click on man it says I see you are a man if I click on woman you can see I see you are a woman all right but so I talked about check boxes so I'm gonna go create some check boxes now let's show you how they operate so with the check boxes why don't I do a another layout inside of here just to show you that you can do that I'm gonna do a horizontal stack layout everything else should be perfectly fine and I'm going to put a check box inside of here check box and I'm going to say is checked and I'll mark it as true this is going to be its default state is going to be true and let's go play around with colors and such so let's just make this blue and let's have our vertical options be equal to Center and checked let's go and create a event handler let's call it's called check changed and what we're going to do with it is call a method that is going to do some stuff and what I'm going to do here is I'm going to throw a label in so I'm going to say label and these are going to be next to each other that's the reason why I'm using the horizontal stack layout and I'll say text and I'll say something like do you like this tutorial sounds like something good to do and vertical options are also going to be Center for this so let's go and get that paste that there and close that off and I think that's all I want to do for that you can have multiple different check boxes but you know there's no reason so now I have over here in the code area where I'm going to be able to go and do different things based off of the checkbox being checked or not so what do I want to do here well I think I'm just going to come in and just update our label again so I'll say info label and text and I'll say equal to and I'll say clicked checkbox or something check box and to get the value out of this we're going to say e Dot value and everything else there is perfectly good so we could save that and run it and check out the check box drag this over you can see how quickly it goes and opens and controls and whenever I check this it says click check box false because the only thing that would be tied to a check box is whether it is true or false and then inside of your code you can react differently depending upon if the code is true or false so good stuff what I like to do now let's say um let's say that I want to do a switch so let's go back into our xaml code and I'm going to have a separate horizontal um stack layout here so let's go here and I'll go horizontal stack layout and for this one I'm going to say that I want a switch and is toggled is going to be set to True by default and you can play around with the colors again on color let's have that be blue and then let's have you can change the little thumb they call it the part that you would move in the normal world so that's called a thumb let's make that purple and uh vertical options let's have a decentered and whenever it is toggled well I want a function to be called and that's going to be switch toggled good name all right close that off and then I'm going to put a label underneath of it just like I did before so let's go here and copy it's just sort of another option versus a normal check box and I'll say something like you love this tutorial okay Center all that's fine save it jump over into the code so what are we gonna do with our switch toggled thing here well I'm just going to do the same thing I'm going to update our info label paste that there I think I got everything I did all right and then we will say clicked and toggle like that and then to get the value you use e value just like you did last time so you can run that again and drag this over and whoop there it is controls and you can see what the toggle looks like see there's the blue for whenever it's on um you can't see it let's go get this out of the way here is the xaml code so you can see blue for whenever it's in it's on state that's the blue and you can see the thumb part right there which is purple and you can see also that it is being toggled on and off because of the label yeah okay what's next well let's say also um trying to think of something that is quite similar to this uh how about a swipe here basically the way a swipe view works is let's put this outside of the horizontal stack layout it doesn't make sense so a swipe view is going to contain items that reveal menu items whenever they are swiped so I'm gonna go swipe view like this and there's nothing here then what we can do is and what we're able to do is we can swipe to the left the right down and up and what I'm going to do is I'm going to have them swipe to the left so how you do that is you say swipe and View and then Dot and left items like this right like that and there's other ways let me just show you here there's other ways of swiping so let's just go let me copy this paste this in you can swipe if you have left it's going to be or if you want them to go to the left it's going to be left items right right items down top items up bottom items that is how they are going to be differentiated and you could play around to see which one works best for you and I need to get some different images which I'm going to throw into my image Library I have right here and I'm going to show you in a minute uh how to get different icons and images and things like that but there's just some SVG files so if you wanna it's not going to show you anything inside of here you have to mess with these inside of some type of image editor so there you are I have favorite and delete so what I want to do here is I want to use both of them and it's very useful to use SVG files because they resize really well versus pings and things like that okay so let's get back to what I was doing so what I'm going to have here is a couple different things we can swipe I'm going to have and how you define the individual items that you swipe with is you guys swipe item and I'm going to say text like this and I'm going to mark this as favorite and then you can also go and Define an icon that you want to also associate with it and I'll show you also how to use other different images so I'm going to say icon image source is going to be and I'm going to use favorite for this one favorite dot s u G and there it is and then we can also put like a background color so we'll say background color and we'll make this something like light green or something looks interesting and whenever it is invoked we are going to say that we want to go and have some Handler called so I'm going to come in here and like that and let's have two so we're gonna have this and this paste this down inside of here and then this one's going to be called delete of course because that's the other image we have there icon image source and it's going to be delete and this matches up with these what I have in my images directory and they have to be all lower click case let's have this be light pink just to be different and then for our Handler here we will call this and create this and there it is so swipe invoked one and two not the greatest of names but you get the idea and you can name everything whatever works out for you so what are we going to do here well I am going to call this is a favorite one right that's why you should use good names so um here's invoked like that and that is favorite so for this one we're going to do our let's just to have it be info label again and paste this here and then we're going to say marked as favorite just real simple so marked as a moderate and then for the other one we will say marked as delete so paste this here marked as delete darn save that and I think I did everything run it let's go over here get our little app and test it taking a little bit longer than normal [Music] and there it is okay so controls and why is it not showing anything interesting okay I have to figure this out oops I'm the goofball I thought I had the image inside of here I didn't so we have to associate these with a an actual image and I have to get another image where is that image here we are and I'm going to get this cat picture so let's go get that and let's paste that over inside of here so paste where's paste there it is okay we have cat all right so what we're going to do is have these two actions associated with an image of a cat and in this situation I am going to put this image in a grid and I'm going to say that I want my height request to be 60 and my width request to be 300 and I'm gonna do a background so a background color so that it doesn't show anything to the right of the cat I could show you this way and then the other way so that you see why I'm doing that and then inside of the grid I'll throw an image image and Source whoops source there we are and I'm going to use my ping file for this and also I will do my horizontal options and we'll do this start so that it goes on the left side of the screen and I don't think I need to do anything else so yeah I think that's good enough for this image there we are and now you'll see how these are associated and then I'll change the color for this also so that you can also see how changing the color changes the way the control looks and here it is and it will update in a second all right and controls and there's the cap okay and now you can see favorite and delete and you can see marked as favorite shows up there and marked as delete shows up there but I said what's going to happen is if I don't have this white there's going to be a bar next to this so let me just show you and I never think that looks good but whatever maybe somebody else does so let's make that gray save it and run it just so you can see exactly how ugly this looks I mean I guess there's probably some for instance on which you would want it to be different boom and see there's a bar there okay that's the reason why I got rid of it because I don't like that I never like that but maybe you do and that's perfectly fine okay so what are we gonna do next um how about sliders so outside of this grid I am going to come in oh I don't want it to be in the swipe view either obviously so let's get that out of there so outside of our swipe view basically a slider is just going to allow you to easily slide between by default double values but I'm actually going to set it up so that it works with ins and um it just allows you to change values in an interesting way so to create one you get a slider and I'm going to call this um slider how about that that's a good name so slider and then you have to define a minimum value which is going to be zero in this situation and a maximum value which I'm going to make 50 and let's do minimum track color there that is make it look a little nice so this will be cyan and Max track color have this be blue these are going to blend into each other so they'll look nice let's change the thumb color and let's make it purple and whenever the value is changed I am going to call that's a good name and let's close that off but I am also going to throw a label here and it is going to have a name and the name is going to be the slider label how about that so whoops lowercase ladder label and then close that off now I'm going to create should I do any more nah I think that's fine so let's go and do that and then we have slider value changed what are we going to do whenever the sliders value actually come in comes in here and changes well how about we just create a fake situation in which um when I change my slider yeah I'm going to change my slider label text so we'll do slider label and text is equal to and let's use a raw string and let's say this is something like something that allows the user to Define how many people are attending some event so I said that by default it's going to use great big giant double values normally you are not going to want to use it and it's on edited form so I am going to convert it into integers instead so there's that and let's run it and that's how we convert from that double into an integer clearly and we'll get this over here and controls and here is our slider you're going to see number of people attending and it's up to 50. and it's also integers okay all right and let's just keep going here until we covered every single control for the most part some controls don't make sense to cover unless you are covering other things at exactly the same time so I covered sliders might as well cover steppers next so stepper and steppers basically allow us to select um specific values so I'm going to say that I want the name for this to just be stepper and value changed let's have that call stepper value changed the value changed yes and then we will have a maximum and the maximum is going to be 50 and the minimum is going to be zero and then you can also Define the increment by default it is one but I'm going to put this in here just so that you can see how to change the increment because you might want to change it to something else and I'm going to come in here and we'll throw another label name inside of here and this is going to be called the stepper label stepper label all right good save that and stepper value changed what are we going to do when the stepper values change well quite similar we're going to just change the label that's associated with it so paste this and this is the stepper label though per label and in this situation people paying how about that so how many people are attending the party and how many people are intending to pay to attend the party so there's our stepper value and let's run it and we will see it work there it is drop it and um there we are got it and you can see here is a stepper see and in different situations you may want different things but you can also see that you know well you're not going to see it but it goes up to 50. that is as big as it gets another thing um I already talked about using the search bar why don't we also go in here and cover um being able to well you know what I'm gonna do two other things let's say when since we're dealing with sliders and steppers another common thing is to be able to pick specific dates and things like that so what I'm going to do is I'm going to say date picker and how you use those is you'll have a minimum date and I'm going to say let's start off with the most important date in history and there that is and then I'm gonna have our maximum date there it is and to get the date right now you have to do like a little bit of a trick so you're going to come in here and you're going to say x dot static and CIS and date time and now so if you want to the maximum date to be otherwise you just would put in just like I did here but in this circumstance I want the maximum date to be today's date and then I'm going to have the date be exactly the same so let's just copy this the the the date that shows up as a default I'm going to throw that right there and then close that off now one thing that you need to do if you want to use or go and get the correct date is at the top of the page You're Gonna Go XM LNS like this and then colon and CIS is equal to and this is going to be R Dash name space colon system and again you're going to say assembly equal to Ms c o r lib and that will give you access to being able to pull today's date you can pause that or you're like I said all the codes on GitHub you can go and get all the code there and since I did date picker why don't I also do time picker so time picker obviously there's a funny name um let's have our default time be equal to and we'll just have it be 12 about that there we are and then we will close that off one thing to know is there are a ton of different options that are available to you let's just here's a couple of them so whenever you're working with day picker and Tom picker so let's get this that and here we are so you can also change the text color font attributes font family font size and so and and uh so forth and so on so I'm just keeping it to the default however so let's run this I think I saved it didn't I I might not have saved it no I don't think did I do anything with the controls um I don't think I did that's perfectly fine so we go over here and controls you get the point on how that works and here it is if you just click on the date it allows you to go and select a different date and you can also go back like this and play around with all the different date information okay and time is interesting you go and select your hour and then you select your minutes okay and there we are okay so there are all of those guys as well all right so now let's talk about entries basically an entry is sort of like the search bar we saw before except a little bit more defined it basically just allows the user to enter and edit a single line of text very important so let's come in and let's create one so I'm gonna go entry and I'm going to give it a name so the name is going to be why don't we just call it entry seems good enough and then we can Define some placeholder text and I'm going to say enter name and then I am going to Define that I want to use a clear button it's like a little X and I'm going to say that I want to use it while I am editing and you can do all sorts of things is spell checked enabled let's have that set for true um is text prediction enabled another thing we got and we'll set that also to true and then whenever it is completed or the user enter or hits the enter key um what we're going to do is go and create a Handler for that so entry completed all right good stuff now there are tons of different things we can Define here so I'm going to go and just grab them and throw them inside of here there's some additional things you can play around with so we are also going to have text changed this is going to trigger an event whenever interaction occurs so that means anytime they change anything you can go and Trigger some type of events um again completed triggers an event when enter is clicked max length you can find your max length of characters you can define character spacing the cursor position you know where you want it on the right or the left text transform is it a password that would go and put little dots down every time they enter it you can also go and use custom keyboards depending upon what type of information you want so there's one specific to email numeric telephone URL chat and the chat one has emojis and such um customize the enter button and is it read only okay so those are a rough overview of most of the things that you can do with that so now let's go and play around with the event handler over here so entry completed and what are we gonna do here well I'm Gonna Keep it rather simplistic I'm gonna go and get our info label and I'm going to define the text because remember we said we wanted them to enter their name so we'll just use raw text like this and hello and then we will go and get the text that was entered into the entry and hit my Tab Key I think I hit my capsule okay all right got that saved and we can go and run this and test it out and here we go and controls and there that worked so that's good why are we not scrolling there it goes I'm just a blip I guess so it says enter name here I'm not sure if you can see it I'm gonna put my name yes I did hit my caps lock um I'm gonna put my name inside of here and hit enter and you're going to be able to see that it says hello Derek up inside of here okay so really another useful thing that you're going to use in many applications that you create another thing we can do I don't think we need to do a big example on it but let's say that your user would like to enter multiple lines of text it's going to have all the same types of uh parameters as you have with entry so just know that but if you want to have multiple lines of text we're going to use editor and I'm going to say Auto size there it is and it's going to Auto size as the text changes and the other thing is let's do a placeholder text and I'll just say just some random whatever words okay and then of course we're going to close Auto off and then we also have to close off the editor itself so exactly the same as entry except you would use it if you wanted multiple lines of text now I'm going to work with some more interesting things we're going to talk about binding data and we're going to be also messing around with a bunch of containers such as list views and carousels and things like that but to be able to do this what we're going to need to do is go and organize our data so what I have is a bunch of American football players and they're going to be assigned a name and an image so I need to go and create another let's go add a new item and Molly and what we're going to do for this is let's just do content page that's fine and we are going to call this list model and we'll say add and this is going to be very useful for going and binding data together so what we're going to do here is we're going to find what data is in each item inside of our list and this is not going this is going to be public class list model I'm just going to get rid of the content page not going to need that information then we'll have public and this is going to be um I'm not going to use any of this so let's just get rid of all of it okay and what I'm going to do here is just Define those things that each of our football players are going to have so I'm going to have a name and go and get Getters and Setters for this data and when we just do this and change this to image and this is going to be a string because it is going to be a file name and that's all we need to do for that okay so we got our Getters and Setters for our name and also our image now what we need to do is go and create our view model and what it's going to do is it's going to use this list model we created here and it is going to create a collection of all of this data so let's come in here and we'll say new item and we'll go and creates what content page that's fine and we'll just call this player View model and all of the images I have and so forth are going to also be on GitHub hopefully it's legal for me to give them away okay and uh so over inside of this what we're going to do is we are going to well I'm going to need an object model here so let's go right here and say using and system collections and object model is what we want and there it is okay okay there we go all right so we need this and then this is not a Content page so let's get rid of that and what are we going to do here um public class let's just get rid of all this we definitely don't need any of that either so there it goes all right so now I gotta build everything we have here so I have a bunch of images that I'm going to grab and these are just going to be football players so I'm gonna go I have them on a separate screen here look at this and this and I'm going to drag them over and throw them in my images directory so there is all of their names and remember these images have to be lowercase so there we go we have all our images inside of here and now what I'm going to do is I need to bind my players which is what the name of this um observable collection is going to be uh to a list view which is going to be in the xaml code and it's a little bit more complicated but I don't think that bad and it's more impressive by a long shot so we'll go um observe a bowl collection there it is and we have to Define what is going to be in it well we're going to have we're going to be using our list model format which is this so it's going to have a name and an image okay and we're going to do this for every single one of our players and I am going to call this my players because I think that makes more sense so we'll say my players and this is going to be equal to new observable collection but we are not going to have this be set up like this we're going to have uh let's get this right here and let's define everything so boom like that okay so what we need to do now is we need to create a new list model for each and every one of these and I also need to close off and we're we're going to do that so let's just there and then let's close that off okay so I just need to go new list model and Define all of my different players this and then I'm going to say name is going to be equal to and the very first one I'm going to have is Cameron Hayward and there we have that and then also we are going to have image and that is going to be equal to Cameron Hayward over here so let's just get this and copy this and paste it inside of there and put our ping file at the end of it okay and we're gonna have a bunch of these so here we are and we'll copy this pay stack okay so the next one is going to be George Pickens and I'm going to uh image is going to be the same thing so George Pickens and copy that paste that right there and there we are okay and then we'll create a new one and how many of these do I have well let's just let's just take our time here because I don't want to make any mistakes okay so Kenny a good and oops oh there he is okay there's okay okay and um let's close this okay that if you ever get properties up there just close it and you'll you'll see what you what you expect to see okay so let's get this and this time we copied the whole thing so let's paste that in there and let's go and create another one after that and this one there's just going to be three more so I I just wanted to have enough on here so that it looked kind of interesting so make uh Fitzpatrick and let's go and get his name out of here copy and paste this here and go and two more all right so let me just do two more okay so I got that and we'll do Naji Harris wouldn't it be funny if not funny for me but um if that one Split Second that I had the player's image on there the NFL came and shut down my my uh video yeah that'd be interesting okay so there's no giers and um also we'll do PJ Watt and there that is okay copy okay so we have our names and we have images tied next to them what else do we need to do well after this part we need um basically we're going to set it up so that a player can be deleted from a list View how you would do that is just go public and I'm going to call this command and [Music] referencing our list model right here and uh let's go like this and we'll do delete player is what we'll have this be so delete layer and we'll do Getters and we'll make private for our Setters and then after we do that we are also we need to come in here and set it up so that we can remove a player from this collection that we created up inside of here now we do that is we say public and player View model and that's fine and then down inside of here what we'll do is we'll say delete player is equal to new commands and list model and after we do that we will say model and then the actual call to remove the player from this collection and we will do that so get that um we have a little bit too many curly brackets here don't we yeah let's get rid of this and then inside of here I'll just say my players and remove the model that was presented with a presented to us and uh yeah I have this and the model and I need to throw in a semicolon all right and I believe everything there is good okay now that I have that set up and I have all of the players set up what I can do now is go over into our xaml code and create this let's just do it right outside of our editor and basically a list view is just a scrollable vertical list of data blocks which are going to be made up of those player names and the images and whenever I click on them I am going to go and set it up so that like a alert comes on the screen or something so what we do here to create a list view is we say list view X and the name for this is going to be Steelers those were all Steelers players and I'm from Pittsburgh so I'm happy with my team now and I watch it it's one of the things that I do for fun okay so now we have to set up a binding with the my players that we have already set up okay so my players right here we are going to bind to this list so let's come back here and how you do that is you say binding and my players like that all right and then I'm going to just Define some random things so let's see what the row height looks like let's have it be 100 and um item selected whenever one of the list view items is selected I am going to come in and do like a little some more information about the player okay so we got the list view defined but now what we need to do inside of the list View and let's move this up here so you can see it all on one screen what I want to do is I need to say list view again and you're going to say item template like this and inside of this you then say whoops data template so data template and inside of that we then Define our uh our information that's inside of here so we'll say data template and we are going to say we want image cell and the text that's going to be assigned to this is going to be this is another controller we're going to have the text be use the binding and specifically say we want the name part of it and then we're also going to use image source and again that is going to be the image that we bound to it so binding image okay just so it totally makes sense here is what we're binding to there's the name there's the image and this is how we have all those things set up all right so we have both of those and we can close that right there now what we can do is we are also inside of our image cell that we have here we want to Define that we want the option to delete the player from the list view that's why we wrote All That code before and how you can do this is you can say image cell Dot and context why is this not opening up oh there it is I don't know why it's not Auto completing context actions and here we go and we'll go menu item there it is and text and then if you swipe on this it's going to give you the option to delete so delete and we'll say is destructive is destructive and we'll mark this as true and then we have to bind everything to the delete player part so we have to oops click the wrong one we need to bind to the option for deleting the player that we have right here so how you do that is you say command and binding and it's a little bit more complicated because it's buried inside of there so we'll say binding context and then delete layer and there we are and then we have to say source and source source is equal to and we need to reference the Steelers part so reference Steelers and then after this we're going to go and have our Command parameter defined so parameter with that same binding that we had before so we'll say binding and there we are and then I can close that off I think I have all this right do I not so let's go and look I don't see any errors looks good and then this closes off and the image cell closes off make sure you have all of these in the correct order and the list view closes off as well and do I need to yes I want to have it set up so that if one of the I uh Steelers is is selected that we're going to do something over inside of our code so I have all that set up Stealers item selected so what we're going to do over here well um I'm going to go and create a string called player and also I am going to create another one that is going to be player data so it's going to pop up and and show the player's name and then also a little bit of information about each of those players so what I need to do here is I need to go and do a switch statement and then I have to find out which item was selected inside of our list view so we'll say selected item good and good now I am going to go and just look at the player's name and then provide different um different information that is going to be displayed in an alert after they click on it so just come here we'll say case list model and M win m dot name and we'll say starts with say Cameron well in that situation I'm going to say that I want the player to have um the name of Cameron Hayward Cameron Hayward and there that is and whoops didn't have the quotes over here so I'll just do that that and let's get rid of this extra quote okay and I think you understand that and then I'm going to just go and throw in the rest of this here so this is just some data about this individual player there that is and then of course you have to end this with a break statement and I'm not going to force you to watch me type in all this information about these players I'm just going to pause and put it in here myself okay there you go so here is all the player data that we have inside of you know that is going to be an option for displaying inside of an alert and then what we simply do is just come down here and say display alert and inside here when it's go and get the player name so I'm gonna say that I want oink and player that we just assigned to it and close off that and then underneath of it I'm going to put some Player information as well which is going to be that player data so player data there it is and then okay just just okay and close that off and if I did everything right I'll save all and we'll run it and we'll see if it works which it should and then I'm going to show you how to work with carousels and maybe a couple other different things okay it's loading and it's loading some images so it takes a little bit longer oops got a couple errors here I just put two dots in there instead and uh bottom of a property and I think that got rid of all of them oh it's also complaining about the fact that count is here and it's never used so got rid of that and then what else does it say no property bindable property or event four dot item template so control demo and where is this error at well it looks like I got rid of the errors okay so here is our code and then we can see our list View whoops accidentally hit the date I guess or something um it is not showing it hmm interesting let's close that what are you doing now um cancel that for some reason it is not showing the list view let me figure out what is going on with this well here's something delete player I spelled delete wrong okay and we'll save that oh I forgot to put the binding context okay you have to say binding context like this very important and this is equal to new and then we'll use our player view model and I bet you that fixes everything let's run it again and yes indeed it does and here it is and it's a little bit tiny for some reason okay let's open this up so it's a little bit bigger and now you can see that we can scroll through the different players and if we click on them it gives you a little alert that tells you some information about each player okay pretty cool stuff so now what I want to do is show you how to do this with a carousel view which is really neat and we don't need to really change anything because we have all the bindings set up and all the data link so pretty you know awesome okay so what we're going to do is after our list View and a lot of this is going to be quite similar I'm going to do a carousel view okay Carousel View and I'm going to say items source is go and we need to bind again so binding with my players exactly like we did previously and close that off and then inside of here we're going to do it's very very similar so we'll do Carousel view again and item template so item template and then we'll do data template just like we did before as you can see these are very similar so add a template and then I'm going to do a Mac layout so we'll do stack layout and inside of it I'm going to define a frame and this is going to be for each one of the players so we'll say let's do it like a corner radius and let's make it five and maybe we throw a margin I don't know if this is going to look good or not I'm just going to sort of throw it together here okay and then we can do a height request and make this 250 and the horizontal options let's make them Center and the vertical options let's have maybe let's maybe do Center expand and let's do a little you can also just go and see if the you want a shadow on it and of course I want a shadow on it and close that off all right and then after that we're going to do another uh stack layout inside of this and um what do we want to do here actually let's not I was going to add something else but why I don't want to do that okay so we have the frame closed the stack close the data template and item template and the carousel view all closed and you can also set this up so that if they click on it something happens but I think you figured that out so let's run it and just see what the carousel view looks like very similar to the list view except obviously it's a carousel okay so let's bring it over here and let's see how it looks so controls unless I didn't make unless I made an error up I made some type of error oh let's go and drag this over here and let's fix that oh I know what I did yes I was getting ahead of myself so yes I am going to have to go after this I when I create the frame I have to throw the images and stuff inside of there sorry about that so label and text and that's going to be the name so let's just go binding name and then we can do all kinds of stuff well I do some stuff with fonts just you can see actually let's do something really cool let's use a font that is not on your on your screen so I want to go and I want to get a font let's say I want to use Google fonts all right so here we are I'm just going Google fonts and these are all free fonts you can use for anything and uh they're kind of partial to this font okay so this is Anton and uh there it is Google a little slow today and let's say that I do let's just do Steelers just to look at it all right that's more of a you know football type of thing so what I'm going to do is I'm going to click and I'm going to download this font and then after I do that I'm going to go and get the ttf file and I'm going to drag it over here and I'm going to throw it in my fonts directory and you can see it is right there okay so now I can use this font this special font directly inside of here so what I'm going to do is say font family and Anton regular it's exactly this so you can just copy it just so you don't make any type of error spelling error whatever okay so let's just paste this inside of there so there you go I that's how you can go and get free fonts and use them and we can also do some font attributes maybe we want this to be bold so it really stands out and font size let's set that to large and let's also Center it so horizontal and options and we'll send that for Center okay I think wait let's do vertical too so let's do vertical options and let's also make that sound okay I think that's enough playing around okay so that's going to get to the player's name and then we want to go and get the players Associated image so let's do an image and source is going to be the location that is assigned using our binding so we'll say image like that and do all kinds of things let's try doing a fill and I think I got most of the stuff there um let's do a height request and have it be 150 and a width request and have it be all spawner 50 these are squares obviously and horizontal options and let's set that for Center all right so we got all of that and why is that underlined save this oh I know I need to throw another stack layout inside of here so let's go throw that there and and also a closing one so that'll surround all of this so let's go and grab this also and we'll throw that right there okay and there we are now I think everything is all set up and it should work so let's run this and see how it goes and it works so let's just bring it over here and now you can see we can scroll through all of the different players so just another added feature not the prettiest thing on Earth but you get the idea and I will rely on you to make it prettier and another thing since I talked about fonts another thing that's going to be very common that you're going to need to do is you're going to have to have the or it's going to be useful to have the option to get free icons that you're going to be able to use in your app and there's a couple different icon sites I am going to use fontello for this okay so just fontello.com and then you can come in here and just grab all the different things that you might need so why don't I do a search and let's do like save this looks fine so I'm going to select that maybe we do open and this looks fine and uh close see if there's anything for close cancel whatever um you know you can go and get as many of these different things as you want then you can download them and what's useful here is let's go and enlarge this you're going to refer the to refer to these fonts using this code right here so let's say that I want to use the save code it's going to be e800 and you have to download the fonts um here I'll just download them okay all right now I got my fonts and I need to go and find them in my file folder after you get those you're going to want to drag it's called fontello unless you change the name which I wouldn't do and you're going to want to put that in your fonts directory say it says fontello right now now after you do that what you need to do is go and register it in your Maui program file so we program dot Cs and you're going to register it exactly like these other fonts that are here are registered so we're just going to go and copy this and you can have a whole bunch of icons all in that one um one guy you have there okay so we'll get fontel whoops let's go whatever ah didn't mean to do that so let's close that click on it lightly click on it again there we are copy and then you have to Define what you want to call it and I normally call it icons and then I have all my icons for my whole app all in one place so we'll save that now if you want to be able to go in and display them just go into your xaml file where do I want to put this um outside of the carousel view obviously so and then I'm just going to do something simple I'm going to do a stack layout and like this and then inside of it I'm just going to throw a label and use it so I'll say label and you have to Define your font family which is going to be you gave it the name of icons or the Alias icons and then you just Define which one you want to use and you have to go and with a hash and an X and then you put in e800 remember I showed you just a minute ago how it had a code e800 and then you have to put a semicolon there and we'll do font size equal to large like that and it will if you run this it will display that specific icon which is uh the save icon I believe and there you go and you can see it not not very fancy but there is our save icon and that's how you can use them anywhere all right so a whole bunch of things on controls now I think I'm going to spend a little bit more time explaining bindings so we're going to create a new project here again and I'm going to show you all the different ways you can work with them because the last example might have been a little confusing so let's go on from here now basically just to recover it a binding connects a data source to a control so they can communicate and any.net object can be a data source and it's important to understand that this object will be bound to a control you can also actually bound controls to controls as well which you'll see and basically the source will have a property that is going to be bound to a specific control so why don't I just go in and actually create something here so I'm going to go over it's very common for us to have our data sources over inside of a directory called Model so let's do that so let's say new folder and we'll call this models like that and then what I'm going to do is I'm going to stick with my previous example where I had players in a sports team and I'm going to say that inside of models I want to add a new class and this is going to model My Player information so I'm going to call this player Cs and we'll say add now inside here what are we going to put well first off I'm going to make this public so public class and we'll keep it very simple we're not going to do images and stuff we'll just keep this very very simple so I'm going to say that I want to have a string and it is going to be called name and I'm going to have another piece of data inside of here and it is going to be called info so this is going to be specific information for each player that's all we need to do so we have that set up now what we want to do is let's go into the xaml file here first and let's get rid of some of this extra information let's get rid of these labels and maybe leave one label um which one do I want to keep let's get let's get rid of this and we'll get rid of the image that we have here because I wanted to go and output some information to some labels and here we'll just have this be a blank space for right now and we are going to just we care really about putting this information in here not really let's simplify this okay so let's just get rid of all of that information so we have a label and we have a button and we're just going to use the counter button event handler that we have previously worked with so let's jump over into our main directory that we have right here and what I want to do here is I want to come in and have a player be created and information to be populated inside of the label that we have whenever they click on the button so we're going to get rid of all of this information maybe we come over here and this xaml file and we it's we could just leave it be clear well let's say let's just have it be click me let's just keep this extremely simple okay so whenever this is clicked what do we want to do well we want to create an instance of a player so it has name and information so we're going to come in here and how we can do that and I'll call this player Cameron because that's his name and I'm going to say new layer and then after that I just populate it with the information that we need for this data source so this is going to be Cameron Hayward and I am going to well Hayward and I am going to get some information on him so info and we will say copy this off this website and we'll paste this inside of here okay so we have that there and don't forget to put the semicolon here okay so we created this instance now what we want to do is we want to create a binding between this data source and ultimately some control inside of our app how we do that well there's many ways but I'm going to show you a couple different ways so I'm just going to call this player binding is equal to new binding all right now after we create The Binding we have to define the data source that we can have and remember it can be any object so I'm going to go player binding like this and the source is going to be Cameron look at that it automatically populated it after this I need to define the name of the property that I want to bind with our control so player binding and path and the specific data from that um from that data source we are interested in is the name okay and maybe I should put these in here let's put some information so I'll say this creates The Binding and this defines the data source and this path defines the name of the property that is shared between the source and control okay then after we do this what we need to specifically do is we need to bind and what we're doing is binding this piece of data to a label and what we need to do is to bind it to a label we need to define a parameter that is going to be specific to the label that we will be binding in okay so player data because each control has all sorts of different properties which you're going to see here in just a second so I'm going to say set binding and we're working with labels so how many options are there a lot there's anchor X property automation property background property look there's so many okay so we're saying that this specific name we want it to go in this specific part of the label but what we're really interested in is just putting it in text so we'll just say text and this is specifically the text property that we're going to be working with and then we put our player binding inside of there just like that and once we have that all set up inside of the event handler we have right here we could save that and then we can come over and this is going to let's just get rid of this let's get rid of the whole thing all right so that that button doesn't cause any confusion actually let's make this even more simplistic just to cover everything so we're going to give this label a name and it's contains a label name okay so let's call it that and then we'll use label name over inside of here also and we'll get into the more complex things here in a second all right so we have that set and then whenever we run this we're going to get our little app and whenever we click the button it the name will be displayed right here and it is okay so that's the probably the most simplistic way of working with bindings we can also come in and actually create bindings directly into inside of a Zam code but what we need to do here is Define that we're using our models here so I'm going to say xmlns colon X and specifically models whoops models we have to put colon right here like oh no it's just going to be XML S I don't need the X there it will say models is equal to and it's clear dot name space and then we Define we're going to use Maui app 5 which is what we're working working with app five and then specifically our models directory now what we can do is we can go and Define a data source directly inside of here so we'll create a player just like we did before we'll say content page dot resources and there's resources and close that off and then inside of it we'll say models and player X and we will refer to this as player so the key for this so we can refer to it later and then we Define the same things we defined in that class so we'll Define a name and maybe I say Naji Harris like this and then we can also come in and Define some information about this player so let me grab some stuff off the website and copy and paste there we go and and close that off good now that we have that defined in the xaml code what we can do let's come down and just create another label inside of here maybe I'll put a little comment on here so example one and then we will put this right here and this will be example two and for this one let's just go and copy this label because a lot of it's going to be the same but we are going to have the name in this situation be player data and then for the text we're going to pull the name directly out of this source that we have up inside of here now we do that is we say binding and what are we binding to name and then we have to whoops binding name that and then we have to define the source for the name which is going to be equal to static resource like this and player and where does player come from player comes from right here we defined it right here see with the key player okay so we have that all set and then that'll automatically whenever we run our application we'll put Naji Harris inside of our app and you can see oops sort of flipping out there a bit and there his name is right there so that's how to bind directly into inside of xaml code yet another thing we can do is we can get away from Individual bindings by using what's called a binding context so we're still going to have our player inside of here but I'm going to comment all of this out and I'm just simply going to say binding context where is it there it is is equal to Cameron like this and after we have that set up we can go over into our xaml code and just directly link to it inside of here and what do we want to call this let's call this example three whoops what'd I do example three and we'll just call this binding context all right and what's cool about this is here we're going to go and create a label again we don't need to have a name on it however so let's just go copy this like this paste this down here get rid of the name altogether and then inside of here we'll grab both both pieces of information that we bound to so we'll go binding and name and we'll leave all this be well maybe we'll put this at the start like that and then let's do another one for our Player information so paste that there and this is going to be the info that was signed inside of there and that's all fine and we can go and run this and this time whenever we click on click me it's going to put all of this information there all right pretty neat stuff and um on top of that we can also come in and create bindings between controls so let's go down here and um example this is four binding between controls and what that means is whenever one of them changes it's going to change the other one so let's go and create a label inside of here so I'll say label and let's go and give well I don't need to do really anything except just to find what's what goes inside of it so I'm going to say the text is going to be equal to and this is going to be actually tied to a slider so let's create the slider first because I think that makes more sense so we're going to win the values in the slider change they are automatically going to change the values that are in the label and let's just call it slider just to keep it simple and we'll say it has a minimum value of zero and a maximum value of 50. and what it'll do is just go and you define inside the label here the actual double value of whatever the slider is so we have this inside of here and how we bind to it is again we just come in and we say binding and we Define the source and the source source source is going to be equal to X reference and this guy right here slider just plug slider inside of there and then what's important is like we defined path before we have to Define what what value specifically are we taking from the slider well the name of the value assigned to the slider is actually value so that is what we will be pulling from it and here you can say font size is equal to what would we use before I think 18 and uh maybe we want to center it this time so we'll say horizontal options and Center so there you go and if we run this you'll be able to see that we're able to bind all of those as well so let's bring this over here and we will enlarge it a little bit and this value right here is our label value and you can see as we move the slider automatically everything inside of their updates okay so a bunch more examples on how to use binding because I thought that that was important to completely understand all right so now what I'm going to do is start a new project and what we're going to focus on this time is the mvvm pattern and what it's going to do for us is allow us to split up our user interface and our data and uh let's give you some information on exactly what this is so we have the mvvm pattern and here we go oops didn't copy it where'd it go okay so there you go basically the mvvm stands for model for the first part and this just represents the information about your real world object your data then you have a view that is the user interface and all of its components and normally you're going to be tying this data to individual controls and then you're going to have your view model and it's going to lie between the model and the view and connect them all right and we're going to see numerous different examples of them but basically the view is just going to connect to the view model using bindings we've covered bindings and different commands and the view model is going to update the view based off of interactions with the model and the model in the view never communicate directly so what we're going to do what's common here I'll just leave that there why not is to come over and actually create a folder for the individual parts of this pattern so I'm going to come over here and I'm just going to create a bunch of folders so I'm going to say new folder and I will create one called models and let's create another one and add and new folder and this one we will call view models and then let's add actually you know what let's put these all in their own separate the da directory so I'm going to say add and I'm going to say new folder M DVM like this and then structure them this way this will work better so let's throw those in there oh yes do that and then view models okay oops did I grab it let's see there it is all right good now that's good and then let's add another folder here and then of course this is just going to be views like that okay so now that we have all of that structured what I'm going to do is I'm going to go into models and I'm going to structure a customer class so I'm going to say that I want to add class and its name is just simply going to be customer like this and there it is all right so what are we going to have to do in our customer class we are going to come in here first and change this to public and that's fine and then we're going to Define all of those things that will represent a customer and I'm just going to go and have that autocomplete and I'm just going to say it uh change some things so what do we want to know about our customers well I think we'd like to know our customers name that's kind of useful what else would we like to know about our customer uh maybe not address but maybe something more specific like our customers Street and City way to go visual studio and uh no postal code I want that so let's change this to zip code however and then let's see what else uh it just wants me to do postal code it's like you have to do that and I want to do state um let's do this and then let's change this to State and I'm going to put other data types in here just so you can see examples so for example I'm going to have the ZIP code be an integer and then I'm also going to say that I want the phone number for my user and then let's also go and maybe do something like birth date so we can mess around with date times and let's change this from postal code that it has an obsession about to birth day and I'd also like to do something with time spans so why don't I come in here and do something like I could have did higher date but let's do time span and let's do something like when's the best time to contact this client that we have or this customer we have something else I'd like to track is a balance that they may hold so this would be money that they owe to us and there's a double and then let's think of a bowl we can use just so we can work with booleans also um let's say I just say active customer okay are they an active customer have they purchased from us recently true or false there you go and we have all of that structured for our customer now what I want to do is create a view for it by creating a Maui content page so I'm going to go over to views and add and why is this not working um yes that works okay so we'll come over here and say new item.net Maui and I want this to be a Content page so let's go like this and let's go and grab this like that and we're going to call this customer View common to do stick with that okay customer View and there is our customer view all right so what we would like to do I'd also like to do a customer view model so I might as well just do that also so I'm going to come in here and say add and new item and this is going to be customer view model so let's select this I have that selected customer View model that works and we'll say add for that as well okay so I'm going to start with the customer view model here I think first so uh specifically what I'm looking for customer view model I'm like this part right here and inside of here this is custom review model perfectly fine and then I'm not going to call initialize model in this circumstance let's get rid of that instead what I'm going to do is I want to create a public customer so it can be accessed through a binding so I'm going to say public and customer and customer this and this and we'll say get and set to create our Getters and Setters why will it not do that well it changes to public key oops whoops and this is uppercase okay public customer customer and this is let's get rid of this and this is going to be the getters and the Setters okay there we go all right so now we have that created now inside of here this is saying that there's an error we need to import our model so we can just go show potential fixes and you can see right here that I'm specifically grabbing this from the models folder that's in the mvvm directory all right so now that I have that set up I'm also going to come in give us a little bit more space here and I'm going to say that I want public customer view model like this and I'm not going to put anything inside of there and I'll just do this okay so now that we have that set up I can create a customer instance and then import the name you know based off of this namespace we have up here and another thing I don't need this content page so let's just get rid of that okay so we have this and I'm going to say that the or I'm gonna go public customer review model and then I'll create a customer so I'll say customer is equal to new customer and then I'm going to Define all of the data that I want assigned to it let's throw this like that there we are and there we go okay so custom review model and I'll also change this to public class that and anything else here that I need to do that's fine oops it messed up a couple other little silly things here let's get rid of this and let's throw in our brackets here for this so custom review models whoops and there we go there we are okay so now we have that set up and then I can import this up inside of here so let's go and grab this the whole way down through here looks like I have a couple more semicolons than what I should it's still a little bit of house cleaning here then I'm also going to want to go into the view models and say add and class and this is going to be called customer view model so customer View model and add that inside of there and inside here we have view models all perfectly fine this needs to be changed to public however so to public and then inside of this I'm going to create a public customer so it can be accessed through a binding and we've already talked about bindings a lot so I'm going to go public customer and create our Getters and Setters for that and then I am going to go public and inside of this function what we're going to do is we're going to set it up so that we can actually create a customer instance so customer and view model this and then inside of here we'll create a customer so and it'll be accessible outside of here so we'll say new customer and then no not customer review model new customer there we are and on here and then let's just come in and just list everything and I have to go into the customer show potential fixes and then I want to use this model so make sure you import that actually you have to otherwise you're gonna have all kinds of problems so we're going to say that I want to define a customer with a name and I'm just going to call this person Sam Smith seems perfectly fine and this is giving me an error because it should be customer review model there we go okay and what else we like we have a street for our customer and we're just going to make this boring one two three main street and then we're gonna have a city and I'm just gonna put this where I live which is in Pittsburgh and state and let's make this PA and we'll say zip code is equal to one five two two two and we'll say that Sam's telephone number is 412-555-1212 and then we have to define a birth date so to do that birthday is going to be equal to new and this is a date time and we will put in the most important date in history and then contact time and this is the best time to actually contact him put up date time this is actually a time span so time span and I'm just going to have this be 12 o'clock and then the also we have a balance for Sam so balance is going to be equal to let's say he owes us this much money and then is he an active customer or not we will say that yes indeed he is an active customer and we're getting an error here because I have to put new inside of there okay and that is everything don't forget the semicolon here at the end um all right so we have that all set up now for our customer view model now what we want to do is go over into our customer view so customer View this guy right here and we're just going to initialize this what we're also going to uh set up The Binding contacts to the view model and we did this previously so we're going to say binding context if if you are somehow skipping around in this tutorial and you don't understand what bindings are well I covered them earlier in this video so is customer view model and come inside of here and show potential fixes and then using Maui View models and that'll make that error go away as well another thing that I need to do is I need to set this up so that it is going to actually load the correct um the correct uh I went to customer view part of our app to show up and if you forgot that is over in at well it's not in there let's get rid of that nope not there it is over in the Cs file for this so there it is and we're gonna say our main page is now going to be customer View in there that is so let's save that and what else do we need to do here well we need to set up our customer view this is giving me an error let's go show potential fixes and we would say that we want to get our views okay so we have that set up all right so what is this part all I did was change this let's just save that and now what we need to do is go into our customer View and actually bind to all that data and display it so we're gonna go into customer review and the xaml file that we have right here and what would I like to do well I'd like to first off add some spacing to this so I'm going to say that spacing is equal to 10 and that padding is equal to 30. and then for our very first label I'm going to say that I want to get my customer's name so I'm going to go in here and I'm going to say binding like this and customer dot name like that and let's say that I want to Define my font size so we'll say font size is equal to no 25 should be big enough to see for you and we'll say that we want to start on the left side and let's also have this be start and there we are and after we've made all these different changes I'm going to go and test this just to make sure it works so make sure you go Android emulators and or whatever you're using and get that set up and let's run this and if we go and look at our app you can see Sam Smith shows up inside of there we're going to be able to grab all this other different all these other different pieces of information and then what we'll also do is go in and set this up with other more elaborate controls but for now I'm just going to get some of the basic data and display it so we'll go in just so I can show you can pull different information and let's say that we also want the street and we also want to get the city and we also want to get the ZIP code or no the state comes next city state and then we're going to get our ZIP code so let's just throw that in there and zip code and uh our telephone number and if these were set up as entries we could go in and divide Define some specific keyboards that would open um what would I like to do here well uh the next thing is when to call the the customer so for this I'm going to create a horizontal stack layout and I'd like to do spacing is equal to say 20 so we can have some space here so we'll say 20 for that and then inside of here maybe we want to divide this up so it's a little bit easier for you to see then inside of here what we're going to do is have a label once again and this label is going to have just regular text and the regular text is going to say when to call font size all of that is fine however I'd like the vertical options to be Center for this so let's set that to Center and then after this what I want to do is go and display the contact the contact time that means when to call the customer so I'm going to go and use a Time picker for this and I'm going to say that the time for this is going to be binding to customer and contact time and then after that I'm going to say that I want the font size to be this and the vertical options to be Center as well see what this looks like okay so we got that set up close that off and let's run it again we changed a whole bunch of things so let's go and see how things have changed over inside of our application there you can see is the new all of our new information and if we click on the time it's going to allow us to change that and otherwise no but these are not clickable these are just fewer labels of information let's go and mess around with some other different things I also said that I wanted to monitor whether they were a current customer or not let's use a horizontal stack layout again for this so let's copy that and then this one is going to be I'm going to use a switch for this so I don't know why I didn't put the bottom there okay copy and we'll throw it inside of here okay so for this one I'm gonna do another label so let's just come up here and copy the label we have and we'll throw it right there and this one is going to just simply say active customer and this is going to be set for all the same things however I said that I wanted to use a switch so let's do so and I'm going to say is toggled and you can tie this to the true or false that we have saved for our customer also so for this you just do binding again and customer and are they an active customer and there it is so that's that and then I'd like to make it look a little bit nice so for the switch I'm going to say that I want the on color to be equal to Orange and then let's put a thumb color also and let's set that for green and vertical options let's make that be Center so that they are centered inside of our little box inside of there and let's go and run that and you can see that now we also have a switch inside of here that will be able to switch back and forth on whether they're an active customer or not okay what else would I like to do well I also would like to come in here and Define their birth date and allow for any changes we might want with that so I'm going to say I want another uh horizontal horizontal stack layout and also let's keep the spacing the same let's go like this okay so for our birth date what I'm going to do now I'm going to do a label again so let's grab this label and copy it and paste it inside of here and here I'm just going to say birthday because that makes sense so birth day and then specifically do I want to change anything else with this nope don't think so but I'm going to put in the ability to pop up the little tool for changing dates and that is called a date picker and I will be able to go and pull the date using our binding which is tied to customer birth day and what would I like to do I'd like to just I think just font size and vertical options is all that I'm going to want to change with this and then let's close that off and since we're near the end rather than uh going and redoing any or you know running the app let's just go and do this and finish it off with our balance and then as long as this works we will cover Collections and such as we continue here now for our current balance we're going to copy again this paste this inside of here and I'll just call this current balance so current balance and all of this is fine and and then after this let's say that we want to put an entry inside of here we can also populate entries and can populate anything so for this in binding to customer and this is going to be customers balance and font size and vertical options is all I am going to change with this also copy all of this and paste that inside of there and I believe that that is also all done basically and then we can bring this over and you can see that we're able to come in here and mess around with the dates um and click on okay in that situation and also inside of the entry field we will be able to change that okay so good amount of information and in the next project uh continue to add more to it all right so now what I want to do is we were working with one customer what's better than one customer how about many customers but we're going to need to go and create more view models and views for this to work so I'm going to come over here to the viewmodel section I'm going to say add and I'm going to say that I want to add a new class and you don't need to select anything this class that's perfectly fine and I'm going to call this customers view model like that and then hit add and then I'm also going to create some custom a customer View so down inside of the view section select that add new item god named Maui and then make sure you select content page xaml like this and then we're going to come in and we're going to name this customer's view so customers view like that and add that okay so what are we going to put in these guys well let's open up the the view model is what customers view model that's what I'm most interested in and what I want to do here is I want to create a list of customers so right inside of here oops let's get rid of that and let's come down inside of here okay so I'm going to say public and list and what are we making a list of customer okay and whoops customer and it's not going to know what that is so let's come up here highlight this and it's going to say show potential fixes and then we'll say using our mvvm models and now it'll go away okay and let's call this customers and we're going to have Getters and Setters for it and then I'm going to say equal to new uh list of customers exactly like that all right so after we have this set up what we want to do is create this list of customers so I'm going to say public and customers View model and then I'm going to go and populate all of these so inside of here just come down inside of here and then oops there's all this space inside of there let's get rid of that okay so let's come down here and then inside of it I'm just going to say customers dot add and new customer and then I will just populate all of this so this is fine and then we'll come down after this and throw in a curly bracket and then we will Define each of our customers and if you don't remember customer this is all the information that each customer has so we want to populate all of those pieces of data so I'm going to say something like name is equal to and Fred Flintstone and then we can do Street is equal to 222 Rocky way which is actually one of the resonances of Fred Flintstone and city is equal to if you don't know this is The Flintstones the cartoon it's an old cartoon that I watched when I was young he lives in Bedrock and this is kind of confusing because they lead you to believe that they live in Arizona but the ZIP code that they use is actually in Louisiana so I'm going to say they live in Louisiana zip code whoops zip code is going to be equal to and seven zero 777 I'm not going to type in all of this I'm just going to do this once and then cover everything after that and we have a phone number couldn't find a phone number for Fred Flintstone so I'm just gonna use a generic thing here and if you're wondering what that is and you're from another country that's basically a deadline that that uh the telephone system uses five five one two one two okay birthday is equal to and for this I am going to say equal to and I'll say new date time and I'm not going to use now I am instead going to just say year 2000 and I know that Fred Flintstone was born on February the 2nd and best time to contact Mr Fred Flintstone that is a time span isn't it let's see here why is it listed as a date time I have it listed as a time span yes I do close that don't need more things open so we will say new time span keep everything exactly as we had before so time span and then I'm just going to say 12 o'clock and there we are and then I'm gonna say that Fred Flintstone doesn't owe us any money so we're going to say the balance is zero and then is he an active customer and remember we were just using all these just so we could play around with different data types and that it oops that's going to be true I was thinking Bowl in my head and then typable okay so that's going to be marked as true and there is all of our information we have on Fred Flintstone I'm gonna pause this and plug in some more customers okay so I also plugged in Wilma Flintstone yes this is another Flintstone address let's say she left Fred very sad story we also have Marnie rubble and Betty Rubble and all of that information is in there and that's all that we need to do here but now we need to set the binding in customers view in the code so it's not this one so it's customer's View and it's going to be this one over here okay so we got customers View and uh wait a minute this isn't yeah this is that code um over here what I'm going to do is I'm going to say binding context and customers view is what we're going to use now and also I'm going to come in here and change this to customers view as well so let's go back inside of here so this is all fine and The Binding context new customers view model and there's nothing in it right now so we need to go and populate the customers model as well all right so over inside here I actually realized that when I covered all the collections but I didn't cover the collection view because it's something that I don't use very often but I still want to cover it and show you what it looks like so I'm going to say here collection View and for this we can do selection mode multiple different options we have here multiple none and single let's make it single why not and then I'm going to bind this to the collection of customers so come down here and I'll say items source is equal to and we will say that we want a binding with customers and you we just created customers just a minute ago so we got all that oops I accidentally oh there it is collection view okay so now we have that all set up and let's line this up so it looks nice and neat and then inside of here what we're going to do is we're going to say election View and this is going to be item template so this is going to be all of the things that are going to be used per item inside of our collection View and say data template like this and then inside of here I'm going to throw a stack layout so there's a stack layout not doing anything um design wise with that but I am going to do some I'm going to throw a frame inside of here and I am going to do some design stuff with the frame so I'm going to say something like Corner radius and this is basically defining a box that's going to go around each of these items and let's say I want this to be five and then I can do a margin let's also make that five I can do a height request to basically ask for the amount of space I want for my text that is inside of this box I'm going to say that I want horizontal options to G start which means on the left side and is on the right side Center is in the center do vertical options and let's set that to Center and expand and then do I want my frame to have a shadow let's say that the answer to that is true okay so we have that all set up and then we just close this off like that all right so then inside of our frame I'm then going to throw another stack layout like this and I'm going to keep this very simple I'm just going to grab the name of one of the customers so or all of the customers so we'll say text is equal to then we just bind to what we want to bind to so we'll say binding and we want the name to be shown here after and that is all that we're going to do there and I think I did everything else did I have a CS I have that stuff for customers you have all that set and also populate where is it yes everything's been populated you can see it's pretty simple so I'm going to run this whoops just realized I made a mistake I put this in the wrong place so it's this is just still going to be customer view this is the uh customer reviews the ammo file put it in the wrong place so I want this to be in in the other part so I'm gonna do The Binding context again and copy and jump over here nope jump where do I want to jump there we go jump right here and change this to customers view model like that and then it's going to give me an error and I need to import this so view models there it is and now that I have that set it will run so let's run it and sure enough you can see here is our collection of customer names all right good stuff so now what I'd like to do is I'd like to come in here and actually show you how commands work which allow us to really separate our view models and our VP and basically the code from the actual user interface but to do so I'm going to have to create a couple more um view models actually actually and Views so inside of view models I'm going to come in here and I'm going to go down and say that I want a new class so there that is and I'm going to call this man view model so let's get this command View model like that we'll say add and then after we have that set up I want to go into views and say add and new item and Maui and a Content page and then this guy is going to be called let's just call it command View command and view xaml open that up all right good so we have the customer stuff all done so let's just close these so that we don't have too many things on the board because I might go and write code in the wrong place and that would be bad okay so what do we have here this is customer view model don't need that either okay so after we have that all set up what I want to do is I will have my command view model that's open command view xaml code and here is the code for that first thing I'm going to do is come over here and change this to command View like this and that's going to match up with those two let's save that and then let's just jump through here and initialize everything as we go so this is the command View and let's this is the command View and this is the command view model um don't really need to do anything for well yeah yeah we'll have to do a couple things for this what I want to do for this is I want to set up a command that is going to allow the user to click a button and then open an alert and how you create these commands is you just say public I command and I'm going to call this button click command like that and then I'm going to say new command and then you basically Define what you want to have happen whenever this command is issued and I'll show you here in a second exactly how to issue it and also I'm gonna show you how we used to do it and why that's wrong so current and this is going to be main page and what do I want to do in this circumstance well I want to come down and I want to call display alert and for this we have our title so I'm going to call this first command and then I will have the message that pops up it's going to say you clicked the button and then for the last part the button it'll just say okay like that and we'll close that off okay so that is how we create our our commands and then I'll show you how to actually use them which is more useful okay so let's just start right here now previously what we did was we would come in and we would do something like okay we want to create a button and the text on the button is going to be something like click and then we're going to say clicked like this and then it's going to go and create some type of an event now what we're doing by doing this is we're tying the UI directly to the application logic but we do not want to do that we want to instead connect to our view model so what we're going to do is our text is still going to be click but instead of clicked what we're going to do is we're going to use our commands so we're going to say command is equal to and I can say binding and button click command like this this is exactly what we just created just a minute ago whoops let's get that out of there and then let's close that off and that is how we are going to do using the uh the mvvm pattern this is how we're going to handle events from now on and now for this all to work over in the command view the actual code page we just need to come in here and say binding context is equal to new and this is command View model like that and it's not going to know where that is so just put your mouse over this show potential fixes and import our view models I think I did everything let's run it and let's find out all right and here is our application and whenever we click on this it displays an alert exactly as we want it okay so that's how commands work all right so using multiple items inside of collections as well as commands and now what I want to do is show you how you can set it up so that your data is going to update both ways instead of just one way okay so now I'm going to have it set up so that the interface can talk to the code and the code can talk back to the interface and I'm going to do a very simplistic thing here but you know keep it simple so what I need to do is this is going to be a basic like calculator so I need to go and create a view model so I'm going to come in view model add and class and I am simply going to call this calc view model all right there that is and I'm also going to of course have to create views so let's come in here add new item and this should start to feel very familiar to you by now so we're going to come in here and I'm just going to call this calc View and add all right so we have all those set up so we have calc View and I need the code file and I need a total of four different files and we might as well just come in here and change this to calc view right now and then we will be done with that file okay now let's get into everything else we're going to do here all right so let's start off with our zml file and what I'm going to do here I want to put a little bit of styling on it so I'm just going to say margin is equal to 20 and spacing is equal to 20. okay don't need any labels here these just going to be entry boxes and we're going to enter data in the interface and then it's going to perform a calculation and then send information back to the interface so what I want to do is create an entry and placeholder is going to be equal to and let's just have this be number one and the text is going to be made up of a binding of course so we'll say binding and let's just call it number one and I don't need to do anything else so let's let's do this and let's copy this guy right here and paste it in and paste it in again so then we're going to have number two and binding of course this is going to be changed to number two and then here we're going to I don't know placeholder I guess I can write answer or something inside of there and this will be the answer as well and then we're going to have a button and that button is going to allow us to come in and this is pure like Mount the Maui way of doing it there are all sorts of different other libraries and tools for doing this but I want to do it in the purest way possible and we're going to be using commands again remember we're not going to be we're going to keep everything nicely divided horizontal options I don't know Center and the text we are going to be getting the sum of two values so let's just write sum inside of that and we'll come back to the command part here in a minute make sure you remind me so I don't forget um if I do mess up it'll be your fault okay so let's come in and uh so we got that set up and inside of here we're going to do a binding so we'll say this is extremely important to do this obviously binding context is equal to new and whoops oh wow what is it map automation properties excluded with child no not that I'm typing new and then we're going to say calc View model and there we go and we go and import this so oink and there we are all right so we got that set and I don't think we have to do anything with that so let's close that file also so we're going to be making some changes here though okay so over here is where we're going to be doing a lot of main work so to be able to communicate back and forth between these let's go and make this public so first off public class what we need to do is we need to inherit the interface of I notify property changed and it's going to give us an error saying that we need to implement a method and we'll go oops let's go show potential fixes there we go Implement interface there we go all good stuff now what we need to do is we're going to have everything closed off and we're going to be accessing with Getters and Setters so I'm going to say that I have private int and remember what we have we have number one and we have another one and it's just to keep it simple and number two and then we had another one called answer [Music] there we go and these are going to line up with these okay all right apart from Oregon to be private okay so now what we need to do is we need to Define our Setters and Getters but we need to do it using full properties because we are going to want to call a method that is going to update the interface every single time a value changes these are going to be public and and then um one now you can see where the num1 comes from now inside of here I'm going to say get and we will just go and get our number value all well and good but for our Setters this is going to be a little bit more complex let's move this up here so you can see everything and this is still going to be number one in value all good uh however we are also going to call another method which we have not created yet but we need to do this for all three of these different values so let's come in here paste that there change this to number two and change this to number two and this to number two and then we will throw in our answer also so here is answer and this is going to be answer also and then answer also all right but we have to go and create a special method that is going to automatically come in here and update that and then tie it to the command that that this button is going to be referencing so let's get out of here and um this is basically uh let's create our Command first so we're gonna say public eye command and it's called call it sum command and then this is going to be simplistic we'll just say new command and what we're going to do here with this is we are going to assign the value of answer by going and summing the values for num1 and num and close that off and close that off okay so there's our Command sum command we might as well just take it and throw it over here so some commands is there good stuff all right now we have to handle updating so after our Command has been created here for us we are then going to create a method that is going to be called when a value change of some sort has occurred and so this is going to be protected void and I'm going to call it on property changed then what we can do is I'd like to set this up so that it will work with any property and to do that you can come in and type in caller member name and this is going to allow us basically to work with any of the individual properties that we have and you say string and call this name doesn't matter what it's called so null like that and then inside of it we to have it automatically work and update no matter which property has changed we say property changed and then we're going to say invoke and this and new property changed event orgs with name and it basically writes itself doesn't it and let's go up here select this sometimes this actually Imports something we don't need so we want to go and get our system runtime compiler Services also got that sometimes it opens and gets something okay sometimes it'll go and try to import something called collar I think it's a bug which may or may not exist and that's it okay so that's everything I know I moved this so this is going to allow us to issue these commands and automatically update the different values inside of our interface both you know both ways so let's run it see if I made any errors here and I did make an error I've in over here whenever I was going and putting this in here I forgot to let this be binding like that and then it's going to be some command sometimes my mouth gets ahead of my brain okay so let's get rid of that and then that problem should go away and let's run it again okay so here's our application bring it over here see we have zero values inside of here and I'm just going to type in four and let's type in five and hit sum and it didn't work okay well I did it not work let me see what the bug was that I made here figured it out like instantaneously I forgot to call this on property changed okay so let's just go and get it and then we need to just go and copy and paste this everywhere like this this method right here now you see what this method does it's going to automatically update everything so let's paste this inside of here that and let's do it one more time okay and now I am almost 100 positive we will have no bugs save it run it again and let's come over here and let's type in uh five and let's type in 60 and then let's hit sum and 65 comes up so there you go now you're able to both communicate with your interface backwards and forwards very useful and up next I'm going to talk about navigation all right so now let's talk about navigation I've got a new project going here and we can just go and create that and what we're going to do here is I'm going to show you how to navigate between Pages which I've already sort of covered but then I'm also going to show you how to pass data between pages so what we're going to need to do of course is to come over here and let's create a new folder and let's call this mvvm and then inside of it we are going to add another new folder and we're going to add one called views and we're going to add another one called view models so if you models and then for our views I'm going to create three different pages so for well for the view models maybe I want to do the nah I'm going to do the views first start off with the simple stuff and then work our way up so views and we're going to come in and just like we always do we're going to get a Content page like this and just to keep this very simple I'm going to call this page one and let's create a bunch more or well two more so new item and got that selected again and this is going to be called page two and create one more and it is going to be called page if you guessed it three there we are so we have page one two and three so what are we going to do with them well um I'm going to go into page one first and I'm going to create a button that's going to allow me to go to page two so I'm just going to come in and say button like this and text is going to be equal to and we'll have it be page two and then we're going to create a clickable event so if it's clicked on we are going to go and handle that so button clicked and then of course close off this tag now I'm also going to just go before I go in and create all those different methods and such I'm going to go into page two and with page two I'm going to put two buttons in here so we're gonna go like this and get rid of that and throw this in here and throw this here and this is going to be um why'd I call it page like that should do it different let's go back just because I am a weird person and I want this to be page two like that okay save that and jump back over here so page one and then we have page three also and these guys I just I'm lazy and I just wanted to create these for me so I'm just going to get rid of this and then come in here like that and create the event handler for me and do the same thing here again so create that for me all right there we go all right so we have all those set up and then for page three all we're going to do is go back to page um two so let's go in here get this here paste that there get rid of this and like that and create this event handler also okay so we have all those set up now we need to go into our code so we'll go into our page one code first and we're just quite simply going to navigate to that page using a technique we've used before really the difference here is we're going to also I'm going to show you a couple new things that I haven't showed you yet so push async if you don't remember navigation push async and you're going to say what page you want to go to actually I'm also going to show you how to pass data which is all okay so we have that set up and then we can this is just going to allow us to jump to page two from page one then we're going to go into the code for this and we're going to do basically the same thing so this is going to jump us back to page one and this other one is going to jump us to page three so right yeah page two and this is going to be page three like this there we go and save all of those and uh then in page three I'm only going to jump to page two so like this and page two and that should work oh no also I need to open up I have all these windows open up I need to also go in and uh not this one this one there we are jump into this and I'm going to say that the page that I want to have open first is going to be called page one and it's going to say what is that show potential fixes and I'm going to say that I want to include my views on that or actually you know what I think I want to do instead is I want to create a hierarchical sort of like navigation interface so the user can also cycle through the pages using the nav bar at the top and to do that you just change this to nav uh [Music] page like that and then put this inside of those parentheses like that and then you also have to come in and say new oops new like that okay now everything should work let's change this to Android emulator just like we always do and as soon as that loads we can run it all right all right so here it is and it's working but it looks very ugly uh let's go to page two you can see there's page one page three you can jump to H3 you can see the navigation bars up here we can also jump back this way and jump to page one let's clean that up so it looks a little bit nicer um let's go into this guy right here and in the vertical layout that we are using here I'm just going to change the margin to be equal to 20 and then likewise let's do spacing equal also to 20. and that will make it look a little bit nicer and let's go and copy that over into all of our other different xaml files so paste this here save that and also open this up and next time we see it it will look a little bit nicer now what I want to do is be able to pass data between the different pages so how do I do that well I want to use view models so I'm going to come in I'm going to say add and I'm going to want to put a class file very important and what are we going to call this one how about we call it page one view model seems like a pretty good name so let's add that in there and this is just going to hold all of our data but before we go and put anything inside of there let's come in here first and do the same for page two so this is going to be page two of you model and there it is okay so we have both of those set up no all these are going to do like always is just have the type of data inside of them so public and I'm going to say that I want to work with strings if you put integers in here it will only allow you to pass integers if you put doubles inside of here only doubles if you put strings only strings and it'll be up to you to decide if you want to go in and change anything afterwards I'm just going to call this data because why not um save that and let's copy that and then let's jump back into this view model and we're gonna this is the piece of data we're going to be passing back and forth if you're wondering okay so after we have both of those set up those are done why don't I just close them I don't need them anymore so let's just close this and close that all right and also I do not need this anymore I'm going to continue opening up my first page or page one as I have called it however I am going to need to change some code here so let's go into page one first and like we did before we're going to need to create a binding between the view model and the view and how we do that is by saying binding context is equal to new page one view model like that and get that all set up and it has an error so let's just come down here show potential fixes and say that we want to import this guy right here our view Models All right so after we have that all set up we are not going to navigate this way anymore so let's get rid of that because we have to set it up so that we can actually pass data but we're still going to use this button click so what I need to do here is I need to convert my binding contacts to the type I want to use so I'm going to say VAR I'm going to call this the data is equal to and then we're going to put Page look it just writes it for you basically page one view model binding contacts data okay that's exactly what I want okay so now what I need to do is now that I have that whenever I do my navigation I'm going to say navigation Dot push asynchronously and I'll say new and the page that I'm going to which is called page two all right so now that I have that set what I can do is I'm going to come down here and throw this semicolon in there go right here and I'm going to say binding context and this is going to be new page to view model and then what I want to do in the page 2 view model is to place the data inside of it which the value is stored right here and that's all I'm doing so I don't say the data here what I'm going to say instead is I want a new page to view model and then I'm going to pass the data inside of it that's what I'm doing okay so Tab and tab so we have all of that set up and this is closed and that's closed and that's good so every time the button is clicked we're going to get the data that is going to be in a entry that I haven't even created yet I have to create that and then I am going to go and create a new page too and I'm going to pass along the data to it so why don't I go into the xaml code and actually create the entry which is going to have the data the entry that's going to allow them to enter data inside of it so I'm going to say entry and the text is going to be equal to and we're using binding again of course and data like this close that off all right have that all set up so also going to do the same thing for page two let's come in here and we're basically going to do the same thing why don't I just copy that so let's go here grab this guy right here and go back into page two over here and let's just throw it in the top above the buttons just like we did on the last one and we do not need to make any other changes to these either so let's just go and close them to get them off of our screen um page one all that's that one so let's get rid of that okay so we're gonna have to make actually page this is also going to be finished um yes binding I don't think I need to do anything else with this and what we will just close that also get rid of it um do I still have what is this this is the main thing I do not need this I don't even use it let's get rid of that and this is what's this guy this is something else button click I think that's page three don't need that either okay so now we're just left with our actual up page three code don't even need that either but what I do need is the page 2 code so let's open that up and here we are so now what I need to do is I have that data and I want to display it but the really cool thing is I don't even have to do anything with it because all of that is set up already I created a new page too right here and passed the data inside of it so it's automatically going to be populated inside of there yeah good all right so let's save all this and let's run this all right good stuff hopefully I didn't make any errors I don't believe I did okay so opening this up and then we will sample passing data between pages but it's very important to remember when you're creating the view models do not make sure that this type of data is exactly what you want to pass again very important the reason I bring this up is a guy that I worked with had all these problems creating an app and It ultimately came down to this one little thing right here so that's it all right here's our app let's bring it over and let's see if it works okay so I'm just gonna say something like stuff like that this is the entry and then it should appear on page two and it does and everything else still works exactly the way that we expect it to work all right and you can Bounce Around however you would like so there you go that is how we are able to pass data between pages and up next I'm going to get more into a couple other different or Advanced interface operations all right so let's make another project this time what I want to do is get into collections using the MVB M pattern and then we're also going to get into styling and adding some Dynamic functionality to our applications and this is part eight of the applications and create all right so I'm going to keep everything very simplistic what I want to do here is I want to use an example I had designed earlier which was like with the football players but I want to also go and make it into you or utilize the mvvm pattern with it so we have images over here so I'm going to get some of my images that I had before so we can come in and grab these These are the images we had last time and so let's just select these whoops what on Earth I just did some football players all right so I got these and we are going to get all these football players and throw them into a collection and then we will utilize them so just go into images I just copied and now I am going to paste them there they are all right so there we have all of our images now what am I going to do here I'm going to really structure this much better than we have structured anything in the past what I'd like to do is I want to go and select here and we're going to go mvvm again or create a new folder called mvvm and there we are and then inside of this I'm going to have what well what are the parts of this we're going to have models and we are going to have view models somehow find yourself here without seeing the part where I talk about the mvbm pattern definitely go back and use the table of contents in the description to find out what they are because I'm not going to get it back I'm not going to describe over and over again the benefits of this okay so we have all this so very first thing I want to do is I want to go into models and I want to create a class and it's going to represent My Player information so I'm just going to call this Play error and hit add and here it is so what am I going to put inside here well first I'm going to make this public public definitely need to make this public to be able to access it and then for now I'll be adding more to this as we continue but I'm just going to say that each player is going to have a name and then we are also going to have an image and then we are also going to have some other information about the said player so I'll just call that information okay so we have all of that set up now what do we need to do here um this does not need to be here I like to keep all these closed especially if I'm not planning on using them need this either okay so we created our player model what is the next thing that we need to do well we need to create our view model and what we're going to do is create what's called an observable collection with it and I will explain that as we go so I'm going to go add and this time are we going to do we're going to do this as a simple class so don't get this too complicated and what am I going to call this I'm going to call this player view model okay so this needs to be public and then inside of it what I'm going to do is I'm going to populate all of my player data so if we want to be able to change items in a collection at runtime we are going to need what is called an observable collection with all of our player data inside of it so I'm going to say public and observable and is it popping up yeah it is not observable collection uh oops there we are player view model I don't want that I want player so I'm going to use my player data that we just created that was the very first thing that we did uh this is not a marshalling observable collection this is an observable collection and it's giving me an error here and we need to import some stuff so I'm going to import my model and there it is okay so we are not going to call this collection we are going to call this players like this and then we're going to throw our Getters and Setters inside of it so get and set like this okay got that set when is this giving namespace name could not be found um what are we going to need here well let's just select this and wait for it to say show potential fixes and we need this object model this right here all right now we have that all set up now what we just need to do inside of our Constructor is go and populate it with all this information so I'm going to go public this is going to be player view model and then inside of it I will populate players so I'm going to say players is equal to new and observable collection and with player right like this and then we can go and throw in another curly bracket like this and then we're going to just throw in all of our different players so I'm going to say new player whoops new player and then I can just put in name is equal to and one of the names is Cameron Hayward okay and I'm not gonna I'm gonna just show you this this is image is gonna be and you can see over here in images Cameron Hayward is right here so let's just select that copy and inside of here we'll throw that PNG and then we're going to have some information about what makes Cameron Hayward a wonderful guy so I'm just going to copy this right here and I've got this off of Wikipedia okay paste that there okay so there is our information now what we need to do is we need to populate all of this with additional players which I will do and you will see it in a second all right so I threw in three additional players with exactly the same type of information and of course all of this code is available in the description so there is absolutely everything so we're going to save that and then we're going to move on to create our view so I'm going to come into views and I'm going to say add and this time I want to say new item and net Maui like this and then I will come over here and select this and then we will go and create it okay so what do we need to do or what are we going to call this let's just keep it simple and just call it player view it's technically play errors view but whatever I'm just going to call it player View all right so we have this right here and I'm going to open this up all right so what we need to do first off is create our binding with our view model that has all of our information about our players that we will then be able to pull information from so building context is equal to 2 and this is player view model like that and it doesn't know about it so we have to go and get it whoops show potential fixes and then get our view model boom there it is everything is set up for it we don't need to do anything more with this so we might as well just close it all right then we're going to go into our player View and I'm actually going to show you how to do this in two different ways and just so that you get it I'm gonna get rid of all this now probably people like the carousel so I'm gonna go and do a carousel view so let's do a carousel View and then afterwards I need to say items source and reference My Player information so go like this and binding and players remember this is where I have all the information stored about every single one of my players now inside of here what I need to do is basically set up all of the styling for this and then I'm going to break this out and actually throw this over into the Styles folder over here which we have not used yet but we will use now slow build up to cover everything so you need to say item template this is where you're going to Define exactly how your information is going to be laid out data template like this and then you have to decide what type of layout you want to use inside of here I'm just going to use a stack layout and then inside of there I'm going to surround each of the player images and their names with a frame I'm going to say that I want if the frame is just a box like a box you can see so I'm going to say that I want to define the corner radius as 5 and then you can Define margins and just try to make it look as nice as possible height request is based off of roughly the size of the image there's going to be an image that displays if you can remember from previously horizontal options I'm just going to have this be Center and vertical options I'm going to have this be Center and expand and has Shadow why not so I'm just using his a whole host of different designs here and we'll add more as we go so there we go so there is our our frame definition for what is going to go into each of our frames then on top of that I'm going to create another stack layout where we're actually going to put our Player information on the screen so I'm going to say that I want a label and the text in this label is going to be the player's name that I can use the binding for to go and get that and then maybe we want to do what we did previously with our fonts uh let me go hunt for my font all right I found it here is our font if you can remember from last time remember we used uh Anton regular we downloaded this so I'm just gonna go select it copy it and then go over to where it says fonts here let's just get rid of that and let's paste that inside of there so paste and uh why isn't that giving me a paste option copy um okay weird um how about if I just do this did it work um it did not all right maybe I didn't select it all right so fonts and here is Anton regular and I am just going to drag it over and drop it inside of there I think it'll stay yeah it also stayed in that folder okay so now we have our fonts and then what I want to do is I want to go and use this specific font that I just imported so I'm going to say font family is going to be equal to and then you just put in the name of the font here I'll just copy and paste it because there's no point doing anything else so copy and paste this inside of here Dot tff and I'm not going out of my way to make everything super pretty because I'll leave that up to you my goal here is to make everything and to not have too much filler and have a lot of a lot of content so I'm not going to waste time doing design because this is mainly about learning how to program okay so horizontal options and let's just make this be Center inside of my box and then vertical options and let's also have that be Center all right and that is all we need to do for our label and then we need to go get our image source um source is equal to and then we're going to once again say binding and we have that over in our images directory so I can just say that I want to get whatever is stored in the image for each player aspect is going to be equal to fill and height request is going to be 150 by 150 which is the size of my images and width request is going to be 150 of course and horizontal options is going to be equal to Center and there that is and the stack layout is here and what problems do we have is everything closing off think so um I'm getting some errors down here and they all went away okay that's good okay so after we have that set up then what we can do is we go into app xaml and this specific the code and I'm going to say that I want my player view to be the view that is displayed when the application runs and then show potential fixes and go and import my views and um is there anything else that I need to do I don't think so I think that is basically everything so now we should be able to test our application make sure we go and Android emulator boom like this and let's go and run it okay if we don't have any errors then everything should look great and here we are here is our application and you can see that it works here are our Carousel images and now they are using the mvvm pattern instead of our previous uh way of doing things which was not as compartmentalized now I'd like to compartmentalize even further so what I want to do is I want to go and take some of this styling that is here and all over the place because if you're going to do an app that is more complicated than this it's going to get to be hundreds of lines long so a common thing that we would do is we would start breaking this out into um separate files so I'm going to go into Styles and I am going to say add and I'm going to say that I want a new item and I'm going to use a resource dictionary this time so let's select this and player care Rosso and dictionary all right and here it is so for this one I am going I do not need the code behind it so I'm just going to select it and delete it immediately yes gone okay which means I also need to get rid of this because it doesn't exist anymore okay good all right so now that we have that all set up what I can do is jump back over into our xaml file and I'm going to start selecting right here where it has data template the whole way down into where data template ends and I'm going to cut that out of there all right there's all sorts of Errors don't worry we will deal with them then I'm going to jump back over into the resource dictionary that we have here and I'm going to paste all of these styling pieces inside of here now it's giving you all kinds of error because it needs a key that it can be that can be used to reference this so we're going to say we want this to be called player Caro cell okay and all the errors go away another thing I want to do is I want to come up here and I want to set this up for x or xaml uh compilation and the reason we're going to do this is it's going to perform compile time checking so it's going to show us errors during the com uh the the compiling of our application it's also going to reduce file size and decrease load time so all positive reasons to use this and to do so you just go xaml and pile and compile equals true like that and question mark and that okay so we have all of that set up and this is just going to allow us to break up our code better so now what we can do is oh another thing I need to do is I need to open up the app xaml file that is right inside of here and I need to include inside of here the reference to that new dictionary so did I select that yes copy and come down here paste this here and then we're going to go down inside of here and just select player Carousel dictionary this name right here and paste this inside of here instead of styles great save that don't need it anymore so close it and uh now what we need to do is go back into this area and pull in the information for our styling or actually it's not in this one it's going to be in this one does this work where we had it uh um oh no it is in the other one and what we're going to do is well might as well jump back here and copy this so I make sure that it's spelled correctly so let's go copy and then jump back over here and then right after item source we are going to go and get the type the template that we put in the Styles folder and to do that you just go item oops template is equal to and this is a static resource and it is called player Carousel style and everything is going to know about this and then of course we do not need this part either you can see now everything is a lot better compartmentalized and can significantly smaller it's always good to break everything up into pieces all right and I think that's all I need to do let's save that and let's go and run it and see if it still works hopefully it does and here we go and still works as far as I can tell anyway let's bring this over here and yes it does all right so good stuff all right so now let's go and just keep adding to this application all right so now what I'd like to do is add some Dynamic styling to my app so what I want to do is have some settings set so that uh individual players that are in the Pro Bowl get a different image or a different color for the background of their little card so what am I going to do well very first thing I'm going to do is I'm going to go into player and I'm going to set or create a new attribute and it's going to be a Boolean and I'm going to say if they're in the Pro Bowl or not that is what we're going to do and then if they're in the Pro Bowl we will change the color for said player so now I am in the player view model where I went and defined all of my different player attributes and now what I need to do is to come in here and designate whether they're in the Pro Bowl or not so I'm going to say in Pro Bowl is equal to and in this situation sadly this is false so we'll say copy that and then copy and paste that for all of my different players and Mika Fitzpatrick however is a true so what I want to do is dynamically change the styling just for this one player and any other player that should come along who also is going to be in Pro Bowl all right so now we have that set up what I'm going to do to keep everything all spread apart here I'm going to go up into the Maui app area and I'm going to say I want to add a new folder and let's call this selectors and inside of here what we're going to do is we are going to change our the template that we're going to use for our players depending upon if the player is in the Pro Bowl or not so I'm going to inside of selectors I am then going to come in here and create another class so I'm going to say add and class and this is going to be called uh maybe player template selector like that all right so this is going to change the template that is used for the player and these are over here in this the different styling player Carousel dictionary this is where we went and set this before so there it is so C player Carousel style what I'm going to do is I'm going to create another one that's going to be Pro Bowl Style all right there's this and these are all set up and then inside of this player template selector I am then going to come in and first make this public public player template selector and I'm going to inherit from the data template selector and what what this is going to do is basically allow us to change templates at runtime which is really cool but I need to come up here and go and instantiate this come on there it is show potential fixes click that Implement abstract class all right so now what we're going to do is this is basically this this method inside of here is going to allow us to go through elements in a list and decide what template that we want to apply and you're going to have your specific item that's in the template and then the container right here represents um the collection of different players that we are going to be cycling through so we have all that set up so let's get rid of this because we are going to implement it and I'm going to create player inside of here and we're going to say is equal to item and then we have to say that it is a player whoop as player like this and then we're going to have to come in and show potential fixes and input import our model that we created which is all of the information about the players so now what I'm going to do yes I'm going to say if and in this circumstance I'm going to say if the player is not in Pro Bowl remember in Pro Bowl is a um a Boolean so after this what we can do if the player is not in the Pro Bowl what I want to do is get a value using a key that we're going to Define inside of player Carousel dictionary here is the key so we're going to say that if they're not in the in the Pro Bowl we're going to continue using this data template and otherwise we're going to use a different data template which is going to be specific for Pro Bowl players since we're in here why don't we just use this so I'm going to come in here I'm going to select this data template copy it and paste it down inside of here so it's exactly the same and the only thing it's going to change is the key name so I'm going well that also we're going to do styling changes you can do a whole host of styling changes but I'm just going to keep this simple and I'm just going to say that the only styling change I want to change is I want to change the background color so the background color is going to be let's just have it Be Right light yellow sort of like gold or something like that all right so we have that all set now what we can do is go back into the player template part here it is and this has just giving me an error because I'm not returning values for everything so I'm going to say if the player is not in the Pro Bowl well in that situation I'm going to say application and I'm going to Define what template they're going to use for styling to do that you say application and Dot current and Dot resources and Dot try get value and I'm going to say that I want to use my player Carousel styling which is somewhere here uh player Carousel style so we're going to copy this this also needs to be changed but I can only do one thing at a time so this is the style that I want to use in the circumstance in which they're not in the Pro Bowl and then what we'll say is we're if they're not in the Pro Bowl we want to get the value using the key we defined in the player Carousel dictionary which is um yeah I showed you this already multiple times so I'll say out VAR and player style like this and then we'll just say return player Style as a data template right like that otherwise if they are in the Pro Bowl we're say else and we're going to do basically the same thing except we're going to use our other version where did it go is it over here no it's not that one is it this one yeah Pro Bowl Carousel style so let's just copy this we're going to use that new version let's come and uh paste it right here just temporarily and this is really easy I can just go and go application and copy all of this and then just change it to the different styling that I used which is going to be the pro ball Carousel style so there it is and we just changed the background color just for that one uh card and uh maybe I want to give this a different name so I'm going to say something like um Pro Bowl style and just so that we can see that there is a different different uh style in being used and that is all we need to do for this I believe um yeah looks good okay so we have that saved so we can now get rid of this and then we have this all set up which is our player Carousel dictionary and it has both The Styling in here so there's that and the Pro Bowl so we don't need that anymore so we can close that this needs to be changed however so this is specifically the player view so we're gonna have to go in and change a couple little things inside of here what we need to do first off is after the class right here we're gonna go after the player View and we're gonna say xmls and we need to get add our data template code here so data templates is equal to CLR Dash namespace and this is going to be this is called Maui app eight so we're going to say Maui app eight and we want to bring our selectors inside of here which is an option right here so there it is and there is our selectors right there all right so now that we have this all set up what we're going to do is go to um we're going to have to set up a different type of content page here and we need those resources so we're going to say content page resources oops I hit something yes let's go here content page resources and data templates and player template selector and add a key here for this so key is equal to player templates and there's that and this is going to give us the different styling for those different situations and then all we need to do is go in here and replace the static Carousel Style with the dynamic player templates which is one or the other depending upon whether they are in the Pro Bowl or not and there we go so we have it all set up so we just say are they in the Pro Bowl we add in that functionality and then we can dynamically come in and change styling just by apply good by creating new styling with a different keyword and let's test it so save all and let's run it I think I got every part of it there was a lot of sort of individual Parts here but we're just breaking everything up into individual pieces so that it is way easier in the future to add more Dynamic capabilities to our application and here we are here's our app Cameron hayward's not in the Pro Bowl George Pickens isn't in the Pro Bowl Lincoln Fitzpatrick is so there you can see we change the background color and that might seems kind of silly but um you know because it's just a minor change but I just did that on purpose but you can come in here of course and go and add as much styling as you want you can add even more if depending upon different styling features inside of here and just because I only change the background color that doesn't mean I couldn't come in here and put a label underneath that says pro bowl or any of that additional functionality all right now that I've finished this off I have a whole bunch of things here open that I don't think I need open I'm going to show you just how quickly you can change your layouts which is kind of interesting okay so what we're going to do is we're actually going to go and create another view so let's come over here and go add and let's say new item and Maui and let's create another content page and what we're going to do with this one is we're going to call this player collection view I'm going to show you how you can go and switch to different views use grids use Footers use headers and have things dynamically resize so player collection View and click add all right so here it is and let's open up this guy and just create The Binding here first so binding and we're going to use exact information we had before so binding context is going to be equal to new player View model and get rid of the this or that will cause all sorts of problems okay and I thought we had this in here show potential fixes and bring the view model in all right good got that and that's all you need to do for that part now over inside of this guy well another thing I want to do is over in app this guy right here I'm going to change this to player collection view so that it loads this up as our starting page so save that close that and here is the let me just verify polar collection view all right so what we're going to do here is we are going to create a whole bunch of different layouts so let's get rid of this part and let's go and instead create a collection View and what we're going to do is we're going to say items and source is going to be equal to and this is going to be our binding with the players that we've been using over and over again so ending players all right and let's close that off and then inside of here we'll go collection and we'll say uh collection view dot item template and create our template that we're going to be using here so data template and close that off and then why don't we just go and get what we had previously so I had that over in player Carousel dictionary so here is this guy and it is frame and and I'm going to use all of this let's just go and copy this and then make some changes to it so we'll go and get the whole entire frame that we had right there and then we'll change as we need to change so we'll paste this inside of here and what are some things that we'd like to change well let's say that I don't want to have a corner radius so let's get rid of that let's say we want to increase our margin a little bit so let's take it up to 20. uh let's leave the height request be 200 let's take it up yeah 250 and we will also Define a width request so with request and let's change that to 250 as well see if it works maybe we need to make some changes to it we will find out horizontal options do I want this to be centered um I I don't think I'm I'm going to get I mean get rid of all of these other different things here so let's get rid of all of that there we are and then I'm going to set this up as a vertical layout so not a stack layout we'll change this to a vertical more specific vertical stack layout did it automatically update yes it did okay and for our label maybe we want to have our image be first and then the name underneath of it I think that makes a little bit more sense in this situation so we'll go and throw our image inside of here and uh we don't need all this stuff either so let's get rid of all of this and then for our label font family that looks pretty good and large Center using all of the different fonts binding to the name all looks good all right so have that all set up so what I want to do now is Go and show you just how quickly you can change the look just by changing a couple little things I think that's all that I need to do let's go and run it and see how it looks different than what it looked like before all right so here it is we're gonna have to make a couple little changes but you can see now that we have our different let's go and select this see now we can scroll through them this way but you can see the names are cut off so I'm going to have to increase the size of that let's say that we want this to be I don't know late uh no height height 285 this let's save that and rerun it and see if the name will now fit inside of it just change the size of the frame a little bit and here it is and now you can see the names and of course you can play around with all of these as much as you would want another thing that's really neat is you can go in here and say that you want this set up as a horizontal list in the collection view so we can come up here and come down here and we can say items layout and is equal to and let's make this into a horizontal list save that for me but that should work and horizontal list and you can also have it be a vertical list and let's see how that looks now here it is and now we have our our horizontal list just like we had it's sort of ver it resembles a carousel so it's a different way of of sort of setting things up Carousel looks a little bit nicer but maybe in your situation you might want to mess around with something else also what we can do is we can set this up in a grid format that is going to dynamically resize now to be able to do this and have it not be an absolute mess you're going to um well I guess oh yeah you're going to want to get rid of the height and width request and have that just be dynamic another thing you're going to want to do is get rid of this part right here so that's going away and then inside of here what we're going to do is we're going to Define that we want to actually have this be set up as a grid so for this we're going to come in right after or no right before the item template and we're going to say collection view like this and then we'll say uh items items layout like that and then inside of here we'll say that we want to use a grid items layout and for this we'll say that we want our orientation to be vertical because that's going to work out best for us and then everything will line up across the top and then what you need to do is Define how many items or how many of these frames with images and text inside of them you want per row let's say that I want to set that for two work out for us and then I got rid of the height request and the width request otherwise you're going to have things not line up properly we want this to be very very Dynamic I think um maybe we should shrink down from large to medium and other than that I think everything else should be fine so let's go and run that and we'll see how that works out for us so oink here it goes and it is loading again and now you can see how they're set up and you could also change this to three items per span or whatever you would or three items per row or whatever you'd like just by changing the span up here and it's going to be you know just be 100 based off of what you're working with another thing that's neat is we're able to go in here and Define headers as well as Footers so I might as well just show you both of those so I'm going to come in here and I'm going to get rid of this we're not going to use that grid like we did before or actually why not we can we can leave it in there so let's do that but we're going to get rid of the Span in this situation so let's get rid of that and then what I'm going to do is I'm going to just Define my headers and Footers right after up here so I'm going to come in and I'm going to say collection View dot header and then we Define exactly what we want our text to be like so I'm going to throw this inside of a frame and I'm going to say that I want the background color to be black so background color is going to be equal this is just the team's colors and black like this and then I'm going to put a label inside of it so we'll say label and text is equal to and we'll say Steelers or something like maybe this is a listing of the roster and then you can click on the individual parts to find out more information about each individual player and we're going to use our custom font that we had before so let's go over Anton regular so here and paste this inside of there dot tff and I will say that I want my font attributes and it's bold and I want my font size let's make this a little bit larger so let's set it for title this time and then horizontal options whoops what is that horizontal options horizontal options and we'll have that be centered and text color that is going to be gold because that is the team's colors okay anything else I want to do with this yes uh actually no I think that's perfectly fine let's also do a footer so let's come in and let's copy this and then paste that there and then all we want to do is change this to footer footer like that and then we'll cut at the end here we'll put this as team roster or something maybe uh 2023 2023 team roster all right good stuff and then we can reload that and then that's going to put a header and a footer on our app at the top of our collection view see Steelers and then we can go and scroll through this not sure why it's not scrolling weird there we are and then you can see the team roster at the bottom so there you go there's a just countless numbers of ways you could work with Collections and set up all sorts of different styles inside of the app well there you go guys there is an insane amount of information about.net Maui hopefully you have found this tutorial useful and like always please leave your questions and comments down below otherwise till next time

Channel: Derek Banas

Views: 45,247

Keywords:

Id: FT5P5ZktzZI

Length: 308min 38sec (18518 seconds)

Published: Thu Mar 02 2023