Learn Live - Create a cross-platform app with .NET MAUI

[Music] hello hey everyone welcome to microsoft learn live how's it going matt i'm doing well james james what do you think about that intro music the bumper music isn't that the best thing you've ever heard it was pretty good i was rocking out i was getting my stand stand goal in even though i was uh totally sitting down i'm not gonna lie about it yeah that's the thing with apple watch you can just kind of move your wrist and you can get the stand goal totally trick it it's true i usually am standing all day at work but today i'm sitting so you know i do need to get up and stand around so we'll do a one hour break during the learn live over here but i'm super excited matt because you and i you know we've worked together for a long time we podcast together on the donna maui podcast and today this is a first part of a seven part series can you believe we're gonna be together for seven whole weeks doing that i cannot wait because we're going to talk all about learning.net maui and it's going to be seven very short weeks this is going to fly by because it'll be so much fun we're going to go from just creating a brand new cross platform.net model yep essentially file new all the way through adding some local data to it to even calling some rest services up in azure the full thing you're going to learn everything about that maui in this series yeah we're super excited to do it because matt and i actually work together with some folks to actually create these learn modules so we had had in hand and building them and deploying them and maintaining them reading all the feedback that comes in and man i love not only just talking about don and maui and all the cool things that you can build with net but also all the things that you can build with donna maui the multi-platform app ui for net to build ios android mac and windows applications now you can follow along at home which is really great you know this is being recorded live as well if you're on youtube so you can play it back later if you need to pause you need to rewind you do that stuff you can do it you can ask questions live as well do a bunch of stuff i think is laurent do you have something that you need to say oh there he is hey lauren how's it going buddy hey friends i am very well i'm very excited today um thank you for letting me join hello everyone my name is lombino i'm the executive producer of learnlive and today together with my colleague chloe mendel we want to try something new so we are really excited it's the first time we try this on live we just want you to ah we just want to ask you i'm very excited as you can see uh to hang up to hang with us until the end of the show because at the end of the show we are going to be sharing a special link and we are going to have a post learn live hangout that's going to be in microsoft teams but it's open to everyone so this is where you you can come on camera on your microphone and talk directly to our speakers james and matt our moderator is going to be there as well john galloway and it will be a great opportunity for you to network with each other to follow up on any question you have with our speakers so we hope you will stick until the end at the end i will put a link in the chat uh in youtube and in twitch so that you can join there and we hope to see you there for half an hour on teams james matt take it on awesome thanks lauren yeah super excited i like to obviously talk to everybody not just you matt so i'm really excited that we're going to try this brand new experiment and honestly if a bunch of people in the chat go ahead and post some comments in youtube or wherever you're at right now is tuning in because i appreciate everyone tuning in because you could be watching the apple event right now but you're here with us matt did you know that's happening right now the apple event i did know it's going to be right now but what i do for all live events which our viewers should not do right now but i watch them later and i too exit i just watch it super fast that's right i'm i'm on the podcast i do 1.3 x for podcast listening that's my jam i can't do two x's if it's a little bit too fast but on youtube maybe a 1.5 but um i like the engadget and verge like this event and five minute type of thing that usually works really well for me so yeah yeah you get the summaries or maybe the and one more thing we're going to have and one more thing at the end of it that laurent just came on and told everybody what it's going to be so we hope that you can totally hang out with us during the the show obviously follow along ask questions we are here for you it's called learn live for a reason this is live it's not recorded um you can ask us questions and do stuff those are photos of us we look a little bit different my hair is a little tiny bit longer your beard's a little bit more grayer mine too see everybody's been saying that to me lately i pop onto a team's meetings like whoa your beard is pretty great like what's going on and it's like it's your fault it's your fault that i have to deal with you and my beard's getting great not your streams it's definitely mine it's definitely mine you can blame it on me you can blame it on me uh let's see we got some comments in here so awesome and we do have some people so i'm james montemagno i'm a program manager at microsoft and our developer uh community and um i've been a long time dot net developer cross-platform mobile developer with xamarin and now donna maui and um matt and i've been friends for like geez almost a decade now how long has it been like yeah yeah so yeah and yeah i'm matt soak up i do uh cloud advocacy for dot net so james and i we are pretty much two sides of the same coin so we talk.net all the time i like talking azure james likes talking.net and i've been doing xamarin that's how james and i met each other was doing xamarin we had a uh way back in madison wisconsin we had a xamarin event that james came and spoke at and ever since then or even before then but yeah alzamran now.net maui with a little bit of azure sprinkled in on top exactly and um this entire series gonna take us from start to finish of building and learning different core concepts of don and maui so just what is done in maui how do you build cross-platform multi-platform ios android mac and windows apps from a single shared code base how does the underlying architecture you know work we're going to go into you know styling we're going to go into laying different controls sql databases making restful service calls all sorts of things and matt and i will be with you every single wednesday at 10 a.m over here pacific time but we also have some great moderators as well john galloway and katie savage from my team which are super rad individuals they'll be hanging out in the chat moderating things across the different uh aspects we got twitch we got youtube all the different things there so it's super good if you have questions we'll go ahead and and they'll help answer some things as well and then we'll answer of course things live uh as we kind of see them come in which is pretty cool on this little chat here for us which is cool so feel free to ask questions we'll kind of highlight them as we go let's get into it though um so this is the learn module that'll be going it's a very very short url as you can see there's a qr code though which i like so this is the very first there's a whole learning path on microsoft learn uh which is uh and this is the first one akmslash learn live dash this is the date by the way so 2022.0907a i don't know why there's an a but there's there i guess for the first ones uh but this will take you directly to the learn module i'm sure someone will post that in the chat oh there oh it's at the bottom of the screen look at that how about that oh amazing uh and then what's cool here is that this uh is gonna again it's gonna kind of go through some of the basics so what we're gonna go through and some stuff matt and i sort of modified the slides a little bit and every week we're gonna modify who's leading the the learn module so that way you kind of mix it up every week when you come join us so i'm going to sort of lead this first one that's going to lead the next one and go back and forth um maybe the last one will have to split at 50 50 matt because then you know be fair but don't worry i'll have plenty of color commentary to go along with this good uh awesome so here's what we're going to learn we're learning the basics of donna maui the the multi-platform app ui like what is the architecture why would you build apps with donna maui we're going to go and actually create a.net maui application we're going to define some shared ui we're going to actually build um a brand new application that does phone dialing from within the application that does you can like enter you know 1 800 codemill mat and it will translate that into a real phone number for us we're going to deploy that from visual studio 2022. uh if you're on visual studio 2022 for mac you can also make sure you're there and we'll walk through what you need uh to get installed there's a don maui button basically that's what you need to check how's that sound matt sounds great and i'm gonna get into it just a little bit but it's so great that we can actually call we're gonna have the api so we can actually make a call right from our it's all taken care of for you just like one thing it's just like one line of code it's amazing so let's get into it uh the first thing is if you're brand new you know we take a look at net as a unified development app platform and what that means for you as a developer is that you can learn a single language c sharp for example is one of the dot-net languages there's three different languages in dot-net there's c-sharp f-sharp and v-b visual basic and uh i'm a c sharp developer matt's a c sharp developer we're going to do everything in c sharp today but what's great is that you can learn a single programming language like c sharp which is an object-oriented programming language and you can build for a bunch of different devices operating systems and deploy your apps anywhere now you can build cloud native applications you can build websites in.net you can build desktop apps mobile apps games if you're a unity developer for example you can do iot development ai and so much more and what this means is you as a developer is you get to learn c sharp for example the programming language you have a common set of base class libraries and apis so for example if you want to do access the file system or you want to make a network request or just handling simple data processing you have a single common api that.net provides that works on any of the different operating systems or platforms that it can be run on um to run your code and then you also get sort of common infrastructure compilers tools ecosystem developer you know devops integration into github or azure devops you can use the cli you can use vs code for many things so you kind of get this really nice unified development platform no matter where you want to develop now the unique part is that for each of these different platforms these different sort of workloads if you will there are different frameworks for net some from microsoft from some from the community as well that's the cool part about donna it's open source it's free it's cross-platform so for example for web asp.net core is the main web workload now inside of that you can build web websites you can build static websites you can build component based websites with a framework called blazer that can run offline in web assembly you can build back end web apis for example for desktop there's a bunch of different you know frameworks like winforms and wpf and win ui that have been developed to build windows apps but you can also build mac applications for desktop ios android applications for mobile for tablets with net and then there's of course games with unity iot libraries ai libraries and a whole lot more and of course super powerful backend cloud integrations with net and azure and other clouds as well because dot net can go and run anywhere now what's really cool is that that is that what we're going to look at today is is building and sharing cross platform applications across desktop and mobile so i think that's what's important because what we want to do and what i've done for a long time i've been a mobile developer and a desktop developer for a long time is often when i wanted to develop for you know windows or for mac or for ios and android even if i was using.net i would have to sort of you know build multiple uis or like worry about like how do i share code between these platforms if you're not using.net you would have to actually build these applications in multiple programming languages different tools different frameworks a bunch of different things and matt and i have been building ios android mac applications for i don't know how long have i been doing it since 2000 so 11 years i've been building well i guess desktop apps i don't know 15 16 17 years i've been building you know desktop apps mobile apps for ios and android for at least 11 years i mean it's it's wild and jet in general and i've been doing it all in c sharp and i know matt you've been building for a long time too yeah i mean what's funny is how i got into xamarin work is that way back like 2010 or maybe 20 2009 is i used to be in consulting and i really really really wanted to do ios development work and so i promised one of my customers i can do this no problem you know in objective c and i found out that objective c is objectively bad the right absent and so i'm googling all around and it's like whoa i can actually write this in c sharp and yeah i know c sharp it worked and it was great and ever since i never looked back so yeah and there's been a long lineage of basically taking c-sharp and netter running it on ios and android and mac and of course you can build for windows for like ever but um there's been a long lineage with xamarin which enabled ios and android and mac development and then there was xamarin forms which is cross-platform ios and android and a little bit of desktop in there but as time evolved this platform evolves so the team at microsoft and.net on the net team said well how do we take sort of this 10 15 plus years of knowledge and build something new from the ground up but based off a lot of the learnings that can be backwards compatible for our developers that have already been building with net for a decade plus but integrate the latest you know frameworks and ui technology and some of the best practices and they developed.net maui dotnet maui is the net multi-platform app ui so it's a productive way of developing native apps from a single code base for any other different consumer devices so things such as ios android mac and windows different devices that you can deploy on like the surface duo or different laptops like the ipad or android tablets run them on laptops you can run them on anything which is really cool you can develop from a single code base all in c sharp and not only have a cross platform ui layer but also a shared code base for all of your business logic and also easily access native apis of the underlying platforms that's what's actually so unique about don mao it's part of net six and what this means is that it has a unified.net runtime that runs across all the different operating systems you can not only build cross-platform mobile and desktop apps but you can also build hybrid applications with dotnet maui we're not going to get into that in this series but there are plenty of videos on the dotnet youtube about blazer hybrid and how that works with don maui so if you are a web developer you can actually reuse your blazer components in a don maui application and do hybrid development if you'd like but what's also great is that since donna maui's builtlet.net and it's part of the ecosystem you get a productive development environment like a single project which we'll talk about today hot reload support visual diagnostics and and just tons of great tooling in visual studio and visual studio for mac and and how this works is that dot net maui is part of.net so when you install net on your machine part of visual studio or via the command line you can install the dynam maui workload and that will give you all the bits that you need to create uh multi-platform apps for windows mac ios and android and you can see here that the underlying infrastructure is a little bit different based on your platform so we'll talk about this a little bit more in depth but android apps are just android apps using standard android widgets and then ios for example is using ui kit which is the underlying system for ios mac catalyst is the technology from apple that enables ui kit applications to run on mac and add desktop features and then on windows those applications are wind ui 3 using the windows app sdk but you as a developer you just develop with don maui in a single cross-platform api for ui and then it will go ahead and take care of displaying and rendering the native ui for you at the end of the day did i miss anything there matt no you didn't but you did kind of we have a question from the audience and you kind of hinted at this james and i know my answer for this but i want to hear your answer because if i'm building a desktop app is it and i'm building it for windows do i want to use wpf or would it be better going with mali it's a great question it's going to be based on your application that you're building right like if you're only building a windows based application depends on your deployment model what versions of windows that you need to target how you're going to deploy it internally and of course what you're most comfortable with if you've been developing wpf apps for the last decade and then you just need just a windows app and nothing else then maybe that's a good place for you to continue your development you can build wpf apps with net 6 which is really really cool or if you are looking forward you could just build with wind ui in the windows app sdk if you want to deploy into the store do different things if you are looking to go so you're like hey maybe i do want to take this app over to mac and xyz i could do that what i would say is look at your requirements at the end of the day and what the app package enables and gives you right so there are some things that like wpf applications since there could be installed you know outside the store get access to different apis maybe in windows that you're doing under the hood things like that so it really depends i pretty much build all my stuff with donna maui you know but every developer every app is different and this is just one of the tools in your toolbox granted realize that as you start to build an app with don and maui or with wpf the architecture that we'll kind of talk about with mvvm model view view model your code beyond the ui could be shared and leveraged in the don maui application later or vice versa and wpf right so they're very similar code basis and that's where i was going to go in my answer is that when you start going.net maui is you have the code sharing or when you're able to output for different app or different platforms so i can get my mac handles i get my ios and get my android but you're absolutely right it really depends on your application and requirements and maybe even more important where your familiarity is like you said james if you spent the last five years doing wpf applications you're probably gonna be able to churn out a brand new wpf application in a lot less time with that said though it's totally worth learning.net maui because i love it you love it and just for that fact it's worth learning but yeah just the fact you get the multi-platform support that's really neat and you did hint at it before too james and i want to drive it home is that you do have that single base class library that we write for so you do have we have like all the system dot libraries that you get at we have all the nuget libraries that are able to be used in like your shared projects across your or your when i mean shared projects your business logic you have them all that you can reuse across like even your windows and your mac catalyst app but if you have your business logic and you want to reuse it with your asp.net core web api you can do that too i mean that's the beauty of net is that it runs everywhere and so it's like you're not just building an ios app for you're building a net app so yeah totally i agree with that too and again with that you know and and there's not only these frameworks from microsoft right but there's also like i said community projects and different you know um different companies that build other platforms with net as well so things like avalonia and uno and other ones that have been out there right so there's this great ecosystem an amazing community right so it's kind of based on your needs and your requirements there are you know this is what is here from uh microsoft and the cool part is that those other platforms by the way build on top of the core underlying technology that we'll talk about which is ios android 4.net and mac catalyst so the the team the the ios and android team at microsoft that builds4.net they they and unlock the capabilities of building ios and android and mac apps with net and that means other libraries other tool chains can be built on top of it and what's cool here is we got some questions about backwards compatibility too so there's great documentation at docs.microsoft.comforwardslash.net forward slash maui for some reason my docs and some of my properties have been pretty slow to load for me today but there is a supported platforms um on there so you can go all the way back to um android 5.0 which is api 21 which is very old ios 10 which is also very old mac os 10.15 or higher and um windows 10 1809 um which is because it's using the windows uh win ui 3 and the windows app sdk so it's going to cover 199 of all people out there in the world i don't know so many you know what i mean in general so that that would be like your out there and for me this is what i target like on ios i do i call it like n minus two so like today or whatever apple is doing their event they're gonna unleash like ios what 16 so i'll support ios you know 14 plus basically and then like halfway through the year i'll drop 14 and move to 15. like once the numbers move over for android i kind of always support on whatever my app needs but you know i just look at the numbers and say okay am i going to cover 90 but there are some individuals and some um some people that are building for like you know schools or whatever where they can't update all the time but you know that's the nice thing it is um it's very very flexible in a way cool all right let's move forward dotnet maui architecture click too fast okay so when we think about dynamic architecture for it we think about what does that mean right how are we actually going to make sure that the architecture of our application enables us to separate our user interface from our ui logic and also our business logic from the user interface and also how does don and maui enable us to have a shared code base but how does it render the native controls at the end of the day for us well donna maui in the architecture is really simple to be honest with you what you have at the bottom is a big huge chunk of shared code now this shared code can live in a single class library multiple class libraries you know a bunch of nugets it can it can be anywhere the shared code it's just net code now this traditionally what you think of would be your business logic so these are things like your models like if i have a person class or i have a cat class or a pet class my business logic to make restful service calls maybe i'm hitting a web api that's built-in.net pulling down some data deserializing that json into those classes it could be storing data into a database like we'll talk in a future episode here with sqlite for example or maybe it's integrating into different um azure services right uh anything that is basically just.net code that i want to run is just shared code and that is shared code between my don and maui applications but also any net application now on top of that though what's really cool is with dot net maui specifically it enables you to also share your user interface code that you can write in xaml which is an xml based markup or directly in c sharp it also enables you to share resources resources like your styles your colors your translations your images your icons your splash screens a bunch of things in there all from a shared project and additionally platform features so part of don and maui is that you have access to the underlying apis of ios android mac and windows but don maui also abstracts out common apis things like connectivity device sensors geolocation and a whole bunch more and we'll talk about that here in the future and we'll use some of the apis today now what i like here is that we still up top have ios android mac and windows as the project and what that means is that i as a developer have access to those main apis if i want to from c sharp so if there's something in android that i want to have accessed that isn't part of one of the shared apis i can access that android namespace or that ios namespace or that mac and namespace directly from my project in don maui i can of course customize the different looks and feels and tie into the the underlying systems of ios and android if i want to but as a high level you know 99 or even 100 of my code basically can be shared across the different projects did i handle everything there yeah you sure did and i'm gonna jump back just a second when we were talking about the shared code they shared ui library stuff written in xaml is super cool in that you are writing one ui using xaml and it it spits out an application native application so it looks like ios it looks like android it looks like a mac os application because it is just once you're writing it just once and it looks like because it is a native app and that's really that's really that's that's super cool yeah and the other really cool part about.net maui is that not only and we'll talk about the different controls and things that you have is that you do have a full cross-platform drawing api so what's nice about that is that if you want to have a similar look and feel there are already a bunch of libraries out there from the community that bring you know a common look and feel to the user interface with custom drawn control so those are available too so it's really flexible and a great ecosystem out there too so how does this work under the hood well under the hood over here what we have are the underlying platforms right we talked that we had you know ios android um mac and windows everything starts with the app code right this is where you're gonna spend most of your time you know you know delivering on oneplus devices right now we always show ios android mac and windows but you might only be developing an ios and an android app or maybe a mac and a windows app or all four or just one right but you're just going to be writing a lot of your app code so that's that business logic there now the actual architecture that is happening here is that the first layer of technology is is the native platform sdks so that was when i had those c sharp blocks on there it's like you have access to those um underlying technologies that are just kind of sitting there and awaiting um to integrate with those sdks so things from google uh for android for ios from microsoft or the core platforms there now on top of that though we need to run that our business logic so we have the.net runtime that spans across the different operating systems and that of course gives us a base class library like i talked about earlier right and then to enable these things to work we're going to need something to integrate into net into those base class libraries and those underlying systems and that's where dot net for android.net for ios and mac and when ui come in so there's a lot of that stuff under the hood that is automatically taking care for you besides just you writing app code right your app code that business logic there i'm making a restful service call i'm doing that stuff all those different blue and purple boxes are things that the.net team develops that enables us to just write an android and ios and a windows application for these different operating systems now what that means is that if you want to you can write android xml and do storyboards and and access win ui and develop those things like this is all just core plumbing infrastructure and the magic bit and piece of it here is don maui so the multi-platform app ui and what this means is that this done maui layer sits on top of all of this infrastructure and plumbing for us so we don't have to worry about any of this complexity of understanding how android ios windows the different uis work here and there we just have one api that we access and this works because don and maui abstracts ui elements into a common description for us right so up top here we have a button this big purple button up here and that's a donna maui button that lives in microsoft maui controls and then every control in don maui has interfaces so they can all be mocked out and be very easily integrated and it's an i button for example here now what the don maui team has done is they've implemented handlers so on each platform they implement a handler which is sort of a way of implementing that interface for the specific operating system so when uh the button from don and maui is clicked the button handler ties into the underlying platform the win ui button the app compact button the ui button from that catalyst or ui kit and it knows how to propagate up or down those click events or knows how to integrate a text color or the text property it can map it to the native controls and what that handler does is also enables us as developers to override those properties and and get access to the underlying control so some people are asking well how are things different from xamarin sample forms well this is really an evolution of xamarin and xamarin forms sort of the next version if you will of it that is simplify the architecture pattern for not only the don maui team it also makes it faster and more performant but it also enables us as developers to easily access those underlying platforms um via this handler implementation with a lot less code which is nice so what this means is when we go and create a button we have one api like this that is a button that has different properties on it so there's a text property here that says click me there's a clicked event that will call on click on counter clicked and then there's some different options there's a bunch of different properties and different controls in there so things like horizontal options will horizontally horizontally focus that button there's also something on here we can see semantic properties dot hint there's a bunch of different additional properties that work across different controls that are for accessibility so semantic properties are like for screen reader for example we can add these hinge properties we can do different levels of headers and things like that cool so i can implement my own button handler if i needed to for whatever reason and then interact back with the ui button on ios if i if i wanted to so yeah you and you did mention it so net maui is the next evolution of both dot-net or xamarin forms and really xamarin native um so is there any reason why i would do a xamarin native app again yeah or just a net ios app or done at android apps yeah yeah so you can easily migrate your existing xamarin ios and android apps to.net six which would be like pretty much you know if you just wanna keep continuing developing and supporting that application would be great well it depends you know there are some developers i'm a good friend frank krueger where we do a podcast together merge conflict where you know that's his bread and butter he's been doing ui kit development for a long time he has a lot of donna maui apps but he also has a bunch of just you know just ios apps and he really wants to like integrate deeply just into ios and the all the kits and all this other stuff and he wants to just write those pure apis just as if you were writing it in swift or objective-c but you're writing it in c-sharp or f-sharp or something like that so that's totally doable and possible but it's kind of similar to what we said earlier with the wpf or don mou right do you want to just write a an app with ui kit or just with mac catalyst i don't know it's based on your application what you want to build right where done maui is that tool in your toolbox that says hey listen we're going to give you this common api common set of features does it mean that you have every single api available for your cross platform no but you do have access to them because they're built on top of that core infrastructure right and that's what's important gotcha yeah yeah and the reason why you would you know and why we are moving to don and maui is because this new handler infrastructure and being part on.net 6 gives you a whole bunch of good advantages right it gives you access to the latest and greatest api so for example when we talk about being native which is a loaded term it means that you get access to all of the android widget system all the ui kit all of the windows app sdk and win ui three all of mac catalyst and all of the apis available there for you as a developer at the end of the day so when our applications are native they're truly built native now if you're coming from a xamarin xamarin forms world like the reason and some people are asking why would you move well because this is sort of the next version of xamarin and the xamarin ios and xamarin form support will stop because it's moving to dot net 6 and dot net 7 and to don malley right so like this is the evolution to upgrade your applications and start with dotnet maui today so there's no reason to start an application with older ui frameworks and things like that with xamarin forms you'd move forward with donna maui as well if that makes sense yeah now what's cool here is that when we talk about native it also means what i think is important is like the apple event is happening right now which i have no idea what's happening because i'm not paying attention i promise is because it's native when a new version of ios or android or windows comes out it means that your applications gracefully upgrade automatically so if apple decides to change how a ui kit control works like table view or collection view or how mac catalyst works your applications use that native technology in the native controls which means your applications upgrade seamlessly automatically to that new version of the operating system and that's what's so important there's a lot of other frameworks that are doing a lot of custom stuff or doing web things like that and those are totally valid scenarios but what i love is giving my ios and my android you know users that look and feel and customizing it for windows or for mac accordingly that's there and when the ios and android move to dot net six and don maui moved to dot net six here it also gave not only huge boosts in getting access to these native apis and native performance we'll see here in a little bit how don and maui actually boost performance overall is one of the core fundamental pieces um that the team took into consideration as they were developing it that makes sense yeah so what do you need well to get started with on maui you'll need visual studio on either mac or windows which is 17.3 the current stable version of it and you need to check the.net maui or the multi-platform app ui development checkbox and that will give you everything you need to start building applications today um like i said you can use visual studio 2022 this is going to give you access to build basically anything any of the editions community edition pro or enterprise so completely free if you want to just use the community edition there you get access to all the intellisense intellicode um you get hot reload for c-sharp for xaml for any of the other web workloads that are out there you can easily integrate and access you know android emulators develop for ios you know from your windows device using a cool piece of technology called hot restart you can use wsa or the windows subsystem for android if it's available in your country and you're on windows 11 you just deploy immediately to your windows machine for android and of course you can also connect from windows to your mac and do remote compilations with visual studio for mac like i said you can also use visual studio 2022 for mac it's been rebuilt from the ground up to be fast and fluid using native mac ui so natively supports apple m1 it's built on.net 6 which is pretty awesome and you can do of course all of your don maui workloads your ios android workloads and of course there's great tooling built in as well there's some questions over here about windows or visual studio 2022 and if you can build and deploy from a windows arm machine so visual studio 2022 17.4 which is the current preview supports uh doing development on arm there it's not supported for ios android and maui work yet but the team is working on that to bring that arm support there that doesn't mean that you can't build a windows application and have it run on window if run on arm windows devices you can forever basically even with xamarin and xamarin forms you could build an armed version of it and deploy it there so if you're if you're deploying your applications to windows and you want to support x86 x64 nr you can do that with don maui just like you can build and deploy native you know arm packages um and you know x86 compliant packages for uh mac as well you can do that too which is cool all right so this is the workload that you would need it's right there inside of a visual studio 2022 and it's very similar on the mac you'll see a big.net maui checkbox and you just check it now i also check a bunch of other stuff so i check like asp.net and web development and azure development i'm in windows development i just check all the boxes on there and i get all the stuff so but it's one check and that's all you need to get started doing stuff all right there's a knowledge check matt uh oh so have you been paying attention james uh i don't know i've been talking the question is did i um did i say all the words that are in the knowledge check i should probably say what the knowledge check actually is okay perfect this is great all right cool i don't know if i actually did this okay so let me go back back oh yeah he got he got close i got close okay so i think i did yeah so we get here right so this is pretty good yeah so so this is good we're gonna reiterate what's going on here on the native platforms and native runtimes right what's happening here so we have you know it's native right native ui widgets and native apis native runtimes right so there's native run times for android ios and mac right so we have net running natively there and on windows of course we have our windows app sdk which is using win ui 3 for the ui and also the win32 runtime to run on windows on ios and android we have our.net runtimes that are packaged into our native apps and compiled up so we're getting all that good stuff so just cover it i think i covered it there we do got it okay let's see okay cool they have a knowledge check so if you're following along and you're doing the learn module these are the same questions that are there so now that we've covered this what you're gonna you can vote it aka.ms forward slash polls okay or you can scan that qr code and you can follow along here which is which environment provides the runtime support for a win ui 3 application you know what i know what answer i want it to be and we're going to have to talk to the team to uh change the name i really want it to be win maui i mean why can't we have have a run time called win win maui wouldn't that be great i mean that's not the right answer we will cross that one off but that would be so cool if we could have that maui so and it's not i mean it's not the maui run time either james we i mean or the mono run time it's not that either no that's a it's a good question in general so how and people might be like oh what is the mono ransom so mono was originally how um ios and android and mac applications it was an open source re-implementation of.net to run on ios and android there now there are still mono runtimes that are out there that are being used and there's basically you can think of it as customized run times for each operating system right so ios and android have an optimized on at runtime that that run the same bcl base class library and um that are there that are part of the mono runtimes but those are for ios and android so that leaves us one option that option b option b yeah well you think about it right it makes sense like windows applications run on the win win32 runtime right which is you know that's running the environment at the end of the day there so about 53 percent of people did there so but i also think that the other 43 percent just went wanted to be win maui so yeah so let's pass that feedback onto the team and see if we can't get that changed i like it i like it boom there it is okay here we go now this one this one hopefully should be a little bit straightforward and again you can you can vote now at aka.m polls which markup language can you use to lay out the ui for net maui applications we mentioned it a bunch of times and there's two different there's two different ways of doing it but is it a json which would be uh you know squiggly json markup is it csv comma separated values aka excel [Laughter] or pages if you're watching the mac event right now so maybe there's a brand new pages i don't know anyways or is it xaml which is a um extensibility markup language all right cool this one's pretty straightforward pretty much we got 90 someone voted csv come on come on um it is xaml that is correct it is the language that you use to layout so it's a it's a it's a it's an xml based markup language and it's one of the ways you can also just do c sharp or you could do f sharp you could write it in code first as well there's great libraries that help out with that as well so definitely take a look at that which is cool all right we're going to get into it matt we are going to follow along in our learn module and we're going to create a donna maui project in visual studio now before we create it we're going to talk about what's inside of it and all the different things there so you'll need to install the done maui tools for visual studio so you can build along at home now this is going to create a little bit of time you know if you haven't done it yet so you could hopefully you we should have opened up with that maybe yeah you should yeah make sure you have it installed but you can install it now and install's actually pretty quick so it's not too too bad based on your internet speed you can kind of go there now the easiest way to get started is to just do a create a new project select on maui and create a new app template and that's what that looks like here and we're going to go through this live we're going to create our own application but if you're following along in the learn module that's going to be the next section it's going to kind of describe some of the things that are happening here now instead of us just kind of going through it i figured we just kind of create the app in real time and kind of go through it in general and kind of go from there so we're good but there's three different projects here that we'll see inside of visual studio or visual studio format you'll see a maui app you'll see a maui blazer app and a maui class library and a maui app is just what we're going to use and that's going to be using the native ui it's going to have xaml for our ui markup and it's going to create our ios android mac and windows applications now one thing you'll see on the right hand side is the single project that it creates now you said earlier matt which was everything's an interface and you could implement your own i button for example and what that means is that dot and maui can easily be extended into other operating systems so for example i'm not seeing your screen i'm just seeing slides right now oh that's fine oh okay are you on are you are you on the how to get started slide do you see yeah yeah yeah but you see on the right hand side it says god okay all right all right all right i'm yeah i'm dumb no you're you're perfect i'm behind you're perfect you're right good you're pretty good good all right good never mind never mind i said nothing but but one thing i wanted to point out here is see how this says tizen in here so this is a don and maui app so the samsung team actually implemented all of the done maui apis the interfaces to run on tizen platform so you can actually run don and maui apps on samsung televisions on their smartphones and watches and all that other stuff as well which is really cool now what that also means is that it can be extended to other you know operating systems if you have your own operating system or something else and there's a bunch of work being done from community members on like linux for example um and actually for wpf still you know if you want to run it on there so there's a whole bunch of community projects doing a bunch of stuff there now from microsoft you get android ios mac catalyst and windows so we're there now that donna maui blazer app right here that is a hybrid application so that's an app that's built with don maui but uses blazer for the user interface and you can mix a match ui too there's also a class libraries that's a dot-net 6 library that enables the different multi-targeting and things like that okay so i figure here instead of um me just kind of walking you know through a bunch of you know text i figured i would just go and create the project and we can go walk through it how does that sound okay sounds perfect cool so i have visual studio 2022 here and i'm just going to hit that create a project now if i just type in maui up here okay we're gonna get the those project types that we just saw right which is cool how do i do the oh arrow boop boop boop there's three okay there we go so we get a donna maui app we get a maui blazer app and we get a class library now if you're on a mac it's going to be under i think it's under cross platform as the section it just has all the maui templates now another thing you can do is you can actually go right here into the project filters and you can just tap on maui that's another option too right so you have a bunch of things in here so there is mobile that's where we used to send people and you can see all the xamarin and xamarin.forms ones that are because i installed that workload now if you don't install the workloads you'll actually see less things you'll see these android applications and ios applications and these are actually done at six applications built with with net so those are those underlying platforms so fun fact but we're gonna go on down at maui and i'm just gonna say um don maui app and here you can give it a name and a solution name so we're going to give it maui app one so i hit next and here since don maui is part of dot net it also means it's running on dot net six so when dot net seven comes out in november you'll be able to upgrade to donet7 or dotnet8.n9 because.net comes out every single year so you can expect a major release of donna and maui every single year so so matt pop quiz when does the next major version of donna maui come out the next major version would be what would be net seven right because you said every year and then every every year yeah and then the year after dot net a yeah next major version then dot net nine year after and one and done does that happen um november because november is for net november.net exactly and what event happens in november in which it coincides dot net conf event yes which you can find out more by going to what is it.netcomp.ed i don't know d-d-o-t-n-e-t-c-o-n-f dot net it rhymes all right donetcomp.netconf.net someone will drop that in the chat i'm sure so i'm just going to hit um create here and i'm going to go ahead and zoom out here now what i have if my mouse will what's my mouse doing i can't see my mouse for some reason oh oh oh gosh learn how do you zoom it there we go okay oh hold on hold on i was getting all fancy with all my my tools and then i just i clicked on something and now i don't know how to oh gosh i'm gonna oh my gosh my i'm gonna exit oh this is so weird i don't i somehow lost my mouse what how did i do that see i can see it i can see your cursor moving around but see oh but i don't see it on my screen weird that is wild yeah because i can see it i can see your mouse oh my gosh oh i can see it on the little screen down here that's wild okay okay that's not very helpful though okay um let me try something really quick that's it's not helpful um let's have the let's really quick just bring up the two of us so i can like try to figure this out on my screen really quick so maybe get rid there you go all right then mouse i must have like hit something on my keyboard to like hide the map yeah well this is what happened when we do it live and well zoom it that's what i was using i was using zoom it yes so this is extremely complicated um can you google bing how i did that how i hid my mouse this is like not not okay sorry everybody i don't i don't know where my mouse went let's see how to hide the mouse cursor in windows 11. yes okay yes what did i do let's see here a little history on the mouse cursor come on let's go now right to it um well looks like you have to like you have a utility to hide it you just can't hide it what yeah let's see start control panel after that click on mouse and the hardware click on identification options and then well that's the only hindwall typing oh no this doesn't help it does not help all right hold on this is yeah like i just somehow magically deleted it doesn't get i like i like the comments or just like get it just buy a new computer yeah yeah supply chain it'll take three years before showing yeah my mouse is just like completely hidden did i do i couldn't have done it with zoom it that doesn't make any sense i'm sorry everybody this is very very odd like i can see where i highlight over things i did kill zoom it uh earlier john as well oh that's back okay all right my mouse is back we fixed it all right i just got visual studio mac open though i was ready to take over okay i'm ready so i'm ready it's back thanks everybody i don't know what happened i did it was it control i did do control four i'm going to bring zoom it back up let's see if the assume it does it [Laughter] oh that one says i can't run it i don't know what i did okay anyways we're getting well i do want to bring zoom it back up hold on please hold this is a good old james demo man worst i must have i must have i must have done something where it is like control i must have hit some button and hit it anyways it's back thanks everyone that was the most scariest thing that i've ever seen in my entire life okay cool all right so we're in this out of visual studio right there all right so yeah see there okay cool we're zoomed in all right so here's what's going on in this done maui project right so we have a single project with a bunch of dependencies and what's cool here is that this is the underlying platform so net six android net six ios and net six mac catalyst net six windows inside of here so actually multi-targeting the different projects okay which is really really cool and what this means that i have a single project and if i double tap on that is i see the target frameworks in my project and this is going to show me that i am targeting let me make this a little bit smaller you know android ios and mac and if i'm on windows add in the windows support too and i can obviously of course add tizen too which is really cool so i get the single project single name space single application all that good stuff so this is actually really really cool so what that means is that i could add specific pro packages from nuget for for android inside of here there's something specific i can access and right click and you know add in nuget packages and i can add pretty much anything inside of there if i want to add the single projects inside of there so i can actually you know manage the nuget packages and see you know me adding all this here's what's installed by default but i could browse and i could add in any of the stuff that i need that's just.net stuff right now what's also inside of here is a bunch of resources so this is really cool so don maui automatically handles cross-platform app icons fonts images raw assets like here's a text file you can add a database file a json file inside of there anything splash screen so it automatically handles splash screens for you and they also worked to automatically add in base colors for your application so here's a bunch of colors primary colors tertiary colors solid brush colors accent colors basically think of it as like a css style sheet and also xaml style so these are also like a big style sheet for every single um every single different control in in dotnet maui so if you don't like how the default look feels you can come in and you can override these different properties different things like that or change the colors of the entire applications this is actually really really neat you can delete all of them if you want to and then it just defaults to the base ios and android stuff as well which is cool now also inside of here is only these resources but you get these platform folders so this is the thing that i was talking about where there's a little bit of android code a little bit of ios code in here and this is sort of the app startup so something needs to start up the application so what's nice is you can see that we're actually using foundation inside of here so we can see that this is automatically multi-target i only see ios in here but i could also say using um ar kit right so if i wanted to use augmented reality kit or ui kit or um core bluetooth or i don't know what are the other kits aav kit call kit cloud kit event kit game kit health kit map kit pdf kit all the kits shazam kit created shazam that's an ios specific api right which is cool same thing over on android i have my android activity my main startup here and i can say using android dots and i get all the different android name spaces that are inside of here right so that's really cool i get access to all that goodness automagically now you probably won't need to access these things but you may need to right so you might need to write a little bit of code in here you might need to have that propagate up and you might want to like write an interface to say i do something and then implement on different platforms so the startup of the application is this main maui program and this main maui program starts up the application and is what sort of is launched by the main application over here so when android starts up we have a main application that launches and it calls into maui program create app right so that's what's happening here on ios when the the application starts up we can see that there is one single override that says create application and that calls our maui app that basically does the startup logic for our application so it creates our application it specifies what app class to use that's the main startup of our app and it does other things like configure fonts there's lifecycle events there's all sorts of things in here that we can configure automatically which is really really cool the other thing we can do is we have access to cross-platform services such as um dependency injection so if we had a class we could add our you know main page in here and we can add or not map page but our main page in here we can add this main page you know into our dependency injection service or our different interfaces or things like that which is really cool so we have this full dependency injection constructor injection all this good stuff that is inside of our application at the end of the day yep and this whole app builder pattern is really powerful um and really different than what we had in xamarin forms and so when you first see it if you're used to xamarin forms it's like what is going on here but after you see it how powerful it is it's like i love it this is so so cool so like you said the dependency injection stuff once we get into it i think when we get into our mvvm session you'll really see how powerful it is it's going to be and how useful it is absolutely yeah so there's going to be a whole bunch to learn there right so that's really nice and that's a lot of optional stuff so if you have your existing you know dependency injections classes and services and other stuff that you like it's just.net it's just a.net app right it's totally there so steven was action can you use other di yes yeah you do whatever you want it's your app you use whatever you want in general it's all that net it's all.net i do think that zoom it is see now when i'm not zoomed i can't see my mouse anymore it must be a windows 11 bug i can see it now i can't see it now wow let's do it yeah that must be something because i can see two cursors right now yeah because the zoom it is doing that and i don't see any cursors that's bad news um so i do blame that unfortunately and now i'm gonna have to well i think it's okay okay um let me zoom in though over here and then i can see my mouse cursor again maybe i'll need to install zoom it from the windows store or something like that anyways now beyond that we said that this thing is creating an app well an app is right here and this is a xaml and this is sort of application-wide resources so we can see that this is the main startup this is going to have a bunch of resource dictionaries of it as like css that are my colors and my styles and then every single code behind every single file has this little code behind file so xaml cs there's a bunch of other little drop downs here and that little code behind file is telling it what to actually start my application with so it says app shell start my application and we may be then wondering what is an app shell well an app shell is a shell of my app the shell of my application defines what my application feel looks like so by default it's a single page and that specifically is a piece of content that has a title of home and the content is main page and it has a url route so we can route with don maui via urls so of main page i can navigate to main page i can create another page and there's routes associated with them just like the internet and um i can see that this also says that the flyout is disabled so what's cool is that shell has the concepts of flyout navigation just a piece of content it also has bottom tabs top tabs different types of laying out your application at the end of the day and that main page over here is a bunch of xaml that has a bunch of controls in it so we can see a vertical stack layout an image a label inside of here a button inside of here and these are those controls that we were talking about earlier and they have different properties different events and we can see this button when clicked we come over to the main page code behind there's a little bit of code that says on counter clicked when we click on the counter it increases it updates the button text and also pulls a semantic screen reader some accessibility feature to announce back the button text which is cool did i miss anything matt no i think we got it all right there okay so now what i need to do is and just one thing as you get that all started up and we you hit on it while you're going over what the solution looked like is that like the splash screen is all taken care of for you i mean you just put it in and it does a splash screen so we could do that before but there was a lot of more ceremony around it and same with images like it takes a svg file that you pop into the shared library or shared project or the single project actually and it automatically sizes it for the for the screen that you're displaying on weather and it just works you don't have to um do all the ceremony of doing a bunch of different resolutions for your images you just pop it in svg and money takes care of all the hard work for you exactly and in fact if i double click on that project again we can scroll down and see that not only does zonde maui handle a lot of that stuff but there's also a bunch of these cross-platform goodies built in so for example we see that the application title is cross-platform the application identifier and project grids are cross-platform version codes and numbers it also helps me if i actually drop this down a little bit let me actually do how do i do the search wrap boop there we go then i do it search wrap oh there we go perfect so this is actually pretty cool so this is going to tell me that on ios this is going to tell me how far back to support so you know while don maui does support all the way back to ios 10 i can specify if i only want to support ios 14 or 13 or something like that same thing here we have mac catalyst identifiers android identifiers and windows identifiers and that's all across platform we can also see inside of here that we have available to us the [Music] um let me pin this really quick here we have the maui app icon splash screen and images and fonts and assets all inside of here which is really cool so this automatically handles all of that stuff for me which is really really nice so you can customize and you don't have to use any of that stuff either right if you don't want to you can totally just you know do whatever you know at the end of the day if you want to to go in and automatically you know use a different resource or different thing you can totally do that which is nice yeah cool all right so now we want to deploy the thing so i'm actually gonna i can't see my mouse again so i don't know i don't know how i got i don't know how i fixed it in general um how did i how did i how did i get how did i fix it so a quick question from twitch is that what's the mbu story on maui and there's a is comment of we call that a community library there's a library called comment which does a lot of model view updates um with maui and i would uh if you're interested in mbu or monoview update i'll go suggest that you go check that out um just go and google maui you know comet they can't check that out yeah yeah like the celestial object that goes across the sky comet so that's the story on that so let me go ahead and try to find my mouse one more time this is not fun i'm never gonna that's what happens when i try to install zoom it right before so yeah right now out of the box mvvm which is an architecture pattern is what sort of supported however yeah there is of course you know um mvu style development which is model view update and that's an experiment right now yeah exactly okay i'm going to launch zoom it again so sorry matt did i launch it there we go okay i'm just going to zoom in over here because i when i zoom i can see stuff that's cool random oh no it's not going to let me do it what's happening here what is happening here matt i don't know but can we define colors in maui and hsv i haven't ever i haven't tried that um in hsv i don't know if you can um you yeah i think there's converters built in automatically but yes um activity monitor okay so the next thing we'd want to do is actually like deploy this thing right so um let me go ahead and okay let me go ahead and come over here there we go zoom in again because it's the only way i can see my mouse is i can actually come in and from this drop down is pick a deployment target so here by default it's targeting windows but i can also target um [Music] and switch to android ios mac or over or windows of course here and i can select different emulators and different devices i'm just going to hit debug here and this is going to enable me to come in and build this windows application and then get it running locally on my machine which is pretty cool so that's going to compile up a native windows application and now my mouse is back amazing i don't know what's going on but i'm going to stop zooming i think just so i know it will it won't do anything i think in general so i'm going to turn off uh zoom it for it i'll figure that out later okay cool so if i come over here my actual my my application is in a dark mode uh because my computer is in a dark screen mode so don maui adheres to that and when i click right i can see that i get these little click counters increasing over and over again this is a win ui 3 application and we actually can see this little drop down here and i can actually hover over like different elements on my screen and pick them out so i can hover this over i can tap on it and back in visual studio that's going to bring this live visual tree up and i can actually pin it and i can actually go directly into the source code where that's at now when i'm inside of here this also means i can edit the xaml so i can say hello learn live over here and if i bring the app back up and bring it back up there we go we can see that that application has been update in real time so we can see clicked so many times which is pretty cool so that updated in real time now the other thing i'll bring out is that i can i can bring up this xaml live previewer that's one of my favorite features especially if you're on a single sort of desktop like we are right now and i can say fit height for example i can hover over the different elements on the screen right since all the tooling's built in i get this live preview of my application um so that means i could i could come in and say um hello live preview and i can see my real running application in real time update which is i think to me it's like a really cool feature and of course it's running here and i can interact with it but what i can also do is i can come in i can add these different grid lines i can colorize the grid lines if i really want to come in and do something special i can do that and get these different color blocks information which is really really cool the other thing i can do is remember we have that code behind right so if i go to solution explorer and i go into my main page xaml we can see that that is incrementing by one every single time what i could do is i could say 10 for example and up here under the hot reload button i have it set to hot reload on file save but i can also hit that live reload button and what that will do is it will automatically hot reload that code and now notice that it's incrementing by 10 every single time i can actually add a break point here right and i can click on that hit the break point i can see what the current count is i see all the current stuff my call stack my locals all my visual studio stuff that's happening inside of here's all the different maui properties and things like that that are happening and i can continue on which is really really cool pretty awesome now beyond that i can take those changes matt and i can deploy it to android so i could actually come over and i could flip the target over to android and i have a few different mechanisms to do this right i am on windows 11 so i could open up the windows subsystem for android which is right here and there's a cool extension um here that brings in the windows subsystem for android and initializes it up that's called the jonathan dick the the lead on don and maui built it it's called the the wsa barista which is right here so windows subsystem for android barista you can install that from the extension gallery and here i now have local devices right here see that local devices the microsoft corporation system for android right here or i can deploy to an emulator so i can actually deploy to an emulator on my machine now you may not have an emulator on your machine or you might get a pop-up for example to install an sdk so if i show you what that looks like visual studio has tooling to help manage and bring in all of the android sdks and it'll help you install whatever you need automatically so if it shows an error when you're building for the first time it's going to tell you like oh you need to install this thing double click on it and it'll install it same thing you might not see any emulators so it's going to tell you hey you need to create an emulator so i'm going to go ahead and bring up the android device manager that's part of visual studio if i bring that over sure enough you're going to see those two emulators that are here so you can create a brand new emulator all the different settings if you want google apis play store all that stuff you can do that there too so now i have the option right if i actually tap on this pixel 5 this is going to load my android emulator on my machine um right here i'm gonna bring it over here it is and this is nice this is flexible actually i'm gonna turn it out of airplane mode i don't know i have airplane mode on let's do that i have my android emulator here so this is cool so if you have um a windows 10 device or a a a mac device you're going to use emulators if you have windows subsystem for android you can deploy it there that's on windows 11 and select countries but you can always use an android emulator or you can of course plug in an android device right and make that work too now what's happening here is a bunch of things there's a bunch of compilation happening so you probably see my video stutter a little bit matt i don't know if you're seeing that at all it's because there's compilation happening and bundling up of this android emulator uh this android application package and then deploying it onto my emulator i can see myself kind of stutter a little bit because i'm on a little bit just on a laptop that's all i just thought was your strobe light going off so so this very first build you know of course i'm doing a lot here on my machine i'm not only recording audio showing my screen doing stuff having powerpoint a bunch of stuff open is um is building stuff so it's building and packaging that the first time on android it takes a little bit of time maybe like around a minute based on how fast your machine is i'm just on a surface laptop four here um which is a pretty fast machine actually but after you do that initial deploy it will go ahead and do a diff basically so it'll be a lot faster the other times there if that makes sense and these android emulators are coming from google right like microsoft we don't create these emulators right these are just standard um emulators from from google so we don't really have anything there so there it is and we can click and we can get the increase now all the same stuff works right so if i go and i see my my live tree there that's cool i can go ahead and make this not always be on top that's one of my settings i always have on so if i was to put this in the background it's there i bring it up it's there which is cool i get my live visual tree i can go ahead and tap on that go right into it say hello live android and then it updates right there as we can see and we get all the same changes that we would get just as before all the hot reloading all that goodness back and forth which is cool now this device is in dark mode so i think if i was to change it into uh light mode um here we're gonna see our application responded wow that's cool because everything is themed and it's an adaptive automatically right which is even in the live preview which is first time i saw the live preview i was like what is this magic going on here yeah it's so cool awesome yeah so then if you wanted to you could go into your colors over here and i could say you know my primary color is like pink um save that now our primary color is pink so cool in the application so i can i can theme the entirety of the application um across there and we can look at what all the other colors and brushes and things are using across over there so in orange and now our application is orange and xyz it's like boom it's good to go pretty cool now now beyond that we can talk about the other things you need to do to deploy to mac if you want to deploy to mac there's no mac in the dropdown you need to be on mac and visual studio for mac now for ios there's a few different ways of doing this you can actually plug your ios device into your windows machine and deploy into a debug mode without a mac machine at all it's called hot restart that's a technology built in but you do need an apple developer account and that will work it'll show up inside of the xaml live preview and stuff which is cool getting a little bit of feedback i don't know if it's you matter it could be i have big time construction going on right now outside of me no worries okay oh that's what it is okay cool yeah um so that's one way of doing it the other way is you can actually um go over and you can you can remotely connect to a mac basically and that does a remote compilation remote login and you can add your macs on here so i'm not going to walk through those in this example we're going to focus on on windows and on android just because i don't have my lightning cable by me to plug in and have it pop up and do stuff which is funny enough but there's plenty of videos and things out there to walk through that as well which is cool all right all right so that's my walk through that's going to bring us to quiz time oh and the question is did i cover everything let's see oh i think i did okay in which method of the application okay in which method of the application object should you create the initial window displayed by the app startup configure or the constructor do i cover that matt i don't know did we get to that did we get to that well it's going to be i think we did get to that i think we did show how the constructor does things yeah how the constructor well there's a startup there's a there's a startup class right well i mean if we go back over here there's there's a main program that creates the app right but the app is what displays the main page right [Music] and that's the app shell so this thing right here is what is actually doing it at the end of the day yep so yes let's see what our poll is coming in at most people are saying constructor i like that some people are saying startup and which method of the application should you create the initial window displayed we just covered it we just did it yep the constructor the constructor of the app by the app right the maui program is the startup it's a little bit confusing when you're a little bit confusing yeah it's a good one okay okay let's see where do you implement the logic for an event handler for a control such as the clicked event a in the xaml description of the page containing the control you implement the logic in the code behind file for the xaml page containing the control or in the app.xaml.cs file all right so let me rephrase the answers here would you put it in the xaml file which is a the.xaml.cs file which is b or the app.saml.cs file which is c there you go yeah i would probably put it in b that'd be me and 93 of people are saying b and it is b all right nice cool all right now what we're going to do is we are going to actually create our first maui app we actually totally did already create the first mouse but if you're following along at home inside of microsoft learn right here i don't know how to change the how do you change dark theme light theme oh there we go there we go perfect um here we are basically on this application here so we're going to create this application over here follow along we're going to build we're going to run we're going to do stuff spoiler alert we already did this so we totally did it totally good deployed it android emulators did it deployed it wow that's pretty cool we did it matt we already already did it yeah we are we're good we're good cool awesome next success we did it so yeah that's why i think it was to me you know the exercise of actually creating and following along xyz like that's what we did so it's good now one thing is this is the only difference is we're going to create a new one here if you were following along inside this module one thing that i want to say is that we are going to create a new project we're going to call it phone word that's the only difference that we're going to do is we're going to create a new one here and do that so let's do a new project done in maui so we're going to create a project and go just so you know james we are down to six minutes left and i know we're having a lot of fun no so we it's two hours long nope we have an hour and a half here then we have a half hour what really yeah oh my gosh oh my gosh why did i think this was two hours because you're having so much fun it is so much fun to talk about this oh my gosh well we didn't do a half of anything okay cool all right well anyways let's talk about adding visual controls all right cool all right there's all sorts of so we talked about this boom what's in a maui project we talked about this talked about this talked about this talked about this talked about this yeah cool okay so let's talk about this so we talked about the high level of the application class this handled lifecycle events creating the new window in donna maui the shell brings in common url hierarchy for our application urli based navigation it has flyout items tab bar menu shell content all sorts of stuff and inside there we have pages now pages is where we describe our hierarchy of our control so we can have tabs pages fly out pages normal pages like content pages that we saw there and inside of each page are views okay now this is an important concept in don and maui because we have things like labels and entries and buttons and so much more at the end of the day that we can lay out so we saw in the default template was a scroll view a vertical stack layout images labels and buttons so that enables us to make really complex and advanced user interfaces based on how we want to lay out different pieces content so there are a bunch of different types of pages like content master detail navigation tabs carousel there's absolute relative grid scroll views frames stack layouts all sorts of different layouts that we'll learn about as we continue our journey and of course tons of different controls at the end of the day that we can actually use to build our applications so search bar time pickers carousel views menu items refresh views date pickers editors buttons entries there's a whole bunch steppers all sorts of different stuff anything you can imagine yes and more yes okay here we go real quick flash quiz which of these isn't a maui layout right a dynamic layout dockable layout absolute layout stack layout or grid layout and you just hit on this you just hit on it i would love there to be a dockable layout i have no idea what it would do but yeah i would love it though that's so cool yeah but dockable layout is not a layout yeah all right and which of the classes uh is used to create a screen end on maui it's kind of weirded a little bit weird but a screen being like a page that you would display yeah so yeah we'll answer it right there the page is what you would display as a screen perfect awesome awesome now since we only have two minutes the exercise is a you follow it up at home exercise you're gonna love it you're gonna learn a lot and here's what you'll be doing is you're gonna now that you understand the core principles what's in a donna maui application when you build your phone number translator application you're gonna add some new c-sharp source code that'll be shared across all the different applications you'll create a ui you're going to create a button that you can tap on that will translate a phone like um hello you know 1 800 um codemail matt to 1-800 whatever that is to numbers you'll press on it you'll actually call that phone number you know dial it you don't actually hit send it'll automatically do it for you and you can test your application now you know how to run it and flip between the different things inside of this thing automatically whew we did it that's cool this is what you'll be doing at home and if we had 30 more minutes we would have done it so hopefully you've learned the basics architecture of donna maui created a don maui application define shared ui for different platforms in don and maui we deployed from donna maui and then this is the one thing we didn't do but you'll totally do it at home which is really good which is awesome you can find so much more information at this aka.mass summary page and also the learn module there and don't forget we next week we'll be here we're totally going to go through it now that i know that it's 90 minutes oh my goodness at this url scan that ur code aka.ms superduper long url automatically post those links and you can join the conversation oh my goodness there it is yes you can amazing session i i really would love to do some some layout in csv so i think we totally need to uh you know have a plug-in or an extension or something like that thank you so much for the session it was awesome and dear friends every one of you who stayed until the end we have something like 150 plus live viewers it's uh it's absolutely awesome on both youtube and twitch so as i mentioned at the top of the show we are not going to end the long experience here because james matt and john galloway who is our moderator agreed to come to a team's meeting and we are going to have another half an hour so i'm going to put a link in the chats right now all right i'm going to try to drop that in the correct location okay so you should see a link there and you can join there so this is ak.10 llctc and essentially ctc stands for continue the conversation so that's where we invite you james and matt are going to drop here and go to the live to the run meeting as well i'm also going to stay a little bit longer here in the stream just monitor the chat in case you have some problems joining let us know in the chat in youtube and in twitch and we have some people from teams who are going to be able to assist you in the teams meeting you can come on camera you can come on microphone you can chit chat with each other you can network you can ask questions in case james and matt didn't answer your questions on the live stream right now and um the hangout will run for 30 minutes so if you head over now we have some people there already talking about that you can ask your question there james matt and john who is listening on the chat i hope we'll see you there and nobody will have any issue joining thank you so much for the presentation and uh continue the conversation yeah thanks everyone for tuning in so we can get to the final exercise and we'll have some fun hopefully we answered a lot of the questions along the way but feel free to ask questions there and there's of course a chat so you can also ask questions that you're not to turn on your camera if you don't want to but thanks a lot for having us and we can't wait until next week where matt's totally going to get through the whole thing 90 minutes got it perfect all right thanks everyone bye

Channel: Microsoft Developer

Views: 13,347

Keywords: dotnet, dotnet-maui, vs, developer, student, beginner

Id: Z7V2DfT9KW4

Length: 92min 8sec (5528 seconds)

Published: Wed Sep 07 2022