Reusable, Custom Controls in .Net Maui!

in today's video i'm going to show you how you can make your own custom drawn controls in.net maui and really make them look i guess official there's a few different ways to do this but this method i'm going to show you today i think is probably my favorite so far because it really makes it look encapsulated and you can create custom properties you can make it look however you want because it's just a drawing control so we're going to talk about that and with that let's dig in okay so the custom control that i created for my app that i'm writing is just this circular button right here you know you can you can make a button with fairly rounded corners but i didn't see a way with the built-in button class to actually make a completely circular one but anyways unimportant really the important part is i wanted to customize it myself and so i did it this way this is a drawn control meaning i'm actually using the maui.graphics library to draw the control itself using you know malware graphics and then i'm hosting that drawn canvas inside of a class and this class is called circular button the way you call it is pretty simple you first you'll create a class called your name and you know you have to give it an xml namespace so really the only way to differentiate custom ones versus built-in ones is this namespace and you'll notice you know a lot of these these are pretty basic properties that are already on a class high request which request margin all that but there's some new ones that you've probably never seen button color image that's that's built in but sort of not i'll show you a second and there's other ones as well but button color so i guess the only reason i point this out is that you can create fully customizable controls because you can you can create custom properties you can draw it the way you want it's completely customizable so i'm going to show you how i did that but this is how you you call it uh you'll notice i have a tap gesture recognizer here in the same way you would with a lot of other classes and you're just calling it just like you would and you may think wow okay that might be a lot of work but actually it's not too bad because what you do and we'll just dig right into the code is you inherit from a different you know built-in control built-in view whatever since i'm doing a drawn control i thought it made the most sense to do a graphics view and to inherit from graphics view so let me get this out of the way real quick so i created circular button class i inherited from graphics view which gives me access to you know the built-in stuff so here's a drawable you know i'm just i'm just using the graphics view drawable and that's actually what's displaying inside of the circular button view but then we've got all these other these all these other properties so the way you do custom properties inside of your control is there's it's a couple step process so the first thing you have to do is you have to create a static bindable property for that that property and the way you do that is you create it usually by kind of convention the name is the name of the thing plus the word property and you equals bindableproperty.create and this is a method inside a bindable property that basically you know you give it has a ton of different things you can pass it but i'll show you the ones i've been using which probably covers 90 of cases so the way you do that is bindableproperty.create and then you pass it the name of the property you pass it its type you pass it what the owner class is in our case that circular button and then you can pass it different other parameters for instance i have a property changed parameter so when the property changed event gets triggered this method will be called on button color changed and that's it and so that builds the static property out here okay so we got our bindable property but how do you get and set it well what you do is use a public property and you know usually the name of the property you're creating and it'll have a get and a set and you'll use this method called getvalue and set value and it does what it sounds like it gets the value of what's inside of that static property and set value will set it for the instance of the class you've got and note you're going to have to cast it etc the value you want okay and yeah i did that for a button color i did that for an image and i did that for this is visible property is visible is actually one that is already inside of view view i think it is view dot is visible and so graphics you already had it but i'm overriding it and so i did that with the new keyword just like you would the reason i did that is because i wanted to hook in here and do something specific when the on the invisible changed okay which we'll talk about in a second all right so so just to recap you create a new bindable property and you use that use the bindableproperty.create method and then you pass it these parameters again there's a ton of parameters you can pass it but in my case this and probably most cases this handles it i did that for his visible image and button color then you create public accessor properties with a get and a set in them and then you'll you know as we specified down here you also have a method that is called when property change event happens and so in those you can kind of do whatever you want i will note they are static so you have to you know you can't do this dot et cetera they don't belong to an instance of an object they belong to the bindable object that gets passed to them which is why this bindable object is passed into these methods so just note that it kind of changes the way you write the code so for instance when i change the color of a button i'm going to grab the circular button we're in itself which is called a control and i'm just doing that by casting from the bindable that gets sent i'm gonna grab the button color the got set and then i'm gonna grab the drawable from control.drawable and then i'm gonna change the button color inside the drawable and then i'm going to invalidate which is forcing it to redraw so anytime a user or not a user but anytime something goes in and changes the button color this is going to trigger and it's going to force it to redraw you have to do this because you're drawing this control and that drawn control is not going to respond to to changes unless you tell it to so any property that you want your drawn control to respond to to redraw itself you're going to have to hook it in this way you know hook it into your control from a method that is bound to on property changed so for instance let's say you had one of those linear meter that i showed a few videos ago and you wanted it bound you wanted its fill value bound to something in a view model you would have to hook that into one of these methods and change the value as that bindable property gets changed in the view model you would have to write the method itself to then recalculate and redraw it hopefully that makes it and yeah i mean honestly that's it's pretty straightforward from there the other the only other thing to mention is on invisible change the reason i overrode it is because i wanted to do a custom animation and when instead of doing the animation inside of all the code behind for the views i just moved it into here and that way anytime is visible changes i'm going to do an animation instead of just making it invisible so that's that's kind of the nice thing about these custom controls is you can really encapsulate the code itself into one place instead of rewriting this animation everywhere i wanted to use a new button for instance a new circular button so that's kind of nice and on a similar note you know that that's something in the on property change for is visible property but i also just have a public method on this control called bounce on press async and as you might imagine it's doing an animation and it's when it's pressed so instead of you know in again in every view code behind that's using these circular buttons instead of creating writing this code to do this animation i put it in a method inside the control and then i can just call that in the method or in the in the code behind for the view model itself so that's a that's a again a nicer way to not repeat yourself so that's one of the nice things about writing these custom controls and yeah so that kind of covers that part of it the actual control class itself again the way you use these is you would need to pull in your namespace you know i use avid.controls namespace so i pulled it into my xml namespace called it controls and then i come in here and i want to make a new one i just write controls colon circular button and it has all the properties of the graphics you would have but it also has any of the new ones i created so button color there and i've got it responding to a dynamic resource tertiary and again just because graphics view will take a gesture recognizer so will mine now because i just inherited you know standing on the shoulders of the graphics view giant since i was doing a drawn control i thought it made the most sense to do a graphics view if you weren't doing a drawn control you probably could do a different one like if you wanted to do i don't know a button but it had a very specific thing about it a new property or something i don't know again there's other ways to do all this stuff you can do this with handlers you can do it with you know you can change the things all kinds of different ways but in the case that you want to create a custom control because you don't like the way a certain one behaves or something like that you can do it this way but i would imagine most cases you do this you're going to do a drawn control because otherwise it would look a lot like the built-in ones i think a lot of the time i'm just going to be inheriting graphics view just because it makes the most sense the only other thing i wanted to mention about all that is when you create custom properties sometimes you're going to need to convert between them so for sorry between the types that are used when you send in a type to a property you know for instance this right here dynamic resource tertiary tertiary is a color it's a it's in my colors.xml file uh but it's converted to a string so you notice if i mouse over it says string but my button color property is a color so how are we converting from string to color well it turns out in this case it's already kind of built in but if you were doing this with types that you created or something like that you may need a a converter and i i wrote i just threw together a very exploratory one because i was messing around with them and this one is string to bull which again i think is already built in the main reason i wanted to bring this up was just to tell you that this is a thing you can do you can create converter classes which then you can call as part of this this binding here this using this kind of curly brace syntax and then it knows how it should convert how convert certain types so like string to bull there i believe there's always a convert method and a convert back method which does what you would think they would do so just to know that value converters are a thing eye value converter is a thing so if you need to know more about that because the custom control you're doing involves custom types then i would recommend looking in a value converter so you can see how you need to write them and lastly really the only other thing i wanted to mention about all this was there's a few gotchas so for instance i believe at one point i did not have this these bindable properties as static and what that meant obviously that meant my binaural property was instance of or was part of the instance of the object i kept getting weird behavior because of that for instance in this button color when i use dynamic resource it would be like hey we can't convert those types between string to color i was like okay do i need to write a value converter what's going on here it turns out i for whatever reason because it was not static it was an instance of the object itself it didn't know how to handle the conversion but the second i made that bindable property static it did know how to handle it so i'm not sure what exactly is going on there i would have to dig in a little bit to understand but dynamic resource and static resource do operate differently as mentioned in the last video so i'm sure there's some kind of built-in converter since they're already converting colors to strings and back and forth all over the place anyways but i did want to mention that just if you're getting weird behavior make sure you've got your bindable properties as static make sure you've got your these have to be static as well because they're called in here so something to think about it works a little strangely at least in my brain why a property that is sort of an instance of my object is static but it's not it's not an instance of my object it's an overall property but then this is an instance of my object i don't know at least in my brain it didn't make a ton of sense so i just wanted to point that out but generally i think that's the strat is static bindable property these are instances of your object and these are also static the on property changed methods okay yeah and that's that's kind of how you do them i think it's really it's a nice way to kind of encapsulate like i said that behavior inside of its own class and create these customized controls that you can do literally whatever you want with i mean you know the the thing i did was pretty basic just to mention i mean you know we talked about this in like the last like three videos but the drawable itself is just a straightforward eye drawable with values like you would do and you draw a circle and you do a lot of the math for a circle i'm doing an image that's what the plus sign comes from that's a customizable thing so like for instance if i click in here that's an x it's a check mark whatever and i'm doing that with this code here i'll just mention real quick that the eye image kind of framework is not implemented on windows the platform image stuff so you have to do it differently if you're going to be producing an app for windows but for doing android ios which the other stuff i'm working on then it works fine yeah that's basically dryable you could you could do anything you can draw in maui.graphics you could do a custom control for now so it's pretty cool just to show you the behavior real quick um i you know we looked at the animations i added so now when i click these uh theme buttons this since these are those custom circular buttons they kind of pop a little bit which i like i think it's it's good to give that user feedback that they actually click something so you got a little bouncy animation uh same thing here so when i click that it bounces when i click the x it bounces etc if i go into here i also added a little bounce on the frames themselves which i think does help as a user feedback thing yeah you can click that button and it bounces kind of cool so and again all that that logic is encapsulated inside of my circular button control which is nice because if i ever wanted to if i didn't like the way it bounced i could change it you know whatever and you can always still do these things inside the code behind for views too there's nothing stopping you from doing that but it's just nice to put all that code inside of its own custom method so if you would like to see any of this code we obviously went through it kind of fast but if you'd like to see it and really you know copy it whatever you want to do the code for this is in the github down below so always feel free to check that out and if for instance you need more help doing the drawable part of the custom controls i think for the most part everything else is pretty straightforward you just add on properties properties but if you don't know how you want to design the drawable itself i've got two videos specifically about maui.graphics and that library that i think they'll probably help you out so those should be on your screen right now and yeah other than that i'll talk to you next time bye

Channel: Programming With Chris

Views: 10,078

Keywords: .net maui, .net maui community, .net maui example, .net maui preview, .net maui tutorial, csharp, dotnet maui, dotnet maui getting started, dotnet maui tutorial, first net maui app, learn .net maui, learn dotnet maui, maui c# tutorial, maui for beginners, maui tutorial, what is .net maui, Custom Controls, Customized Controls In .Net Maui, Custom Controls In .Net Maui

Id: YLx2L7SXeaY

Length: 14min 9sec (849 seconds)

Published: Sat Aug 27 2022