Create Custom Controls using BindableProperty for Xamarin.Forms

you've asked for it and here it is a video on how to implement bindable properties so that you can create those custom controls that you've always wanted in this video we're going to learn what bindable properties can do for you and how to implement them it's a little bit of magic it's a little bit of you know just typing copy and pasting but i don't worry i'll show you how to do it so you know to the batmobile so here we see just a file new xamarin forms project this is the template that you get out of the box when you start a new project in visual studio for mac 2019 or visual studio 2019 on windows and as always let's just start first with the title because we are going to talk about bindable is this going to fit properties sample is this going to fit well it just makes it two lines okay i'll take it and what we're going to do is create our own custom control basically and we are going to implement bindable properties on that so that you can make them reusable and apply all those data binding magic on that whenever you are using mvvm so i'm going to remove everything here let's just do this and i'm going to well let's just save this first and hot reload will make sure that it's all gone and what we're going to do then is i'm going to go into the solution and in my shared project because all this you know custom control bindable properties is all something that works on the examined forms level so there is no specific code needed for ios or android so i'm showing you this on ios but this will work on android out of the box as well so i'm going to add a new file here and i'm going to choose a forms content view example i like to do things in example you can do it all in code if that's what you want as well if you want to model your ui in code that's perfectly fine i won't judge you for it only a little bit um but i like to do an example so my custom control here we go and click new and it will create us a new example file and and of course the code behind as well so let's just first go to the example actually so this gives me a couple of errors probably because i'm doing this while the application is running so don't worry about that i don't like this content thing here but what i am going to add is just a simple stack layout uh with two labels but this can be anything right because this is your custom control um so you can create like your control with images and and sliders and things and switches and you know what gradients gradients are always good so you can create this great custom control that you want to reuse and i'm not going to focus on how to use all that because that's probably something that you already know i'm just going to show you how to implement bindable properties on this and the rest to create that actual awesome control that is up to you if you do create an awesome control then please let me know in the comments i'm happy to look at those because i love some custom controls all right so i'm going to give this a little name here so this is going to be a title and i'm going to also like you know font size is going to be the actual title and this is just going to be a name so that i can reach it from my code behind and this is going to be the description so there we go this is this is the easy part we have just created our layout in example and this is what we can use now let's go to our code behind where we are going to implement the actual bindable properties so bear with me this is going to be a little bit of typing but as i do i will explain some things to you so this is going to be a public static whoops read only bindable property by double property there we go and i'm going to name this one title text property there we go and we're going to say here bindableproperty.create so there's a couple of other things here too if you're interested in that like create attached then please let me know in the comments or create read only that's another one let me know in the comments i will do a follow-up video on this one but for now we're just going to focus on the plain old bindable property and we're going to do a create and this you can see here this needs a well it is mostly optional parameters so this can take a bunch of parameters the first one is going to be the property name and you need to have like a backing normal property for your bindable property so what we're going to do is just create a public string title let's just call it title text to stay in line you don't actually have to do that but you know it's just well actually i no you don't have to do that because you're going to have to uh specify the name here right and i'm going to use the name of here uh whoops name of uh title text so you know whenever we change the property name then uh the compiler will warn us instead of using magic strings you can also put a string in there but i like this way of doing things and the next one that we need to do is the return type so there we are going to say type of string because you know this has to be the same type as the type of your backing property this is the the type that we want to put in in our bindable property and that we're going to use there and what do we want more we are going to have to declare the declaring type so that's going to be the type that is declaring this bindable property so this is going to be my custom control this is always going to be the control that you are defining this bindable property in these are some things that are needed to you know implement these bindable properties because what's actually happening here is that whenever you are going to use this bindable property and you set this title techno actually when you set the regular title text property it will store the value in the title text property so the bindable property but you still want to be able to use the title text as a regular property as well so there's a little bit of magic going on here and that's why it needs all these values but you know i'm going to talk you through it so don't worry just breathe breathe we can do this okay i think this is uh most of the stuff that should be in here so the rest is like optional as you can see by the the square brackets but i'm going to use a couple of them anyway so whoops let's just do a comma and let's say default value so this is the way to assign something to a specific parameter so they don't have to be in order i can just say okay i want to pick one of these names put a colon in there and you can specify the value afterwards so the default value is going to be either this one or you can say string dot empty so that's going to be the default value for this if it's not assigned a value it will return this default value for us what next so the binding mode default binding mode so i have been talking about default binding mode or binding modes in another video about the binding tips and tricks that video should appear on your screen right now or you know find it in the video description and make sure to watch that for a little bit more information about the binding mode so this is just a label so i'm going to set this binding mode to one way which is also the default for this uh property but just so you know you can set that to anything else if that's what you want so you can see a couple of other things here you can have something that validates the value first so that's kind of like a event that's going off to validate the value so you can check the value that is coming in from the value that is bound to this field and then you can maybe return something like hey this is not valid and the user can well the developer can use that to you know update the ui that maybe the value that you're assigning to it is not valid the other things are property changed property changing and a couple of those things so um go see that in documentation the link to the documentation is also in the video description the one last thing that i'm going to implement here is the property changed so we also have like the property changed events in here and i'm going to say title text property changed and i'm going to let intellisense generate something for me here so there we go private static because you know this is also static and you can see it takes like three parameters so this is the bindable the bindable object that's just going to be the my custom control and then we have an object old value and new values that's the old value that is is right now and the new value that is coming in that it will be changing to so what we're going to do here is uh we have to cast this because you know it's all kind of generic at this level so we are going to first get our control here which is going to be our my custom control because that is the thing that is invoking this property changed and that's going to be the bindable and then in that control we are going to say control dot what did i call it title text so here's our title text field so this refers to my label that i've defined oh i did so i didn't shouldn't do the title text this is the label that i've defined here so this is going to be title uh whoops and title.txt because you know a label has a text property and we're going to set the new value to string because you know we know it's a string coming in if you're using other types then make sure to cast that or do whatever you want with it to you know set this right property of the control that you're targeting to the value that you're doing here i'm just using strings now uh to be sure that nothing goes wrong let's just add the null check here so that whenever this happens to be null that that happens during initialization with example sometimes that this this doesn't break but this should apply like this value to our title text so there's one thing i still need to change which is in this property the backing property basically because our content view at some level in the inheritance things we have a method that is called let's see i have to convert this to a proper get and set there we go and um so somewhere in the content view we have like a method that is the uh whoops return dot get value whoops get value here we go and we can do this for a bindable property so it will get the value from that bindable property and we can return that as the value so let's do that title text property here we go and that has to be a string so we're just going to do the two string here again maybe add that that null check so we're sure that nothing breaks and for the set we're going to do that too so we're going to do the set value and that is going to set a value to our bindable property so you know whenever we set something directly to this property then that will update both these fields so that's going to be great and this is going to be the title text property again and what we're going to do in here is the value it doesn't need any casting because you know that will sort itself out and i think what this also does is like you know notify the ui whenever a new change comes up so that the ui will update accordingly so now to make it also work for like the other property because you know imagine that this is maybe not a label but a image control and you want to set the source so you know you have a nice control that shows an a label and an image so you can update that as well in this case it's just going to be like another text that we're going to show here so i can basically just copy this this is always a little bit tricky with um binding properties because bindable properties because you know it's very easy to forget one of these identifiers here and [Music] then it will hook into the wrong property so we're going to rename this all to description text description text description text property description text property description text property changed i'm going to see if i can do this quickly for you so you're not just seeing me copying pasting here here we go and the last thing that i need to do is then not control.title but control dot description dot text is going to be the new value so now our custom control is ready to go uh let's implement it in our main page i'm going to stop this from running right now and what i'm going to do here is say my custom whoops my custom control there we go and i'm going to let intellisense fix this xmlns here so what you need to do whenever something is in a different namespace you will have to add like this xml namespace and let's just call this sample and not something really long and it will import like this namespace where our control lives and we can just use this short notation here so this is going to be sample my custom control and here you will see that we suddenly have a title text which is our new property and i can here just both do a a value like this maybe something like my channel and then for my second one the description i'm going to do a binding so i can say binding and let's just call this my description there we go and close this one so now of course we need something as a binding context which has a property of my description so if you're kind of new to like the binding and and that kind of stuff uh please check out my other videos on binding which will hopefully make it a little bit more clear i'm going to assume you have a little bit of knowledge on on what the data binding is and how to use it so i'm going to skip over that for now a little bit go check out my other videos and so what we're going to do my description i'm just going to create a property here which is a public string my description gets set this has to be a property very important and i made the title say my channel and the description will be whoops description else it will go wrong uh did you subscribe yet so you know something very random maybe something you want to do right now um and then we need to set our binding context to this so it will use uh this like the main page as our binding context and then it will pick up on this property right here and use whatever is in that property for you know the value in our description text so let's save all of these and run our sample application and you can't see it but i have my fingers crossed right here and hope that this will work so here we go our application is coming up and there we go boom so there you see our custom control which has like my title uh my channel did you subscribe yet i hope you did because this video is awesome we just implemented our first custom control with a bindable property i hope you find this useful and as i said please let me know if you create any cool controls yourself i'll be happy to see them let me know in the comments if you have any questions or you want under follow-up videos on this now you know how to implement these uh bindable properties all by yourself and how was that there's a couple of things you should know right but it wasn't too bad so now you know how to implement the bindable properties all by yourself and create those custom controls or you know there's probably some other use cases that you can do something useful with this so go out let me know in the comments what you're creating with this and i hope you will tune in for my next video don't forget to like this one subscribe to my channel and see you next time you

Channel: Gerald Versluis

Views: 6,769

Keywords: xamarin forms, data binding, custom controls, bindable property, xamarin forms mvvm, xamarin forms bindableproperty, custom control xamarin forms, custom control xamarin, xamarin forms custom control binding, xamarin forms create custom control, bindable property xamarin forms, xamarin bindable properties, xamarin forms tutorial, xamarin, xamarin forms ui design, xamarin forms 101, Xamarin.Forms 101, Xamarin 101, xamarin tutorial

Id: cbmoaD-PDtA

Length: 17min 48sec (1068 seconds)

Published: Thu Nov 05 2020