Introduction to . NET MAUI Development

1. Introduction: Welcome to an introduction to dotnet Maui development. I am your instructor for Williams and I'm a software engineer and lecturer. Now for the duration of this course, you're going to be learning mobile development through the eyes of dotnet Maui.net. Maui is a cross platform framework given to us by dotting it, and it allows us to have one code base for many mobile operating systems. So during this course you're going to get an understanding of how dotnet Maui works. We'll understand the XAML syntax. Take a look at event-driven development and look at other things such as navigation and understanding global resources and layouts. For this course, we're going to need Visual Studio 2022, which comes shipped with genetics and Android emulators are built-in. Once again, welcome to this course and I can't wait to get started. 2. Setup Development Environment: Hey guys, welcome back. In this episode, we're going to be setting up our environment so we can get into coding with Maui. Maui at the time of this recording is in preview, which means that we need Visual Studio 2020 to preview version. You may already have Visual Studio 2022 installed. You're going to need the preview. If not, then no problem. We're going to go through the basic steps are the most needed steps together. So let's just start off by going into Visual Studio.Microsoft.com. And then when you're on that page, you need to go to latest preview and then download the preview. This will download that installer to your computer. And when that launch is, you're going to want to make sure that you're getting the previews. So if you go over to the available section, you're going to see 201720222019. So you want to make sure that you're getting the one that is marked as preview, right? So we can go ahead and get the Community Preview additions. I don't have it listed here. That's because I already have it installed. So you can go ahead and launch the installer. And what will happen is that it will bring up this window where it asks you which workloads do you want. So you can look at the workloads I have. But the ones that are essential for this course are ASP.net and web development because you will be building an API. So we do need the web workload and you definitely need the Maui workload. Now, I'm just going to be playing. Given that this is preview, I'm sure that these are kinks that will be worked out as the development team gets better and better at releasing these workloads and these development packs. But as it stands, I had to select the dotnet multi-platform up UI development, which is Maui, right? I had to get the desktop development and I also had to get the UWP. Alright? Now after selecting all of those are still went on with individual components. And I searched for Android and I made sure that I had all of these things ticked. Alright, so some of them would have been ticked by virtue of you choosing the workloads and some might not have been. So I made sure that I had the Google Android emulator ticked and the C Plus Plus Android development tools to do all of that. Alright, so hopefully by the time you're doing this course, you might not need to go through all of that, or maybe the workload will select everything that it should select. But I'm just showing you these things so that you can have the path of least resistance when going through this exercise. Now once you have all of those things selected, the workload installations as we'll probably be closer to about 40 gigabytes. So you can go ahead and install, hopefully you have enough space. I'm confident that you do, but once you go ahead and install and they are finished, then you can continue this video. Now once that is installed, you can go ahead and launch Visual Studio 2022. Now what we're going to do is create a new project. And when that comes up, we're going to want a dotnet Mawi up. Now, if you don't have it to the left like I do, That's because I recently created one. You can always search and it will filter that list for you. Go ahead and select dotnet Maui up, and then you're going to give it a name. So I'm going to call this one my first Mawi up. Alright? So you can go ahead and name it that this is not going to be the project that we're going to be developing with. This is just a project so we can set up our environment and get used to what it looks like. Alright, so when Visual Studio launches, then we have the main page dot XAML file loaded for us. Now there are few things that I want us to take note of here. Once again, this is still in preview, so they're going to be some kinks that I'm going to walk you through. And hopefully you'll have the same experience that I'm having and you won't have any attrition completing these tasks. So the first thing that I want us to be present of is the fact that this is XAML file, which is really a dialect of XML. So you can see here at the top is hurting. You know, that it is indeed an XML file. And this is the main page. So this is the sample page that we get with this sample, with this project template pretty much. And if you just read it, you can see that it looks a little like HTML because once again, both are based on XML. And you'll see that each tag makes sense. It's really just standard English. So here we see that we have a tag that says image and we have some attributes for that image tag, we have a label tag that has some attributes and another label and Up button. Right? Now for every XAML page, which would really be like a literal page in your app that you will be creating. You're going to have a code behind file. So we have main page not summer, and then we have main page not XAML dot CSS. So in that CSV file one, it is being initialized. So if you've ever worked with WPF or Windows Forms, then that kind of code would kind of look familiar to you, right? So we have or partial class main page and it's inheriting from another class called content page. And it has a global variable or global to the class at least we have our constructor which is initializing all the components. And this is just a method that runs in a buck initializing all the controls that will be used throughout the application or throat this particular control, right? Then we have a method here that is seeing on counter clicked. Now this is what we call an event. So on contract clicked is an event or a method that will be called each time the button gets clicked. So we have the button control here. Let me zoom in a bit to make sure that we can see. So we have our button control, we give it a name. So that's one of the attributes, right? So this name attribute allows us to reference it from the code behind. So if we wanted to change something about the button or the label or anything that we defined here, we make sure we give it a name. Then we have the texts that the button has, and then we have semantic properties, dots, hint. And then it tells us that okayed cones the number of times you click and then clicked, that will be our click event. And then it says when it is clicked, call this method. So when clicked call on intercalate, what is uncontacted? Well, that is the method that we have here. This method takes information about who call the event and what kind of events triggered it. So here would be able to know that the button called the event, and it was triggered by a click event. And then it does an operation where it increments the cones that was previously defined. And then it sets the text based on whether the cones is equivalent to one or greater than one, then it sends a message to the semantic screen reader, since unknowns the Content button text. So in other words, we chain. So here's called a BTN. I said what and what's contributing? What is contributing? That's the name that we give that a button. So here we're seeing when clicked the button, change its text to be whatever I want it to be. And then unknowns to our screen that the text of the button has changed, right? So that's semantic screen reader is going to be our little bridge between our code behind and what we see visibly on the app, right? So that's what that is for. No other files include the program.cs. So this is the bootstrapper. With most, if not all C-sharp programs, they'll have a program.cs, whether it's WinForms, WPF or ASP.net, it's going to have some far off program.cs with a main method that is going to run initially. So this would represent that file in an MAOI up. And then it's going to be, it's gotta create them all up. It starts up a builder and then it says use up, and we'll see what up is. Update XAML is right here. So it's saying use that, configure fonts and then build. Alright, so what is up? What does Abdul? It says jump over to up. Csm is one of those base files, so you don't want to delete these files. These files are very essential. Essentially we're just declaring some namespaces. It knows what its class is, so it's not up. So that's why we're able to call it once again in the chord up. Alright? And then it defines some application resources, some styles and colors, et cetera. And that is what our app XAML file is for. We also have the app shell. The app shell once again define some namespaces and then this is the content. The homepage is supposed to be main page. We're sending it to mean pitch as soon as uploads. So if you wanted to create a different homepage, you'd have to make sure that you tell it that it's no longer main page. It's not a page that I've created autosomal control that I created. Alright, although folders we have resources, so what happens? Let me go to platforms first. So what happens with Xamarin? Because Mawi is basically a replacement for Xamarin. Xamarin was a pioneer in cross platform development, where it gives you the ability to have one project with one code base. One could be as being just C-sharp to service, um, multiple mobile interfaces and mobile systems. Now what happens is the Maui, instead of requiring you to create a different project per course with Xamarin, I would have to have a project for the Android out after a project for iOS, etcetera, etcetera. Instead of doing project, project, project, it gives us one project. And for whatever unique resources we need for that particular mobile OS, we have a folder. So instead of multiple projects, we have one project with multiple folders that Are capable of storing the specific instructions and resources on whatever are required for that particular oil. So we see here that we have the Android folder with iOS folder lefties in which I think is Samsung will have Mac catalyst and we have windows, right? So one code-based to rule them all, pretty much. That's what we see in the platforms folder and then in resources now we can have all the resources we need. Because what would happen is that with Xamarin, you might end up putting an icon in the android folder or project and forgetting to put it inside of the iOS one. Here we have one folder. Well, we can put everything that we need so that all of our apps can look uniformed from this one called BCE. Now you'll see here that I have this little warning icon for dependencies and you'll see that I have some dependencies missing and some stuff. If I do a build rent, no, I'm going to get a bunch of errors. Now, I scoured the Internet. So once again, this is preview, so I'm sure once it is released fully, I would have to re-record this lesson and not have to put in what I'm about to share. But for no, while you're doing it in preview, what you want to do is go to the solution file, open it in terminal. Then you want to type this in.net. I put a space in there so that's more space. So dotnet, new global, Jason, and then dash, dash, SDK dash version. And then you're going to put in 6.300 dash preview. So like I said, make sure you put in those exact numbers, right? So like I said, this is still in previous, so this is just a worker on to make sure that all the SDKs know which version they should be on. Because once you're using the preview of Visual Studio at this point as at the time of this recording, it's defaulting to dotnet seven, which is not yet old fitted and qualified for Maui apps, right? So just make sure you put this in as you see me with it here, and then you can press enter. And what that will do is create a global dot JSON file at the root or at the solution level, right? So once we do that, we can do a Control Shift and B and allow it to rebuild itself. And once that is finished building, then you'll notice that that warning sign is no longer there. And all of our dependencies are no There are no longer warning you. So that's a good sign. Alright, so let us jump over to actually seeing what this app looks like when it is running. So up top here at our play button, I'm going to hit the carrot and then I'm going to choose that. I want to use the, alright, so I'll pause, just know because I didn't see what I was expecting to see. So once again, I'm walking you through every single step that I need you to be aware of. If you only see Windows machine when you drop it on this carrot and you're not seeing as many options as I'm seeing. Restart your Visual Studio. So close reserve studio relaunched the project. When you do, chances are you're going to see what I'm seeing, right? We also have accessed the Android emulator. So what happens is that I had a few instances of the emulator device running already. So when you go to Tools, you go to Android and then you can go to the Device Manager. And then once that launches, we will show you all of the emulators that you probably have running. I had three-year running, right? I stop this one and I remove the other two which were launched from my previous experiments with MAOI. So between all of those actions, you should be able to get to this point where you're seeing all of these options, right? So I'm going to go down to the Android emulator and I'm going to select the Android emulator. And then I went to hit the play button because I want to see what this looks like on Android. Alright, so here is our mobile app. And if you look at it and look at it with the code, you'll be able to map back each element, right? So here's our image, the dotnet, dot PNG. There we go. We have the label, Hello World. We have the one that says Welcome. And then we have our button that says click me. So when I click me, I set a breakpoint on the click event and you see it's hitting that click event. So Collins is equal to 0. On the first bleak, we're going to see clique is one time. And then he's going to declare or unknowns rather to the semantic screen reader to update. So I'm just going to hit F5, so it continues. And you can see here it says clicked one time. But then if I click it again, is going to see or hear clicked two times, F5. And there we go, clicked two times. So that's pretty much how a Mawi up works out of the box. That's how it works. Yes, the setup might be a pain, but hopefully you get through this exercise. If not, feel free to use that Q&A section and let me know. 3. Create Controls with C#: All right guys, So let's continue our discovery of Maui. Know that we have it up and running and we're familiar with the different moving parts. So let us try creating a new page. So I'm going to right-click on the project or to add a new item. And then I'm going to want from the dotnet Maui section on new content page, right? And then let's call this one test page, nice and simple. So what that gives us is a new C-Sharp class that allows us to define what we want on the page. So this is not a XAML page, right? So there are two ways to create content on a page or creed pages. One is with the XAML file with supporting C-Sharp code. And we can actually have the C-sharp generates the parts that we're putting on the beat. So for example sake, I'm going to take this test page and I'm going to make it the startup it. So jumping over to update XAML, I'm going to say that I want, I'm sorry, not sum up. Shell dot XAML. I'm going to tell it that I wanted to route to the test page. So Tests page instead of maybe it. So let's take a look at what we get with that. And that's what we get. We get a simple label with the text. Welcome to dotnet Maui. And that's exactly what we have on the app, right? So you can see that our C-Sharp class is working. So let us build out on this a bit more. So what we have essentially would be one, the content object here that represents the view content, right? And then we're saying that we want a new stack layout with children. So this is a layout and there are different kinds of layouts that you can do. So if you were to just type in the word layout, well, they're kinda jumbled here, but you have Absolute Layout. You have carousel type, compressors layout, flex layouts. There are a number of layout options. So this default option that we got was a stack layout. And then we could add the children and we could have a new label. And then let us do an exercise where we're going to put in some other elements. So let us start by erasing everything inside of this class or this constructor other. So you can see here that everything starts with the constructor. Yes, it's a class what the constructor is, where the section or the initialization will occur, right? So what we're going to do is build load something similar to what we have on the main page, but we're only going to be using. Cool. So let us start off with initializing our counter to 0. And then I'm going to have a static label that I want to call it, let's say counter label. It's always good practice, even in with a wooden forms are when we're doing visual programming. It's always give our controls names and have either prefix or postfix that kind of indicates what kind of control it is. My general it would be that I would say like LBL and then the name. Right? So LBL is short for a label. That's my own. So you can develop your own technique if you want. But it's generally good practice because later on when the codebase grows, it's easier to identify when you want to label versus a textbox versus somebody, etc. Alright, so, oh, well first of all, these should be outside of the constructor. Apologies. So cones and label outside of the constructor. And then inside of the constructor we can define a new view type. So I'm going to say scroll view. So I'll just new or sorry, I'll just say var scroll view is equal to a new scroll view. Alright? And then I'm going to save my stack layout is equal to a new stack layout. There we go. Then I can see the scroll view. So scroll view, I want your content to be the stack layout. So right there I'm seeing greater scroll view inside this page. And then inside of the earth creates a scroll view, create a stack layout, and then place that stacked layout inside of the scroll view. So even though scroll view might be self-explanatory, I'm still going to explain that. It's the control that allows you to scroll up and down on the mobile app, right? So the content is too much, we just put it in a scroll view. And that handles the scrolling for the overflow of the content. Inside of the label. For the counter, I'm going to say that it is equal to a new label, which I'm going to initialize with a few values. So here I can set those dimensions are those attributes. So whatever you would've put in decimal and we're going to do an exercise where we go through the XAML, right. I'm going to say Conte, and I went to put zeros. So we start off with cones being 0. Alright? We can set the font size and any other attributes that we want, the family, etc. So I wanted to set this to 22. What else do we want to probably want the font attributes. Let's see what we have here. Font attributes that, so that's an enum and we can put it to bold, we can put it to italic, we can put it to a number of things. Well, it really bold and italic at this point. And then we have the horizontal options. Do we want it centered, we want it to the left or the right, etc. So I went to see layout options, place that takes center. So now that I've built this control here you have Visual Studio guiding me along right there suggesting that you added to the stack layout. Alright, so I can just press Tab, let it do that, are built off my control and I'm seeing stack layout to your children. Add this control. Alright, lets us create our button. So I can say var btn, colon, colon Tr is equal to a new button. And this new button, I want it to have the text that says Click to count. And then we also have, let us say, the horizontal option that makes it center all sorts. So I just use this once again. Then after we have that button, we can also add it. So the layout. Alright, so I'm just going to copy and paste and change what I know I need to change. Obviously, the children would be generic and all of these controls are of a standard type that can be added as children. Now after all of this, we can say this dot content is equal to whatever is in the May, sorry, whatever is in the scroll view. Alright. So this dot contents is equal to the scroll view. So let's review that very quickly. We created a scroll view, we created a stack layout. We added the stack layout to the scroll view. Then we populated the stack layout with different controls. And then at the end of everything, we are seeing that the content and this here represents the test page, right? So this is just if you're familiar with C-Sharp, you'd understand what this is. All right. So this represents our test page. I'm seeing this page, your content is equal to whatever is in the scroll view. Now, let us take a look at what we get from this and I'll just run without debugging. Alright, so we have are up here and we have our label with one says 22, it says cone 0. And we have our button that says click the cones. Now when we click, nothing is happening. Why is nothing happening? Well, we didn't tell the button that it should be doing anything when it's clicked. So what do we need to add? No, we need to add what we call our. If you said click event, then you are absolutely correct. So what I'm going to do here is say BTN counter, dots, click or clicked. And then I'll say plus equals on clicked, right? Or onClick event. Now what this is doing is saying, tie the click event to this method which ofcourse we're going to have to define right underneath our constructor, which was bootstrapping and creating all of our controls. We know have our private void method, and I call it on click event. And then our events typically take the object sender, as well as a tab called event args. And we'll just call it E Most times. And then we have our methods. Inside of our method, I want to see cones. I want you to increment count plus, plus. And then I would say LBL, counter it. Your text is equal to. And then I can get creative with this message. So click or click cones. And then I can just put in my account. And then like we saw from the previous one, we have to say semantic screen reader dot unknowns that the LBL counter dot text has changed. And that's really it. Alright? So after doing all of that, if you're running a fast enough machine and he can keep the emily it open. You can actually hit the Hot Reload, which will rebuild your application for you. But that usually works with the XAML changes. So what I'm going to do is rerun the application and lets us do that and wait a bit. And now when I click, you see that it is working. So our click event is working on right there. We created our very first MAOI page. 4. Create Controls with XAML: Alright, so now that we've seen how to create a new page and controls using C-Sharp code. Let us recreate that using XAML code. Alright, so we'll go over to our project, creates a sorry, add a new item. And then this time we're going to go with the Maui content bit. So notice the first one was C-sharp and this one is XAML. Alright, so we're going to select that one. And that just left the default name as we're still in the exploring states. So you see we get the stock layouts and we get that default labels. So let us start modifying this arbitrary. So our label last time, It's red and I'm just going to be flipping between the C-sharp and the XAML, just so I can copy and paste and go a bit more quickly. So the text here says cone 0. We do get to set the vertical option, so that means its center vertically. And then we set the horizontal to be center also. But other elements we needed to have the name, right? So we gave it the name LBL counter. So I'm going to see x colon name, please equal to LBL counter. So that way we know hello to refer, reference it from the code behind. It also probably want to give it a font size. And you see all the attributes that I could sit in the C-Sharp. I can actually sit right here in the XAML, right? You might find this view a bit more intuitive, but that's really up to you. I'm just showing you your options. So a font, attributes bolt, right? So that's our label. Then we have our button, open up a new button tag. And I like to just open and close at the same time and then fill out all the attributes, right? So the text here said let me just jump over to count. Alright, click two cones. And what else did we have? We had the click event, so on whatever it is clicked, we want oil here. They're saying you can create a new event handler. I'll just click that it generated one form you will look at what got generated for us in a few. We can give it the same center and vertical, horizontal and vertical centering attributes. And I think I'm going to leave it at that for now. Now let's jump over to our code behind. The code behind file is usually going to be nested underneath the XAML file, right? And if you look at it, you will see partial and it has the same name as the XAML files. So partial in C-Sharp just means that I have multiple classes and each, each code file is just like an instance of that class or a part of the definition of that class. So this is part of the definition in the XAML file and the C-Sharp file is part of the definition. And that one inherits from content page. Now I've already, I did the private field for the cones. We have our constructor and then we have this method called initialize component. So remember that previous page we would have defined everything that would have been on the visible part of our page. Inside of our constructor will initialize component does exactly that except it's auto-generated alongside what we're doing in the XAML file. So if you look at it, you'll see that you'll see the control names and types accordingly. So anything that you're going to be doing inside the constructor, I would advise either before or after initialize component, but don't modify that nine. Now we have our click event that was generated for us. And what I'm going to do is just reuse the same click event code from the previous control, from the previous page rather, so that we have the same behavior right? Now. To test this out, I'm going to jump over to the app shell and I'm going to say not test page, but new page one. Alright. So let us make a new page one, our first big and test this out. So when this loads, we get a very similar layout. We can see at the top here that it is new page one. And when we click, we get the same behavior. So at this point, you know, you now know two ways to create a page inside of your mouth up, you can either use the C-Sharp code and code out all of your elements as you want them. Or you can mix it where you have the XAML as well as the code behind. 5. Understand MAUI Layouts: All right guys, so in this lesson we're going to be focusing on Leodes, right? So let us start off by creating a new content page. I've already done that, but you can right-click, go to Add New Item and then we want a new content page, I call it layout example. So you can go ahead and do that. And while we're at it, let's just let the actual node, that layout example is our new homepage, right? So in the layout example, we have our stack layout. We've already seen this stack layout. We have other layouts. We have vertical stack layout. Alright, how's that one for size? Now, from our layout, we can actually set like margins and paddings. And if you're familiar with HTML, then you know that the margin means that wherever the element is, it's going to make that many spaces between itself and the nearest element in whatever direction we specified. Whereas the padding is the thickness holistic, we want the element itself to be that, well, the directional constraint also applies there, just like with the margin. With the definition of the layout, we can actually say that we want padding. And what if I set this to 30 in all directions? Alright? So we just commas separate. Alright, I'm actually going to use different values so we can visibly at least kind of see where those padding values are being applied, right? So I'm sure that we are going to see some weird sizing, but we can always go back and change that. We can also set the margin if we want. So I'm just showing you what your options are, right? So that's the vertical stack Leo. The vertical stack layout means that it's going to stack everything from top to bottom, one, on top of the other going down. Alright. So the next very popular one would be a grid. No, a grid generally gives us something like a table layout, which can be very useful one-to-one, controls beside each other, etc. So if we want that, we could actually, inside of this stack layout, define a grid. So we can just open up our grid, open and close. And then inside the grid we can make our definitions. But before we make our definitions, we would want to do column definitions inside of this grid. Column definitions allow us to specify how big each column should be. And based on what we specify that the number of columns that we will get. So you'd probably see something like auto. Auto means whatever size the control is when it goes in. That's how big this column should be. We can also use a higher value and say, well, meet this column exactly that many spaces. And then like I said, as many as we put in that so many columns we get. So right now I have defined three different columns. Two of them are auto, one is a fixed value of 30. Right? Now inside of these columns I can define different controls, right? So let us say I wanted a button inside of column one. And button is a self-closing tag. And what do I want inside this button? First of all, I want it to be in the grid column. So I can say column over here. And I can see you should be in the first grid column. So it starts counting at 0. So this would be 012, right? So by seeing grid position 0, or let me actually type it out here. Grid column is equal to 0. That means I want you in the very first column. And let's say I wanted the text to be Test button. And width. Let's say a width request is 100. And if wanted, I click event, we could put whatever we want, we can put it in, right? So let's see, That's it for the first one. Let's just duplicate that line. So I just did control D. And then I want this one in the third grade, which would be grid column two, sorry, in the third column, which will be a column with the number two. So remember 012. And this one is going to have the same width. All right, so that's, that's how you can start laying out your controls. Really know what if I want to? Well, let me forego any other modifications and let's just test this old. So go ahead and run it. And while you're running it, I'm just going to walk you through what you're looking at on my screen. So you can see that the borders, the layout is kind of weird and that's because of the different values that we use. So ten was to the left, 50 from the top, Haiti and then ten below, right. So it's left, top, right, bottom. And then what we also would notice is that the buttons in the auto columns. And then because we have a gap of 30, that's how we created that space in-between, right? So those are little design things. Those are things that maybe you would want to do differently. But the point is that once you know or have an appreciation of how the Leodes work, then you can make it work the way you want it to. So you can go ahead and play around with those. You have different layouts. Like I said, you have the vertical stack layout. And you can actually get more information about the different layouts from the documentation for dotnet Maui layout. So you have the stack layout, you have the absolute layout. We looked at the grid, you have the flex layouts flakes is basically almost like if you ever use Bootstrap, I'm going to run parallels because more than likely you've been a web developer at some point and you've used Bootstrap. So with Bootstrap you have a role and it has up to 12 columns spaces. And if you exceed that, it wraps around to the next space. That's all the flakes works. So you put as many elements from left to right. Then when it exceeds them onto space, it just wraps and it just drops and drops and drops and drops, right? So I'm sure you can, you're just looking at these things. Your brain is going crazy. And if you look to the left here you'll see other kinds of Laozi of the grid. You have the SAR we talked about the grid or idea, the binder. You have absolutely owed. You have the horizontal stack layout and the one that we looked at, the vertical stack layout. 6. Set Global Markup Values: Welcome back guys. In this lesson we're going to be looking at XAML, markup, extension snow. A lot of the time. We're going to have XAML that we want to standardize, right? So let's take, for instance, going back to main page, we have different labels and there might be times you have multiple labels all over the particular control and you'd want all of them to be the same size. Now, if you have five labels and you set the size five times, then it would be tedious to change it five times and then multiply that by 50. I think you get where I'm going. So markup extensions help us to sit like a static value in the code behind and then reference that static value. So if we have to make a change, we made the change one time. So let us see what that takes. If we go over to the code behind for our main page about XAML, the first thing that we can do is define our value that we would want. So I'm going to say public const, double. Font size is equal to c 22. Alright? So that is the font size that we know we want. And I'm going to follow proper naming convention. Since it is a public or it's a property, I'm going to make it have capital letters or start with epithelial iterate. Then inside of this very class, I need to define or instead of the same file with that namespace, I'm going to have to define another class, so public class. And then I'm going to say global font size. And then the naming convention here requires that I append it with the word extension. And then I'm going to let it inherit from I'm markup extension, which will then tell me that I need to implement the interface. So the interface implementation for that comes with a method called provide value. And it takes an AI service provider injected in. And then we have to specify or whatever we want here. So I'm just going to say return mean page, turn mean page. And that's the name of the class here. Let me just make sure it knows, oh, I split return incorrectly, return main page. And then we would see font size. So in essence, when this is reference, it just knows to return the font size to the main page control. And then the main page would be able to access it accordingly. So in our XAML, what we want to do first of all, is defined the namespace up top. So we need to let it know that a new namespace is here. So we'll say XML and XML namespace colon, and then we give it some name. So here I can see my font size. Alright? And then that's going to be equal to. And then I'll say CLR, hyphen namespace, colon, and then the namespace that cause with where it was defined. It was defined in the namespace, my first Mawi up. So that is the namespace value that's out there. Alright. So all of that is just a wire it up. So no or main page knows how to make reference to the font size. Now when I want to make reference to the font size, and let's use this label as an example. Instead of writing the value like we said, font size, what I'll do is make reference to one, the namespace alias here that I set. So let's see, go to that namespace and then get me the global font size. Alright, So you said that was auto completed for me. I didn't have to tap that toe because it's already identifying that from this namespace, I can get that value. What is global font size? Once again, global font size is what we defined. So if 12th and global font size extension is the name of the class, however, we don't need the word extension when we're making reference to it in the chord. So just by doing that, we can actually just have this bit of code anywhere without we want to use that specific font size. As you show will go to the app shell and we change out the main page. And when we test that, you see that our label is showing up properly. So once again, the point of that exercise is to show you how you can set those static values for more global access and reach. So that if you need to meet the change, you only have one place made the change. And it can affect multiple controls. 7. Define Platform Specific Values: All right guys, So let's take a look at platform specific markup. So what happens is that rumor that we have one called base one set of pages and controls. And we have to serve multiple devices. Some devices may have certain design considerations that others. And Mawi makes it very easy for us to specify certain values for certain operating systems within the code. So it will contextually lord or render the content according to watch is declared. So let us start off with looking at how you would see on which device we want, whatever margin or padding with our vertical stack layout. For contexts, I'm back in the layout that XAML file. In this file, what I'm going to do is give it a knee, right? So I'm going to see x colon name is equal to, and then that's a C Leo. The stock. That should we ve stuck layout. Let me do the stack layout. Alright, so now that we have that name in the code behind, I can make reference to it's right in the layout constructor. What if I wanted to say that the V stack layout dot padding. I want this to be equal to something different if it's an iOS platform versus if it's anything else, right? So I can see device info, which is a special class given to us that allows us to specify the platform. So device info dot platform, if it is equivalent to and then we have access the device platform, which is pretty much an enum. As soon as I see it, There we go. So Devise Platform. We can specify for Android, iOS, Mac, catalyst, macOS, diesen, etcetera, etcetera. You see all the devices here that you can actually try to facilitate trade. So let us say that for iOS, if the device platform is for the iOS, then I'm just going to use a ternary operator here. Then we want to define new thickness, which is the object or the stroke to used for padding. So let me, let me backtrack a bit. So if it is iOS, then we want new thickness. And let us say I wanted 30 by ten, by 30 by ten, etcetera. And then otherwise, I would want it to be just 30, all our own. So I can just say or elicit 25 all our own, right. And that's it. Right there. I just specify that I want the padding to be different. If we're using an iOS device, that is what I want. Otherwise, for any other device, do that. So obviously if you wanted to cater to more scenarios, you'd probably want to use an if statement or a switch statement. So that it's not a ternary operator, we're only comparing with one at a time. Alright? So that is all we'll do it in the, in the code behind. No, alternatively, in the markup what we could do is put the attributes so padding is equal to and then we could super impose our own platform right here. So good see on platform. And then we just list out all of the potential platforms. And here we can start off with iOS once again, and we can define the values that we just use. Let me just see if I can go and grab them quickly. Some arbitrary values. I'm not really taking that seriously, right? No. But we can define them. They would have to be in single quotes. Single quotes because we're already inside of double quotes here. So to want to use single quotes to specify the iOS values and any other value. And then like we did, we did iOS and then default, so comma. And then you'll see default as one of the options, which means that anything that's not iOS, what value do you want? I want it to be, let's see, 30, right? So that is a nice way to just specify that the padding on platform iOS that or that. We could also do something with the background color, right? So I could see background-color here, right? And then do the same thing on platform. On platform iOS, I want it to be, let's see, green, right? On Android I want it to be Alice, blue, etc. So we could go on and on and on. So that is all we can do, platform specific configurations in the same markup. Once again, utilizing our singular code base to the max. 8. Shared Resources: Hey guys, welcome back. This time around we're going to be looking at shared resources. Shared resources would be an extension of what we looked at earlier with the extension, except it's not going to be so tightly coupled to any one control, right? So let us start off by adding a new class, right-click Add New Class. And then I'm going to call it shared resources. Click Add. And then we're making this one at static class. So this is a static class called shared resources. And then in here we can define some public static read-only properties, right? So let us start off by saying maybe that we want a certain color for our font. So static public, static, read-only, and I'm going to call it swell. The type is going to be color. So color is a type, and let's call it font color. I spell color with a u. So you're always going to see me do that. And then we're going to give it a value, right? So our font color here is going to be color dots. And we can do from end, from RGB, et cetera. Let's do RGB thing that's easy enough to get by with. So if we wanted it to be RGB is red, green, and blue, we can use integers between 0255. If you're familiar with CSS, that shouldn't be a foreign concept to you. So we can use something like 0 comma 0 comma 25 for argument's sake. So that would give us a more blue font color. All right, we can also set other values so I could set my background color, I could set foreground color. I could set all sorts of things. Once I have the datatype and I give it a name and then can give it a value. It can be put in that static shared resources file. Note to use this resource or any of the resources from this file, I just need to go to a control. Let me go to the new page one. And then up here I want to do something similar where I have to include the namespace or XML and S colon. And then I'm going to give it a name, Let's call it resources. And I'm going to say You are equal to CLR, hyphen namespace, colon. And the namespace for my shared resources file is indeed still my first MAOI up once of course it goes in a folder, we're not p and tensions in a folder structure is too tough here because I could have easily put this in the resources folder. So let me actually do that. So I'm going to move that shared resources file to the Resources folder. And then what I'm going to do is synchronize the namespace so that we can make sure it's in the current namespace. So at this point, when I'm including it in the XAML, I have to make sure that I am pointing it to the cart namespace. So we were a new page one CLR namespace. The namespace, Sorry, is my first my way up. Dots resources, right? So now we know where this button is. To make reference to it in the code wherever I want that color to be used. Let's say I want it in the label here. Then I would go for the attribute that says text, color is equal to. And then open my curly brace. First of all, I would say x colon static. So that's it knows that, okay, I'm getting my value for my static member. So static member, let me get my spelling right. And that's equal to, and then we see a resources that's our alias for our new space up top resources, Sherry's shared resources, which is the name of our File, and then font colors. So here we're seeing go and fetch the font color from, from this static shared resources file. Anywhere in our code that we want to share that color. We can do something like that. And we can have once again, as many resources listed out in here that we know we want to remain consistent across the entire app. So you can go ahead and test that old. You can go ahead and run it, puts it in multiple places and just go ahead and ensure that whatever color you would have defined here is actually being displayed in those areas. 9. Navigating Multiple Pages: In this lesson, we're going to be looking at setting up fly-out navigation, which is a type of navigation where a window for the menu item that was selected flies from this side into the center of the screen. And it typically would have what we call the hamburger. Those three lines to the top, left or right corner of the screen, I think it's more likely you'll see it in the left. But we will see those hamburger pills up here. When we tap it, we should be able to select which page you want to go to and then that page will fly in. So let us take a look at what we need to do to get that open running. Sorry, journey starts off with our app shell. So far we've interacted with this file whenever we wanted to change the start-up page, right? So we're focusing on the layout example. We changed it, we were focusing on main page or change it, etc. So what happens is that we can actually have multiple nodes inside of this area. So I'm going to create one for each page that we have so far. So we have layouts, example, and I'm also going to change the title. So layout space example and the royalties layout example. We also have new page one. And while these are not official page news, but they are there. So let's just work with them. And I don't think we have any other Pedro. Yes, we have test page. So I have test page. And I'm really just showing you that it doesn't matter if it's the XAML page or the C-sharp page, each of these is an option, right? But when we run, our app won't see anything visibly different outside of maybe displaying the one that's first in the list. So what happens is that we need to see a show about flow behavior. And then we changed it from disabled to fly out. Alright, so let us make that adjustment and test. When our app is running, we will see that we have our hamburger pills. When we tap that, we see it flies out. And with each title that we gave, we can see it appears so we click Layout example. There we go. If we choose new page, There we go. Alright. So each page that we have created so far, we can easily switch between them using this method anyway, that was fairly easy. I'm sure you realize that that was a very easy exercise to complete. Now, if we wanted icons on those menu items, it would be as easy as inside of the shell content. We could just say icon and then give it path. So let us try maybe the dotnet bots, I think main page how to reference of the dotnet, but just wanted to make sure I get that path correctly. And well, it just has the path there. So let us try that. Let us just put the dotnet bought on the main page and let us test that. There we go. So when I put icon dotnet, but when I tap on the menu, I'm now seeing that icon. So any PNG, any resource that you add. And once again, you'd add those resources here, that dotnet what is found right here in images. You can always go and add those images as you need them. And then you just add the icon to each menu items. So it gives your app a little more character and a little more, a nicer look and feel as you go along. Now, the next type of navigation that we would want to look at is tabbed navigation. Tab navigation usually originates from the bottom of the screen and then you'd have an icon per tab that you can select and see the early modern period, right? So we're still here in the shell. And what we want to do is create a tabbed page. So I'm going to open a new tag, and that one is going to be tab bar. And then inside of tab bar we're going to have tabs. So we have the tub tag. And then inside of that tab tag would have that Shell Content. Alright, so let's just do a few of those. So I'm just going to create a few tubs, three more tubs, and then put the shell contents in each one. Alright, so we're just transforming from just the out to our tabbed navigation, right? And as you can see, it's fairly consistent. So the syntax is not the most difficult syntax to catch on to. And if you already have the fly or behaviour enables. So I'm going to show you how the two of them can kind of combine to give particular user experience. Alright, so we're here in the app. If I go over to the navbar pills, I don't see anything. If I look below, I don't see anything. However, when I click, you will notice that it is changing. So obviously there's something there, but we need a few more elements. So one, the icon wouldn't be in the Shell Content, it would be in the tub. So the tab itself can get a title. So I could say here mean PH. And then I could also give this that icon. Well, let me, I think I already have it in the clipboard. There we go. Alright, so let us test that first step. Alright, so there we go. So here we have main page with the icon. Alright, so you could just go ahead and do that. So I don't have any other icons or without keep the same icon for the other tubs. But I will change the label of course, layout. This tab would be new page. And the final one was test page. So after making all those changes, I rerun my app. And when I take a look now I'm seeing my tabs, right? So that's the tab navigation. Nice and easy. Two is to navigate between all the pages that you have in your app. You have the flyout menu, and you have the tabbed page. 10. Conclusion: All right guys, congratulations for making it this far. We have successfully created our very first mobile app using dotnet Maui. Know it's not much, not much to look at right now. It doesn't really have any real functionality, but we have at least the core concepts under our belts. We know how to create new pages. We understand where we need to go to get certain things done. We understand how to navigate the code behind or to set up events, how we can generate visual events using C-Sharp code. We have all of those examples here, and we also know how to navigate between multiple pages. So at this point, we can just add this, the source control. You can check for the relevant link in the attached resources for this particular video. And when we come back, we're going to go into building out a real app using dotnet Maui.