Porting your Xamarin.Forms Custom Renderer to .NET MAUI Handler - XamExpertDay 2021

let's talk about how we can port our sunray farms coastal hangar to our dot net maui handler uh this presentation will be more like live encode but i have some a few slides here to you know do some class so if i have time introduce myself right so let's move on so let's think uh let's talk first about what is the.net maui i'm pretty sure that most of you already know one of the things that.net maui is but the net model is a one thing more than just a ui framework and random munich also answered the question for us on a tweet so dotnet maui has two parts and we have that ui framework that we will use to build our amazing mob applications that will be evolution of the summary forms and we can do that using xaml and will be mvvm friendly but dot net maui is also a handwritten game what that means that means like if you want to create your own framework and you don't need that you don't want to handle uh how you do the bridge between your sharing code your abstraction control and your nativity contrast you can use the.net maui in game to do that so he mentioned a sample here like on the headers you have an id button because the inter dot net mouse builds on interfaces so that interface i button will become a ui button if you are using an ios platform for example if this is not very clear for you right now don't be worried i will show that will be clear in the next slides because we will talk about the headers and about the android's architecture all right so the headers architecture is not more not unless they're not involving the architecture of the summary forms so we have here the old way to do handlers so we have our entry handler here and think the hendry as a bridge between your shared control that in this case will be the xamarin pharmacy entry that code that culture that uh we use on the xml side and the shared code side and and the entry header will be the handler itself will be that bridge between this charity control and the platform specific control all right so in this case here if you are talking about ios i believe this will be a ui text review is the the entry contract there in a tv control and do the header you do the bridge between that charging code but since we don't use interface series we use a concrete class it's kind of hard to to make customizations so let's jump to the new way the dot net in my handwritten way so we have interface here dot net interface the ih interface and that inter interface is what the entry handlers knows and we will use it to to construct our nativity control so the handler years in the theoretical way is the same thing the hindering the reform center is so it is a bridge between our native control and our shared control and we can implement that interface and create our own control so in the case of the.net maui we will have a maui entry control but remember that the.net maui is also a handwritten game so since we have this interface here we can use any kind of entry that we want in other uh ui frameworks so for example here i can have a commenting entry and the comment will be the end view framework for the dot net monitor so if you like the interview you can use that we can have a fabulous entry you can have a reactive entry and all those frameworks on the zwift frameworks we will use the same entry handler for the.net malware that means that will you use the the henry engineer of the.net model and in the future if you have a new way to a new pattern a new way to build mobile applications you can create that ui framework you can create your own ui framework and don't need to care about the the native implementation of the that thing you can use the dot net now i just care about the shared layer so why i'm saying that because when when you look to the net more code on the library code you will see a lot of interfaces so the controls will be built on based on interface and that is fine and that will be the correct way for libraries but when you're talking about our mobile application maybe we don't need that flexibility you know we don't need that to use the interface we can use that concrete type and that will be good as well because that control should be used just for our mobile application so let's see this in action so uh i choose uh a hundred that was built by my good friend yoni on his duolingo cloning app so uh he made a clone of the dueling application and our own summary forms and the hender that will be ported will be this horizontal progress bar here and i will show you the hand working and why i choose this render so let me share my my mobile device here so as you can see a little in a few seconds on the screen i'm not sure if you are seeing this the oh yeah i believe that now you are working not worse i will be switching between windows here uh so i have here my web application run and i have this this progress bar here at the bottom and if i press that button you can see that my value change my progress value change and the color change so this is my custom handler there and i will show you the custom hinge on my summary forms uh project and after that we will jump to the dot.net maui project and do that migration ourselves so here we are so i have let me stop the the debugging here session so it's nothing you know different that you already know so we have here the let me increase this one a little bit so we have it here the shared quadro that we here for the view we have a cup of bindable properties there amazing awesome and on our platform specifically we have the the android itself with the expert hindrance we have the elements change override methods there when you create an instance initialize our custom control and we have our own element property changed method where we do the the logic when any of those properties change change its values and here we have helper methods to to get the drawable and and put the color on our background and our track color there and also to change the progress so if you see here we're using variable researches so we have here oops two uh xaml uh dendrite files and that is just shapes so this we have this particularity here because we need to handle those android resources and for ios one we have the oops ios header as well and since ios doesn't have the progress bar control itself the way that the only wanted to to do this uh his uh duolingo clone he built uh he built a way to draw that that progress bar so here we have his code and when he draw it and and for the shared code area on the zeno part that is not too fancy we just uh imported this email name space of that control as you can see here and use that control okay anything new here everything you already know this is our daily basis of the mobile applications should build the custom handlers so now let me share my visual studio 2022 and let's start supporting uh this handler to a handler so let me organize here just okay so you are seeing my screen and let's do that so first of all i already created some folders here so i will show you at the end another way to to organize your custom controls okay but right now i just create a controls folder here on the shared layer and inside the platforms folders and the ios and the drive platforms because i just started those two platforms i created the controls folder there as well in case of the android since i have those zeno files i needed to create the drawable folder here because it's not on the defaulting plate so you just do right click here add and do uh add a new folder there and that will do the job for you all right so so yeah let's let's start with that so the first thing that you do i will create a new class here and i you call it as horizontal progress bar and i will just copy and paste that value the that same control that i have on my summary forms project so uh let this rest just in a little bit okay take your time and boom paste it here exactly the same i don't change anything yet and if i do ctrl dots here i will import the namespace so basically i just need to change some namespaces because now i don't use the summary forms in any space anymore i use the the.net maui 1 and i will bring my dot net maui graphics here and also be aware because uh all the summary forms we will have the color dot transparent on the xamarin forms if you want to sorry on the dot net maui if you want to use that predefined color you should do them in plural so will be callers.transparent and boom everything works everything builds let me adjust that because i am a tabby person so okay pretty easy all right so let's do now let's create our handler so the header will be a lazy person so let me copy this name here and let me do that again [Applause] and let me call this as handler so the handler will be like uh that thing that will connect our shared control to our nativity control okay so i just need to change this to partial one because uh we want to implement this in other other platforms so this will be partial right uh because of the multi-target approach so remember that and don't be worried the visual studio will be a little bit crazy here because uh this is the student review and that will be that probably will last in some spaces but okay everything good they also maybe need to close and restart the visual studio but you know preview preview live leave it on the edge so first of all we need to create our mappers so uh let's create our method here and our mapper will ask for two two two values here so let me just make the using here okay okay so it's happy now so let's see what this asks for me so it asks us a virtual view and the native in the sorry interview handler so my virtual view will be my shared control in that case will be my horizontal progress bar control and my handler will be this guy here so just copy and paste and this will complain because it's daddy will say they're not inherited but you know don't worry about it and i will do just colleges of matter and i will do new and this is a shark line so i just just i just need to do new because it's already know that will be this type here and this will complain because it's saying uh i'm not sure if you guys can see it but it's saying that uh this handler does not inherit you from from uh oh sorry a lot of clicks missed click sears and not the header phone i element handler but this is not an issue right now because we will do that on the native code right so right now we need to create our appropriate changes here so the way to do that uh the property marker is not then a dictionary of string and actions so this string could be our property name that we want to change so here let's do the progress one and audio calendar has map progress and i will do also the name of here for my broad progress caller and i will do map progress follower and also name of horizontal progress bar dot track cover and map track cover so those will be my methods i don't create them yet so let's create that for android first but first we need to to have our zemo files there on the on the drawable folder so let's create both of those envelopes so i'll choose data here i choose the zendo file here and let's create that one let me grab that content so just copy and paste and let's go to the track bar one data zeno file and just grab that code and you don't need to care about the uh the property office you know the build the action here will be none but don't worry about that the dotnet mobility hood will take care of that for you so you don't need to care about that so with that let's create our horizontal progress bar handler but for the android uh platform so while you create my handler there and you do this a partial class because you have the same name and be careful here since we are in different folders and this is a partial class you need to make sure that you are on the same name namespace so i you go to my handler and i copy this namespace here and i paste here so with that we are almost completed here we need just to take care about some imports and we need to enter from the view handler and the view handler came from huh you will not help me alright so let me drink those using statements right here and let's see if the visual studio will be happy now not yet but no worries so we need our horizontal progress bar here and this is the charity culture and we need a native view control so the native view will be the progress bar and that lives on the let visual studio things a little bit come on bubbly you can do this yeah on android widget name space so i have that control here and i have my handler here now so the first thing that we need to do you see that is not squiggles here but if you go here you see a bunch of squiggles because of this way of the multitargeting the visual studio can be a little bit confused but you can see here that uh just telling me that the horizontal progress behind it doesn't implement the abstract member so i need to do this right here on the other right side so i will do my override and i will override my create native view so this is the method that i will create many tv view you know this is kind of the ole changing method on the summary form site so let's do our native view and let's instantiate our progress bar here this will be our android progress bar so i need to pass my context uh i pass no here because i don't have any special attributes and the style for this will be what is the name resource attributes maybe whoops attribute and horizontal blue progress bar is slightly horizontal so this will make sure that my progress bar will be horizontal so let me break the line here whoops and i will return this 18 view of course i could just return this statement but if you went to the book having a local variable there will be better for us to test so we also have our uh connect handler method so this is the method uh that we want to use when we were to initialize our control so like if you if you want to assign some events or you know do some listeners or services this is the place to do that and when you want to clean up your handball handlers you can do disconnect the handler so when you subscribe your events and everything else so i will just cop some code here to you don't see me uh doing the the initialize thing and we will create these methods right in the field right so don't don't worry about this thing here but uh this is just me doing the initial work all right so uh instantiating my values and my colors there so we need to create those mappers here so let's do a control dot and let visual studio help you because this we just will this will be the way that we will create those mapping progresses and this will be my handler and this will be my view so this will be my shared view right my horizontal progress by my sharing the control and this will be my handle here passing right here so for this i i like to use the dot national way to go that is just you know creating uh extension methods so i'll do native view and on activity i can create an extension method here so since this is the progress i will use the update progress value and i will pass my view dot progress right here all right and this method doesn't exist yet so let's create that class and that method so inside the ctrl i will create our class called uh progress bar expansions this will be statsky and i will do public keys that we void what is the name that i'm using update progress value and this progress bar and let me bring the uh let me type this first in value and okay so i need to bring my using statements for the android project so i will do this and now i will go to my summary forms project and i can copy and paste a little bit of code right so let's go there and for changing the the value i have on my summary forms project uh a method there that you take care about it are you in portuguese as local function and are you call my native view dot set progress and are you calling this local function asking the value and i will set this to true because i want to to do animation when i when i movement the uh when i movement the progress bar there right so okay this is one and let's do four others as well so let me copy this guy here and this will be called the map progress bar color so we have a different name and let me bring that oh not yet let's finish this and after that we'll bring everything that you need so i need to copy this one more time and change the name to map track colors so pretty easy pretty straightforward so far and for those i will not be typing i just copy and paste that from my existing code there and i need to bring some uh some using statement so let me just change it to this progress bar here there's two nature so i want to change my color to my sharpie color to be a native color one so i have this extension to native but i need to bring my user statement for that so let's do that for everyone and there is something uh funny here because about namespaces that is the let's see if i can reproduce that again okay and as you can see here the android.graph.color is not being found and not sure why but if i you know change the name space here to be just xamarin.expert.platform you know change removing that android namespace there i have this working and one thing that we should need to care about about the colors is this here because the colors now can't be new so on the dot net maui chorus are no more strokes so they are classes and we need to care about new levels here so i'll just check for new so if my color is new i will just return and i will do nothing um okay don't care about this this should be working let me see just double check if the names are correctly yeah i think so so when we build maybe that uh fix the this stuff there for us so let me bring that namespace for my native player for my extensions and boom our handler is working pretty straightforward all right so let's just review this real quickly so create my nativity control and initialize my tv control with the default values if there is default values on my demo control there and i create my mappers right here and my mappers is calling uh my my extension method just to change the values all right so and those are my extension methods here that will do the job so moving back here we need to need to fix some things because they are asking about uh about a constructor so you need to have a constructor here and we need to provide our mapper to the base type so i will do that base and i will pass them up here here and i will do another constructor as well because empty constructor and if we do not provide any mapping we will use this mapping here and let's pay attention something because we need to pass also uh we can pass here another mapper that will be the view mapper so view mapper here what is this so since my control inherits from the view control so let's move back here we have this view control here and it's a good pattern to pass the view mapper here because it's already mapped you know because the network we already built these mappers for background color for uh height requests and all of those methods so this will be amazing to to use here you know this is amazing because we don't need to implement that by ourselves just pass here and this mapping handler will inherit that that already mappers and you can just add your own mappers here all right so this will probably complain because uh we needed to implement on the ios side so let's go to the ios one and on ios let me create my uh my control there all right so i uh horizontal progress bar ios and i believe that i have yeah i have a snippet here that i created that ios draw control all right so yeah we are good to go i did some changes from the uh ionic android because the ios one uh doesn't respond to the property change so i just made uh this this change here to make that work properly with property change so let's create our view handler horizontal progress bar handler on android site and on oh sorry on the ios side and you can just copy and paste this guy here but instead of using the progress bar because ios doesn't have one because it has one we will use our own here and let me bring my handlers to bring that and remember that we needed to change the namespace to be the same one so let's just change the namespace here and give some time to the visual studio think because there's a lot of work and we'll be good to change the in space of this guy here to you know make everything easier for us so the same steps here i needed to create my uh my negative view sometimes visual studio doesn't complete this oh come on all right oh boy okay intellisense is not helping me so let's do the old way so now how it works so here i needed to create my native viewer right so let's do that so i will have my virtual view here that will be my property virtual view that will be my shared control so if you see here it's my horizontal progress bar there is that my shared control layer so nothing fancy from here [Music] uh and i will create my new horizontal progress bar ios and i will pass my request i need to pass my color and this will be my track color and i needed to convert that to cg follower so let's come on visual studio okay i will do that in the second [Music] so choose cj color as well and finally our progress value there so i the way that was built i need this to pass that from from the constructor so i will return in our main native view as we did for android one alright so let's see if i have a snippet oh i have a one for the android handy huh so i forgot completely about that so let's win time here so i did the same thing there i just i grabbed my two cg colors that way you don't need to be typing that again because it'll be very repetitive uh the way that i did for ios was a little bit different from android but this is intentional to give you more uh more more ideas on how you can implement that so on the right side i used extension methods to do that because that was needed more work and here i did the in the proper basis so i just used the set of the properties and i set that values to the specific properties inside my native view and my name tv view is that horizontal progress bar that you only just created and here i need to check for now because you know you cannot have a office operator when you are talking about prop setting property values so just do the new check here and we are good to go and i believe with that we are pretty much done so let me see here and hey our mapper now is happy because we have that implemented on both platforms android and ios so let's move to the part that we will use our our control on our maui application so this will be like the same thing that we do for the summary forms so we need to create our network name space there and we need to import our charity control and i will just copy and paste something that i have here but first let me just round this with a vertical stack layout okay and i will paste my control here instead of control should be local and let's do something fancy here on the bottom because i am a very lazy person so i just binding my control to this progress bar control here and the text of my code my button will be the progress value all right so same thing that you have been doing with summary forms when you want to do binding context between xenocontrols and let's add here our super fancy logic i believe that is the code behind this method no progress back view so i have this here every time that i click my button i will grab a handle value for my progress and my track color will grab also a handle value of rgb and we will change its color all right so let's using.net the maui.graphics there and i believe that you are good to go let's see if everything works so let's debug this and let's reverse what you're thinking let me take a look on the chat see if you have any questions so far and oh hello a lot of people from brazil hello hello everyone good to see everyone here kind of felipe [Music] vladimir and yeah a lot of good persons here glad to see everyone i don't think there were any um questions yet a lot of people who seem happy to see you probably friends from brazil so that's good we were just chatting about maybe creating a pedro fan club so who knows so yeah you know guys build takes sometimes so let's uh reviewing the handler practice during the build process so i just created my uh my view control and this exactly i copied based off the zen reforms one because this is a mdvm friendly a control and i want to use nvme frame and mvvm on the dot.net maui so i just got this one if you are building a plugin or a nougat package you know a country that will be used in a lot of place uh will be great to have some interfaces here so you could define a uh horizontal progress bar interface and put those properties here as on inside your interface all right and we have our handler here and again if you are working on a nuget packaging instead of having that control itself you can have your interface here on the shared layer and why this is important uh one simple is is about the comet framework all right and the comment framework is a mvvo framework is an interview flavor of the.net maui and that is classes is doing and place did something amazing that he created some source generators to generate the comment controls and it will use the interface to do that so except for the community to keep that maui we will build our headers our controls there like pop-up cultures camera review controls use interfaces that means that if you if you will use the comment comment framework you can use the community.maui and can use our controls on the comment because since we're doing interface the class the source generator that transmit can generate the controls for the comment to use the interfaces and can use the handler in-game to handle our controls there our tv contours there so you know this is very very powerful you create your contour just to us you know maintain that just to us and you can use across uh dotnet maui flavors but since this is just a hand a handler for my mobile application and i will not use that in the package or something like that i will be cool i will be you know take it easy and just use my concrete type there so so yeah it's taking a while not sure why that is taking a while yesterday everything was fast and furious and now it's you know a little sleepy maybe and if i do not have too much time i have already that control here on my mobile application and now you just show that that way you can you can win some time [Music] i believe that i have more six minutes right so yeah about six six minutes oh it was building but it was not showing the progress huh exceeding me so i will not show the uh the application yet because that will crash and i wanted to crash because maybe you see this error and here i can tell you what you need to do to fix that that crash all right so yeah let's wait out this time just to see a crash message here and boom we have this exception and uh maybe uh that can pop up a messages telling handler not found for view horizontal progress bar and what that means that means that i forgot to hash there my handler and how will you do that uh you remember that the summary form center you use that assembly interface but on the dot net mode you just use extension methods here so how you kind of the configuring handlers and i will pass delegate there and here i will just add a handler method and here i need to pass the type of my uh my shared view so it's horizontal progress bar control and i need to pass my handler type so i beat my horizontal progress by hand and boom and i will start without the debugging because maybe that will be faster so let's wait a little bit more so let me share my mobile device here that way you can see the application running in the fuse moment i believe okay something okay something wrong just happened so let me let me open that again because my screenshot is not working anymore oh now we are talking and let me show that again so yeah i have this beautiful control here on the dot net mouse side and voila it's working amazing so yeah that is pretty much it it's not very hard to do and before i finish let just me show you the other way that you can create your contours all right so let me pop up that my visual studio again [Music] so on the visual studio here you can see that i have just one folder called controls that is on the shared layer so i do not use in the platforms anymore and i have all my handlers and charity control right here and i use dot android and that ios to split between the platform specifics and but sadly there is not uh built in on the template.net multiplayer please don't let my team add this to the template but if you want to go this way and i prefer to go this way i believe that it's easier having all the control to get enhancers together in the same folder you just need to add those item groups conditions here to make that work right and basically you can go to the.net tomorrow project and go to the new spec folder and find the file for the mood target and copy and paste and you know developers way to do the things copy and paste is my way to program and that is just you know uh make sure that you every fold every file that has got android in the name will compile it just for android platform and every file that has ios dot ios in the name or an inside ios folder will compile it just for ios and we have that files uh in the shared layer outside the platforms folder and everything together so this is the second way to do right and that is pretty much it

Channel: Gerald Versluis

Views: 2,571

Keywords: .net maui, dotnet maui, .net maui example, .net 6, .net 6 maui, xamarin forms 5, xamarin forms, .net maui tutorial, dotnet maui tutorial, dotnet maui getting started, custom renderer, custom renderer xamarin forms, dotnet 6 maui, .NET MAUI Handler, maui handlers, .net maui handlers, xamexpertday, Xamarin Forms 5, .net 6.0 maui, custom renderer xamarin

Id: bWdilOWAEt4

Length: 42min 0sec (2520 seconds)

Published: Sun Oct 03 2021