Using a Xamarin.Forms Renderer in .NET MAUI Without Code Changes!

what if i told you that you could use your xamarin forms custom renderers without any code changes in your nat maui application it can be done let's check out how to do it then so here we are in visual studio 2022 it's going to take me a while to get adjusted to not saying 2019 um but here we are in 2022. um and here you can see a file new xamarin forms application running well not quite file new i've added one thing look closely it might be a bit hard to see so no every label is green right so we'll see about that you can see it on the left in the example page on the right you can see it running on the android emulator now already a little disclaimer the android emulator is not running great on my windows machine so if you see kind of like performance issues that is totally my machine in combination with this android emulator and has nothing to do with the the forms app or the maui app that we are about to see so the thing i did was implement a custom renderer because you can have a custom renderer in your xamarin forms app right i have a video on custom renders that as well it should pop up on your screen right now or you can find it down below in the video description if you want to know more about that but from here i'm going to assume that you know what it does so i have that here our label render which is um for android i'm going to show you the android one of course this also works for ios but here we have this for android and it's a very simple render because if you have like a real live render in your application it's probably much bigger than this you know all about it you put a lot of love in there because you know you wanted that thing customized but this just changes the control background color to light green so this uses the label renderer for android it's applied to the label here so that's all it does right and you can see it works here on android every label has a light green background now that is all cool but you can use this exact same render in your.net maui app how cool is that so if you're going to transition to.net maui but you're worried like hey i have a lot of custom renders going on how is that going to work don't worry you don't need to rewrite them all to the new handler architecture there will be more videos on that as well you don't have to convert them all right away you can first import all your renders without having to change any code any functional code you can just use them and then go port them over one by one to go slowly towards like a native done at maui app so how we're going to do that that's what i'm going to show you right now in this video so this is this is our render right and to show you i'm not cheating i'm going to create a net maui app right here so i have the folder open which has this project right here so let me open a command window so in the address bar here i can just type cmd and it will bring up a little thing here and i can say dot net new maui and i will do dash n so i can give it a name and i will name this maui custom renderer sample let's make it something like that enter it will think for a little and there we have our dot net maui app so i can exit this terminal and here you can see a new folder was added the maui custom renderer sample with a new solution the projects that are needed for our.net maui thing right here let me quickly copy this as a path there we go i have another instance of visual studio 2022 so let me open a project or solution paste in the folder here and i'm getting my maui app right so this is all preview bits so there's some weird errors going on here but my maui amp is coming up let's select the android emulator right here so i can run that as well let's actually just see this running so i'm gonna i'm gonna put this to the side just like i did for the other one so we can see the emulator nice and clean here we go get this out of the way here's our emulator and i'm just going to click run so we can first see the file new maui template basically and then i'm going to just copy over the renderer of course there's a little thing involved that you need to do but i'll walk you through it how to do exactly that um so and then you can see that you can use your custom render from xamarin forms in.net maui without any hassle all right so here we go our app is being deployed to the android emulator you can see it going on right here nice dot net splash screen i think we're getting the net bot as well like i said the emulator is a little bit slow on my machine so apologies for that i typically work on a mac which is great which works good for me so i have that set up but right now you know all the maui bits uh work better with visual studio 2022 here on windows mac of course is coming don't worry about that so here we have this hello world thing right looks cool looks great um cool but now we want to make our labels all green here as well right with that same custom render so let's see go over here to our solution explorer and if you've already looked into maui a little bit then you know that this is now all a single project right so our ios our android our uwp all the projects are living in the same project well uwp still has a separate project but that will disappear whenever dotnet maui will become generally available but for now we have these kind of platform things here and here we have this platform folder with android ios mac catalyst because we still need a little bit of separate files right so we're going to copy this custom render into our android folder right here so let me see if i can actually copy the exact same file if that's going to work so i'm going to copy here the label render from my xamarin forms android project and i'm going to go over to my maui thing here and i'm going to copy this into my platforms android project i don't think this is going to work okay so what i'm going to do then is add a new class i'm going to also name this the label renderer there we go and i'll just copy the content right that's just as easy um of course on the file system you can just copy that thing over which is much easier i'm going to copy this whole thing like this which is you know typically not something that you want to do but just to illustrate a little point here so what is this saying here oh i'm changing code now while it's actually running that might be also the case why i couldn't actually copy the file okay that's good to know so let me just copy this thing here and i the one thing that i want to get from here is the namespace so let me get that here we go so i get the right namespace and i can delete all the rest here so then we should be good so i copied my render now here one on one and it's just here actually let me stop this so it doesn't keep showing me here all this squigglies and stuff so now there's a lot of stuff that it doesn't recognize right because xamarin forms is not a thing anymore also this namespace was for my old app so that kind of makes sense so there's a lot of xamarin form stuff in here that we can't reference because xamarin.forms isn't here anymore so kind of the only thing we need to do here is change these namespaces so what we have is using [Music] dot maui there we go oops maui and we're probably gonna need the controls because you know in the controls is probably the label so now it already knows the label then we also need using microsoft.maui.platform it knows something about platform sorry controls.platform i think what is it controls.platform there we go and now it knows some more stuff and then we also need to bring in the compatibility because that's the way this works right the xamarin forms team or the dotnet maui team has introduced some kind of compatibility layer that will take your renderer interpret what's there and translate that into like the new architecture for you automatically so we need kind of this compatibility layer in between but that is built in so we can just use microsoft dot maui dot controls dot compatibility there we go um so now this brings in the compatibility stuff and kind of like the last thing we need is then um the compatibility stuff also is like you know a little bit platform dependent so we also have like the compatibility for android right here right so that brings in kind of like all the the android specific bits here so there is one other thing because it still doesn't know my label renderer here so i'm going to use this thing and replace the old namespace right here so then it should know that one as well and i can remove all these bits and then there's one thing it doesn't recognize which is the label render so let's see what's up with that uh oh actually so here you go so um i might have gotten the wrong one oh so i needed to do the platform here see it's a little bit of a challenge to get all these name spaces right here oh i need this compatibility for the export renderer okay let's just intellisense fix this so let's see it says like for android or the fast render so if you were paying attention actually let me go over to the other renderer you can see that i was using the fast renderer because so this is also a thing from the past luckily right because xamarin forms had this concept of fast renders for android which were a bit optimized to render faster because there were some performance issues with that um for don and maui that all is fixed but a thing that you need to note is if you're using the fast renderer here if you're using a custom render for that fast renderer you also want to use that compatibility for that same fast renderer here so if we go here to the intellisense you can see we have like using maui controls compatibility platform android or android.fastrender so let's do that and if we bring in that then boom all the squigglies are gone and we can just use that now the last thing already the last thing we're almost already done is this assembly thing so it's kind of a technical thing but i think most of you just added this because you had to right so you would add this and it would pick up on the renders it would pick up on your application and what this does is it says export this renderer and it's going to render labels and it's going to use this my label renderer that i have here to render these labels that i've specified here but what this does is actually at kind of run time it scans all these assemblies for these tags and that is a really slow process so we don't want to do that anymore we can't we we can get rid of this so oh so actually now a couple of these usings are then also obsolete so boom i can remove those maybe because it still knows the export render maybe it even still works but if you want to get a little bit of performance gain here as well just remove that tag and we go into our solution explorer and this time we go to our startup cs which is new in dot net maui applications and we can hear say somewhere in this chain use dotnet maui app and i'm gonna say configure maui handlers there we go configure maui handlers and what we need to do in there is say handlers we have to put that in here as a lambda expression a couple of curly braces here and then we can we we have to kind of like do it with this with if and we have the android here you can also specify android for a specific version but i think there's also like the generic android one so we can detect if we're running on the android platform and of course the end if right here and now we have like this code is only going to be run for android right because everything is in a single project so we kind of need to differentiate how to um have specific code for android or ios you can do this in a different way if you want to know how please let me know in the comments and i'll be sure to make a video on that as well because there is another way where you can like more cleanly separate everything in separate files but for now i'm going to use these compiler hints as they call them and then you can say handlers dot add compatibility render or compatibility renderer so you can add more um in one go but i'm just gonna have this one here so add compatibility render and i can say for type of you have to do that kind of like the same thing type of label so it's going to render for the labels right here and what i'm going to do is say type of i have to specify the renderer so this is kind of like what you would do for like the export renderer for the assembly level right so i'm going to say here maui custom render sample dot it should come up here um dot what is it dot android where is where is this thing uh platforms not android okay here we go so let me just copy this one boom and it should be here my label renderer there we go now it knows about it so there we go um add this render i think i got all the closing brackets here so and this is all you need to do add compatibility render and now i should be able to just run this again on my android emulator and we didn't change any functional code in our renderer and i can just restart my maui application and we will see that there is an error that's interesting so what is this error the type or namespace label could not be found oh of course so i need to now also have this label in here so what i probably want to do is using microsoft.maui.controls and now it also knows about my label so let's just rerun this again and it will actually show up for my label now again um i think if i remember correctly from like visual studio for mac you could say oh maybe i can do it like this there we go so i say android boom and i switch to the android target and now you can see that it actually gives me this quick lease and also probably better intellisense so i should have done this before it still doesn't know about the label is that correct i think it's still building so i think it's actually going to come up here in a moment and show you these nice labels with a light green background here we go the application is coming back up and yes there we go so you can see it messes a little with maybe some other things this is probably because mostly some layout stuff that's going on with don and maui which is still in the preview bits as we're running this but you can see that it actually applies these light green layout backgrounds to all of our stuff right here so i didn't touch any code that is really functional inside of this custom renderer but it can be used with just a couple of lines of code change in your.net maui app as well now like i said if you have like an ios render as well you would basically like copy this thing of course copy the the ios render do kind of the same thing and then we would have like another block here with if you probably have the same thing for ios there we go and we can just add this compatibility render with like the name for the ios one right and then it will also work on ios so that is how you can reuse your custom renderers without any change for dotnet maui and make that transition to a dot and maui app much much easier if you're doing this for the first time it might take a little bit getting used to with the new name spaces and all the new things going on here but you know i think if you have done a couple then it should be much much easier i also linked a repository down below in the video description by javier who is actually on the.net maui team and he's providing all kinds of samples from converting your custom renders to handlers using your custom renderers in a.net maui app converting your effects behaviors kind of like all the conversion scenarios that you would might need from xamarin forms to dotnet maui so go check that out and i will be making videos on each one of them so don't worry if you like to watch the videos more than actually reading yourself so this is pretty cool right you can just use that custom render in dot net maui without too much hassle which will make your transition much much easier from xamarin form sudan and maui just have that list of things in there with a compatibility renderer and as you go convert your renderers to handlers which will be another video probably let me know down in the video in the comments not the video description if you want to see that and you can one by one convert those renderers and get the log out of there in your startup cs and whenever they're all gone then suddenly have a.net maui native app so how cool is that thank you so much for watching this video please click that like button if you've actually liked this video subscribe to my channel if you haven't already done so and i'll be seeing you for my next video keep coding

Channel: Gerald Versluis

Views: 7,026

Keywords: .net maui, dotnet maui, .net 6 maui, .net 6, .net maui preview, .net 6 maui preview, .net maui example, Xamarin.Forms, xamarin forms custom renderer, xamarin forms renderers, custom renderer xamarin forms, Custom Renderer .net maui, Xamarin Forms Renderer in .NET MAUI, .net maui tutorial, .net maui preview 6, .net multi-platform app ui (maui), xamarin forms, xamarin forms 5, custom renderer xamarin forms example, custom renderer in xamarin forms, xamarin forms 101

Id: _EKznvARe8o

Length: 17min 58sec (1078 seconds)

Published: Thu Jul 22 2021