.NET MAUI Preview 7 - Full Windows & Mac Setup with CLI, VS Code, & Visual Studio 2022

dot net maui preview 7 is here focusing in on reliability and performance i feel like i've done this so many times for all the.net maui preview videos that i've done here on my channel but anyways we're here we're back and today i'm going to show you how to get done maui preview 7 set setup on your mac os device i'm going to be setting up on my m1 macbook air and also inside of visual studio 2022 on windows so tune in [Music] hey everyone i'm james montemagno i'm back with yet another.net maui preview video preview 7 just dropped this week and if you watch any of my old videos you kind of see a progression as dot net maui continues to go now i also like to answer questions along the way so before i get into them you know i want to make sure i address some of your questions but before i do that if you like this video or you think you're going to like it jam that like button right there and hit that subscribe notification bell down there so you get updated with all the new videos i put out right here on this channel every week do that hit that like button yeah it'd be awesome i'd really appreciate it it helped the channel a lot all right donna maui so maui is the multi-platform app ui part of dotnet six this enables you to build ios android ipad os mac os windows applications all from a single shared code base it is the evolution of xamarin forms which enables you to build ios android and windows apps from a shared code base and of course really focus on mobile scenarios don maui is going to enable developers to focus on mobile and desktop scenarios and additionally i've shown in many of my preview videos dot net maui blazer which also enables you to mix in blazer web content into your.net maui applications so you can share code between your web blazer app and your.net maui application as much or as little as you want which i think is really really neat to get those native desktop apps that you may want or mobile desktop apps with native api access native controls or blend in some of that you know web goodness into the mix totally up to you i've also gotten a lot of questions of like you know hey do what's up with xamarin forms and you know should i start now what should i do here you know done maui is set to release and we'll look at the roadmap herewith.net 6 which will be in november with dotnet.com so make sure you go to donetcomp.net and register today and add it to your bookmark it's completely free event happening in november we'll talk about all this stuff all the the community and the donet team but you know for me you know xamarin and xamarin forms will be supported for yet another year and of course i'm shipping xamarin forms applications today all of your knowledge all of your insight there will come over in fact on the most recent net maui community stand up they talked about tools of converting xamarin apps into net maui applications so to me you know as.net maui evolves it's fun to play around with do file new try to look at how i can like bring in some of my source code but you know often you want to kind of wait until at least rc or ga to start kind of messing around but it's all up to you um i have been playing around quite a bit and i've been enjoying every single preview update of dot net maui so last video asked hey do you want to see the setup process on mac os and all of you said yes so let's go ahead and do that and of course if you have any questions there's another video i'll put right up here i'll ding it right there which is should you wait for donna maui or just start with xamarin forms it's still relevant go check that out today let's head over to my mac so i like to start where i always start which is on david's blog posts are absolutely fantastic and preview 7 is available it's focused on performance and reliability which you see right here and new semantic service for font scaling and accessibility which is very very exciting so he shows off some of the new grid systems and new layouts this is actually really important they've gone away with the old sort of you know implementations those brand new layouts and implementations for grid flex layout and stack layout including the new horizontal and vertical stack layouts and those are the ones i use the most i mostly use stack layout and grid and that's about it they do show you that you can change a default global they're setting them the spacing to zero so you can override that you can also use the maui controls compatibility layer here which will enable you to use like absolute layout for example there's other things such as some new accessibility improvements they've removed tab index and is tab stop but they've announced its brand new semantic focus and announcement and also font scaling so if you're doing screen reader support which you totally should be you can use this new api to improve that there also font scaling this is pretty cool you can see the font scale with the devices themselves so that's really really cool and you can enable it or disable it automatically there's a bunch of other improvements over here that you can kind of walk through such as scroll view handler shell provider and a bunch more but you know what i like to do is go through the roadmap and then talk about the setup so preview 6 had a lot of stuff in it devices gestures native view shell triggers this one has some more apptheme bindings layouts frame in there and we'll see release candidates coming up with borders corners shadows um and then bug fixes and some more life cycle events also you'll see some updates down here as we get closer to ga what's going to make the cut what's not going to make the cut this could change at any time so definitely check that out all right so what do you need to do to get this puppy all set up over on your mac all right so you're ready to go and you're like oh man mac time let's do it you're going to need a few things first you're going to need a mac os device that includes support for mac xcode 13 beta so that's what you'll need to use that's requirement if you're going to be doing don and maui on a mac now right now there's no support in visual studio 2019 and visual studio 2022 for mac is not out yet or in preview so everything you'll be doing on a mac is inside of vs code or command line all right so you need to get maui check which we'll talk about here and also xcode 13 beta so when you head over to the apple developer portal you'll see xcode13 on there i'll put it in the show notes below as well and you'll basically figure out the setup you want to hit click here and click on xcode 13 beta you'll log into your account and you'll want to click on applications and there it is xcode 13 beta 5 and we can actually see that i have it right here xcode beta you can run xcode side by side xcode beta so when you download it and you go ahead and extract it it will automatically be xcode beta and you can slap that in your application folder all right now the next part here is actually the same the installation you're going to obviously not install visual studio 2022 preview but you're going to go down here into dot net maui check all right so i'm going to go ahead and just minimize a few things there we go and i'm going to pull up my terminal now i'm not terminal person so i actually didn't know that um by default zsh terminal is the thing that actually is you know being put up here um but i learned a few things here the first is that before you even get started with maui check you're gonna need to go to the.netwebsite.net then what you're gonna do is click on download and you click on mac and then under net you're going to say all.net downloads here okay and you're going to see net 6. again i'll put a link into the show notes here and you'll want to install preview 7 of net 6 and over here under mac os i use the installer and you wanna use the x 64 installer now i did mention i'm in an m1 arm based device but you still need the x64 installer of the sdk from my experience your mileage may vary now the next thing that you'll want to do is you'll want to go ahead and install maui check this is a tool that for right now is a great way to get your machine set up so what you'll want to do here is go ahead and paste that in and hit enter and make sure it's installed i already have it installed now if you run maui check and you get an error it's because the net global tools which is what maui check is um can't run by default out of the box with zsh in the terminal you can go into bash and it'll run just fine or you can come in and add the path correctly so you say export path dollar sign home dot net slash tools dollar sign path and what this will do is it will assign basically update the zsh config environments folder and just to make sure it's included there else you can just go into bash i'll put a link into one of the documentation talking about this but now you can just say maui check and here for example so i guess it didn't do it so you know you'll want to set that command i guess again and then do maui check i guess i didn't do it on this one but you'll be good to go so that's where you export it that's one way of doing it you probably want to update the config so it's there all the time many ways of doing it i just go into bash but again it's up to you so i ran maui check and i've done this before and i did this ahead of time but what this will do is it'll install open jdk 11 it will make sure any visual studio requirements are there even though it's you know you're going to do this in visual studio it'll make sure your android emulators and sdks are installed it'll ensure xcode is configured xcode 13 beta is installed and dotnet 6 is installed and all of the workloads so basically just follow along go for it there you go now one thing to note though is that i had issues and i was talking to john dick with this step here the xcode 19 203 which is the latest beta of xcode so it needs to make sure that it's there now if we go into my application folder here we'll see that xcode where's that x code oh there it is there's xcode beta app and xcode here so there's this so what i needed to do is i need to run a pseudo command which was xcode select and then dash s this will actually select it accordingly and set what which xcode i want to use and here we're going to use xcode beta app run this command and it'll automatically set it and then you'll have to enter your password and that'll set it accordingly and you'll be good to go all right now we are ready to go if i do net new over here what we should see is that i guess dot net new dash list that will give us all of our applications so we have raiser mvc all the things in here and of course we have our dotnet maui app there it is and donna maui blazer so they're all right there to do ios android and mac catalyst so we up installed xcode 13 beta that takes it took me like an hour or two because it's big file it takes forever to extract we did maui check got that all up and running and of course we need to install.net 6 um preview 7 as well but now we can do is i can just go in and let me just do i'm going to do bash again because i'm just more familiar with bash commands i'm going to do dir i'm going to do cd oh sorry ls no i don't know why it's on dur there we go um cd desktop let me do makeder and i'm going to do um someone said that i was mixing commands but you know whatever maui 7 app that's what i'm going to make and then i'll do cd maui 7 app and now i can do.net new maui and since i'm inside the folder it is going to go ahead and create that application for me now i'm going to open up vs code and we're going to open that folder over here i'm going to go to my desktop and maui app and open it so there we go and i'm going to select the project here as the main cs proj not the solution just this main one here only because this is the win ui one i don't really need that but if we go in over here we see there's a platforms folder with my android my ios and my mac catalyst code here which is quite cool resources we've seen it before if i open up this we can go ahead and see that this is going to give us our ios android mac catalyst support gives us all of our information here here's our icons our images our splash screens and of course we have our startup file so it configures fonts for us which is super cool and we have our main page so similar hello world button clicker event so now we're going to do is go into terminal all right and there is a repo there is a repo called maui samples and this will tell you basically how to get everything up and running and installed but more importantly as you scroll down you'll see these commands here which is how to run the ios or mac catalyst versions from the command line so when we go over we're just going to go in here and copy this go into here and i'm going to just go ahead and paste this there we go but i'm going to go ahead and change hello maui to maui 7 app now dash run is going to run it on mac catalyst so we're going to do a map catalyst app first this is going to restore everything that we need it's going to actually bundle up our mac catalyst application and then run it right here on my mac os device which is really cool and mac catalyst is a really nice piece of technology because what it does is it takes your ios application and it turns it into a native mac application at the end of the day so again this is going to compile the code go through some compilation and then run my application so let's see what we have here oh it's going to open it for the first time that sounds good now it took about 30 seconds to actually build and compile that and what we should see is there's my maui application there it is boom so here it says hello world click me and i'm clicking away click click click click count up and we're good to go donna bought waves and says hello same thing so now you can change your code you can do anything you want and you're off to the races same thing here if i go and now do this command again so let's go ahead and um scroll this up a little bit here let me just go ahead and make this a little bit bigger [Music] pull this up and if i do for example instead of mac catalyst i do net 6 ios we're now going to see that this will build and compile the same application but it's going to go ahead and run it on my ios simulator now it's going to go and pick a simulator that's the default there are some commands on how to configure that and actually select it but of course once visual studio 2022 for mac launches you'll be able to do a drop down and pick so this is going to go ahead and wait and it's going to pull up all of our information and then should launch our simulator here we go here we go there's our simulator and for some reason it wants to pick the ipad pro 12.9 inch but whatever it's totally there and it's going to launch it up so we'll see here oh there it is hello world and click click click click click click and i'm clicking away so there you go well there you have it there is mac os set up to do our mac catalyst ios of course you can do android there as well by doing dash android and it would go ahead and deploy it now the next thing we want to do is take a look at what's new in visual studio 2022 preview 7. now if you already have the previous version installed you can go into the visual studio installer and get the update there and of course you still want to run maui check just to be confirmed we'll go ahead and go through that let's go ahead and hop over to the windows machine and see it running now on windows with wind ui three and also android right over here all right now actually before i get into the windows bits and pieces here i actually realized that over on build your first app there's a net cli option here which is kind of cool there's visual studio 2022 but also cli and that actually walks you through all the things i just did but it also gives you select an ios simulator which i was just talking about and now i know how to do it so you can actually go and select the udid automatically and set that which is super cool all right well now let's say we want to go ahead and get up and running well the installation guide is fantastic it literally shows you all the things you need to do and install the single project msix version that just got updated for win ui and also install the latest.net 6 preview and net maui check which is super rad so let's go ahead and do all that stuff all right so first thing over here let's go and put the terminal over here for now and what we want to do is open the visual studio installer make sure you have preview 3 install that's the latest one there also make sure when you hit modify here that you want asp.net if you want the blazer stuff the dotnetdesktop.netdesktop or c desktop cbs plus mobile.net win ui those are the five boxes you need and boom you're good to go um cool that's it so if we head back over to the terminal uh what we can now note is that we want to run maui check now if you don't have maui check you can come into the installation guide and run it here if you have any issues updating it you can just update it manually with the update command and then run maui check this is going to check your machine for all the net versions it's going to check it for all of the workloads everything like that it'll make sure everything is good and you can see it did it so it installed the.net sdk android sdks emulators all the good stuff there you can also type in.net workload list and that will show you workloads installed on your machine if for some reason something is out of whack and it's telling you that you need to install a workload maybe maui check failed somewhere you can do net workload install android for example and then it will go ahead and install the android workload there so you'll want to make sure that you have all four of those listed and then at that point you should be able to do dot net new maui right over here and i'm in a test folder and it should tell you that you're good to go now here it's telling me that an update is available um over here an update for this is available it says i currently have version seven but tell me an rc is available and i think that's because in an earlier preview you had to manually add the r or the the nougat feed for the desktop so i think i'm on like internal bits so definitely make sure you have the latest seven installed when i first did this it didn't install seven it had six still so what i did is i went over to the nougat here and this is the microsoft maui templates and you can just tap on seven one three four and then you can just copy this little command here come back over here and then install the specific version of the maui templates and you'll be good to go but additionally now what you can do is actually open up visual studio 2022 preview 3 and you can come over here and say create new project and you can see i've created a lot of maui projects because there's a maui button in the drop down so there's maui and there's dot net maui app and dot net maui blazer app now remember here for net maui app that's using you know xaml and and creating native user interface across ios android mac and windows dotnet maui blazer adds in the ability to basically scaffold and use blazer razer templating and engines in your.net maui application so you can share code between web and your native applications which is really cool so as much or as little as you want and what's nice about that is that you know when you think about blazer apps those sometimes running on webassembly or on the server but here it's just running inside of dotnet maui so it already has a net runtime so nothing extra there so we're going to i like how there's a this button is is a purple that's really nice anyways down in maui app down in maui app six and then we should be able to go ahead and just create our application right in visual studio so the templates are all there it'll give us everything we need now there's nothing dramatically different over here from what we saw earlier so let me zoom in and notice that we have platforms android ios all the stuff from earlier dependencies we have platforms over here like i said resources for your fonts and your images there's a startup file that has all of your startup information there we go right so it has add fonts this is where you put your dependency injection your services this is going to pull in all of those nuget packages all everything you need and we have our win ui project too now i i think that i've been having some issues running when ui on mine i'm not sure if it's all that i was reading some comments so i'll post some comments on this feed if anything's changed but i'm just going to focus on android for now in the top menu i can actually go to framework and select netsix android over here for ios i could connect to a mac or i can do hot restart as well i think hot restarts organ was there and what we can see is that i can select android local device which i totally have plugged in right now or emulator i'm going to go ahead and select that and just hit debug and that should go ahead and start it up right over here on my android emulator now i did notice that things seem to be quite a lot faster david on the most recent net maui community stand up gave an overview of some of the boot time kind of optimizations they're doing and package configuration too so definitely check that out i'll put a link to it in the show notes as well the other thing i want to mention here is that all of that single project goodness is here so we see multi-targeting we see uses maui single project namespaces and of course all of the cross-platform goodness with images splash screens and fonts so it's all set up here so the entire project is just under you know 50 lines of code basically here all right so it is now deploying to my android emulator so it's finishing packaging and compilation and this is the same project that we've been seeing in all of my other videos so it says hello world welcome to now maui happy multi-platform app ui and then there's a current count now the difference here like david said in the blog post is that the engines for grid and stack layout and flex layout are all using brand new handlers so they're super optimized and will be working really really good out of the box so here we go we have maui app six installed so it should go ahead and launch in to debug we're just doing in real time here we go boom this is pretty cool because i'm now debugging fully my net maui app built with preview seven all right cool now um this is going to look exactly the same don about bot you can click um with the new layout optimizations we can see that everything is working really really cool which is awesome and we're good to go i don't think hot reload is working just yet for oh it is okay so at least working in some instances here so changing that stuff and making it good to go is working now let's see if i can take some code from like the grid for example let's just grab a grid here let's see if this hot reload is working or not let's see if i can just delete this and put that in there oh there we go so we have a grid we have a grid it looks like some of the labels maybe are working maybe not working with the hot reload but here i just paste it in a grid with a bunch of different views and now i'm getting that fully optimized grid out of the box one of the big changes that they made here is that there's no spacing in between the columns and the rows so actually if you go over into the blog post you'll see that here that you can add that in by adding a resource dictionary with spacing if you want to go ahead and pull that back that was one of the things that kind of always bugged some developers was that you couldn't couldn't add that in there let me see if this will redo let's go ahead and reboot it here is that there was always spacing by default so if you copy and pasted some code maybe from wpf it was going to look a little bit different oh we changed some code here so let's go into the code behind let's go ahead and get rid of that counter label there and let's go ahead and debug it one more time over here there we go so now we should see ideally is that our resource dictionary is going to basically just set defaults here for spacing and rows which is cool and of course over here if you want to use old ones like absolute layout you can use the bat combat additionally you can use all this new semantic font size and scaling as well so let's go ahead and let this boot up with our new changes and let's see what it looks like it's pretty cool all right so the application is now booting up into debug and of course the debugger is attaching and there we go there we go awesome so now we actually have our spacing back and all of our fonts all that stuff and they're all using the new layout system and it does look like some of the hot reload is working out of the box let's see if that'll work i think so boom there we go at least some of the properties are working which is really cool it's really fun to watch maui evolve and add some of these new features in there of course like i said you could attach this to a mac and you could deploy on the ios simulators all that is in the documentation well there you have it that is dotnet maui preview 7 which i'm really excited to see the progression and some of the brand new things coming down you may notice that i have a different shirt on well that was because visual studio 2022 preview 3 some of the cdn stuff was out of whack and now it's all fixed so i waited a day i'm feeling a little bit better you can probably tell the difference in my voice from the mac os over to the windows um over here just another day and slowly getting better and hopefully by the time this video is out i will be 100 and back in it anyways i hope you enjoyed this video if you did give it a thumbs up i'd super appreciate that if you want more awesome developer content ding that notification bell hit the subscribe button do all the things i think you have to do it in reverse order subscribe first and of course like it and then do all the things and share with a friend why not anyways thanks so much if you have any questions leave comments below and i'll try to answer them so until next time thanks for watching [Music] you

Channel: James Montemagno

Views: 35,059

Keywords: .net maui, maui, dotnet maui, xamarin, xamarin.forms, cross-platform, single project, xamarin forms, maui 7, preview 7, .net maui preview 7, visual studio 2022, visual studio 2022 preview 3, .net 6 preview 3

Id: eF5YcpyzQIo

Length: 28min 22sec (1702 seconds)

Published: Thu Aug 12 2021