.NET MAUI Tutorial for Beginners - Build iOS, Android, macOS, & Windows Apps with C# & Visual Studio

today i'm going to be breaking down and showing you everything you need to know to build your very first multi-platform application with c-sharp for ios android mac and windows with done maui and visual studio so tune in [Music] everyone i'm james and about two years ago i did a video all about building your first app with xamarin and xamarin forms for ios android and windows and that video did pretty good over 300 000 views appreciate all the support and everyone that's followed me on this journey on my long nights and weekends creating these videos editing them and uploading them my setup may have gotten a little bit prettier and fancier with blurred backgrounds but i still love teaching people about building applications with c-sharp and today that's what we're going to do we're going to learn how to build multi-platform applications with netmaui the.net multi-platform app ui i'm going to break down everything you need to know from installation machine setup creating new projects what's inside of them how to style things how to do some navigation and of course how to deploy your applications before we get into that what are we actually talking about well let's first start with the basics we're going to be using c-sharp which is an object-oriented programming language it's my favorite programming language in the entire world and it is one of three programming languages for net now c sharp is an object-oriented programming language but along with it is also visual basic and also f-sharp which is a functional programming language and what's really cool about net is that you can write code in all three of those different programming languages you can pile up your code and you can execute and run it with net which is not only a free cross-platform open source developer platform and runtime to build apps for just about anything but it also is a whole set of base class libraries to do things like file io networking types and a whole bunch more now i love c because it enables me to write awesome applications for just about anything with net and i just really have embraced object-oriented programming now what i do love is that you can really truly build for just about anything csharp and dotnet run on ios android mac and windows but also on linux it also runs on web servers and web assembly on iot devices it powers game engines like unity and honestly so much more that's why i love it because as a c-sharp developer i can truly learn one programming language in one stack and my skills can translate from any of those different platforms now i started my journey writing video games in c sharp then progressing to working for canon and writing printer software then i went off and i actually got my very first smartphone and started building applications now back then i was building applications with xamarin which is a company i went to go work for as a developer advocate now xamarin was a precursor to everything that we're talking about today xamarin ios xamarin android and xamarin.mac were core platforms that enabled net and c-sharp code to run on those different platforms and i fell in love with this i based my entire career off of it which led me up into this point working out for microsoft because microsoft acquired xamarin about six years ago in 2016. what was cool about that is at the time at xamarin the team had been developing xamarin forms a cross-platform ui stack that was really for mobile first usage so for ios and android and some windows scenarios as well now over the time dot-net has really evolved into a singular awesome runtime the latest version is done at six and actually this fall on november every november a new version of.net is released so in november of 2022.net 7 will be released and with net 6 it was a complete unification of.net and along with that xamarin became ios android and mac 4.net and additionally xamarin forms evolved into netmaui the.net multi-platform app ui now what's really cool about this is that it unified the project system the runtime the class libraries and all the tooling integration for cli which is command line interface for devops pipelines the project system itself the tooling and honestly so much more net for ios android mac all are a dot net workload that you can install side by side the dot-net sdk now down in maui is built on top of those layers right so if you had a xamarin ios android or mac app you can upgrade them to net 6 which is really cool if you had a xamarin forms application you could also upgrade that and migrate it over to don and maui because there is a sort of backwards compatibility layer but with dot-net maui it is a multi-platform app ui that has been sort of built from the ground up with new infrastructure of years upon years of learning with xamarin forms integrating and building on top of the new.net 6 platform and bringing in world-class support for not only mobile for ios and android including tablet support too and desktop support for mac and windows and it uses the latest and greatest technologies i have a whole video of exactly what is done maui how does it work and all these things and one also comparing it to xamarin so you can kind of follow along with that if you want more detailed information but at a high level know that what ios android and mac for net do is run and build those applications with csharpen.net access those native apis with c-sharp and then on top of that is built don maui an abstraction over common controls frameworks platform apis pages layouts and so much more so you as a developer can build your ui once and access native apis once and then they all create and display native ui controls at the end of the day now with don and maui there's over 50 layouts pages and controls built in but additionally there's a full drawing api and full support for skia sharp and so much more there's so much into this why don't we just get in to start coding all right the first thing you need to do is head over of course the dotnet website this is where you're going to learn all about.net now the page may look a little bit different based on when you're viewing this video but what you can see is that you can not only build for any device with donna maui or if you're a web developer blazer you can also integrate these two together which i'll talk about in future videos but you can explore exactly all the different worlds of net and all the things you can build you can always go to features and here we can tap on da na maui and here what we'll see is a simple get started button you can figure out exactly what you need to download and get started whether you're on mac or pc and of course read and browse a little bit more about don and maui and all the features that are in there this is what i love this unified app platform that really gets me off the ground running quickly now what i do like about this is what we can see is with net i can not only just share code with my mobile and desktop apps but i can share my source code and different models and different things services with any of my.net applications and that's the powerof.net sharing code across all of my different apps that i need to build so i can actually be way more productive and transfer my skills around all right now addition to that when you want to get up and running you're going to need to do a few things first is you'll want to install visual studio 2022 if there's newer versions of visual studio i'm recording this in 2022 you'll want to make sure you browse the documentation of course figure out what you need to install here when i installed visual studio 2022 both the same on the pc and the mac you just have to check the net maui multi-platform app ui button that's all you need that will give you everything that you need to get started building applications so let's go ahead and do it i'm going to go into visual studio 2022 and we're going to build our very very first application so here i can tap on create new project now previously if you were coming from xamarin or xamarin forms i would tell you to go under the mobile option here now here we're going to see a combination because i have not only all of the new.net6 and done maui things installed but i also have xamarin installed as well because i still have some xamarin apps that i'm supporting here we can see the old xamarin forms template xamarin android applications xamarin watch us these are the older projects that are still supported today from microsoft but if we scroll down to the bottom actually funny enough you'll get down past the f-sharp ones you'll see these android and ios applications and these are the ones that are built for and on.net six or done at seven or down at eight based on when you're watching this or nine or ten now that's really cool so if you just wanted to build just an android app with android user interface no cross-platform anything or ios storyboards you could do that there there's other things like binding projects which are nice if you want to bring in native libraries from android or ios and create c-sharp bindings around them you can do that too now we want to actually go to the drop-down maui now on the mac this is under multi-platform or cross-platform in the section you'll see done in maui and you see other xamarin stuff there too but regardless you'll see three different project types one is a done maui application this is the one that we'll be creating today which gives us applications for ios android mac windows and actually samsung tizen which is a platform supported by samsung or if you're a web developer you can actually choose a donna maui blazer app which is a dyna maui app that uses blazer hybrid and a blazer webview control you can always use those later if you want to blend in web controls in there then you also have class libraries and those are nice when you want to create reusable libraries to share across your different apps or maybe you need to unit test things and break away some of the code so i'm going to create a don in maui app and hit next you can give it any name you want i'm just going to leave the default which is maui app six yours might be maui app one here i'm going to select what version of net i want to support and i'm going to net six now you may go ahead and pick done at seven dot on a base on what you have installed but of course that's going to be based on when you're watching this video and what installed with visual studio 2022 all right so i'm inside of my dev my new project and i want to show off a few things here first and foremost is everything in the solution explorer now this is really cool let me go ahead and zoom in and show you what's in here first if we look at the drop down we have different dependencies this project is multi-targeted what that means is that the single project automatically targets android ios mac and windows now you may see that this is mac catalyst and this is actually a really cool piece of technology that enables you to bundle up native ios applications into a native mac application and add mac capabilities like multi-window support and menu bar support and a lot more and that's the technology that dotnet maui utilizes you can also build a mac catalyst app without donna maui you can also build a mac application without dynamo if you want to use app kit for example but this is what dynamowe uses and i absolutely love it it really simplifies my development and gives my application a really fresh look now for android it's android user interface ios it's ui kit and for windows it is the latest windows app sdk with wind ui three now of course if there's a new versions of those things it'll use the new versions of those things now what i want to also show here is the resource folder and this is what's really powerful about don and maui is that not only does the team think about building and creating a cross-platform ui stack what they also did is gave you cross-platform goodness that means that there's cross-platform app icons fonts you can just add ttfs or otf files svgs including sorry images including svgs or pngs or jpegs when you add images in here they'll automatically resize into different png sizes for 3x 2x and 1x and all the different android ones that you need you can also put in raw assets if you have a json file a database file or a text file you need to read you can put it in there also there's a splash image as well so you can have a splash image that shows up and again that's just an svg and additionally some styles we'll talk about that here in a bit but the team has given us fully cross-platform styling for every single control in the application and a bunch of colors too which is also really really nice now when i double tap on the maui app 6 or maui 1 whatever yours are what i want to show you is what's inside the project itself the first is that there's multiple target frameworks this is saying that i'm going to build and deploy for android ios and mac and there's a condition that says if i'm on windows also add windows support as well if you do want to build and deploy for samsung tizen you can also uncomment this code and you'll be good to go this will add tizen support too but you need the tizen you know installation there too now what's really great is that of course we have all cross platform things like cross-platform namespaces implicit usings which is a great feature of c sharp 10 we also have cross-platform things like our application title app identifier and grids version display names and version identifier numbers these are great if you're tying into continuous integration and delivery you can just bump them right from your ci cd we also have this code down here that is the supported operating system and i'm wrapping so you can kind of see they wrap around i can make this a little bit bigger there we go and what we can see is that this is going to tell don and maui how far back i want to support you'll always be targeting the latest version but this will tell you how far back you want to target so i would support ios 14.2 and higher mac 14.0 and higher android 21 and higher and of course versions of windows as well now finally in our item group we get to see a bunch of those cross platform all those things that were basically cross-platform for me but there's some configuration so we have our app icons we have our include which would be our background our foreground color file image file here we have our splash screen again we have our colors we have base size overrides if we want to tell what to base it off of we have images we can use these wild cards you can always override and say update this dot net bot and give it a base size of 168 208 and it'll down sample from there fonts and of course assets now what is great is that you can always right click and you can say manage nuget packages and there are tons of nuget packages on the internet that you can add into your project these are different cross-platform libraries that are available like json deserialization system text json a whole bunch of things now some of these work with donet maui some don't but you could imagine like the azure sdks or aws or poly for example for different things like that one of my favorites is the community toolkit.mvvm i have a video that i'll put up here this is by far one of my favorite libraries in the entire world some other ones to definitely take a look at there's a net maui community toolkit as well which is really cool there's a c sharp markup library and then additionally some of my others would be like shiny for example this is a really cool library that does things like bluetooth low energy location notifications beacons push notifications and so much more i'll put some links in the show notes to like awesome donna maui and a bunch of great resources from the community so you can find more of those great things all right let's take a look at the project and what's in here so the first thing i'm going to do is i'm actually going to close everything and then we're just going to go ahead and take a look one by one if we go ahead and zoom in again we're going to see that there are four files app app shell main page and my maui program my maui program here is the startup of my app this is what gets called when my application starts this uses a common host builder pattern here so this kind of comes from asp.net core which is the net web framework but this enables me to configure my app which we'll talk about here in a second configure fonts there's life cycle events and additionally full dependency injection and constructor injection too i'm not going to get into that in this video but i have a whole other video that deep dives into that because it's really really cool now this thing registers an app and if we look at the app it is an app.xaml xamlon is an xml based markup and it's one way to build donna maui applications but what this is doing is defining application resources across my entire application if i actually do this drop down here i'll see that there's a code file behind every xaml page and xaml file if i tap on it this code behind is associated with the xaml page i also have a full xaml 101 video if you're interested in that too but we can see is that this is creating an app shell now an app shell is a newer concept with dot maui if i tap on that what we're able to see is that this hosts the startup content of my application now by default here there's just one single piece of shell content but when we start the application i'll show you what it looks like how you can add tabs on the top and on the bottom and additionally how you can add flyout navigation too and all those combined also work too now this app shell has one piece of content or one page which is my home page and this is the title as home and main page here is going to be the name of the class of the xaml user interface it could also be c-sharp user interface too and we'll take a look at that now this main page over here has a bunch of different views or controls associated with it we can see that built into dominant maui are things like scroll views stack layouts images labels buttons and a lot more i can always come in and get full rich intellisense and here we can see every single control including entries ellipses frames graphics views indicator views input views list views paths and pickers and polygons we have full sorts of things it's really really really cool reordable items view so all sorts of really nice things that are inside of don maui and a lot of those are new coming from xamarin forms all right so we have this but again each of these have code behind so our main page has a little bit of code behind here in the template and what we can see is that this initializes the page then we have like this int count and also a on counter clicked and this is an event that's coming from our ui and events are usually associated with a click event or a tap event or some user interface interaction if we look down here at our button we can see that our button says click me it has these semantic properties which are for accessibility then it also says clicked and it says on counter clicked and that specific actual event is the same name as the on counter clicked and those two are associated together which is nice now what this is gonna do it's going to increase the count by one it's then going to go in and then if it's one it's going to name it with clicked one time or more than one clicked so many times and then announce to the semantic screen reader that back that's a great accessibility feature and accessibility is one of the core foundations of down at maui so you can read back that if someone is using a screen reader which is really cool when the ui changes now addition to this we can always use these keywords such as override and override will give us access to some of the sort of parent events in the main page here so things such as when measuring changes or the on appearing or on back button press occurs there's also on disappearing there's unnavigated from unnavigated2 on navigating from there's all these great different events for life cycle events the same thing over here for our app if we look at our app we can actually override things such as close close window app link requests when different things were added or removed we can see events such as on resume on sleep and on start we can also do things like open windows because don maui supports a multi-window support and windows also have their own life cycles too all right that is the project in a nutshell all inside of that we create the app it creates an app shell and the app shell has one piece of content in it now what we need to do at this point is deploy it now i'm going to zoom in up here because i want to show you everything that's inside of this drop down for a debug now when i'm inside of here i have the ability to pick between my windows machine for deployment android emulators ios devices simulators remote devices and a whole lot more now built into visual studio and visual studio for mac is tooling like android device managers sdk managers and a whole lot more but everything is right in there now i'm going to deploy on windows first and you will have to put your windows machine into developer mode which i've enabled here in the settings the same thing is true on windows 11. now i'm just going to go ahead and hit the debug which is not only going to put my application into a debug state so i can add breakpoints it's also going to enable two really cool pieces of functionality it's going to enable saml hot reload so i can make changes to my user interface in real time and see them update in the app but also csharpen.net hot reload that enables me to change code in the code behind as well so our application compiles up a native application and here i'm on a wide screen so it's going to be pretty wide but here i have my application that says hello world welcome to don and maui i can click on it and we get the click events if i go into the main page i can actually add a break point here i can go back into my application hit a break point i can hover over it see if the current count is four i can look at the button that's here i can look at all the different properties that are inside of here and of course i can do different things with that break point add different conditionals but i'm going to continue on and then we can see it updates here to 5 6 7 8 9 10. now there's a bunch of other tooling in visual studio if i actually go over to the pane i can see the xaml live preview this is one of my favorite features i'm going to dock it right inside of here now the xaml live preview enables me to come in get a preview let's fit height here side by side if you're on a single screen this is great because you can not only get a full view here and you can do those different adjustments here's a width for example but you can actually hover over elements when you tap on one it navigates directly into the xaml which is really cool you can actually do that if i tap on hello world and i say hello everyone what we can see is that my application updates in real time so here it says hello everyone right which is nice now it is a mirror of my running application so we can see it here so this is this is really really cool if i wanted to for example make the text color again we get this rich intellisense we can say orange in here what we're now going to see is that it updates to orange right there and when i hover over it i get that intellisense kind of pop-up which is cool i can do other things like add grid lines if i'm really trying to style and get things pixel perfect i can do that too i can of course course clear that out that's one option to navigate around i can also come in and open this live visual tree which gives me sort of a full overview of my entire application allowing me to get deep into the different areas so i can actually go into the main page the labels that are in here and really navigate around so a lot of cool pieces of functionality there now the other thing that i'm able to do is come back in let me pin this here and let me go ahead and go back into my main page xaml cs now when i'm here i can also make c c-sharp code changes too so if i came inside of here and said plus equals 10 for example i can hit save if i have for example this hot reload on file save enabled so here's hot reload if i tap on that it's going to reload it if i open up my application and i click here now we can see that it's updating by 10 every single time i click on it which is pretty cool so i'm not only coming in and creating and updating my ui in real time but i'm also modifying my code too that also extends adding new elements so for example if i was to add a button here and i said text equals navigate to page 2 and then i added a clicked event in here i can have it create a new handler for me which is pretty cool now that's going to do some code generation for me when i save that and create that automatically for me inside of this back here that's pretty cool and then i can do other things i can actually of course open that xaml live preview and we can see that that button is there which is nice i could then of course do horizontal options i can center it and i can hit save and do those different properties now i'm not going to go into every single control or every single thing that you can do in don and maui we have full you know documentation and learning paths and other videos on that too but i want to get you sort of this understanding that i have this scroll view i have a vertical stack layout that is laying out my controls vertically so i have images i have labels they have different properties on them they have different events on them and if i go past and for example if i was to make this you know really small i can see that i can scroll automatically because the scroll view is handling that for me which is nice that's a native controller native buttons native things there now on top of that let's say i wanted to you know obviously navigate to page two but i could also come into this code behind and display different alerts or different pop-ups so for example inside of every page you have the ability to do a display let me say display and we have the ability to do an action sheet we have the display alert and also display prompt so you can add people to actually insert some text a action sheet will show a series of options and alert will do a pop-up so for example if i want to do a pop-up that says hello and then i could you know do world here and then the last thing would be the message i'll hit that there i'm going to go and hit the hot reload button and now when i hit that there we get a native pop-up dialog for windows with wind ui 3 in this case saying hello world which is really cool and of course i can preview that inside here too and i can see those different pop-ups and everything that's happening and that sort of productivity is what i really love about don and maui and visual studio together now let's talk about android okay there's two ways of deploying to android and what we actually see in the drop down is mostly android emulators now there's this android device manager so it's actually going to open up on my machine here we go and this android device manager is going to enable you to create a new device right here configure it pick your version of android that you want set different properties and of course you can manage them from here so you have all these different android emulators available to you now by default visual studio 2022 and visual studio 2022 for mac or whatever version of visual studio you're on doesn't create any emulators or actually install any android sdks for you so the first time you run this you may be prompted to create devices and also install android sdks you'll definitely want to do that and just follow on the prompts and of course i'll link to documentation so you can follow all that too now beyond that you're able to not only come in and launch these manually but as we saw in the drop down is i can first i can just simply toggle this framework from windows to android that will then toggle the project and then pick a default emulator for me that i've used i can also pick one manually here if i want to but i'm going to use this pixel 5 i'm just going to hit debug now when i hit debug what this is going to do is it's going to compile up a native android application now this is going to take a little bit longer and the first thing we're actually going to see it do is open the emulator so this is an android emulator here running on my machine so i have some other apps that i ran that we can see here no maui app 6 yet so that'll come up there but this is an android emulator and this is running on top of hyper-v so it works really really well it's really fast as you can see as i sort of scroll this up it goes really fast now that's one option that you have if you're on windows 11 you can actually use the windows subsystem for android if it's available in your country you can enable that and then there's also an extension i love visual studio because there's extensions and you can actually search for online it's called the barista over here it's called the windows subsystem for android barista from john dick reth who is one of the team leads on don maui now that's going to enable you to put your windows 11 machine install wsa and deploy directly to your windows machine which is cool now here we can see a bunch of things are happening the android application is getting compiled a bunch of android java e things are happening basically it's creating that android package to be deployed to my emulator now the other thing too is that you can actually take your android device so for example i have a pixel device over here that i bought just used on amazon that's a pixel 3 i think i was refurbished like 100 bucks 200 bucks and you can plug that directly into your windows machine or to your mac as long as in developer mode it'll automatically pick that up and then you can start to deploy directly to your device so for some reason or an older machine it's not super powerful just plug in a device and you'll totally be good to go now again this is packaging up here and the first time it does this it's going to take a little bit longer i've been talking through this and kind of distract you but here's our splashscreen which is nice.net and then additionally after the first iteration and build it will then go ahead and be faster because it's just doing an iterative build all right cool so we have our click me which is actually increasing it by 10 every single time if i actually go ahead and let me put this into a different mode that's not on top this is a cool cool thing here so move that off if i bring it behind we can see that i also get my xaml live preview here too and i can overlay and see different things that are happening same with my live xaml tree here i can tap on those things which is really cool i could maybe say pink and then of course we're going to see that pink update and also update in my app right there so actually get that side by side navigating in here now when i click on the navigate to page 2 we're getting a pop-up but we're getting it with native android user interface okay and that's what's really really important about that is we get that android user interface at the end of the day all right last but not least well almost last but not least is going to be ios and mac now i'm going to start with ios because for mac we need to go over to the mac to actually build and deploy that thing and get it on my machine it will do that here in a few minutes but i want to talk about ios because ios is pretty special now like i said for mac you do need to be on a mac just like on windows you need to be on windows now for android google ships android sdks and android emulators you can plug in a device and everything is supported on both mac and windows you can deploy there now ios is really special because back in the xamarin days one of the goals was really to bring not only android but also ios development to visual studio on windows that was really complicated because all the xcode and all of the dependencies in the build chain are over on the mac so the team worked really hard to do two different things well three different things one you can just go to your mac and boot up visual studio for mac and you have all of your simulators you can deploy there the other thing you can do so number two is connect to a remote mac on your network now there are lots of advantages to this this is will enable you to go through a full compilation for your ios application and deploy it either to a device plugged into your mac or go and bring it up on an ios simulator that's running on your mac or a remoted ios simulator directly on your windows machine it's really cool like your simulator is running on your mac it's basically kind of screen mirroring in to your windows machine you can interact with it with touch screen which is kind of cool because i don't have a touchscreen on my mac my mac so i can do that there too if you have a touch screen on your windows laptop or on your monitor for example it's really really cool and all those controls work now one of the reasons you may want to do that is because you need like a dependency that needs a native compilation change and it's binding a native library things like that so you need to go through that full compilation step and get things up and running but for a lot of developers that are just getting started or for a lot of my applications i don't need or you know that comes way further down the road so the team developed a cool piece of functionality called hot restart now this is really really neat what this enables you to do is take your ios device like i have here and plug it into your windows machine without the need for the mac now what this does is it takes your code and puts it basically into an app package and deploys it to the ios device so you can't like ship that to the app store it's in debug mode it's like not you know it's not going to like walk around you know and you can walk around with it but you're not going to ship it or internally or to the app store because it's not signed right it's not signed and packaged and uploaded to um for apple there but it's for debug purposes and development purposes only and it takes that source kind of runs it inside of an a bundled app and then that way you need a newer device i have an iphone se2 which has a i as a a12 i think processor a13 bionic processor or whatever that is you need a newer device if you need to plug it into your machine you'll need itunes installed on your machine and you will also need an apple developer account so there are a lot of requirements for this to get it up and running but if you have all that you'll be ready to go so now what we want to do is go to that drop-down and what i've done is i have taken my device and i'm going to plug it into my machine over here all right and when i do that i'm going to get a pop-up that says i need to authenticate so i'm going to go ahead and authenticate here perfect all right now i've already enabled you know all of the hot restart stuff i'll point to documentation for you and what i get is my iphone plugged in to ios local device now if i wanted to get an ios simulator or remoted device that was plugged in i could actually tap on this little pair to mac over here okay so if i go over here actually look at tools ios there's pair to mac and what i see here is i can add the max vip address or via bonjour it'll find it you can add your own mac here and this is how you pair to the mac automatically but we're going to use hot restart so i'm going to go and say my iphone what i'm going to do is i'm just going to hit debug now what this is going to do is it's going to go through a full compilation step for me okay it's actually really cool so it's going to compile up my ios device my app and then deploy it to my device but i do need to go through the setup wizard so i'm going to hit this setup wizard i have signed in with my apple account which you know there are is documentation how to do so i'm going to select my team and i'm going to hit finish here this is going to download any search requiring stuff all the things that i need to do to actually get it up and running and deployed onto my device now all right now when we look at the output we can see that it has this full ipa file which is basically going to enable to build that file and then deploy it which is really cool so it's going to go through that final deployment stage onto my device um and then from there what it's going to do is going to ask me to go ahead and open the application manually the first time to actually see it installing right now on my ios device which is really cool so here it's asked me to go ahead and go ahead and launch the application because it's my first time so i'm going to tap on it on my ios device that's actually going to launch it you can see it down there launching it's connecting to the debugger to my ios device you can see way down there let me bring it up it's the cable is attached via usb but what's really cool about this is that all that tooling works well so even though i can't lift it up all the way so the cable is sure the usb cable i can actually open up the xaml live previewer and this is my my application right here running so if i came in and i moved that back to orange and i said hello from ios what we can see is that all that hot reload goodness continues to work and that xaml live preview does too so i can hover over these different elements tap on them and navigate to them as well that is so so cool not only being able to deploy from my windows machine without a mac on my network or anything like that but to actually start deploying and debugging and getting things inside of visual studio which is oh so cool all right last but not least officially is mac so i'm going to do is first head over to visual studio for mac 2022 in this case i'm going to show you what ios looks like over there in that case android looks pretty much identical but then we're also going to go ahead and take a look at deploying to mac with mac catalyst okay so what we'll need to do is install visual studio for mac so when you go to the visual studio for mac homepage there's a big download button and of course any additional work just fine i've already downloaded the installer so i can double tap on that on my desktop and launch it right here now when you launch the preview installer this is going to launch a similar experience to windows but it's a little bit different here we can see it has this installer pop-up it's checking my machine to see what i have installed you may need to enter your password here just so you can validate what all is installed on your machine now i've already installed visual studio for mac and a bunch of the down and maui stuff and if you already installed it but forgot to check down in maui you can just rerun the installer and pick it here so when we hit continue we can see we get net done maui and other things like tvos and mac os now built into don maui is the underlying platform so ios android and mac catalyst additionally if you go down further you'll see android ios and mac os coco for xamarin i also recommend checking those it's important sometimes you have backwards compatibility you're opening other projects there so i recommend installing that to here okay so once you have that installed you're going to just open up visual studio and you can see i actually have things installed side by side over here so i can just open that up and this is going to launch visual studio 2022 now of course i just run all previews because that's what i do but i'm going to hit new project and we are going to go ahead and see that we can build web apps console apps we can build cloud applications over here and we can also build multi-platform apps and here is the don maui app the blazer hybrid application and the maui class library so here let's go ahead and do this and i'll say dot net six i'll say hello from visual studio for mac nice long name for a project title but again you're getting the full project here the same exact one that we saw over on visual studio for windows so here we get the same things we got our dependencies and our drop downs this time here we just get android ios and mac catalyst because we're not on windows we don't get that pop-up there for windows but we do get all the platforms so it's the same exact project we still get the main page over here and sure enough we get images and labels and buy-ins and all that stuff now in addition to visual studio 2022 for mac you'll also want to install xcode and make sure you run it get all the dependencies there because that is where on this drop down similar to windows you will see all of the ios simulators that you have there's all the ios simulators all your android emulators that are here and of course you can deploy to your mac so if i go and i select an iphone simulator now what i can do is just come over and simply hit debug and what this is going to go ahead and do is now compile up the application and then deploy it onto my iphone simulator now if it's already been launched it will go ahead and launch it if not it's already up and running like it is here let's go ahead and launch the application and sure enough i get my net maui application i can hit click me and i'm increasing the account it's the same exact thing that we got over on windows now the difference is that i can also come in and stop debugging and then say deploy to my mac i'm going to now hit debug again but this is going to compile up the mac catalyst version of our application and deploy it locally right on my mac machine just like we saw when i deployed to windows from windows so sure enough here it is i'm on a dark theme so we can see that we get the dark theme over here which is quite nice so it automatically responds this default template which is absolutely lovely now i mentioned earlier that you can do your full done and maui development but you can also do web development and blazer hybrid development with dot ml which i'm totally going to touch in another video but i'll put links into the show notes below but that's it that's how you get started over on your mac and do all the things i'm going to show you in the rest of the video okay so we've gone ahead and we've created our application we've deployed it to android emulators android devices now ios devices now windows devices now we use hot reload for xaml for c sharp and a whole lot more how do we do a few other things for example how do we create a new page how do we do navigation well of course there's great documentation and videos on that but let me walk you through the basics now that you know how to put down controls how do you actually put down and navigate from page to page additionally how do we interact with device apis and style our application so let's head back over to my windows machine in this case to do a little bit of navigation okay so we want to go ahead and create a new page in our application so i'm going to go into our maui app and what i can do is just say right click add new item this is going to open up the new item dialog and we have c sharp items here and in visual studio for mac it's the same we have done maui we can create content pages in c sharp or in xaml we can create content views which are kind of reusable components and resource dictionaries so i'm going to create new page one just in our root you can put them in folders as well new page one maybe not the best name but it's a name now one thing i noticed in this template is that for some reason i've never called my maui apps one two three four five six but it the name space doesn't seem to be correct there so i'm gonna go ahead and change the namespace of this class and also in the code behind you may not run into this issue at all because i've already reported it to the team but i'm just going to align those name spaces because it should for you if you name your maui app literally anything else now this new page is a vertical stack layout with a label in it and it just says welcome to down in maui but i'm going to say welcome to new page one now in addition to that we need to go ahead and navigate to this page or put it in our user interface so let's first talk about some of the things that app shell does app shell itself can host pieces of content now it can host multiple pieces of content so for example i can come in and say shell and here i can copy this shell content i'll say new page i can then come in and we can see this is local colon and i can see new page one now if i had other name spaces i could add them here too so i've had xmlns colon other thing equals and then there's all of the different namespaces available to me from android to my you know maui app for example and different maui resources as well so you can add those namespaces there and visual studio help you out now the last thing is i need to update this route and think of it as a url that you want to route to in this case it's not super important because i'm going to put it inside this piece of shell but it may be important down the road when we start to navigate to this page so now when i add multiple pieces of content it is going to go ahead and put in a fly out sort of navigation now we can see that the default template disabled that and it gives us a lot of options we can have fly out it can be locked it can be more so now we're just going to enable fly out here for example and i'm going to go ahead and now navigate and say deploy to android and let's go ahead and deploy and debug this over onto my android emulator that's up and running i could deploy it to windows to my ios device again whatever you want now by default multiple pieces of shell content are flyout items now there is for example fly out items there's menu items and submenus and a lot more but a shell piece of content inside of the shell will default to flyout items so you can just add as many as you need in here you can add them in the code behind as well but you know that is what's going to happen by default here and there's great documentation and shell and everything you need to know and now it's off deploying you can see it's a lot faster this time which is cool so now i have this fly out i can see a new page in here and navigates to the next page sure enough i get the animations it's buttery smooth which is super nice that's pretty cool i got the pop-ups i get everything i want that's pretty cool now if i want to i can also come in and get tabs so here i'm going to say disabled again because i don't want fly out i'm now going to go in and say i want to put this into a into a tab bar so i'm going to add two pieces of shell content into a tab bar and i'm going to hit run again now i literally just disable fly out and just added a tab bar and two pieces of content which will give me two tabs home and new page which is pretty cool you can see the little animations there too now if i run this over on windows for example we'll get a different look and feel based on fly out and based on tabs because the team uses the latest and greatest sort of win ui 3 there now we also saw that i didn't have any icons but i can specify those icons on the shell piece of content i just don't have any in this case because it's the file new project but i could add little svgs in there as well so now we can see is that here i have two different tabs tab one which is home and new page i get that nice little animation there as well so you get that all right there which is cool now the tabs are going to be a little bit varied based on what you're doing but here we have tabs i could also come in and add more tabs and you know tabs inside of tabs and that would give me bottom tabs and top tabs and nested tabs as well so there's all sorts of things there too but that's one sort of form of navigation but what if i want to navigate from this page to this page well there's a whole navigation system built in so i'm going to delete this default i'm just going to say hey here's shell content now this shell content has a route of main page now since i'm going to navigate to this new page one i'm going to need to register that page so in the code behind for the app shell i'm going to come in and i'm going to say routing dot i'm going to say register route now what i need to specify is a string which is the route so let's give it a new page as the route and the type so i say type of new page one and there we go so this will specify new page as the route and then type of new page one you can make this name of new page one you can put anything you want in here it's the route there's absolute route relative rounds there's a lot to learn about in routing but it's pretty cool now if i go into my main page i'm gonna come in and i'm gonna go ahead and say await and this is now gonna make this asynchronous i'm going to say shell dot go to shell.current dot go to async i'm going to say new page that's it now in this case it's going to navigate to the new page push it across do standard navigation i could do other things like add in different identifiers if i wanted to pass in query properties i could do that i can also pass in a full i go into the navigation here dictionaries of parameters i have a whole video on all that stuff too that i will go ahead and show you um down in the show notes or up in the little info button there too so i'm going to make this android again there we go and what we'll see is we're going to navigate over here to this new page so there we go let's navigate over to new page and new page 1 will be created in this context so it's actually really really cool and again it loads so much faster every single time you do this that's really nice so i'm gonna say navigate to page two and just like that we've navigated i guess a new page one sorry a new page one i navigate back does it automatically the back button works you can disable the back button there's all sorts of good stuff you can do modals you can do all this other stuff it's kind of pretty awesome let's be honest with you now that's standard navigation tabs fly out what else can i think of oh you can create these pages in c sharp two so let me do new item over here and i'm to go create a new page i'm going to call this um new page 2. there we go and now what we have is the exact same thing as earlier we have a new page again i'm going to change the namespace to namespace my six app new page two it's a vertical stack layout and here i have a new label that is setting the properties horizontal vertical to center and the text to welcome to dot and maui from code all right well this also enables me to do is do things like i don't know create a new button so i could say var button equals a new button here and then i could say go text equals go back home for example so if i want to navigate back home i could then add that into my children that are in here and i could also say button dot clicked plus equals hit tab that's going to create it for me in this case what i could do is i could go and navigate backwards i'm going to say await shell dot current dot go to async and the way to go back is to do dot dot in this case here so now we have shell current go to async dot dot if i was multiple pages in i could do forward slash dot dot and go back again which is actually pretty cool so let's go ahead now and register this page in my app shell so i'm going to say new page 2 type 2 and now instead of navigating to that first page let's navigate to new page two and debug again now this user interface will be created completely in c-sharp and it should look pretty much exactly the same but it'll have the button in it as we would expect in this case so here we go navigate back here we have this go back button over here we can maybe add some spacing in there but when i go back it navigates back which is quite cool now i could go ahead and tell it to animate as well one of the overrides all those nice things that are in there too or i can hit the back button so it's kind of up to you if you're in a modal for example dismissing that modal so you have those options available all right last but not least is accessing native apis this is one of my favorite features of actually building applications with c-sharp for ios android mac and windows i have access to those apis in c-sharp but also from cross-platform api is built in to dotnet maui that's actually really really cool so what this means is that i can access things like siri kit or android bluetooth directly through those apis or the don and maui team has abstracted like 70 or 80 different native apis into a single cross platform abstraction for me things like connectivity device sensors geolocation and a lot more so we'll go ahead and integrate that into the app now the place i would recommend always and i should have said this from the very start is going to the documentation so it's going to show you not only the support of platforms getting started tutorials device setups so much more it's going to give you everything you need but here under platform integration this is going to show you not only how to access native apis but also those cross-platform apis like app actions browsers map permission version tracking contacts email networking um phone dialer sms web authentication battery all these different things so this is really really neat so let's say instead of going in to my main page and just having one button that says go to page two i go in and i say button text here and i'll say check internet okay and i'm gonna say horizontal option center again add a clicked event i'm going to create a new clicked event and just hit save here for some reason the hot reload couldn't apply my changes so i'm going to go ahead and hit rebuild and apply changes i probably just source generation some timing there so we're just going to have it redeploy but now what we're going to do is inside of our button clicked 1 what i can do is when i check internet is i can access one of those apis so here if i say microsoft dot maui dot i have different things like animations application model that give me activity state app actions app info browser and a lot more there's also the networking for example that gives me connectivity each one of these apis has an interface with it and you can actually do different you know mocking of that if you're doing unit testing so these apis are brought in automatically so i can say connectivity dot current dot network access and inside of there i could check to see if for example if i said var has internet has internet i can say equals give it a new line and i could say if that equals equals network access dot internet if it has internet then we totally have internet now that's really really cool the other thing we can now do is say display alert display alert and here i'm going to say has internet question mark and i'm going to say string interpolation internet and then ok again i'm going to go ahead and hit that hot reload button and now in my app when i check internet i totally have internet which is super cool if i come in and actually put this into airplane mode and i hit check internet i don't have internet anymore which as expected is there now i can go in i could run this on my windows machine and we're going to see that i do have internet on my machine i'm not going to turn it off in this case but i can see that it will pop up a native windows pop-up dialog for me so let's go ahead and see it here there we go check internet and sure enough i totally have internet now all those apis are abstracted but are being called from c sharp and you can call those apis from c sharp 2. one thing i didn't show yet was this platforms folder this is really neat let me zoom in and we can see is that i have all the different platforms i support and inside of here is actually a little bit of code that was scaffolded automatically in android we have our main application that's creating our maui app main activity here i can override android lifecycle events i can add android specific resources android specific permissions and app different information same thing for ios with my app delegate and my info p list mac catalyst tizen and windows 2. those are all there so what this means is if i want to i can say using android dot bluetooth for example and access those bluetooth apis now another really cool thing is not only can you access those apis create an interface for them if you want to but you could write that directly in i don't know this main page here so this this new page where i go back i could do a conditional compilation and say if android and look at this it's going to give me all the additional android compilation flags that i can put if it's android 21 or greater if it's just android i could do uh l if ios and then i could do end right now like what i could do here is i could access and if there we go i could say android dot bluetooth dot and i can access the android api i can control what my highlight is via this drop down right here in visual studio so if i say ios now i'm using ui kit dot and i get access to those apis so i've access to everything inside of c sharp which is really really cool all right last thing to talk about is styling i talked about it a little bit ahead of time but inside the resources we have a styles and we have colors now these colors are going to define all the colors in the application so you probably realize that there's a lot of purple for example but if i want my application to be blue and then i want this to be light blue let's see maybe our light blue is that one or maybe you see where the colors are going to pop up let's do blue there's got to be a it's got to be a light blue right oh there it is light blue um let's do orange for some reason you can do this but we can see is that there are all these styles and colors that have been built up for me automatically which is really nice these are going to style our controls because inside of styles.xaml every single one of these controls has a light theme and a dark theme mode for it automatically okay now i could run this over on this android emulator however i did pick an older one that doesn't have dark theme mode on it so that's going to be kind of a bummer from what i can tell is that there's not really going to be a way to do a dark dark mode on this one so i have another android emulator so i'm just going to toggle this here this is the power of being able to toggle between devices and i'm going to go ahead and launch it here on the pixel 5. now this is another android emulator that i have up and this one does have dark mode on it so you can see it's enabled there and this is already you know up and running and i can run multiple android emulators at the same time of course if i had a device i could plug it in there too now we're going to want to see is not only do all of these different controls that are built into ml we have themes associated with them but they're using this app theme binding which basically enables light theme and dark theme mode across the entire application so we're hoping to see that and additionally styling our application with our new blue and light blue colors and of course our different orange here too now that's nice because as you scroll through you'll see all of the different controls and editors and frames and things like that if you scroll to the bottom over here you'll also see this shell styling too so if you want to modify your title bar your foreground colors background colors navigation settings all that thing it's all right there automatically for you that's one of my favorite features too it's a lot of my favorite features in here but you can kind of kind of understand where i'm going here it's pretty cool that you can easily style and change all the different settings not just only color but for example padding for example so it drives consistency across your application okay so it's found the emulator it's up and running now here we go we get our splashscreen.net which is nice and then we have our dark mode which is cool and we can see that our different themes have changed across our application which is quite nice you can see our buttons have changed colors as well i could should be able to put this back into the light theme there we go and now you can see the blue has really taken over so you have to change some of those different settings based on you want light theme or dark theme but we get all that blue in here as well coming into our applications that's pretty cool you see that come right in automatically so there you go all right from start to finish hopefully you've gotten a grasp on what c sharp is what dot net is and what exactly done maui is and why you'd want to build with it for me as a c-sharp developer i love it because now i can build applications for anything and share code between all of my applications now i've just really scratched the surface in fact this is really just oh five one getting you off the ground running hopefully you found it entertaining and you built your very first application and tweeted me at your sponsor magnor leave a comment below i love that now i wanna also talk to you about a few other resources that are totally available for free on the internet first is that i did an entire beginner series eight part course this is about hour and a half long something like that i would say over on the dot net youtube this will actually have you build an entire small to do application from start to finish with don maui it will also teach you the basics of xaml and mvvm data binding architecture and also show you navigation and passing parameters around if you want to go even further what i want to talk to you about is my four hour long workshop right here on my youtube this is also going to take you from start to finish i recommend the beginner series first but this one will have you building an entire monkey application that will get monkeys from the internet pull them down put them in a list it'll have you tap on one navigate display data pass parameters and so much more that one is really really cool because it's sort of like present mode do some stuff follow along now beyond the documentation beyond the website beyond all the amazing youtubers creating donna maui content not only on the donna youtube but independent community members and net team members like javier and gerald there's so much more great resources like microsoft learn which is free self-guided learning i'll put links to all this stuff in the show notes below so if you prefer to sort of have a project style system where you're building things up and get a little little icon badge at the end of it head over to the free microsoft learn resources where you can learn all about that stuff i want to know your questions i want to help you start building applications in c sharp so please reach out to me at any time in the comment below or on twitter or anything like that i always try to get back to everyone super duper quick and of course at any time you know hopefully you've hit the like button on this video if you haven't by now you made it all the way through so please do consider hitting that like button and hitting subscribe because i put out videos nearly every single week right here on my youtube channel i put things into the dotnet maui playlist which i'll put a link to as well and now i also do have some videos on xamarin forms in that specific playlist because a lot of the apis are exactly the same so everything i'm teaching you can be applied there too anyways i hope that you really enjoyed this video hopefully you can subscribe subscribing and also hitting that like button and also when you hit subscribe you can get notified when only new videos come out but also when i live stream which i do on occasion too anyways thank you all so much i really appreciate you making it all the way through this video i really hope that you've got up and running and start building your very first application again if you have any questions let me know thank you so much for watching and have a good one [Music] you

Channel: James Montemagno

Views: 106,688

Keywords: dotnet maui, .net maui, .net, .net maui tutorial, .net maui example, dotnet maui tutorial, .net 6, visual studio 2022, visual studio, dotnet maui getting started, what is .net maui, .net maui community, .net maui app, learn .net maui, learn dotnet maui, dotnet maui workshop, .net maui full course, .net maui crash course, .net maui getting started, .net maui essentials, .net android, dotnet maui full course, xamarin, c#, xamarin forms, xamarin tutorial

Id: rumfIg9qJ_Y

Length: 67min 3sec (4023 seconds)

Published: Thu Sep 08 2022