Three Data-Binding Tricks for Xamarin.Forms You Didn't Know!

this video will show you a couple of data binding tricks in example for your examine forms application i will be showing you three maybe four depending on how you count tricks that you didn't know about yet at least one of them i promise you it's going to be about data binding modes it's going to be about a string format it's going to be about fallback values so it's a lot of good stuff a lot of ground to cover so let's check it out so as usual here you can see our xamarin forms new application just a new template whenever you go into visual studio 2019 or visual studio for mac 2019 and you just go like file new forms application then this is what you'll get i've already added one thing so in our shared project right here in our solution i've added a mybinding object this can be any object and i've just created a couple of you know properties that you would normally encounter so i just have my regular string with this description which is for no reason it is have you subscribed to my channel yet so you know maybe that's something that you want to take a minute and just do right now and i have an integer which is some number uh yeah i have a double right here and i have a string again which is a image url and i've set that to null so i've already specified a couple of values of course typically whenever you work with this stuff you will have your objects and you will fill those from probably a rest service or maybe something else but you know it doesn't matter where these values come from as long as they are there and i'm just going to show you a couple of tricks with these values coming from this object i already also set um in the main page my binding context to this actual object so again typically you would maybe do this through a mvvm framework or you know i don't know some other way set your your binding context but what this does is for this entire main page it will set the my binding object to be the scope of my page basically so what i can do now is go into my main page here i'm going to remove this label here i don't really need that but i will reuse the rest of course update our header as always so let's name this binding tricks there we go save that and with the power of hot reload we already see our updates coming in here so what i can do here this label to start developing now let's just bind this simply as you would usually do so binding and i can now say like what properties did we have here in my binding object so we had the description let's do that one so i can say description there we go and whenever i save that it will show the description here like the subscribing to my channel um so you know that's that's how you would normally do the data binding nothing fancy you just bind to a property value and that's it so did you already know that this is basically a shorthand notation because actually you would have to write path is description um so you know this this describes the path to the thing that you're binding to in this case you can um like not specify the mybinding object because that is already set as a scope for the entire content page in our code behind but you can just leave the path out here and it will understand that you are trying to specify the path with this description so this is the property name that you would typically use so there's already your first trick basically boom we got that in the pocket but that's not really a trick now is it so what did we have more we also had like the sum number um so with the sum number we are not going to do anything um special to we're just going to do that um here as well remove all this text we're just going to say binding some number here we go and so you can see the number just shows up so that's the thing right so you can basically have any kind of object because if you remember correctly this is the int and not a string so whenever you use that example it will just call the two string on this property so the sum number will be the sum number dot to string and you will get the 42 here so that is something to remember it will just convert everything into a string so you can overwrite the tostring method from your object if that's what you want you could do it this way so that's something that you might want to be aware of so if we put in a comma here so did you know you can put in a comma here and you can specify some other things so we already have like the converter and converter parameter i am showing you how to work with that in another video that should come up in your screen right now or check out the links in the video description so i'm not going to go into these yet uh but you can check out the other video and see how that works uh the first thing i want to talk about is the whoops is the mode so uh here we have a mode and whenever i press enter here we could see it has a couple of options it has default it has one time one way one way to source and two way so the default is like the the default one as you might expect and the default so each property and i now i'm talking about the property of a label so the things that you can actually bind something to so in this case it's the text has a default binding mode and the default binding mode can be any of these here below and it's specified by the xamarin forms sdk so for some properties it will be one way for other properties it will be two-way i think for the most properties that you just want to set once it's just one time one way sorry so you know you could you could check out whatever the default one is and usually the default one is fine you don't need to change it uh but there are a couple of scenarios where you might want to change it so the other options here if i go from from top to bottom so one time um is like it it only reads the value one time so whenever we look at to this example right here uh there's some number um it will only read it one time so it will just see it has the value of 42 put that in our label and whenever we change the value of some number it's not going to pick up on that because we just wanted the one-time binding of course whenever you do this you want to maybe optimize your performance because whenever it doesn't have to subscribe to like changes in the values you can just do one time and that helps you gain a little bit of performance here so you know whenever you know that value is not going to change but you still want to use data binding just to use this this one time thing so one way is not one time so this will actually respond to changes but one way is like it's going from the source to the target so this is going from the source which is the sum number to the target which is text so all the changes in some number will surface in text whenever you implement the i notify property change things of course everything that's needed for data binding and updating the values that needs to be in place but whenever you do whenever some number then is updated that will show in the text property of this label or of course if you're using it for the font size or for the image source or whatever you're using it for whenever you update and you do one way it will it will update so you also have the other way around which is one way to source so maybe you have a entry control and you do not care about the value that is in some number but you do want that entry to put the value that you put in there in some number so you have let's actually let's let's type a little bit so if we have this entry and we have a text as well and we do that same binding here there we go and we do this whoops we do this and we set the mode to one way to source here we go let's get this out of here because this is causing some issues there we go so here we have the entry and you can see it doesn't show the value right so it doesn't get it from some number so if i were to do this one way it should show up there we go here you see the value right and whenever i do one way to source the only thing this will does is whenever i change something here it will put back into some number so then you can go to your code your business logic and you can do something with the new value in some number um but the that value is not shown in the ui because it's going one way to source and then finally you have like the two-way so that basically does all the things um so that actually yeah you can see that now my um some number is is updated uh so this is the actual value that it should be showing right now um and you can see that whenever i add things here and i'm going to make a little change in example and i reload it again you can see that you know the value does some updating i don't know why it doesn't update like the whole thing it should do that because what two-way does is like it updates both whenever you change something in some number from your code it will update the value in the ui but what it will also do is whenever i type something in this entry it will also update the value in some number so from the ui to the actual some number property so this goes both ways so basically your end user can change the value but you can also as the app developer can change the value from your code and and reflect that to the user so those are the different modes that you can um you can use for data binding and like i said usually the default one is fine but you might come up with scenarios where you want to do other things and now you know how to do that so if we talk a little bit about the default one if you have some like like i think the entry text actually is a two-way default binding mode because you know you want to that is something that you want to update from the code behind and also want to be updatable from the user so that might be two-way by default actually let's let's keep this in here for our example code so you could find all the code on my github repository it's linked in this video video description so here we go let's keep that in here and the other thing i want to talk about is string format so string format is really cool too you probably know it if you have been coding for a longer time so let's get this label i'm going to copy that one i don't want it to have like this big title and the padding is fine okay so save that and we should have the subscription again but i'm going to bind this one to some double so here we go and whenever we do that we now know that this is just going to call the two string so it just should show the double right but what if i want to turn this into an integer so what i can use for that is the string format and the string format is you know it just calls the tostring so you can also call the string.format basically on this so here you have to work with single quotes because else it will get confused with like the the double quotes here so single quotes and then you can also like do multiple values but i'm going to show you this with just one value so whoops you can you can specify it like this and um so this is going to be like the parameter null so the first parameter that you put in here which is going to be sum double in this case and then you put in the colon and then you can specify what the string format should be so if you want to have just one integer you can just put another zero in here and it will make it into an integer or you maybe want to also show it always with four digits so you just put in four zeros in here and it will have a couple of leading zeros so here you can see or maybe you want to show just uh one thing behind the the comma so here you go and it just shows it with one dot and it it rounds up the value or you just want to show the whole value as an actual double again and you can do that with hit this as well so for the string format there is a couple of built-in string formats that you can use i will find the link and i will put it in the video description and show it on screen to you right now so you know you can also use this for daytime formats for basically everything numbers whatever you name it and you can apply the string format to your value right here to show it a little bit nicer to your user so that is pretty cool i think so one last thing that i want to talk about is the fallbacks actually i'm going to you know do a little new thing here put in an image and the source is what you want to be doing here and i'm going to bind that whoops binding uh what did i call it again so binding image url here you go and that's a string but you can see i set the value to null and why i did that is going to be apparent in a little bit so again comma and you can specify the target null value which is really cool so whenever i do this no image is going to show up because you know the image is known so maybe that happens maybe you get from your back end a database field which specifies no and you still want to show some kind of fallback value so this doesn't just work for images it also works for text or for whatever you want to but what you can do is specify the target no value and what i'm going to do right here i'm going to copy a little url from wikipedia that i know from the top of my head of course so here we go and what this does is whenever the target value is null so mind you the the target property is found so it is actually on my binding object so the image url is there but the value is set to no then it will apply this target null value so whenever i save this now and it reloads it will see that the target is null because image url is null and then you can have some kind of fallback image in this case that sets it to this question mark so i can also do the same thing like this with a another label here so let's make this a label then make this text and then whenever i do this no image found here we go that should produce like well the same result air quotes but now it will say no image found right so this is uh the way that you uh can overcome like some fallback value whenever there is a no value you can still show something nice to to your end user and there's another one which is basically a variant of this one and that is the whoops actually let's take another image here we go not this one and this one let's copy that one again and you also have the fallback value so that is whenever you know you might have some kind of inheritance of an object and maybe a certain property might or might not be available in your in your binding context object so you know if i have my binding object and i want to maybe do a property that is called some other property and that property is not found in my binding object right so the way this binding works that's also why you don't get intellisense for the actual properties is that it will look into this object basically at runtime and it will try to see what properties are there or what isn't there and with the fallback value you can like see if that property is not there at all so that's different of it is there but it has a no value so if that property is not there at all it will do this fallback value so if we save this again we will see another question mark is coming up because it doesn't find this property at all right so that is a little bit different from the target null value but it kind of does the same thing for whenever no properties are there so these things are always kind of hard to explain through this i hope that you got something from it if you have any more questions please let me know in the comments i will make probably more videos about data binding and all this stuff because you know it's just a hard topic whenever you just start out i hope you found this tips and tricks useful and happy data binding tell me honestly did you know about any of these one of these all of them if you knew about all of them please let me know in the comments you will get the gerald sticker of expert xamarin forms magician if you didn't know about it there's no shame in that because you know the data binding stuff is hard to get your head around when you're just getting started so let me know in the comments if you want to see any more videos about specific topics around data binding or mvvm i'll be happy to explain anything to you also like this video if you liked it subscribe to my channel so you know i have your support and i can keep going and other than that i will hope to see you for my next video you

Channel: Gerald Versluis

Views: 7,115

Keywords: data binding, xamarin forms, xamarin.forms, xamarin, data binding c#, xamarin 101, xamarin.forms 101, data binding string format, data binding two way, data binding OneWay, data binding OneTime, two way data binding, data binding tutorial, data binding xaml, xamarin forms data binding, xamarin forms binding mode, xamarin forms binding, xamarin forms two way binding, data binding stringformat, string format data binding, data binding fallbackvalue, data binding targetnullvalue

Id: 5Se94j5KMhc

Length: 17min 52sec (1072 seconds)

Published: Mon Oct 26 2020