Enable Hot Reload for .NET MAUI C# UI and Markup | Super Productivity Boost

one of my favorite Parts about developing with net and Maui when it comes to iOS Android Mac and windows applications is visual Studios xaml hot reload and dinette hot reload that is built in now this is one of my favorite features because it makes me super duper productive when I'm building applications all I got to do is change my code hit save or you know hit the little hot reload button and boom all my changes are immediately showing up right there for me so that means I can design my application with my real data or mock data or whatever I'm doing and get that super quick productivity Loop but what if you're developing your Dot and Maui applications with c-sharp UI and the c-sharp markup extension for example in the.net community toolkit how do you get that same exact iterative Loop when you're doing that today I want to show you how to do it because my good friend David ortnow a ways back wrote a blog post and I need to tell you and show you what this means so you can be super duper productive in your applications let's check it out [Music] all right everyone I am all about hot reloading non-stop so let's just get into the code now when I show a lot of Don and Maui here on this channel I often show xaml so here's some xaml here this is a file new project I have this running on windows so I can tap on an image I can go ahead and tap on a label it updates here and I can say hello everyone and then a bunch of exclamation points and it updates in real time right there and in fact I don't even have to hit save for xaml hot reload to kick in which is super duper cool now let's say that I want to add more labels I'll just go ahead and add more labels right I'm adding more things in there now this is cool because xaml gives us this hot reload capability but what if I want to change code behind for example this click Handler here whenever I click it it increases the count by one well if I go over into my solution Explorer and go to the code behind over here we can see that this is incrementing by one every single time so all I got to do is just change that to 10 for example and now that net hot reload kicks in now up here in Visual Studio we have this little hot reload button and an option to hot reload on file save so you have those two options here I'm just going to hit the save button this is gonna hot reload and basically swap out this method and now when I come into my running app we can see that it's increasing by 10 every single time which is super duper cool all right well then you're thinking well if I am able to swap out and Dot net hot reload how would this have impact if I'm building things inside of C sharp when it comes to UI and Dynamo well let's go ahead and take a look I've been building out right here on my YouTube channel a threads clone basically and here's what it looks like today I've just built out this home page and then I have this search menu here that shows me to follow and unfollow people which is nice now this actually is built at 100 inside of C sharp so what we can see over here in my code and actually I can bring up the live preview fun fact it doesn't have to be xaml to preview it is that we have a home page this is creating a list View and it has this thread cell so if I go into my thread cell I have a thread View and this is using those cool C sharp markup extensions everything for me right there so that's really really cool now this is normal I just have a home page uh it's a implementing from a Content page and then over here we have the list View and I'm setting the content so that's it I'm just kind of pulling that in good to go now at this point though if I'm inside of this home page that we can see you might be thinking well couldn't I just go to definition of that thread cell and that view and I don't know change for example uh maybe one of those labels or maybe that image on it so for example let's say I wanted to make the um the message here bigger couldn't I just say dot font size and I set that equal to 25 over here and then James you just said I could hot reload this thing or or just save it like wouldn't that work I see no changes oh that's because it doesn't know how to reload the UI right we've updated the code and that's been hot reloaded yes it actually has been however it's not recreating the page so unless I had a navigation event then that would trigger a new creation of the page so that is what is causing us not to be able to come in and actually reload this in real time or you just think it's architectural base there's no way to trigger and tell the hot reload please reload the Constructor here and recreate the page but we can do that and in fact David's blog post went into more detail about that I want to walk through it so the first thing that we're going to do is we are going to take a look at this hot reload service and this came directly from David's blog post and you enable this only in debug so you can copy and paste this directly from this Source control or David's blog post and what this does is it uses some system reflection to grab access to a metadata update Handler attribute and specifically in my namespace and inside this hot reload service now what this does is it gives us an event that will get triggered which is the update application event and that will then trigger this event that we can subscribe to right so this is going to invoke it with our types so this is part of the hot reload service in visual studio now when I'm debugging it's basically triggering these events and what we're doing is We're looping into it okay so what that would enable us to do is re-architecture our application a little bit and loop into this event so we can recreate our UI so if I go into my base page that I've created because I have a bunch of pages I've created a new abstract base page that inherits from content page this is going to give me one method called build and what this will do is let me Implement that method on every single page and that will what is what will be creating the UI now what we can do is whenever the page is navigated to we're going to call the build method right so it's going to call it so like when the page first starts it's just going to build it up but it's also going to Loop into this event which is update application event that's going to add an event here to reload UI when I've navigated from it it's going to unsubscribe that event and that reload UI event specifically because it can happen on any thread will invoke on the main thread the build method again so it's going to wipe away our UI and build a new UI for us but since the rest of.net hot reload is kicked in any code that I change in that build method or anywhere else in that chain will be updated too so now all I need to do is go back into my home page I'm going to come in and say instead of content page that's going to be my base page it's going to ask me to implement my abstract class and all I got to do is copy anything I had before down into build a boom I'm done now every single other page of my application can just inherit from that base page in fact if I go over to my search page we can see that this is set up exactly the same we have inherited from our base page and then down here we have the same build method that's building up a list view setting the content there so that's really really cool so now all we have to do is open our app here it is and we see the really big text which is which is fascinating right but now check this out let me go ahead and just open up the the live preview here I can go back into my home page now this is kind of crazy if I wanted to I could just say new button and I could say um dot text and I'll say hello hot reload okay I can even use the the community toolkit bring in new namespaces here that's kind of nice I'm just going to hit save or in this case the hot reload button and now our entire application right here is a big button right inside of here so here's this big button that's inside of here which is really cool now it doesn't know about my xaml because this is saying app shell so it's the shell there but now it's a big button I can just change it back to list view just like that hit save never hit that hot reload button and now my UI is there right which is really cool now what's nice is it's not just what's in the build method whenever I trigger any hot reload it's going to trigger the hot reload for this page so if I go into that uh thread view here and we change this back this font size back down to 14. again I could hit this button here I just hit save this is going to trigger that chain of events and boom our UI has been updated now it even goes further right because we're inside this thread view but if we take a look we also have a user view for example this user view is what's being displayed on this page so if I open up the app this James montemagna with the verify check mark and also on the search page here for James montemagno or Scott Hanselman with the checkbox it's actually being shared between those two pages which means if I go into that user View and it changes now to 24 make it huge and hit save what we're going to see is that it updates on our page but if I navigate back to the home page that's also been hot reloaded as well so we're building that up a hundred percent and all of those changes are being synchronized right across of it this is really really cool I love it and it makes you super duper productive when you're building your uis with C sharp and Don Maui now there are of course going to be some things that you're going to run into if you're adding new classes or you're changing base classes and things like that that just.net hot reload itself won't be able to handle but what I found is that this is a very very delightful way after building my models and some of my view models up to add new properties to do new things and then to start to iterate heavily on my UI I'll put a link to David's blog and also to the source code for this one and of course you can subscribe right here on my YouTube channel for more Donna Maui content all sort of amazing things happening I hope that you enjoyed this video if you are building uis with C sharp and you want to see more stuff go ahead and feel free to leave a comment below love to know and again don't forget to like subscribe and jam that notification button so until next time thanks for watching [Music] foreign [Music]

Channel: James Montemagno

Views: 50,951

Keywords: .net maui, visual studio 2022, visual studio, .net maui example, .net maui getting started, .net maui tutorial, dotnet maui, hot reload, c# hot reload, csharp hot reload, visual studio hot reload, dotnet maui hot reload, productivity, .net maui hot reload, C# ui, c# markup for .net maui

Id: cyz_fKE5wQI

Length: 11min 31sec (691 seconds)

Published: Thu Jul 27 2023