Customizing Controls with Handlers in .NET MAUI

you want to learn how to customize existing.net maui controls with the new handler architecture you've come to the right place my friend let's go check out how to do just that as always with my videos i start off by showing the end result so you know what you can expect from this video and it's kind of awkward because the only thing that you are seeing here is kind of like this yellow button that you're seeing that is what is customized for the button on android so let's just quickly see how to implement that with maui so for this video i'm using visual studio 2022 you can see it here running on the left you can see the example page of a file new.net maui application and you can see that running on the right on a actual physical android device that i've got lying around here i'm using the windows i think it's called your phone to mirror it to to here on the desktop which is pretty amazing it works pretty smooth so if you haven't done so already go check that out it will greatly improve your development experience um so what i'm going to show you is how to customize existing controls in.net maui by just you know implement a little custom handler thing before if you are using xamarin forms you know that you had the renders and you had to write these custom renderers which could be a little bit of a pain because you had to know a lot of stuff you had to implement a ton of code for just one property that is all behind us now we can use dot net boundary handlers to do that much much easier so let's just dive straight in i'm gonna go to the solution explorer right here and i'm going to go to the startup.cs so this is a new class within your net maui application here everything is configured for like use maui app configure fonts you can do a whole bunch of other stuff as well dependency injection all stuff that i will make videos on so go check that out subscribe right now to be notified automatically but here you can also register your handlers basically now kind of right off the bat the important thing is that you can do this everywhere you can also do it in your main page example cs you can also do it in your app example cs it doesn't really matter as long as it's like in the code path of your the startup of your app as long as that code is triggered somehow you can do it that way so i'm going to do it here because it kind of makes sense to have it in like your startup class i think but you can do it anywhere if that's what you like so what we're going to do here is add microsoft.maui.handlers because that is where all the handlers live and let me actually scroll up here a little bit for you and get this in here so here you can see all the controls off.net maui so i can see an activity indicator a button checkbox all the stuff that's in here a time picker a switch and they all have their own handler so this is kind of like the equivalent of the renderer right but the handler is much more efficient so if we go back to like the um top level we have the view so that was before a visual element i don't think it's called like that anymore it's now a view so we have the view handler right so if we go into that we have the view mapper and the mapper is a property mapper which is kind of like a dictionary of the view and the view handler and it will have like an index of the property that you want to actually customize and then you can assign an action to it with a lambda or a method that will actually be executed whenever that property is changed or whenever something happens there so we are going to go in that view mapper and you can see here this little index or the string key and now what you would typically do is you know if you were to create a kind of custom control if that's something that you want to see please let me know down in the comments i'm going to focus on just overriding the custom controls right now you would do something like eye view dot background and now you're assigning something to this this background key right and we can here add that action so this is going to be a lambda right here and we're gonna get passed in the handler and also the view and then we do this little arrow thing with a couple of curly brackets and now we can write some code here in the body that will customize our view so this is our view mapper this is like the highest level and each view will get passed through here so that's also something that you need to keep in mind we'll see how to specify it for certain control in a little bit but here is kind of a little secret if you want to customize something like this this index doesn't really matter so we can do here my customization and it will still get called right so if you want to make clear to i don't know other developers in your team that this is kind of like a custom mapper thing going on you can just pass in here any magic key and it will be executed all the same so here we have our handler and um because we're in a single project right so for dotnet now we just have this single project which runs our ios android uwp all kind of our platform um um different things we're gonna run that from a single project and we still want to reach in here to our platform-specific code right because we're going to customize something on the native level so on the android level in this case so that's why you have to have these if android flags in here which is called compiler directives and now the compiler knows like hey we are in android land for just this little piece and here i can now suddenly use these android namespaces here so if we inspect like the handler that we get in here this has a native view property and this native view is of the type android.views.view and this is the the native view for the view handler so every view gets passed here and at the highest level it's a view so if we just go here and we say set background color and we can say android dot graphics dot color and let's set it to red so everything will show up red and you can see that everything will turn up red because every view is going to get passed here but if we want to do this for ios we just basically need to copy this block right here and we're going to do this here as well we need to set this flag to ios you can see it's grayed out immediately because here at the top at this bar you can see that we are now targeting android and if we do this drop down right here we can see we also have ios we have mac we have windows so if i do this to ios you can see that now the android bit gets grayed out and we are here in ios and we get the red squigglies because now suddenly we have to write ios code right and it doesn't have a set background because suddenly this native view has magically transformed into uikit dot ui view and now we have to set something like i don't know background color see there we go of course you know you can also divide this differently by the way you can also put this android block here inside of this little body right here so i'm duplicating this whole block here right now you can also do this inside of this body and you can actually also do it without the if compiler directives right here i'll show you that in a little bit as well i'm going to focus on android for now but just so you know how to do it for multiple platforms so let's switch this back to android as well and actually let's just save this let's stop and restart this for a little bit so the app should come back up and now everything should turn up red because suddenly our custom handler kicks in and actually so that is all that we did we already learned how to create this custom handler and override the default behavior of a control in dot net maui here we go our app is coming up and everything is red so this works perfectly now let's take it to the next step let's see how we can do this for a more specific control let's see how we can do this for a button now for a button it's actually quite easy because we just need to replace this view handler with the button handler there we go but if we do then you're going to see like you can see it grayed out and then we have this little suggestion that the name can be simplified that is because we still reference the view mapper here so if you want to change this for a specific control you don't want to change the button handler to a button handler but also we want to change the view mapper to the button mapper because each control kind of has its own mapper so now suddenly you can see it gives me squigglies because i'm doing this while i'm running this code so i'm going to stop and restart in a little bit but now you can see this is turned into a button handler and you can see if we inspect this native view here that suddenly this turned into a android x.appcompat.widget.appcompat button so we get like the strictly typed things in here as opposed to again if you've worked with xamarin forms you might remember that you had to figure out what type it is yourself what do you need to overload here what's the right life cycle thing that i'm in and here you will just say hey i want to have this button handler the button mapper and whenever you get in here you can assume that the native view is already instantiated and you can just start your customization here so now i'm just setting a background color but you can write all kinds of code in here right so you can make that customization as extended as possible now just to show you a little bit of the difference here so i have the button mapper now let's set this to green and whenever i stop and restart this one what we expect to see is that the rest of the interface is back to normal but only our button now should show up as a green button so here we go the application is coming back up there we go our button is green so see that is how easy it is now this mapper is not going to fire off for each view it's just going to fire off for a button so that is pretty cool right now the other thing that i kind of promised you is how to show you without doing this for the um if compiler directives which i personally don't like that much but it's it's not a very easy way there's multiple ways to do it probably this is the one that i figured out so please let me know if you have any better ways so i can learn from you because i'm here to learn as well but let me show you what i discovered here so what you then want to do is well let me let me keep this running so we have this nice little netbot going on here let's go to our solution explorer let's go to our project and let's go to into our platforms folder so in our platforms folder we have a folder for each platform that we're supporting which holds kind of like the platform-specific code right so for android we still need the main activity and the main application so actually that is one way to do it we can just go to let's just comment out this and for our sample repository let's put a little comment on here so you can still find it method one there we go but i'm also going to copy like this block of code without the if dev here we go and i'm gonna go to like the main activity right here and what you can then do you can see it's nice and clean nothing's in here by default in the template but what i can say is then implement a little constructor here and i can put in this code and let me uncomment this there we go and here we kind of have the same thing but now it's in our constructor right here and this gets called so we now we're here in platform-specific code and you can just do it like this and you don't need all the if other code and blah blah so let's just change this to i don't know what do we have white let's just rerun this really quickly again so you can see that this gets called as well from the main activity and you can do the same thing for ios but now put it in the app delegate and for uwp and mac os you have kind of like the same things so you can do it like that and you don't have that platform specific code so that's kind of like method number two the downside that i think this has is that it's not that discoverable if you're just looking at the shared code you will go like hey i see all my buttons are white but i don't understand why and you have to go through like the app delegate and the main activity and all these kinds of things to figure out what is going on right so that is not great for this solution i think so let's just quickly comment this one as well let's put in here method two just for a reference let me again well actually let's do something different now so i'm going to go to my solution explorer and i'm going to do two things in the android folder so in the android specific code i'm going to add a new class which is my custom button handler i don't know you can name this anything you want here you go and i'm going to create that same thing in kind of my shared code so here we go add class i wanted to name it custom button handler there we go so let's just add that and now i have it on here if we inspect the solution i have it here in my android and because i put it in the android folder it only gets compiled for android same for ios same for mac catalyst or all the platforms that you might have in here and this is in my shared code so this is going to get compiled for all the things so let's go to the shared code one first and i'm going to make this a public partial i think the partial thing is something that you're going to see more in done at maui a partial class which means that you can have the class divided over multiple files basically which is because i have this class named the same right in android and in the shared code so i can divide my code between these two things and what i can say now is also a static method so i can say static partial void custom handle right so this can be anything right i'm just making up names here um and actually because this is in my shared code this is kind of like the declaring method so this is i'm just saying like hey my method is going to look like this so this is kind of like a different variation of um inheriting classes and making it virtual and overriding it but now you're doing it with partial classes why because of like the the different platform implementation and this implementation i hope it will get clear if not please let me know in the comments and i'll make a quick follow-up video on what this is more in-depth and then the same thing we can do the actual implementation in our android custom button handler so here we can have the same thing and we can say public partial class so now i think it also has to be in like the same namespace mind you so we want to make it like this as well and here we can say static void what did i name it custom handle right so this presents us with a problem oh i need to make it partial right so what was it static partial static partial void there we go so now we don't have squigglies anymore and we have this so this is in our shared code i will i will add that for you know shared code for clarity and this is in our android code right and here we can actually implement this now the thing you might note is that i don't put public or whatever in here this has to be like without an access modifier so no public no private no nothing which also means that it's kind of private by default so we can't reach out to this directly something will fix in a little bit now what we can do here is go back to this main activity copy this block of code to actually do our custom handling here so let's just go back to this uncomment this and here we go we're back with our custom handling right so let's make up another color here let's make it yellow just so we have a difference between the different methods but now we want to call this right so now we want to go back to our startup basically and we want to actually say custom button handler there we go and here we want to do something right so we want to make clear that we're calling something custom and we're doing that maybe in in different platforms what we want to do then here is create another in our shared code create another thing which is actually public static void and we are going to handle handle we're going to handle i don't know we're going to handle it so there we go and here because we're in the same class we can say hey custom handle this thing and because this is in our shared code we can always call this and we're going to have this custom handle right here and what's kind of cool about this is that whenever we don't have an implementation for a platform so we implement this for android but if we don't do it for ios we will still have this kind of implementation that it will call right so this is all valid code but it will not go out to an actual body so on ios this is not implemented but on android it is so on android it will execute on ios it will not without any further code implementation without any ifs without any detecting platforms and that is a really cool thing and what we can then do is here in our startup say hey i want to handle this thing and you can see that this is nice and discoverable we can see that um something is going on here and we don't have to worry about on what platform this is implemented or what not although i don't really like the partial classes and partial methods as well i still like them better than all the the if things like this and putting those blocks underneath each other so let's just add this method whereby three right here let's run this little thing and our app should show up with now a yellow button and then we have seen kind of different ways how to customize a existing control in dotnet maui here it is our app with a yellow button so we've seen a couple of different methods and that is how we can customize existing controls in done at maui i've already said it a couple of times before if you've used custom renders in xamarin forms i think you will find this much much easier to just override the behavior of just one property or you know execute some code to kind of customize your controls of course like i said you can do anything with this i focus now on the background but you can remove the entry line the underline under an entry for android you can open up i don't know all the properties that are not implemented yet that are not serviced to that down at maui abstraction layer you can do that like this of course if you want to take it to the next step you are going to create your actual custom control um which is something that is a little bit more extensive so if you want to learn about that then please let me know in the comments and i'll be sure to make a little video about that as well so you know how to do just that other than that thank you for watching this video please click that like button if you've actually liked this video and come on what's not to like right so click that like button um check while you're there if that subscribe button is already lit up um so you subscribe to my channel ding that little bell so you'll be notified of that new.net maui content automatically and i'll be seeing you for my next video

Channel: Gerald Versluis

Views: 3,361

Keywords: .net maui, dotnet maui, .net 6, .net 6 maui, .net maui example, .net maui app, dotnet maui tutorial, dotnet maui getting started, dotnet maui samples, .net 6.0, visual studio 2022, dotnet maui handlers, dotnet maui customize controls, .net maui customize controls, customize controls .net maui, .net maui mapper, dotnet maui custom handler, dotnet maui custom renderer, .NET MAUI custom mapper, .net maui tutorial, dotnet maui ui

Id: _9dz7BUoxT8

Length: 19min 9sec (1149 seconds)

Published: Thu Jul 29 2021