A Survivalist's Guide to .NET MAUI - David Ortinau

[Music] thank you foreign [Music] let's go clap we're welcoming welcoming you back you're welcoming us back it's amazing we're so glad to be here right I'm glad he's glad she's glad we're all glad hi there's people here there's people there it's amazing so welcome back to net front end day I Am David ortnow and we're going to be doing a survivalist guide to.net Maui if you like to do survivalisty things go out in the woods and see if you're going to live or die it's not going to be as exciting as this this is going to be amazing I almost called it like a Champions guide to.net Maui but that sounded a little too presumptuous I guess I don't know uh my contact information on the screen I'll bring up some contact information later as well I invite you to reach out to me anytime I am a principal product manager at Microsoft I work on the.net team specifically uh client applications and so our products for client applications xamarin has been around for years and years and years and then now the new upgrade version of that is net Maui multi-platform app UI I have been at Microsoft for about six years you saw Maddie earlier we obviously are a goofy pair I don't know if you think all Americans are like this they're not really we're just weird um and uh but we enjoy uh you know talking to developers and companies all the time to find out how we can uh leverage.net technology and visual studio uh to help you to help you individually make more money who wants more money all right a couple people in the back did not raise their hand I don't know cool um and uh also to help businesses be more effective right doing the things that you're doing um so that's some information about me um I want to give you a quick update this isn't something I have done on this trip at all but I thought it would be useful because it seemed like quite a few folks here might be new to.net and or new to.net for client applications in particular so.net as a platform you know you can build pretty much anything you can build iot stuff with it you can build apis you can build web apps you can build of course mobile desktop apps and a whole variety of other things they run on the Raspberry Pi uh you could probably control your refrigerator with it you know you never know so as a development platform things are going really well over 5 million developers um faster 10 times faster than node.js on the server so lots of good things happening there if you're looking for technology to take a bet on that's going to be around for a while because it's already been around for 20 years I mean obviously I was born 19 years ago so I'm just barely younger than.net okay I got some Smiles I got some laughs on that one um no but it's been around a while you know you can bet on it um I know people often will say well what about this product that went away and that product that went away I mean some of that's gonna happen um I don't anticipate that happening with anything we're talking about today um in terms of you know how are new versions of.net going we now ship new versions of net every year in November we host the.net conference it's an all online virtual conference and you get a new version of.net which also gives you a new version of c-sharp so as new language features come out you get new runtime and SDK capabilities and now with.net Maui being part of.net you now will also get the latest Innovations for mobile and desktop applications and as you can see.net is growing way faster uh in version six than version five the current version of.net is seven which we shipped November 8th I think of last year and I went looking for the latest numbers um I know that in terms of net maui.net6 and Dot Net 7 are about to crisscross so the dot net 6 usage has been declining and the.net 7 usage is skyrocketing so we're at that point where most apps now are going to be using.net seven I would say before the end of February uh in terms of how is Maui doing as a platform well we came out in May of last year so at build the mid-season of net six release we ship.net Maui we were a little late to the party because we were bringing all that old.net framework which was the previous iteration of.net all that xamarin work we were merging it upgrading it polishing it up and making it pretty to be part of.net and that turned out I don't know if you've ever experienced this but halfway into the project you realize there's a whole lot more work than you realize at the beginning right nobody never happens to you you always know everything your estimates are perfect is that what I'm hearing if I want to get estimates done I come to Sweden I got it um so you know we learned some things uh we also you know in the process of doing this the whole.net team as an organization grew in terms of our uh resiliency and our build pipelines and our Integrations and things like that because uh building a platform for four different Native platforms Android iOS Mac and windows you may not know it but it's kind of hard it's complicated right you want to build a platform that does one thing that's relatively straightforward right but we're doing essentially one thing on four things so uh oh I did want to call attention to that the star history that's the uh popularity of the Maui repository in the uh do I get a laser is that a laser laser pointer look at that laser pointer uh the blue right here that's skyrocketing like an Elon Musk go into the cloud SpaceX thing we don't like him right but it's still a thing uh we like Rockets who doesn't like rockets um the ones that don't explode we're talking about exploration Rockets scientific research Rockets this is important to clarify right Jimmy's laughing at all my jokes that's all I need usually Maddie would be sitting on the front row egging me on um yeah so the popularity is there and we're super excited about that and you can see 235 growth since we launched um there was a little bit of a seasonal dip here uh when we got to the holidays the December everybody that worked decided to go on vacation that's typical that's seasonal but the numbers are all going in the right direction so we love to see that I want to give you an idea of what kind of apps are using.net for mobile so the M365 SharePoint admin 4.6 Stars not too shabby right over a million downloads and look at those beautiful data screens to administrate your sharepoints uses a ton of.net technology as well as a bunch of azure and App Center services another great one is Microsoft Azure so this is a mobile application you can use with our technology to administrate your Azure accounts so you might actually like using this better than the web browser it's less stuff on the screen and it might make sense so again over a million downloads great store ratings all using our technology all Native stuff um this is another one that Microsoft publishes but it's kind of uh not really about a Microsoft service per se it's seeing AI so this is an application that uses the camera and it's to assist people that are um you know poorly cited or not cited and it will basically say hey there's a person five feet away from you it's a tall white man or or whatever you know or you point it at uh some paper or some some letters and it will read it to you so it's a really cool assistive device a lot of AR technology at work within it and it's all written with.net um this one is from a customer I believe based in Germany uh K2 clima campaign um which to me sounds Swedish almost and actually I feel like I found a Swedish alternative to it um but beautiful application started on.net Maui shippedwith.net Maui and it's all about uh awareness for climate change uh what you could be doing with your teams your organizations Etc you can find this in the Android store and I believe it's coming to the iOS store soon some of you have ever done mobile development know it's a whole lot easier to get something into the Android store than it is the iOS store and this is an app from logius logius it's the digi ID app I never know quite how to say the name digid but if you live in the Netherlands anybody here still from the Netherlands okay we've got one you got it on your phone yeah okay yeah so this is the app you use to identify yourself uh in in the country so whether you're interacting with services and things like that it's a prevalent app as a matter of fact the xamarin forms version of this app is now open source and the.net Maui version of the app is in the final stages of QA and approval and uh we'll be out sometime soon I it's not my not my app I can't make them ship it but it'll come it'll come out soon um and it's a great app people like it lots of other apps uh we did some uh Community stuff you can go check out the.net Maui showcase um as we have customers publicly announcing and sharing their apps we will be able to publish them to the Showcase so if you're interested in seeing what's possible with.net Maui who's actually using it this is a place you can go and if you look at all the xamarin stuff that's all the same.net technology that powers xamarin all right so that was kind of the introduction uh I thought that might be useful and interesting to get everybody up to speed on kind of what can you do with net Maui how are people using it um and so now I would like to kind of get into these survivalist tips portion of using.net Maui I'll talk a little bit about workloads upgrading for xamarin we'll talk about layouts in single project and then we'll get into some how do you how do you customize the UI and what is this hot reload stuff Maddie showed hot reload so if I you know I'm short on time hot reload is going to get the ax I'm going to cut it from the whole product um cool everybody's with me so far excited everybody's thrilled yeah what happens at football games here do you just like is it quiet I mean I know I'm not an All-Star football player more booze okay booze drinking okay well we need to think about that for the next.net front end days yes there's always an organ player or a piano player trying to Hype the crowd up that's why I don't watch basketball that's why I don't do it it's it's hockey or maybe American football but that's you know the Super Bowl is coming up Sunday so I'll be flying home just in time for the family gathering the family watches no football together until the Super Bowl in which time it's all about the food all right so workloads back on track workloads are essentially the installer for net okay so you download the installer for net and it will install.net on your machine and then the workloads are the different pieces of things you can do with it so Maui is an additional workload that the net installer will install for you so here's the thing you have two ways two options for managing your installation of.net Maui one is from the command line and the other is from visual studio if you are just getting started use Visual Studio only use Visual Studio because what you don't want to do is try to install things through the command line and then Visual Studio or start in visual studio and then go messing around with the command line because you can get your environment into a unstable State and you don't want that so there's my warning there's a there's a pitfall there there's a bear trap and you're going to step in it just don't do that um yeah yeah so pick one pick your pick your adventure here and you'll be safe uh so one of the things that I often get asked is okay I did this install what version of.net Maui do I have on my system how do I know I have the latest version you will always have the latest version if you have the latest version of.net because our versions are tied to the versions of.net the version numbers won't be exactly the same you might have the 7.0.100 runtime installed but the Maui SDK might be 7.0.58 the first two numbers should be the same the last number could be different okay but what you can do is you can uh select inside of Visual Studio any any of your Maui dependencies in the Frameworks and then you can look down here I did Zoom didn't it sweet does it zoom on stream yard too love it man you do that in teams not so much not so much um yeah so 7059 that is the version how do I know if that's the latest version well you can do a couple of things uh you could go to the.net Maui GitHub repository and look at the release notes they that will have the version number on it you could also go to nuget because everything is actually distributed through nougat.org and over here you can see that the latest manifest I'm searching for Maui manifest seven the latest manifest for my architecture which in this case is arm 64 is 705.9 I have the right version so or I have the latest version they're all the right version but I have the I have the newest I have the latest okay um when you are back here in the command line you can run a command.net workload list and Dot net workload list will then tell you all the different workloads that you have installed so if you're managing all of this directly in CLI this is a very handy command to have and you can see right here I am on 7058 at the time that I was using this CLI and it also tells me what a version of the SDK my my workload is associated to okay you also have the ability from here to update so you could run.net workload update however again if you're doing this from Visual Studio don't do.network load update over here just don't do it unless you don't like your machine and then you can go to your boss and say I don't know what happened my machine doesn't work anymore maybe it's because it's three years old I think I need a new Mac right who wants a new Mac yeah we want to do Max and you say Dave but we're at a Microsoft Office why are you telling us to get new Macs look at that Windows running on my Mac yeah you like that don't you this is uh an arm 64 image of Windows running on my Mac M1 with visual studio and Dot net Maui all working we've had several people ask us when can I use this soon this is a internal preview I am dog fooding for your benefit so I can file the bugs before you see them um or at least make sure they get fixed before we ship the thing all right cool uh you can also get your.net downloads from the website but the one uh thing that I wanted to point out yes this is going to give you the very latest version you can click the side and make sure you get the arm 64 version if your machine wants arm 64. but I wanted to point out that if you go to the.net installer uh the.net installer GitHub repo you can get all of those directly from here plus you can get the preview versions and you can even get older versions of the installer if you need them so if you are really particular about exactly which version you're using and everything I recommend bookmarking the GitHub for net installer so here are some of the uh the the commands the command line commands I use on a regular basis.net SDK check is going to tell me all the.net versions of things on my machine dot net version of course is the current version running if you have one app that needs to run on one version and you have another app that is stuck on a different version you can use a global.json file it's documented in uh docs.microsoft.com which now is called learn.microsoft.com and uh that Global Json you can put the version of.net you want to pin to and then everything under that directory on your file system will stay on that version of.net okay dot net worth list we already talked about dot net workload install Maui probably requires admin permissions that will of course go get the latest version of Maui uh the one thing that you want to make sure of before you run install or update if you are a command line person is make sure you understand what nuget paths are going to be used to resolve the workloads that you're going to get because what happens right the.net installer looks at nuget and says what are all the sources of workloads that I might be able to pick from it then goes to those sources on the internet and says hey do you have Maui this guy's asking to install Maui and the source says oh yeah I've got version blah blah blah or it says I don't have that and then it comes back after querying all of them and it says well I found something and I'm going to install it and if you have a path that has something that you don't want to install you're going to end up with it unfortunately because you just need to be very aware of what the nougat paths are what the sources are in your path so if you run.net nuget list Source it will tell you I'm going to go to the official nougat repository I'm going to go to Billy Bob's Emporium for nougats and you might be wondering where did Billy Bob's Emporium for nougats come to my machine you put it on there somewhere I don't know there is no Billy Bob's I don't it's a fake it's a fake nougat source um the last command I'll talk about is witch.net witch.net Will Show You where.net Is on your machine that it's using because if you get into a gnarly State a bad State on your machine you're going to want to know so in my case it's uh the user directory and then I've got all my files here and I can go check inside of my SDK manifest inside of my SDK what is actually installed there if I have questions because if I on a Mac get into a bad State I have a shell script I can run this shell script comes from the Microsoft documentation so I didn't make this up I'm not recommending something to you that isn't in our documentation and you can see it's going into my.net folder and it's removing the specific versions of all of these things to reset me so that I can make sure I unravel whatever it is that I just did that got me into a bad state but you're all going to be perfect you're you're already excellent estimators so I know that you're only ever going to install just the right thing yeah let's talk a little about upgrading from xamarin how many of you have xamarin applications that you would like to upgrade all right so this is for you and probably most of the people online um so in in upgrading your application firstly we did a amazing job I shouldn't say it that way because that makes it sound like I did something the team the engineering team the brilliant brains behind my words did an amazing job maintaining compatibility between xamarin and Dot net 6.net Maui but that's not to say that they didn't also create a little bit of work for you okay we care about you so much that we wanted to make sure that you could bill more hours and make more money but that means you have to do a little more work so you have two options when upgrading your applications the first one is the.net Upgrade Assistant what this command line tool will do for you is it will move your projects from the existing xamarin Project Style which is kind of a unique thing that xamarin did it will move it to the standard sdks Project Style which all the rest of.net uses so of course you see the immediate benefit there is that now I'm doing everything the same way as asp.net as console apps as iot apps it's all the same and then it's going to do some modification to your code changing name spaces because we moved from xamarin namespaces to Microsoft namespaces it's going to change a few types so we went from one type color to Colors which is an enum of all the different named colors and then color the type so a few things like that it's going to update for you and then it's going to evaluate the nuget packages in your solution and it's going to say we know the upgraded replacement for this one so we'll swap it out for you or it'll report to you we can't find or we don't know anything about this nuget dependency it doesn't appear to be compatible we need you you need to take a task and go figure out what's the replacement for that nougat package all right and then once you get that done you're going to then compile and run your app it's going to leave it in all the same folders where it was of course you as perfect estimators and hard workers have made sure to use git and so you have a backup of course of your application right if you don't the.net Upgrade Assistant will make a folder copy for you um but then you're just going to start compiling your app and see if you can get it to run and as you get errors you're going to solve those errors it's pretty straightforward um with the help that I'm now going to also provide you the second option is you know what I don't want to use the Upgrade Assistant I want a single projectify and go all the way to the front edge of Maui and you can do a file new Maui project and then just copy pasta or copy paste all of your code over right well most of your code you don't need actually all of it because we reduced your need for some of it but all of your code you can copy that over and uh start modifying those namespaces yourself do those manual steps and get yourself into a place where you can start building I personally like copy pasta because I know the namespace changes I know the type changes I know how to use search and replace in vs code and it's I can be done with that in just a few minutes as a matter of fact the community toolkit for Maui has a script that you could run from the command line that they used to upgrade their projects from xamarin to.net Maui and it will do a bunch of those redundant uh search and replaces for you all right so I kind of already went over this but these are the steps that you will take when upgrading your applications to.net6 or at this point since dotnet 7 is the latest release why not go all the way to dot net 7. we will start previewing.net 8 in a few hours not too long from now actually it'll be uh two weeks I think from now ish that's not public information except for the part that I just announced it on a live stream um but I didn't give you a date so really it's still pretty vague we're good um yeah so I would go to the latest Edge uh six and seven are very similar and you may be saying but wait a second I really want to go to Six because six is a long-term service servicing release right LTS LTS means that it's it's supported by Microsoft for three years as opposed to the typical one year and actually that's not the case for Maui even though Maui runs on.net six because of the dependencies on external build tools like Android and iOS we actually support every release of Maui for 18 months so from November until May the year 18 months right um so that's the that's always the case for Maui there is no LTS for Maui um always with mobile you have to stay on The Cutting Edge of what the underlying platforms are doing all right so I mentioned that nougat dependencies need to be resolved not all nougats are going to be compatible so here on this side we've got uh zxing which is a barcode scanning library from reth if you don't know rep ref is Jonathan dick he is uh based in Toronto Canada and he is the lead uh engineering manager of the.net Maui team uh so this is a very popular Library 3.8 million downloads we know lots of companies depend upon this and so uh if we look at this package and we go to the Frameworks tab on nuget you'll notice oh wow it lists.net6 and.net7 and it must be compatible right well the shading of blue matters the light blue essentially means we have computed that there is a possibility that these Frameworks may be supported the dark blue says yeah we know these are supported these are explicitly supported so what I'm saying is don't believe the Light blues the Light blues do not mean it's compatible trust the dark Blues because in this case that package is not compatible if we scooch over with my cursor to zxing.net Maui this is a re-release of this package by John and you you'll see that these are all dark blue and it's all they support and he even changed the name of it because the other one had forms in the name and that doesn't make sense in a.net Maui world right so this is a package you can depend on and there's that explanation right there of the colors in shorter words than I used all right so here's another example in this particular case this package plug-in fingerprint allows you to do biometric login with your mobile applications and I know I'm talking a lot about mobile we'll get to some desktop stuff here perhaps a little bit later time permitting um this is for Biometrics and you'll see that I've got dark dark on the xamarin iOS xamarin Mac that's great so there's some xamarin support mono Android that's actually xamarin as well that's mono is a uh well actually you're going to be here for Rich Campbell's from mono to.net Maui presentation later right so I'm not going to tell you about that he's going to tell you all about that but we also do have the dark Blues here so they can coexist in the same nuget package it's a matter of how the developer chose to add support and redistribute it in this case there was no reason to Fork plug-in plug-in there's no reason to Fork plugin.fingerprint into separate packages for naming purposes so he chose to just add those framework support So this one's good to go you can use this in your.net Maui projects now here's another one and this one is not compatible but it's also listing all of these other Frameworks up here the reason that it's not going to work is because all of these xamarin uh binaries essentially are not going to be compatible with.net6.net7.net8 they need to be recompiled against the latest versions of.net and that's why we're looking for those dark Blues up there cool makes sense all right let's talk a little bit about the layouts within your application and some of the changes that were made between xamarin and net Maui so in xamarin uh all layouts you could specify the size you wanted for that layout but it may not always be honored at runtime so that's why our width and our height the actual names of those properties are width request and height request and that's not something that we chose to do from the beginning remember that xamarin forms is actually at this point like nine years old as of today and so back when xamarin forms the first version ever shipped I mean iPhone screens were like this big and they were all the buttons were rounded and beveled and leathery you remember leathery buttons um you remember the calendar it was like you know this is your home journal or whatever um that's when we first shipped and back then when you put a layout value into iOS it was like if there's space I'll give it to you but if there's not sorry and so that's why it's called that and that's why the rule in xamarin forms was we'll try to honor it but we can't guarantee you the underlying platform will allow us to well in.net Maui that's no longer the case why because we've learned over those eight nine years from talking to developers that when you say this should be 200 units wide what do you expect 150 yeah right do you expect it to be 200 um man that was a softball question I thought that would be super easy anyway um all right so grid what have we done to grid uh columns and layouts in xamarin forums would be inferred from the content so you didn't always have to specify them if you were expecting that to happen in.net Maui that's not the case anymore now you have to explicitly say my columns are this way my rows are this way why well we also heard from you you want layouts to be fast you want your UI to be fast and render quickly and scroll well if the layout code needs to go infer columns and rows and rebuild its Matrix in order to do those things that's going to be slower so we removed all that work around hacky code and said look just tell us what you want the grid to be and we'll make the grid that so that's a change that you'll want to address when you're looking at your layouts and wondering why are things not exactly on the pixel compared to xamarin forms horizontal and relative layout and scroll view you can see several of the other changes that were made here if these are things that are impactful to your application and you're like oh I need to reference this this is in the documentation that will be published any moment now we have a pull request that is being thoroughly reviewed and it's also on our GitHub so you can find this information online a couple of other things that have changed some of the default values have changed in xamarin forms all these values were six why were they six nobody knows uh new developer coming in is wondering where is this sizing coming from and they find out that it's six and they ask us why is this six I didn't want six how do you think what do you think I want six and I mean it's 666 that's like the mark of the beast so now we're in trouble like why would I use this product um so anyway those values and perhaps some others that I'm not listing pretty much everything's been zeroed out um default colors also zeroed out so no arbitrary colors that don't make sense coming from which platform nobody knows what we have done in terms of colors is we have provided a default style sheet a resource dictionary with base colors when you start a new Maui application you get Styles implicit Styles and some explicit styles for all of your controls and it's based on fluent UI so your app will basically look fluent which is the Microsoft design system it's very material like so I think I think you'll like it it's good it's purple so that's dot net we like purple oh I never did fix this somebody pointed out my uh my code problem here so Grid in the opening stack layout in the closing rookie mistake we could blame the IDE for that one have you ever tried to change the ide's uh thing in the in the closing brace doesn't doesn't update never happened to you no never yeah okay digital studio for Mac User um so anyway stack layout uh essentially we no longer uh really just don't use and expand it never really did what most people thought it did to begin with it was again hacky and xamarin forms and unpredictable so we removed that the main thing is is that stack layouts don't subdivide the space based on children a stack layout is dumb actually all the layouts in in Maui are dumb because dumb is fast you can do dumb super quick right and so rather than being witty and clever we decided let's make it fast and give you the developer the power to to express the layouts the way you want them so a stack is going to just lay out the children until the children are done being laid out doesn't matter how tall or how wide that happens to be if you're using Flex layout if you like flexbox your web developer and you're like oh I understand flexbox let's totally do that my only comment on this I love Flex layout but be careful it is uh there are some dragons in that code right now and the team is working through fixing those bugs I actually was reviewing the latest pull requests last night as I was falling asleep and I noticed that some of the flex layout bugs are being addressed so I'm super excited about that so just go into that with your eyes wide open if you haven't figured this out I don't stand up here painting a picture of paradise I want to give you the information to give you it's a survivalist guide right I'm telling you where where the traps are I'm telling you where the the Hornets are what kind of bugs do you have here you have bugs that hurt you Hornets yeah okay cool that was where it worked that's fantastic um so I I I speak the truth yeah all right custom layouts um if you really want a fast layout and you don't want to mess around with any of the other layouts write your own custom layout I love this one it's a horizontal wrap layout you can find the examples here uh from easy hearts repository custom layout samples and as you can see I just dropped my uh content in there and it just lays it out just wraps it right around uh fantastic I use this layout all the time and the great thing is is that there's really just two measure two methods to override when doing a custom layout measure and arrange the children um and you're Off to the Races the other nice thing about custom layouts if you've never used this before is any layout can become bindable so if you have a data set and you're looking to just repeat that data some platforms call it a repeater an item repeater an items layout in Maui any layout can become a bound layout using bindable layouts you can provide it the data source and you can provide it the item template and you are Off to the Races the only thing about it is that it's not virtualized so if you have a large data set that needs to be virtualized you want to use list view or collection View all right single project I think we've seen some of the single project earlier in the presentations um I wanted to call attention to a few things about images single Project's awesome because you have one project and it can go to all four platforms it's essentially write your code in one place and get it everywhere it needs to go you still have the ability to do Platform specific things when you need iOS to do just that one thing or Windows to do just that specific Windows Experience but for the most part it's all in one place when you put SVG images into your in your application which is awesome note that by default they are going to be generating pngs why well SVG rendering at runtime can be really slow and we want to make sure again your apps by default are fast and so that means that we want to use pngs that's going to be the fastest way to go you are still able to on some platforms it's a quark this is a Quirk we did not intend you are able to actually can maintain the SVG extension on some platforms when writing your code and that image will appear it's still not an SVG it is a PNG so be aware of that if you need SVG support you can do it with skia sharp a library that does vector-based drawing you could also do it with FF image which is I learn it's actually fast forward images I did not know it stood for Fast Forward probably because I never read the documentation um but it uh it is a library that's super popular in xamarin and we are working on a pull request to make it compatible with.net Maui we have it running it needs to be thoroughly tested packaged and shipped um and then you can also see in your CS project if you want to mess around with the images and opt out of that uh sizing or tell it a default size you also have some color options all this is documented you can do all of that in the Cs project Maui does awesome things for you with app icons and splash screens so if you've ever done uh any application desktop or mobile you end up generating tons of sizes and shapes of your Splash screens and your app icons maybe you enjoy doing this by hand maybe this is a sadistic thing that you like to have your children do when they don't clean their rooms but Maui does this for you how you just tell it what your asset is and if it's an SVG you're doing better because it then can size it for each thing and we have a build task that will take this and generate all your Splash screens same thing for your app icons it will take those svgs you can have a background SVG and foreground and it will generate all the pngs for you at build time super convenient very easy to use if on the other hand you don't want to do that and you say oh but I have a storyboard for iOS or I have a custom XML layout for Android you can totally still do those things too if you're bringing them from xamarin you can copy them over from xamarin very straightforward all you need to do for example in iOS is bring your launch storyboard into the iOS platform folder and then add it to your info p list and if you were using the storyboard before with your iOS application then you're probably already well familiar with the infop list and that would make sense all right so I think we've got a few minutes yeah eight-ish until questions control customizations what can you do here well in xamarin we had something called custom renderers and a custom renderer essentially uh renders themselves know almost everything they need to know about the upper framework of xamarin and that is bad for performance that is like you don't want that level of knowledge to be so intertwined so what we did in.net Maui is we re-architected the renderer pattern and we made handlers handlers are essentially you have a cross-platform let's say button that button implements I button an interface that basically says here's what a button should be it should have some text probably takes an image it should have a click event might have a hover event you know all the things that you would think of for a button it doesn't Implement any of those things but it tells you what a button should be that's the cross-platform button now in order for that button to do something on iOS the UI button which is the native button it needs to actually Implement those things so let's say that the I button text the the button text it maps that method that property to a Handler and so it's going to use typically an extension method that is going to apply the text to the UI button on iOS and it'll do the right thing on Android the right thing on Windows the right thing on Mac okay but where does that leave custom renderers we're on a slide about custom renders and I've told you all about handlers well the team again in their wisdom in their foresight uh with their massive amount of skills maintained great backwards compatibility so you can bring your custom renderers from xamarin Land over to Maui land and you can just use them as is there's really only two things you have to do one thing is you're going to remove the export renderer from the top of the custom renderer because we will no longer use reflection to find it which xamarin used a lot of reflection Maui uses minimal reflection again performance and then you're going to use configure handlers we use the same Builder pattern that asp.net and other pieces of.net use and you're going to configure that Handler here and just pass it in as a Handler so there's my custom renderer and it just it just works so that's not much code right a little bit of work for you massive compatibility benefit you don't have to rewrite your app what about other customization techniques for UI so handlers have another awesome benefit we can provide hooks into the life cycle of every control for you to override things or to add Behavior to things so you can prepend to mapping which means that the thing you want it to do is going to happen before Maui applies all of its Behavior you can modify an existing mapping which I'll show an example of so if you find a bug and you're like I can't wait for Maui to release something you can just apply that update in your own code using a modify mapping or you could append the mapping let's say there's a behavior you want to introduce to a control that isn't part of any other property you can do that as well so let's take a look at a bug's story this is my story I was building my and I continued to Noodle on this uh control gallery application actually I could probably pull it up here here's my control gallery application um would it look better in dark it does all right so here's my dark and so I've got my buttons page pull my buttons page up and uh you can see I've got a representation of all these different buttons and I've got code to show me what does the code look like for all of these different styles if I want to do only c-sharp UI if I want to do xaml if I want to style my button what does that look like all the properties the visual States etc etc and so I have this and I was messing around with these buttons down here and what I was looking at I'm going to turn it back to light not because Jimmy says he likes it but just because I want to oh look at that did not style that very well did it that's okay uh so my playground for the app so what I noticed was that on iOS and Mac Catalyst the icons were not aligned as pretty as they were on Android I'm like oh Android actually looks better which is unique because usually iOS looks better um not my personal bias just the way it works and so I was like oh what's going on there and it was around October time and so we have hacktoberfest anybody participate in hacktoberfest okay so it's run by digitalocean if you want more nerdy t-shirts then this is how you can win a t-shirt by contributing to open source projects sounds pretty good right and you might you know who knows you get some reputation online you might get a new job make more money just saying so I was like okay well I'm gonna hacktoberfest this thing and I did which is amazing because I'm a product manager I'm not a core engineer hired by Microsoft I didn't go through the engineering I'm just a contributor at this point right so I did this and it got merged and I was so excited but now my app still looks like poo because I don't have the latest version of Maui right and so what do I do you know what I did I modified the mapping and I just took my code this is the actual PR code down here and in my Maui program you could do it really anywhere that the code is going to get executed in your app I went to the button Handler and I said hey mapper I want to modify you and I specifically want to modify what you're doing with the content layout because you're doing it wrong and I'm doing it only for iOS and Catalyst because that's where the bug is right and so then all I need to do is call this corrected method and this corrected method in the Maui code base actually exists in a meth in an extension method somewhere else but for my purposes all I needed to do is make sure I could bring this code into my app and then voila all my buttons look awesome awesome buttons right thank you for clapping for me with my prompting clip um another thing you can do uh and let's take a look at these entry Fields right by default with.net Maui it's native and so entry fields are a perfect example of why of how each native platform looks really different right so I'm gonna guess that when you got a design from your designer for your application and it's awesome it probably uses helvetica right and it uses great you know fluent colors but they're gonna pick one of these or none of these they're not going to give you designs for all four and say oh I actually want it to look totally different everywhere not going to do that so how can I get rid of all these different treatments of lines and start to align my design easily so in this case there is no property for me to modify what I'm going to do is I'm going to tap into the entry Handler and I'm going to append to mapping and I get to call it whatever I want no more borders just get rid of those borders let's make this what I like to call a naked entry right it's out there as as God created it naked um and so for each platform it I have to do a different thing so the platform view is actually the native control so UI text field on iOS and whatever the heck it is on Android I don't really even have to know what I do need to know is how to copy and paste from stack Overflow who knows how to copy and paste and stack Overflow all right so this is the easy part even if it's written in Java even if it's written in Objective C I can figure this out because I'm a smart cookie so on stack Overflow I'm like how do I remove the background or the borders from an Android entry field and I find it and so then I just need to translate that into a C sharp code and so the trick is to set the background color to transparent you would have thought of that on your own given enough hours and time right that that's how you get rid of borders on Android I think iOS is actually the most straightforward it's border style you change it to none okay I'm down with that if you change the font weight of the input field on Windows to thin it gets rid of the line isn't that fantastic courtesy of stack Overflow this is where the money is made folks all right so but you see how easy that was how few lines of code and I just need to put that somewhere in my project wherever I decide is the best fit for it you know some people hate seeing the folder common in their projects they're like oh that's that's cheating you're probably doing something wrong um that's where I like to put stuff it's like it's common I use it all the time all right which brings us to hot reload which you have seen but I will show it here real quickly because I have this wonderful volume slider application here right um so I can control things in my uh home which I never actually finished this but let's pretend it works um so I can you know get my slider going for teams or whatever but I actually want to have a plug up here to connect my iPad to my Windows desktop because I'm using messaging I probably should have Gerald help me out with the single signalr thing um and get this thing actually working so what I can do here and per time I'll copy and paste the code I was going to make you watch me type it but so I've got a build method and this build method I have hooked into using this metadata update Handler we have a uh what do we call those things community stand up about this and there will be documentation about this it's just this one bit of code you put that into your app and then you listen to that event somewhere on your page which I'm listening to it right here and then when that happens I call reload UI which is just going to reinvoke my build method does that make sense just you know tell me when the user hot reloaded something so I can intentionally call the build method that's all I'm doing so what I can do here real quick and my connect button do this and then I have to remember control over you yeah do you know when you uh do a shortcut and it includes multiple steps multiple letters you know what that's called anybody true this is trivia you're not gonna it's fine it's called a chord so if you're a musician that actually makes sense chord but I am just I hate having to do more than one key it's like just give me one all right anyway so I did this right and as a normal sane person I like to hot reload on Save I think it's important so control save it's gonna Boop update it oh there's my button okay cool well there's the plug everybody saw the plug right plug actually it looks like a plug from here from that angle yeah sometimes I think I'm going to set things on fire with the way I have my plug plug into stuff but anyway um so now with my fluent c-sharp UI magic I can start doing things like okay I'm gonna put it at the end and that's going to send it over there oh wait but that's not the end end why because I have a grid and my grid has multiple columns so what am I going to do well I was a web developer back when you laid everything out with tables so I know how to merge some cells and span some cells I can do this so I'm going to say okay column span and I think it's four one by four well oh oh stop stop edit well at least it didn't crash all right so four yeah all right I'm gonna span four columns that's where I want it want it right there so C Sharp hot reload on Windows also running on arm also running in the latest visual studio so pretty cool stuff hope you learned something hope you got something from this do we have any questions foreign my favorite set the border to thin that's my take away from your from your talk yeah just set the border to thin and they will disappear absolutely except the board of thing I wish I could set my border to defend you know what I'm saying same but we do have some questions and actually we do have some comments as well uh note that which.net is not usable on Windows and then Mr Sakamoto went in and said instead we can do it with where.xc.net sounds good good comment yep they are awesome in the chat room I wasn't being very inclusive of the windows crowd was I I'm sorry except you how does saml work is it converted to C sharp is it happening at the build time or run time so uh xaml uh uses its own compiler the xaml C compiler and it is going to compile it into IL which is an Intermediate Language and some other things and then it is going to weave it in with the compiled c-sharp so if you are using other Technologies like foti weaver or other things that mess with il interpreted or we're going to say Intermediate Language then that can actually cause some wonkiness but it's basically compiled yes um and they're not exactly c-sharp objects no awesome is there any possibility to customize Maui controls through control templates as we do in WPF yeah so there is one control in particular that is strong on control templates and that is the radio button but control templates are not supported across all of the controls in Maui so um I think it could be really interesting to have it everywhere um but we it's it's not at the top of our product roadmap this time but do it on the radio button I do it all the time on the radio button so I understand why somebody wants to do it because it's pretty powerful do we have any questions from the room yes she's going to the back can't see her on camera unless you turn the camera why would you do that so uh my question would be about the whole tree load it's cool and all but if some of us who is not fortunate or more fortunate enough to not use Visa Studio but Ryder yeah how like will it work without that or just with the common line or how how that like if we want to start a bit of Adventure in the Maui world but still on the very sharper goodness so I would recommend looking at um it's it's something that you're going to use yourself but you're already using writer so you're already off the the golden path on your own you're off in the Woods by yourself you're a Survivor um so you can go look at Ryan Davis's TBC project um if you don't remember that tweet at me I will share it again it's on my or toot at me if you're a mastodon person I'm on both um so what this project does is is it runs a.net tool server instance it watches your files it recompiles and ships over the changes and you have a nuget listening inside of your application and that performs those hot reloads for c-sharp specifically um there used to be another option for xaml uh live sharp that is no longer being maintained in terms of official support for scenarios outside of Visual Studio I don't have anything for you at this time I'm sorry but I will take your feedback and I'll write it down in a note thanks yeah all right we are getting ready to get and up on stage so thank you so much there are a few questions still in the chat room so feel free to jump in there or if you want you can tweet you're still on Twitter I I do have an account because people keep adding yeah you see people have questions you're on social I do it for the for the kids yes that's awesome so um either the chat or social awesome thank you so much [Music] thank you foreign [Music]

Channel: Dotnet Frontend Day

Views: 954

Keywords:

Id: EoERm4ey96M

Length: 61min 4sec (3664 seconds)

Published: Fri Feb 24 2023