Learn Live - Create a UI in a .NET MAUI app by using XAML

[Music] foreign [Music] hey welcome everyone oh my goodness how is it going James it is stressful over here I don't know about you well at the audience know what's going on behind the scenes a little bit so everybody can appreciate it so we'll be talking about building a.net Molly app in xaml but I had my PowerPoint decided to freeze like two minutes before everything started craziness oh my goodness I love it I love that everything went terribly did your computer freeze is it does your Visual Studio still working what's happening it was Visual Studio that actually froze so what I was trying to do was trying to build the app to make sure everything was just quicker while we were doing the demos and all of a sudden I heard the fan turn on and I was like oh no oh no here here everything goes and now it looks like the beach ball I'm using a Mac so the beach ball is gone right now that's good that's good looks like things are kind of sort of responding so maybe I can try to do it I like that I literally I literally ran I had to run I had to get coffee first man I was like okay let me I know that everything is going to heck over there for you but let me go grab some coffee real quick so I went and filled up the coffee filled up the dog's water bowl and then I get this France all these frantic text messages that come in um from you then I grab my Mac right here I got my Mac so now I have another stream yard up I have the YouTube channel if I got the pull up I got everything but now your computer's working fine is what you're telling me well we'll see I'll run it I'll run it for now and we'll see what happens oh my goodness I know I'm sorry I know how you love getting the coffee James I know how much I mean and your dog needs water I mean if your dog doesn't have water and she feels droopy today it's all my fault yeah well she's got diabetes she needs her water oh no but she's been good she's been stabilized the the sugar levels are all good she's been drinking a lot less than water now now Matt I think is honest so are you on a solo screen so you can't see anything right now is that what's happening I'm on I'm on a dual screen so like oh yeah well but let's see let's see hold on hold on hold on all right now I can see now okay nice so so uh Laurent has told us that it's 90 minutes not two hours correct yes okay but depending on technical difficulties we might go three hours yeah no no we'll do 90 minutes we got it we got it covered but we have a special surprise at the end so people will have to tune in all 90 minutes until they hear what the special surprise is going to be and it may be yeah if you were here last week on Wednesday not on Tuesday because we don't do this on Tuesday we do it on Wednesday um what is a day if you were here last week you would know what that is it's a very special super awesome opportunity so yeah um the Microsoft developer account is not staying for three hours I don't know what else Laurent does but he can hang out you don't want to hang out with us for three hours come on who doesn't want to hang out chat comments who doesn't want to hang out with us for a while I know I mean Jose well you can learn more about xaml ask us all the questions about xaml then you can ask about all the technical difficulties that we go through like two minutes before the show starts and it's it's worse because we get on a half hour before it starts to make sure everything works fine and then like a few minutes before everything just classic it just goes ah well Matt this is part two of our seven part series and learn live of course what's going to be great is that you can follow along if you haven't registered for those somebody will drop that in the chat somewhere I don't know some magical person back there drops those things down there and basically every single week Wednesday in fact on Wednesdays at this time they're here now Additionally the entirety of this is like we're gonna go through some slides we have an entire learning path and journey that you can go on for learning to build multi-platform apps with Donette Maui the.net multi-platform F UI um and we did an intro session that I thought I had an extra hour on that we didn't finish but that is everything is if you're on YouTubes right now if you're on the tubes of you then this is the same exact video like you can watch this you can pause it if you come tomorrow guess what Matt it'll be there it's the same URL that's good to know yeah yeah and I like that that um that Laurent has made the urls the shortest possible so aka.ms forward slash learn live Dash mobile Dash desktop Dash apps dash.net Dash Maui well at least you know what you're getting into I mean it tells you exactly what you want what are we talking about today Matt cause I'm excited I got my I got my nice warm coffee uh some artisanal Brew in a push button machine and we're good to go not a punch I would say like a normal just coffee machine is Zojirushi but like not a Nespresso even though I have a Nespresso not not this is not sponsored by Nespresso but um right they make good avogados let's say it's like you know 10 p.m at and you're like okay I really want ice cream but then you're also like I also really want coffee too we're gonna put those two things together gotcha yeah yeah I know but 10 p.m you don't want to fall asleep then so you get the sugar and the caffeine so here's here's the thing when I met my wife for the very first time we went out to Coffee in Seattle ever the only coffee places that's open till like 11 o'clock at night and it was uh 10 o'clock at night um and I got like an espresso drink she's like I'm Gonna Get You know not that and then I was you know asleep two minutes later like you know we said goodbye and I was like done out I'm like I fall asleep at me that's I like the taste of the coffee not necessarily the things anyways we should not talk about coffee mat because I'm sure the chat is going to be I know yeah they're like what are these guys doing they're just catching up they're just catching up all right so all right let's talk about creating a UI in the.net multi app user interface app by using xaml right here we go oh we got to say hi to Katie Katie thank you answering your questions so I say hi to Katie she's taking care of everybody she'll answer the questions she'll pass them on questions so on to us and yeah say hi to Katie hi Katie all right and here we go follow along with us in the spirit of those short akas AKA m s learn live Dash two zero two two zero nine one four a today must be the 14th that is the 14th that's correct all right and it's September and a means I'm not sure what a means I assume if it's like there's another one going on today that would be um yeah okay there's a QR code I like that so yeah just scan that QR okay he's in the chat boom there you go all right yeah cool cool cool all right oh and people can ask questions and we're we have we can see it so there's there we can see we can ignore all the things that Laurent says and then we can read all the chats all right yeah good good good all right so let's talk about what we're going to learn today we're going to talk about the benefits of using xaml of defining the user interface for net Maui app versus c-sharp we're going to talk about what you all can do with saml how to create and use xaml markup extensions which really kind of we're going to to example and we're going to make it even better wow and you know what James we can take xaml and we can make it work differently depending on what platformer you have so whether you're working on iOS or whether you're working on Android or win UI you can make it do different things well not the xaml itself but what it produces does different things you're telling me that I can do anything if you already knew you could do anything but yes yes yes your xaml can do anything your app could do anything using this ammo it's awesome yeah yeah for sure we're gonna cover a lot today but it's going to be a total fun total fun session and we're gonna learn a lot and we're going to code and there's gonna be questions there's gonna be a whole thing it's a whole thing Matt so let's start off with uh building the user interfaces with net Maui using the xaml so really.net Maui it allows you to create oh yeah you know what you don't have to use xaml James you could use C sharp if you wanted oh so don't even so basically we're done just gone yeah yeah so done but also you could use xaml so you can use it behind the scenes yeah you can use it like in a DOT CS file and that's all you need and you could do it that way if that's what you wanted to do but you don't have to necessarily do it that way if you don't want you can do it with xaml which is more of a declarative style which kind of looks like HTML if you're used to that but you can have you have the same um access to everything whether you want the views or the layouts or the controls uh pages anything you could do in C sharp you can do is ammo or vice versa essentially yeah so it's just the way you're building it so they're really equivalent so but there are some benefits for one over the other and before we get to start how do you like that little xaml logo no I didn't I did a search and I found you know just said xaml logo and that's I think that's from xaml Studio from Microsoft like 10 years ago do you know where xaml came from originally no Windows Media Center so Windows Media Center I could be wrong someone could write me in the chat and the wrong part like I know everything about xaml but um you know I started my journey with xaml right there was WPF right and then uwp and then xamar forms and then down to Maui and and there but actually in the World of Windows Media Center which is how I started my career building mobile applications I built you know IOS and Android and Windows apps that talk to Windows Media Center to do like live DVR recordings and scheduling is you would build extensions basically hubs in xaml at ask I would say there and then Laurent can correct me if I'm wrong but I'm pretty sure that's where it it started from I could I could be completely wrong but at least that's where I remember my Journey coming from in in using this extensibility markup language it's funny because you know it couldn't be e like e e a m l because there the x is like over there no yeah emo xaml sounds better it has more of a maybe you know because of from XML well that's probably that's probably how it is is XML extends extensible markup language yeah application markup language yeah so they just we push the a in there yeah because xaml is a Microsoft tech so yeah that's right oh Ben is confirmed women's media center I love it yep and we like we love Ben Ben is on our uh uh cat team if it's the same Ben as um you just said is YouTube uh uh icon looks pretty cool he's got like glasses on he's like check me out nice yeah there you go all right and so and you're going to use obviously we were just talking before and we've talked a lot about it you're going to use this markup language to build user interfaces rather than code and actually I got into xaml I'm not sure when but it was with uh xamarin which everybody always kind of thinks like was zamo invented for xamarin just because of the names right it's pretty close but no it's not because xaml is using xamarin it's using.net Molly apps what he used before and it's similar to other Microsoft xaml flavors but it's not the same but you'll be familiar with it yeah I mean there's there's tweaks there's differences but it's kind of like a an a xaml it's like a it's like a Marvel Universe right it's like it's in there and there's characters that are maybe in sometimes an Avengers movie but then sometimes not right yeah kind of like in their own little worlds they got little islands of of uh uniqueness to them basically so there's a lot of similarities but a little bit different because when you think about it building an app specifically for like Windows Media Center versus like when it was just Windows versus like something that's cross-platform there's a different requirements basically that those Engineers were thinking of yeah yep so but you'd be familiar you get into it's like oh yeah that's not the learning curve will be lower put it that way yeah all right and so what is a markup language though I mean well it's a language that your computer uses that create a um UI or other things right to introduce various elements and the most famous One probably is HTML markdown oh no that's a marked down language mark down see what mark down would be like creating the yeah what is the difference between a markdown and a markup markdown is like it's it's simplified and then it has to create so like it's a big difference is it down yeah yeah okay I don't know but yeah this is this is It's a document basically right it's elements in a document it's a Dom it's a there's a well there's a dot but there's a document outline yeah yeah so it pretty much just tells whatever is going to parse it what to do yeah essentially and so here we're just saying HTML or the web browser you know what put that hello into a paragraph and make the word world bold so it has like you know kind of abbreviations for what you want the um whatever's going to be displaying it or parse or interpreting it to do perfect yeah so there's some benefits to using xaml versus c-sharp and we'll take a look I think in the next slide or to what uh c-sharp UI code looks like versus xaml but C sharp code can be verbose um so xaml the benefits are it's more succinct and it's also what I find more readable because it's more visually coherent so you can build a c-sharp UI with things they're kind of you can make it where it's all over the place where xaml it's more what you see is what you get essentially and you're also separating the UI from any Behavior logic because you have a DOT saml file and then you'll have behind the scenes.cs file so they're kind of separated yeah and it's really nice and easy to do MVB and with it which we won't get into during this learn live but in a subsequent one we will get into so Matt some folks will also say the vice versa of this right which is some people think that C sharp is a little bit more visually coherent or more readable compared to xaml and that's because everybody has different preferences and everyone's mind works a little bit different so there are there are there are C sharp markup extensions for Don and Maui there are some mvu model view update Styles as well I just saw one called reactor Maui reactor not to be confused with Microsoft reactor and Comet those are sort of mvu c-sharp first there there's fabulous for F sharp which is a code first so if you want to do a code first those are totally viable I do come from the xaml background in my how my mind works right at least when I moved from winforms to xaml um originally with WPF is my mind I sort of clicked right it was like oh I get it I can actually um bring those things together there yeah now good question from YouTube is is there a way to convert between the two well the nice thing that Matt said earlier is that you know those um everything is kind of the same as far as the naming and the properties and things like that so if you have them side by side on a computer you could you could easily kind of like convert them by hand there's not like a tool doesn't be kind of cool in general if there was a good question yeah and in this in the nap you can mix your c-sharp code with a xaml page you mean you don't have to buy in I'm not sure why you would do that but you could yeah yeah so that that's a great Point too is like yeah you can it's not it's not exclusive it's right it's an xor XR it's just an ore yeah or and X1 yeah yeah just an R I don't know I don't know or and whatever both yeah I don't know yeah exactly you could do it you can do it if you want to yeah but as you said there are some disadvantages in the xaml itself in the in the xaml mark up file or is it Mark see we got me all confused it's a markdown file my markup file you can't contain any code right you don't have like a how I think in Razer Pages you can actually put the code in you can't put code into xaml correct itself like so there's no boobs no conditional stuff like that and you don't you cannot so what's cool with xaml when you the parser goes through it it actually is instantiating classes so like for a label it's going through and doing new label right just like you would do in C sharp but if you had a view or something or a control it needs to have a parameter list Constructor an order for the xaml parser to uh constructed in order to make it so you need to have whatever you're putting in as ammo it needs to be parameter or less Constructor so yeah boom so and so yeah let's take a peek we'll build this little app over on the right hand side and see what it looks like both in C sharp and what it looks like in xaml okay A little login screen yeah a little login screen so hopefully the font here is large enough let's make it bigger full screen this puppy that's for you well you can you already are the producer producer Laurent can we Zoom can we Zoom do you have accessibility turned on where you can like hold down on options and zoom in oh there you go that's fine oh no oh my goodness yeah oh my God oh my gosh oh geez Louise you know what I said about my computer anyways you can see it that's good enough yeah you could see it so what you're doing there underneath the uh right up underneath the partial class main content page which probably doesn't need to be partial at this point but anyways you're just doing button vertical stack layout so you're actually declaring things here okay yeah yeah and you're doing layout equals New Vertical stick lay on you're sending all the properties and it has a children property there and so what you're doing is setting all all the new stuff that you want to have display so a new label setting its properties new entry where you're actually going to enter a username another label setting the password entry box below it saying it's a password so you're going through and creating all this new stuff and then you um have a login button below that setting the content to that label which happened to be a vertical stack layout from way up top and then you have a button the login button clicked Handler gotcha yeah this doesn't look you know too bad right it's like hey it's not horrible you kind of got to know that there's like a children property you gotta know that for the margin and padding you got to create a thickness and of course you know it'll help you a little bit as far as like what it's what's on there but yeah that's kind of that makes sense cool yeah so xaml though we kind of can shrink it down and I like this better and it it is for me so when I look at it I can kind of see what's all there easier because I'm not doing I don't have all the news and maybe that's what the difference is I don't know and you can see here though let's go back to the C sharp like for I'm doing new label police text please log in I could actually new that up anywhere and as long as I put that in the children it works yeah so this is actually a pretty decent layout so to speak with the xaml it's going to go here it's going to go right underneath the vertical stack layout that's where it needs to go so I'm kind of forced to do it there um but yeah so that's what that same screen that's what it's going to look like in xaml yeah so based on what you saw right if you're like oh I like like the xaml markup it's going to show me the sort of XML especially if you're coming from the web and you're like actually you know doing stuff today there's a lot of similarities in general from just you know HTML to xamlin you know it's just different components if you looked if you were to say each of these are a component how really different is it and then there's some special syntax which we'll get into in the future right so there's there now as far as performance and stuff goes we got to do a good question from the chat is they're pretty much the same because all the the xaml is compiled so I guess technically you could grab the C sharp from the compiled xaml although I think it's all you know probably not Goods generated so it's probably not like exactly what you want but as far as performance it's going to be pretty much identical because it's all compiled up you know there so there's really not as far as I would say in in 2022 creating this there's really no difference in between the two you know in general yeah so way back when I when I first learned xamarin I was doing Earth salmon forums at least I was doing all my uis in c-sharp but then I I was afraid of Samo but then when I learned zamo I just thought it was uh less um typing essentially and I I saw things easier so yeah and then the other thing too is there's a lot of additional you know in the xaml there's a lot of intellisense that you get when you start to do mvvm stuff which we'll get to in a future episode and then of course there's a lot of um uh nice things that you get in addition to that um such as compiled bindings and things like that too so there's quite a lot in general that's nice but yeah so performance pretty much the same cool yeah and oh you do get that code behind file right so this is a partial class and it's going to be named Main page.saml.cs and in a Constructor this initialized component gets called and essentially that's what's going to go through and create as you're talking about James the parser is going to go through and actually create the page it gets compiled and all that other good stuff yeah that's the thing now in the c-sharp file that we looked at when you're creating UI it's C sharp that doesn't exist there's no initialized component because there's nothing there's no xaml to initialize exactly so that's a that's a xaml only thing thing and we still have that login button clicked event handler but we don't have that plus equal event handler assignment anywhere because if we looked at the button text or the button way at the bottom where the text says login we we have a clicked Handler there there and so the parser is going to take care of wiring all that up for us so but we still have to handle that in the background or the background thebacking.cs file perfect so yeah it's a quiz time I'm ready for this quiz all right it's time now let's check all right James all right I'm going to ask it you're going to answer it all right okay ready to go or you can go to you can go to aka.ms forward slash polls there you go so everyone you head there right now that's where you're going to see it it's happening in real time oh my goodness all right all right question all right so I emphasize this point just recently but which method must you call and the Constructor of a xaml page to figure out no because it's a page in the app it's the what what do you have to load to make sure the xaml gets displayed or what do you have to call well if you are in a well being mean page that would be very specific because this would be for and you're saying for any page any page any page that you want to display xaml on it definitely can't be can't be main page or configure after I beat Shenanigans in fact everybody so far is about a 100 for a are they correct yeah wow yeah yeah yeah Super Connect correct initialize component I guess it goes through and makes makes the xaml pretty in your app takes it from Mark up to real thing bam all right so which of these is a major benefit of using xaml to Define your UI does it run more efficiently than C sharp um can you or yeah or does it separate the definition of the UI from the logic of the app or is it more portable than c-sharp well we did have that great question which was about performance and what did we say they're the same so definitely understand can't be a portable I'm assuming by portable they're talking about like being able to move it or embed it so a thing about a c-sharp file or a xaml file is you can put that into a into a class Library so you don't have to necessarily put that into um you know into a special thing so they're the same and in fact everybody here 100 of the votes are saying you can separate the definition of the UI from the logic of the app now I mean I guess you could also in a c-sharp file too but I think it's very distinct I would say in xaml like they're yeah very disconnected and that's sort of the goal there in the in that style because yeah with xamon when we talk about mvvm or model view view model you'll see that clear separation yeah and that's what I'm I have a little note as we talk about it the uh event handlers a little bit more yeah you're probably mbbm you kind of just skip all that yeah you know where you do have that nice separation whether you're doing c-sharp or whether you're doing xaml and that's pretty much probably what you should be doing because it does separate it nicely all right so let's talk about some types well you know let's talk about some controls or whatnot and some properties then in xaml so where are they where are the types defined where do these things come from are they are they Matt you know what and this that's actually a brand new feature in uh.net Maui is that the types have a theme song to them that actually took a long time it is a label now this is fun because this label that you've created in your slides would not be visible because there's no text that is good call out but it would have the text had it existed would have a color but if it was on a basic page or the uh stack layout or whatever had the color be antique white very hard to see very nice is antique white two five five two five five one hundred like or did some whoever wrote this module just like you're like Ah that's another way too complicated nobody you'll ever get it well it seems like antique white would be kind of you know too a little bit I'm assuming antique white is like aged a little bit more dingy than white right yeah so having that last one down to 100 makes it you know makes it well now some people may be asking well why is it antique white and then why is it RGB well that's a great question and I'm glad that you asked in the chat actually there is a um a type called colors and you can do colors Dot and then there would be antique white so you can actually set the tech property in the C sharp to colors.antique White now the reason text color doesn't need to be in the xaml though it says XML so that's funny um I oh I blame the the the converter I guess I mean yeah yeah um yeah we prepared uh and uh so the one thing that's fascinating about that is that it when the text color looks at that it doesn't it sort of does an implicit and it says hey um I know how to convert this color into a text color now you can't just put two five five two five five one hundred I don't think into the text color property although I should I'm going to try that and see what happens and see if that is a is a thing because that'd be that'd be really cool text color equals two five five two five five one hundred now you can't do that although that'd be that'd be really cool um but what you can do oh that's my stream here that's funny um oh so for example you can bring it back up now I can see it Laurent not everyone can hop into our stream yard um you can't do this right but you can do okay I have another computer I can see this you can do this you get all these nice little drop downs here for the text color you can see that there which is which is quite nice um as well those are all the colors now again like if I said if I went and you get a little look at that you can see what it is there's the there it is right there now if you did go into like anything here you could like I said say colors Dot and then there's the antique white so there's the same colors there now in a future episode we're going to be talking about like well what if I want to use a custom you know color here and I did want to do like two five five two five five one hundred how would I access that from the xaml and we'll talk about that when we talk about resources and styling applications but we're not there yet um we're going to kind of sort of talk about that today but okay yeah kinda sort of but it'll be better handled when we talk about resources and styles so what kind of touch it yeah but uh yes Laurent wants to know if I can do this which would be f a e b b seven uh yeah you can do that you can put a hex code in there that is correct yeah so because it so so this is Magic and xaml so xaml kind of has the concept of built-in converters it has the understanding that I can convert this type of string or this value into a color so good point Laurent I'm glad you put that in the in the thing and go from there so cool let's head back over to you so let's continue 60 minutes left Matt 60 minutes 50 minutes left not not 90. not 90. we got the warning 60 minutes all right and everybody we have some foreshadowing there and and the conversation just so you know all right so what's the xaml namespace all right seriously it is really close to a what you would see a namespace leather you're doing a C sharp whether you're doing VB it's a net name space right it's a way to bring types in the xaml essentially so let's take a peek at this so you're going to see xaml namespaces are prefixed with XML and S XML and S not xaml NS XML and S and this goes back to the fact that saml is a pretty much a derivative of XML okay yep and so the first one here and James correct me if I'm wrong the first one is saying all right bring in the namespace of all the.net Maui like views and controls and all that and the second one is bringing in all of the like the Microsoft defined xaml components like an INT or stuff right correct yeah so if you look at the first one there the xmlns equals notice that there's no colon there with a name so actually the second one has the the name of X so if you did X colon it would bring up into string all the other things arrays basically types that are available from that namespace so what that means is when we put label we didn't have to append it with Maui colon label because um that namespace is the default it's brought in by default automatically which is nice cool yep or oh so what we do then is uh we have class two and two or actually this is when I actually wanted to talk to about the dot X1 yeah or we can do if we wanted to have our own namespace in there let's say we were doing a monkey finder app and we had a namespace for View Auto and we want to have our view models all brought in yeah we can do XML namespace colon view model and then when we wanted to set the data type which happened to be part of the X namespace which was that Microsoft defined namespace we would do view model colon monkey view model yeah and this is cool because if you're a library Creator let's say you're like syncfusion teleric whatever your your mat soak up and you're like hey I'm going to build my own Library instead of having someone to bring in the namespace find the dll you can actually mask it and say Here's my URL that kind of like brings in the namespace it's kind of cool and that's what the Don Maui team does but if I'm in my own code and I'm like I need to access a model or I need to access a view model or some other class this CLR common language runtime namespace is saying hey there's a namespace in this in this class in this assembly that is monkey finder.viewmodel and then telesense helps out there too now additionally let's say you are have a a model or some other class that you want to bring in some namespace that's in another dll it's in another class Library somewhere else you can tell the xaml what dll to like go look at as well and the intellisense helps you out automatically which is very very cool so you can do it inside your class or in another class so that so that's really nice if you're sharing code let's just say between your dot net Maui app and like an asp.net core web API backend you can share code between the two of them which is yep awesome yep and I think the syntax really is like colon assembly equals or something yeah that we can yep cool all right so specifying properties we mean we've looked at tons of the properties on down at the XML you know what's getting know how that picked up the XML instead of xaml is that everything that these this is picking up right from the learn module and the learn module is written in mark up down and down and it's just whack whack whack XML yeah and that's how I picked it up anywho the setting up property is just text equals or text color equals so it's real easy to set a property kind of same thing in C sharp you know you're just doing Tech sequels or text color equals you'd be straight at home and doing that but look text color equals black and we're kind of talking about that before black isn't necessarily A String type is it no it's not no it's not so how do we take care of that we have a type converter to take care of that and background when the parser goes through it it says oh I see that text color isn't a string type and but I'm going to take care of it for you I got you I got you same thing with font size that really that you know that should be an end gotcha gotcha on attributes not strings not a comma separated string value I got you I know what to do with that so we can there's built-in text converters and we also can create our own had we wanted to I like that yeah cool cool all right and then we can do complex type assignments and what's a complex type assignment like a tap gesture recognizer where we're setting a whole other class within our class we're within our um yeah essentially within our class like within a label so we want that label to respond to taps let's put a tap gesture recognizer in it and what it is what's the name attached properties right yeah I could just do attach property and then pop that in there as well so yeah we won't actually get into defining or how to build up an attached property that's a little bit beyond the scope of what we're going to talk about today but yeah anytime you see classname Dot like gesture recognizers or a lot of times you would see that with the grid um view where you see grid somebody changed its animal behind the scenes good for me the or grid dot like column that's a attached property and yeah making it a little it's like a property for a complex type yeah and that's pretty that's pretty cool because when you think about it what's actually happening there is that it is creating an entire new object right it's creating that tap gesture recognizer automatically so so how do we create one right so how are we assigning it into this array basically of these tap gesture recognizers and there's other things right so you can actually add a shadow for example to any control so you can say label.shadow and then you create a new Shadow so it's kind of similar as if you were creating it inside of C sharp but it enables you to do it inside of xaml like we were talking about like hey can you can you basically um do similar things uh in xaml or c-sharp the answer is yes yeah yep for sure nice and this is where xaml kind of gets verbose yeah so I said zamo wasn't verbose well it kind of can get verbose when we start getting here but yeah still like it still like it mm-hmm all right and then we also have default content properties so like these vertical stack layout dot children here is a property I've never used that in my entire life ever and you don't and you know why you'd never ever used it because of default content properties yes yeah okay because it's the parser knows it has your back again it says you know what James whatever you put inside the vertical stack layout I know that you want it inside the content property yeah that's cool yeah so this is equivalent to that children but I got you and so yeah he would never do it so you know what time it is it's now let's check I'm gonna check your knowledge all right type inverter what does that do what does a type converter do Converse types yeah description of a page into the equivalent C sharp code I don't even know what that means does it I don't know yeah that'd be like oh that's that's like when you compile the xaml yeah yeah no it probably doesn't do that this is what the question was and it's so can you convert it from C sharp into xaml wow that'd be crazy that's the inverse of yeah it's reverse reverse xaml compilation yeah and the B is the exact opposite right convert C sharp into xaml well no although it'll be kind of cool somebody made it like that you know I have like a little app that did that for you well for whatever reason and then so we eliminated A and B so it must be used to convert a XML attribute to one correct type 100 of people all 20 of them have have said that CN people in the chat are saying C boom we did it yep everyone's so smart all right how do you bring the uh your custom types into scope within a xaml file Heck if I know yeah so we're talking name spaces here because that's where your custom types are your custom classes so how you bring them in you don't I'm not using no go ahead oh you can use XML namespaces of the page give the namespace that contains a custom type in Alias that you can reference that sounds familiar add C sharp using directives the xaml file that doesn't make any sense it can't be apply the X field modifier I won't even talk about that so it can't be that it's got to be it's got to be a what does everyone say oh someone said c it's definitely a boom xmlns XML namespace yep boom boom cool all right let's talk a little bit about event handling let's do it all right so you got to do event handling a lot of times in xaml what happens you know how we put the clicked Handler it's going to we need to have it behind the scenes in order to handle it and well there's actually two ways you can do it through there's a lot of text here let's just show an example there's two ways you can do it through uh with saml okay you can do the X name counter label right so you're giving it a name and so by giving it a name you're able to access that label and we have a name and then we have or you can do this way so I'm not sure why we even have this anyways or you could do it this way so when you say it feel like it's missing something okay yeah so let's swap over to my machine over here okay so cool all right yeah perfect okay so here's like counter button right so when you do this right and we also see that there is this too if I go into the code behind the xaml page which is right over here we can see that automatically as long as this is set up for me you know and if I was to come in if I was to add another button right and I just said clicked and then I I say a new click Handler it'll automatically create that click Handler for me and the code behind there it is so this is the definition of object sender and it just gave it button click just a generic name now this one was set up in the template so it says you know on counterclick so if I didn't have this namespace that's totally fine this would compile just fine in there but what if I want to access that button or I wanted to do it manually well I have this x colon name counter button and that is basically the same as me coming in and saying VAR button you know button you know counter you know equals new button but I'm doing it from xaml so I'm giving it a way of exposing it to the code behind so if I wanted to I could say Now counter button dot clicked plus equals and then here I could say on counter clicked and I could say hey do that right so I can do it manually or I can do it here now the nice thing is when the page is disposed over here by Donna Maui if I do it here it's not going to be able to like disconnect that but it'll automatically disconnect it here because it you know it knows how to dispose of that clicked event from my understanding at least I'm not a garbage disposal expert so there we go that's the ways of doing it now also I would say like this is nice because if you did need to access let's say you weren't doing any nvvm um you can just access that button here and we're updating the label here now technically it's passed in automatically so don't even need to do that you could technically say you know VAR b equals uh button we know it's a button and we know that the sender is passing it in or you could do like you know a button uh sorry you know sender as button and then be like if B is null then return oops is null so that that's a common pattern too is like you know there in fact ooh check this out I wonder if I can well oh yeah why would you tell me to do that I don't want to do that I was gonna say if it was gonna enable me to do some oh pattern matching that's cool look at that sender is not button B and then it would cast it as B wow amazing and then I could do B if I didn't want that hard you know if I didn't want to put in that in that work of even exposing it I don't know how to I'm hitting v v there you go you could do that too that's the same code basically amazing wow that's crazy anyways oh there you go learning Amaze all right 45 minutes left let's move all right here we go back to your slides back to the slides back to the slides here we go perfect all right long story short separation of concerns probably at the bottom use mbb tune into the future learn live you saw all the stuff that James was going through right you have to hook up you got to do the click event you can do it in xaml you can do it you can do a button name dot click plus equals do it there you do it that way you can have multiple click handling of methods for the same event and then you have to unsubscribe to all of them and use mvbm boom boom all right cool quick now let's check and what we didn't go through all the slides either so this actually might be might be uh you can handle it you handle it all right what are the parameters passed to an event handling method oh I just talked about it a second yeah you did if you remember what my code looked like so was it the name of the event and the name of the control that named the event I don't know about that because I had to I had to uh I had to do some magical parsing and stuff like that what's the next one all right so it was a reference to the zaml page and the control on the page that raised the event that seems weird now I don't like that how about the reference of the control that raised the event and and events args object that contains any additional info that seems legit in fact the chat says so too boom here we go got it yeah if you remember I was getting that object sender and then event arguments that were being passed along with it there you go yep cool that's right so let's say we're all behind in C sharp we got the control in xaml we're going up behind the c sharp how we're going to subscribe to event use plus equal use the Subscribe or it's not possible it's impossible it definitely can't do it it's impossible 100 I didn't just show it a second ago yeah I got 99 or 91 of votes coming in a plus the green box says hey yeah and then you can unsubscribe with a minus equals yeah and you see a lot of a lot of code that doesn't unsubscribe including mine a lot of times and yeah yeah that's a programmer ad programmer map yep all right oh animation yeah all right so we're going to create the first saml page all right and so we are going to live on the wild side we're gonna see if my visual studio works works okay so what's happening is that I am using visual studio for Mac the super internal preview so with that you get a lot of uh you live on a wild side a lot so the first thing I'm going to do James and we noted this yesterday single project right everything's underneath one project and you have everything all the platforms and so one thing that I was trying to do yesterday when I needed to do a clean was I was trying to clean on the project what you should do in order to get a really good clean is clean on the solution weird and previews yeah previews and I'm not sure if it's because of it's a preview preview or if that's just something that's normal but I was getting tripped up because previously you had projects for each individual platform but here you just have one and you know my my small brain was saying that one was actually the solution but the solution was very up there so anywho clean is successful so let's go let's actually try to build something and so if you're following along at home yes I am going to our unit here okay I'm following at home yep and then I am going all the way down to this exercise create your first xaml page I'm ready all right and so I'm going to put this back off screen and I'm just going to really kind of copy paste things over okay all right and so let's review what we have in here and I'm going to open up you can see that everything's like app.xaml app shell.xaml but let's just and it's okay so let's just go back to what we were talking about last week all right okay good so we have like the app app builder pattern here where we're going create a new Maui app and it's saying build so this is stuff we talked about last week and then we're loading up in the app.cs we're just saying all right our main page is the app shell page and then over here we're saying shell content what we want to display is our main page perfect and then we're getting to the main page main page.xaml is nothing oh my goodness yeah I know so that's what we're gonna do actually right here we have all our C sharp okay so here is a cool example is like here's the c-sharp version of it which is pretty verbose yes and if you run this it would actually create that right because it's not even going to load the xaml right exactly so I cleaned and I'm not going to run it quite yet okay so let's I can bring this web browser back in and that's what it's going to look like nice if I had run it label another label entry two buttons Perfect all right so we're going to stay on track for now so what I am going to do though is I'm going to start recreating everything but in xaml okay oh yeah so let's take a peek let's take a peek at this right here this is what the UI is going to look like right so we have a vertical stack layout we have a label we have the editor with a little placeholder in there that says enter your no and then we're going to have a we're going to put a grid there with three columns okay it says Rose should really say columns yeah who did that graphic I did all right but anyways column Zero Save column one spacer push it over column two uh Delete perfect so that's what we're going to use cool that's how we're gonna build it up alrighty so let's build it up so we're going to create a xaml version of that so what I'm going to do here is I'm just going to go all the way down and I'm going to comment all this up yeah I'm going to save that I'm going to comment it out up here too I'm going to save that oh and check this out we also have the on save button Handler and on delete button Handler okay and I'm gonna comment those out and that's because right here on what I'm highlighting is that delete button in C sharp we were creating it and assigning that on delete button click to it using the plus equals same thing over with the save button so when we were creating that UI we were doing the plus equals assignments so you can use that plus equals and C sharp as well as xaml if you had wanted to okay but we're going to do it all in xaml let's do it xamar blank page Clean Slate here we go and so first thing I want to do just note that we have the XML namespace XML namespace.x we're going to make the code a little bit bigger we're going to make the code a little bit bigger oh probably there we go now we're talking awesome amazing yeah okay all right so here we go first thing we're going to do is we're going to put that vertical stack layout in there and I'm tapping code over because I would mistype everything yes all right so here's our vertical stack layout perfect and you can see we're just setting properties here and this right here is not a string property we're using our type inverter to uh was that a thickness it's a thing so what is that that's telling it is so there's there's a stack layout a vertical stack layout and a horizontal stack layout we're going to get into those in a future learn live episode because I rewrote that course um recently but vertical and horizontal stack ladder optimized so this is going to vertically stack things here and figure out the spacing and the sizing automatically now margin is going to say hey be so far away from the the sides basically you could also use padding on this case it'd be the same but regardless the margin is going to start at the left so it's going to say 30 density pixels I'm going to say density pixels they're not pixels but they're scalable pixels um basically I come from an Android background so density pixels ask but 30 is going to be from the left 60 from the top 30 from the right and 30 from the bottom you could also for example just put 30 and that'd be 30 30 and you could also do 30 60 and that would be use 30 on the left 30 on the right 60 on the top 60 on the bottom so it's very flexible yeah gotcha all right so next we want to do is we want to put that uh notes label the next thing that goes down is going to be the very top element in our vertical stack layout and so we're saying all right make it Center give it a make it bold as well and say all right it's going to be notes that way we can see it and we just go on we just go on and on and put the next thing in is going to be our editor so we can actually enter our note there we go again we're getting at that placeholder so it says enter your note so we get all the um beauty of various controls like so iOS you have a placeholder Android you have a placeholder for the editor and we get it right here and uh good good question came in from the Chaser a live render of the UI now you're not running the application so I am not running application so if you were running the application there's xaml hot reload which would enable our good format soak up to run the application and actually see it update in real time as he's adding these elements yes and I would do that except my machine is very finicky and I don't dare do that but you totally could but we showed that last um last week as well and we'll do that in the future when I'm over on my Windows machine and Matt's machine isn't completely on fire yeah all right and so here's another one for column definitions we're going to do a grid at the bottom where we're going to eventually put our buttons within it and column definitions right here we're telling it what the columns should be and we have like whoa Auto 0 30 Auto that doesn't make sense right and so what Otto is saying use what you need to use for the button size 30 meaning give me 30 density pixels as James is calling it so just kind of like a space and then Auto again saying give me what you need for the button size for it and there could be star there could be um so I could actually say like 30 star give me 30X things and so there's a bunch of different things you can do for grids now we'll cover that a little bit more I believe in the next yeah in the next uh episode here yep and so we'll do put up our first button in there and you can see what we're doing right here this attached property we're saying put this in be zero column or the first column and then we're going to put our second button in right below it or actually right to the side of it because this is a grid and we're putting them in the columns and number two or number three because we're zero based and two things a note here we're doing our clicked on save button click and another click on delete button clicked so perfect now there's a few things here that we'll talk about is there's a lot of flexibility we're using a grid here just because that's how this module is set up so you can learn about grids and you can also learn about stack layouts you could also not have three columns you could have two columns and you could put a column spacing and you could set the spacing to three if you want three in between all of them right yeah you can set row definitions and row spacing as well you could have also put this into a horizontal stack layout and you could set the spacing to 30 in there so there's a lot of flexibility based on what you're doing you could have done this entire UI with one grid as well so you could have had a grid with a bunch of rows and a bunch of columns XYZ so a lot of flexibility here uh in general yep and that's the thing where you kind of wear that little photo or that I'm gonna bring it back on screen this right here is getting it where you kind of want to sit down and think what's the best way I can do it and yeah and so here just for the sake of showing different controls we decided to go like this cool now you have things on separate lines um in general right I want to kind of walk through this that's not required you can you can see grid and an editor and some of the things are on the first line but but Matt you could say for that button for example you could put it all on one line so you can really collapse that down if you wanted to there's also something called a xaml Styler extension that's really cool I have that in Visual Studio that automatically like do stuff but you can do that right you can automatically so you get that intellisense so you can you can decide how many attributes you want so it doesn't matter white space doesn't matter in this context so you can really even though it looks a little bit more verbose it's just because all those different things are there yeah now let's just stop showing all our all your stuff and there's there's there's events you can see the little lightning bolts as an event there's properties that are in there now the other thing is that um someone was asking the the name so that editor you said X colon name and the reason it's not just name is because that specific um the sort of like attribute or property on it of name and exposing it comes from the original xamla markup so that X colon name is there so if you just type name it wouldn't exist because name isn't on editor it's actually at a fundamental level underneath um every single control inside of dot Maui so that's the X colon name there's other X colon things that we'll talk about as well like X colon data type that you talked about in nvvm and what's cool is we can do like background color and you can see them all pop up boom and what I also like it gives you that little square showing you what color it is so we have to do antique white perfect it is it looks a little gray or crabby all right is that it yeah that's it shoot and then let's go to the background here still there and what I'll do it's not a red squigglyed so my editor dot text because we named it as you said James we're doing the X colon name not red squiggle Aid we should be good now before you run it because this isn't going to work because I know it's not going to is that if you look at the top of the file what are the things that we had a quiz on you need to initialize your component sir good call out yes so what I'm doing though is I'm building to make sure that it works that it works but that's not going to catch that that wouldn't mean it's going to still compile and manual and another cool thing that we'll talk about in a future episode is like this thing is actually going to write files to disk it's going to take notes basically and you can see that file name of app data directory that file system that's actually coming from down in Maui done in Maui has these apis that are already abstracted for you so file system connectivity geolocation stuff like that are all built in so it's kind of using this but notice we're using path and then if you scroll down the bottom if we also note that down here we're just using system.io good oldsystem.io file.write all text file.exist file.delete and if we run this on iOS Android Mac Windows the runtime the.net runtime knows how to speak to those operating systems so it's going to automatically check all those things for us which is really really nice all right cool you did a very good job talking through that James all right Bill successful yeah all right let's try it I'm gonna try building or running on your Mac Mac you could probably see the file on your Mac if you put a breakpoint as well yeah yeah yeah it'd be right it would actually happen come on come on come on let's see we built it should be happy then we made a code changes billing again yeah yeah well I know but anyways let's see if there's any other questions in the chat as it goes like succeeded that's good um yeah everything's looking good someone was asking if you can have multiple click handlers in the xaml you can't so just one click Handler for example here yep yep cool all right hello learn live cool save save here we go what's that our file name it's going to be stored in the notes.txt in the library I'll go get that in a sec oh cool you can actually yeah there you go you can actually control shift G did you know you can do that I did know yeah that's a fun fun fact and you get to see all of everything or is it command shift G I think it might be a command yeah command shift G let's see uh yeah let's see I like how we're just putting it right in the library I know I don't know if that's ideal but I would I would the recommended path here this is this is bad practice the recommended path would be that you put it into like an app folder I guess like create a folder inside there but oh actually this will be different if you run it in in the app store it'll actually put in your app container this is just running on there as well uh did you find it why I have faith in you library and soak up yeah all right I can bring it back on this now we're not going to see anything it's just going to quickly a text file in there perfect yeah run it run it boom all right Iran and soak up where are we m m Library Macintosh HD why isn't it in there who knows that's probably in somewhere else yeah not the Base Library no it'd be under users uh I'm soak up right Library where where would it be l I don't know but if you do command shift G does that do anything oh and then you got to do four slash users no not Library it was users first all right there you go forward slash I'm so cup nope forward slash Soca I got like how I remembered it there you go forward slash Library all right Andrew there you go yeah you're welcome then it should be in there the space right in about notes notes did I miss it yeah where it's alphabetes yeah yes all right cool it works it works amazing everything works now let's see let's see if a hot reload is working let's press our luck press it let's see set that background color to Pink all right which one overall all of them all I know yeah overall there you go color yeah pink does it look like that color oh but that everything is working right now so there's that now we also showed on Windows I don't think it's there on Mac yet but there's a live preview that kind of can dock your app inside of it but again if you had the app side by side running there you go and you can add controls remove controls you could have just built it all live amazing yeah yeah cool cool awesome all right we got 25 minutes left what's next 25 minutes all right here we go let's start this back up time time cop in it all right so we did our first sample page all right let's talk about markup extensions so we can use that too really make our class a little bit better add stuff to it right so we have this let's say we have our font size we want to just not hard code our font size in let's get it from the running application somehow with that 28 might change let's so we want to change it depending on the uh condition of the app it happens to be in and so what you can do is actually implement the class or create a class that implements I markup extension which means that you will have to Implement provide value all right so what does that look like so here's our class right main page we're calling initialize component because we remembered to do that nice and then This Global font size extension we're just returning my page that font size as long as this thing is a constant or a static that gets out to 28. so this isn't the best super example it's always returning 28 but this Global font size extension always would return um we can use this anywhere yeah and so like if we needed to return like if it's 28 when the app has been opened I don't know um for 20 seconds and 34 when it's been open for I don't know anyways you can change that it can be changed all right and Sir here's how you would use it look at this right down here for my code it's that custom namespace being brought in and then you do custom name space Global font size so that's a way of basically saying hey if you need something that is going to change based on different conditions XYZ you could do that and and that's one way of doing it this is sort of a very convoluted way I would say in general yeah we would for for these properties we could do them in resource dictionaries and things like that but I'd also say if you look up top right in general these level ones and grid zeros like those are also these markup extension type of things and that's what they're doing basically in general yeah yeah so the idea is exposing a property exposing something that will then be accessible so you could say like you know those colors for example are markup extensions yeah cool and right here it's unlikely that you would ever do this but you can and we show you how all right so let's talk about yep static extension oh okay so the purpose of custom markups extensions that may enable you to handle the complex situation that a static can't handle so static is like one time only right so like a resource dictionary a lot of times if it's not a dynamic resource dictionary resource dictionaries you're only going to be pulling one simple value all the time like if you make a resource dictionary of a color red which we'll show you probably in the next episode when we talk about Styles yeah you're only going to get red but if it needs a change ever we can start using the static extensions to do that I feel like I want to rewrite this part of the learn model so the good part about doing this learn module is that we get to learn and say okay now that we we have to write it yeah we've gone through it ourselves like do we really like this part no anyways all right so which markup extension allows you to set an xaml property to a static value that's defined in a code behind class ah there's a key indicator right which is a this is a static resource that we Define in some magical class that we extended it so interesting static value uh yeah I kind of should be worded better right and so we're going to give everybody uh yeah give them a pass on that one it's static yeah yeah static resource and static that's that's too confusing it's not binding that's for sure all right this one's a little bit easier all right which interface would you use if you wanted to create a custom markup extension um I think in general so there's if I remember from the code the value converter we already talked about previously so it can't be that and markup seems as if it would be too too easy but if I look at the learn module and scroll down I can see that we implemented an interface called imarkup extension I think that's boom there you go amazing all right so James did you know that you can do Platform specific things in xaml like okay running on iOS it would be one thing Android another cool so let's say we had a padding property and it's like 30 60 30 30 as you were talking about right so it has that little padding around the sides but we wanted to change it depending on which platform it was running on and so we would use on platform to do that with and this is what it will look like so you have the vertical stack layout dot padding and then you would do on platform and now you're going to tell it you know what I'm going to send it in a thickness so you use the type arguments and it's an x dot so it's coming from the Microsoft xaml namespace and then you do on platform equals iOS and then you set its value and then you could do on platform equals to Android or win UI and you can still be different values if you wanted so yeah super cool so now this is actually your specifying what exactly you want it to be uh which platform oh nice yeah and so it is a generic so you have to you know use the type arguments to make sure it knows that type arguments right before that first on platform so it knows what to expect when it's getting its values fantastic nice cool all right so which markup extension would you use to detect the platform that the app is running on so you can send it specific values this should be easier well it's a markup extension so device info is the is the class behind the scenes so it must be on platform got her um fantastic all right so what's the purpose of type arguments for the on platform extension so does it let you specify the type parameter for the extension and ensures the correct type of extensions created or does it specify the type of the platform so does it specify like iOS or Android or does it enable you to specify the property be set with a specific platform specific value so does it specify the type parameter for the extension and ensures that the correct type of the extension is created so we have the on platform which had like iOS Android but the type arguments I assuming is an argument for the type that is I my guess here is the type arguments is for what you want to oh the prime of the property that you're setting got it is yeah we have a split split vote between all of them so let's see what it is hey okay so type arguments is saying hey this is type of color this is type of string x y z cool one more right here type argument so our thickness of the our padding properties of thickness so we're saying you know what expect a thickness value coming into this do we do we show the the simplified markup we did it but we're going to show it in the um in the exercise because this is the verbose way of doing it but there's a much easier way of doing it so let's yeah let's get to that because we got 15 minutes left on my camera all right all right so let's do let's do an exercise yeah yeah yeah yeah all right so if you're following along we are going to scroll all the way up and it's going to be exercise add Behavior to your xaml page all right oops so the first thing is we want to do a static resource and so what we can do in order to do that is do add a new class and we're going to call the new class let's call it shared resources all right and what we'll do here is this we're going to make a or you want to put that inside the glass oh I always do that so this is why you know what we're gonna go like this now there you go so I don't mess things up and I can easily see there you go yeah so the goal here will be to sort of we're hard coding a bunch of colors can we expose that easily in a way for all the font colors right from c-sharp cobine and we will talk about how to do this in xaml in the future but let's say you you wanted to have this you wanted to have like your own style sheet basically you can do this in C sharp Co behind or you could do it in xaml which we'll talk about in the future learn live all right cool so we have that and then next thing we want to do is yeah we're gonna do a background color pretty much the same thing we have the font color we want to have a background color so really same same deal just different different fields and I'm going to open up main page Dot xaml all right scroll all the way up to the top and then we're going to add in a custom namespace so it's because we're going to basically expose that class yeah you just created that namespace anything in that notes namespace into it if you just type in notes that should show up look at that boom there it is amazing and it does you know puts that CLR namespace in front of it for us and we're all good to go love it and then so I'm going to take this pink out so we can actually see what happened because I'm not sure what colors we actually created back there because they were all in RGB yeah and so what I can do here is just go down to let's just pick a label we'll pick this label right here and we'll just say font color or equals and then it's going to be X static like that and then we're going to say member equals shared resources coming from the notes that that's cool we're exposing these font colors we can kind of expose anything right and this is a way of having it if you wanted to share these across the entire app and have a style sheet and then update them as they go and do a bunch of things as well I guess these are Statics they don't change but yeah the style sheet and things and this is just one example of colors but it could be anything for any of your properties basically yeah and so I will copy from here and just go down to a button and with this button we'll just say any yeah and quotations you know what same thing X static member equals notes shared resources background color cool so cool and then I won't run it quite yet but what we're going to do is we're going to add some platform specific stuff and for the editor we'll make it bigger or smaller depending on what we're running on oh cool yeah and so I'm going to use the the um height request actually I already have it in there oh nice so instead of using all the like on platform stuff with the let's do the best verbose version and then do the curly brackets and then I can do on platform like that and then you see everything shows up and so what I'll say is IOS equals 500. Android equals 100 and you can see I have other ones in here like mac Catalyst which I'm actually running on say that's equal to 300 and then default or something yeah oh yeah we'll do a default which is just say 150. default default equals oh default equals yeah a-u-l-p equals there we go so that's kind of nice if you're like oh only on Mac do this but everyone else do this right yeah so this is cool you can actually do on platform but I'll also tell everyone that there's another one which is called on idiom and that's really cool because on idiom let's you say if I'm on desktop or I'm on phone or I'm on tablet do something specific as well so you can only not only just do on platform you can do on idiom as well and you can do those in the code behind too so which we'll talk about in the future as well so it's kind of cool all right here we go we built it we can see notes Here is purple our save button is like a yellow yellow and yeah and if I was running on iOS the save button and we can see this is really big now yeah as well so yeah cool cool there you go all right so let's we'll switch back over to the slides and we'll hit our summary well we did it in in that time that we needed to I know I know so yeah so we saw some benefits of using xano for the UI versus uh c-sharp um I like it I like the way it looks I think it's a little less verbose what I really like is I can tell just by looking at it what the UI is going to look like and we also we've created the UI in xaml we added some uh platform specifics to it we also added a little bit of behavior to it by graphic a static resource and how about that little tricky hobby animations came up we set some supply for specific values and then um we created some markup extensions with it too you know what James we forgot to mention at the beginning I'm pretty sure we forgot it we have a cloud skills challenge going as well yeah or I could put that uh the AKA for it I think it's Maui AKA Ms slash Maui Cloud challenge totally yeah you can go through this module the one before it all seven modules the next five too and you know what you get James if you complete all five of them before September 30th sweet sweet stickers sweet stickers actually only the first 500 folks who do complete all five of them get in I think there's like 350 who've completed so far I have to check there's still time though that's the point there's still time and as long as the United States Postal Service can deliver to you which they deliver outside the United States so just don't don't um think just because you don't live in the U.S you can't get them long as they can deliver though you can get some stickers finished before September 30th 11 59 PM Pacific time you're totally good to go in fact somebody just tweeted at me today that they just got their um stickers in Norway so boom sweet nice there you have it so yeah learn more about these topics at this URL and I think that's probably what is there any other uh any slides in here what else we got in here oh uh let's see if is there any other questions in the chat we still got a few minutes oh great yeah yeah any questions Laurent are you I'm seeing this thing it's very dark in your house hey everyone yeah it's night you know it's like 8 30 and you see I'm that's why I didn't want to see three hours with you all even though I love you too you know anyway uh no questions in the chat I think we had uh we had really good discussions Katie uh managed most of them I managed a few and you did manage a few as well um however there is a a great other opportunity for everybody to connect with us right now right and this is um because we have what we call continue the conversation and this is actually a team's meeting and hopefully the link will work immediately this time last time we had a little bit of trouble and and we know why by the way so this is great so Chloe absolutely Knows Why um so this time it should work just fine so I'm going to pop this link in the chat as well um we are not there quite yet but we are going to move there very soon so immediately as soon as we are done here so I'm putting the chat the link in the chat here and there we will have a basically a teams meeting with you James you Matt and we are also going to have Katie who's joining everybody is freeze it's unscripted right so it's free from for all everybody can just switch their webcam on switch their um their microphone on ask questions uh comment say hi you know just ask James about his favorite brand of coffee or whatever or we can just stay focused on Maui I mean that works too so if you want to join us there it would be with great pleasure that will welcome you there and uh yeah that's about it for me sounds good yeah yeah I'm gonna scroll around see if we see anything else um but yeah I think Patrick was asking in the chat when is when was Donna my first release was released at build back in May into ga I mean we had many many previews for over a year yeah it's been generally available since May and it ships with.net so in May and November a new version of.net ships uh done at seven will be the next one we're on done at six right now which means Donna Maui version seven no I'm just kidding you know uh it has to be dot net Maui for yeah.net7 yeah I think so yeah dot net Maui is.net it's in the Box yeah yeah Oman wants to know how to get a job go to careers.microsoft.com that's where all the jobs are listed they are there's also um uh internship programs too if you're like a student which are pretty fantastic um Katie Katie did the internship program as well and then she joined my team which is amazing Katie's red so we're gonna go hang out with Katie over there perfect thank you so much for the session today and we'll see you on the teams meeting in a few and next week um we all we have another show next week right yes yeah nice okay see you there bye

Channel: Microsoft Developer

Views: 9,048

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

Id: l58nO0Hi7W0

Length: 86min 9sec (5169 seconds)

Published: Wed Sep 14 2022