Build Your Own Custom Value Converter For WPF Binding

when we're building WPF applications we have to use bindings a lot of the time in our zaml and that means that we're using value converters a lot of the time as well but what happens when you need to deviate from all of the built-in value converters and do something a little bit more custom hi my name is Nick centino and I'm a principal software engineering manager at Microsoft in this video we're going to look at making our own I value converter and that way we're able to change from some type that's on our data context into something that we want to have on our dependency property for our controls in the previous video that I made in this series which you can find up here I was walking through how we could use the built-in value converters to do some of that binding for us but in this video we're going to make our very own so if that sounds interesting remember to subscribe to the channel and check out that pin comment for my courses on dome train with that said let's jump over to visual studio and make our own I value converter on my screen is a very simple WPF application I have a main window and then it has a grid with a label on it and that label is currently binding to fancy Tex text and fancy text is a property that we have on the main window view model which I'm setting to this data context here on line 18 fancy text is a string as you can see it says fancy right here with two exclamation marks right so if we have fancy text which is a string if I go back to the examl here content is also something that can take in a string that way this binding just works directly we don't have to do any type of conversion but if we wanted to if we wanted to go take a number instead right right so if I wanted to go take cool level instead of fancy text and I wanted to map that so basically if I put cool number here if I wanted to have this work and even change some of the text so if I go back into here if I wanted it to be more than just this maybe I want the label to say something like the cool level is followed by the number maybe do some rounding on those digits whatever we want right we want to go from a double or a floating point number to some string how would we do that we're dealing with a number here and back over here we want to make sure that we have a string to go into our content what can we do there is no built-in value converter for this type of thing so we have to go make our own I've set up NYX cool converter which we're going to jump over to right now and you can see that Nick's cool converter is an IAL converter so that's going to be the first requirement that we need to do and value converters have two methods on them because we're only going to be doing a one-way binding we're not going to focus on convert back so you can ignore this one for now but if you're curious about how convert back works it's literally just the opposite of what we're about to go Implement if we go look at convert let's go walk through the parameters first so we can understand what's going on we're going to have the value that's passed in you'll notice that the value passed in is of type object but also convert returns an object that's because this interface ivalue converter let lets us map between whatever types we want but it does mean that we need to go make either assumptions or explicitly check the types that are coming in so in this case I know nyx's cool converter is only going to get used with something that I can cast to a double so line 15 here if we had other types that we needed to support so say not just double maybe we needed Longs or we wanted to maybe only make this work with shorts or bites right if you needed to have specific checks or support multiple types you have to do type checking within here ours is going to be very straightforward which is why I'm not checking anything I'm just directly casting so this could totally blow up on us if someone used this value converter and we didn't have a double p in okay the next part is a target type so that's where we what we want to map to right so your return type should be something that can be assigned to this type so with the value in the Target type we know how we need to go map something but I don't even need to check the target type in this case for a simple example because I know that what I want to be able to do is go from doubles to Strings but like I said if you're building something more robust you probably want to put more checks in place and that way you can protect the users if they're using this incorrectly you can maybe even throw exceptions for them that are easy to understand or maybe have some default behavior when it's not doing what it's intended to do up to you but you probably want to have slightly better checking then no checking at all so here we're going from an object to a double with this simple cast and then I have this formatting here but I'm going to change this up because I wanted to make it look a little bit more interesting instead of just doing uh the F3 for the formatting what I want to do is use string interpolation and I want it to say the cool level is and then I want to have that value in here and co-pilot are you going to do it for me no okay I'm going to see if we can do a two digits of uh of rounding and I think it's either that or I have to do I I think this is the syntax I actually need for the string format I can never remember but we're going to find out very soon if this is what we need this is just a brief Interruption to remind you that I do have courses available on dome train focused on C so whether you're interested in getting started in C looking for a little bit more of an intermediate course focus on object-oriented programming and some async programming or are you just looking to update your refactoring skills and see some examples that we can walk through together you can go ahead and check them out by visiting the links in the description and the comment below thanks and back to the video this value converter is going from what should be a double p in and when we go to return this it's going to be a formatted string that has literally the cool level is followed by that rounded version of that number if we go back to the main window how do we use this right like we've made it but it just exists it's not being assigned or used anywhere so the way that you do that like we saw in the previous video on this I need to be able to add a converter so I type A converter and the syntax we have to use here is static because we're going to be using a static resource so now we need the static resource but we don't have one yet I have to go back up here so what we have to do is set up the window resources and this is where we're going to include the value converter that we want to work with so co-pilot is here to help me it's not quite right but it's going to give us the syntax that we need to use so you can see that it says local and then custom converter so custom converter isn't what we called it it's called Nyx cool converter right and then I need to give it a key so I'm just going to call it NYX cool converter as well so we look it up by the key so I'm going to put that down here as well so the static resource that we want is called NYX cool converter but the issue is that this thing is not in this local name space so copilot was close but not quite so if I go to use the refactoring menu we should be able to add in this missing namespace so this tool tip is completely ridiculous it's taking up my whole screen but if I preview the changes and I go apply them you can see it's going to add this namespace in here right so converters is what it's aliasing and then it's going to have WPF playground. converters and just to show you the name space we're using is WPF playground converters so going back to the zaml what do we have now well we have converters then we have nyx's cool converter and it's saying it's not found but I think if we rebuild it it should find it here we go I just had to rebuild it sometimes the code generation is a little bit stale so now it can see that NYX cool converter exists and to prove it I like pressing F12 on these things to see if it will jump to the definition and it does so that's good news so if NYX cool converter up here in the resources and then we have the usage of it down here we should be able to at this point go run this thing we have binding set to be cool number and our converter set up I'm just going to double check that I don't have any break points on this thing I do I'm going to remove it just so we can see it working and if I double check too technically I misspoke and I was just formatting this so we could just put this into here just to make it easy but I think that it would still work with object I'm not sure if it would need to be cast to double first but we want to use that anyway so let's go ahead and run this and see it work uh-oh looks like we have a bit of an issue here so I think we set up everything correctly we have The Binding in place and we have the converter but just to show you if I put a break point here and we go run it we should see that we're hitting this convert method and that's not happening and to be honest with you this wasn't planned but I think it's a good opportunity to show you how to debug this kind of stuff so the converter is set up or referencing the right converter but you can see that our convert method is never being called so that's not good so that means that our binding is broken or else this converter would go run because it needs to go run on The Binding so what what's going on here I found out that it's not cool number my crappy naming is catching up to me it's not called cool number it's actually called cool level so with cool level here now if I go run this I'm going to take out the break point because I want to show you how cool it is when it just works so if I go press play we get this nice formatted string right it says the cool level is 42.1 3 and that means this format string works properly and we have that coming out of our value converter and if you wanted to step through again you could go put this break point here and we could see that the stuff coming in here right if I hover over value it is a double the target type is just going back to object it's not really helpful for us right here the parameter is null and the culture info is going to be the current thread culture so not a whole lot of helpful information on the convert method call except the value coming in in this particular case so nothing too exciting but I wanted to show you how you can step through that to check the parameters and that is going to be the output from our cool new value converter but there is a bit of a drawback when we start working with value converters and this is a common theme that I found from working with WPF for almost a decade I don't work with WPF anymore but when I spent a lot of time working in it I was always faced with challenges that made me feel like I was fighting against the framework in this particular case we have a problem if our converters need some sort of dependencies passed into them if you want to build value converters and see how you can work with dependencies you can check out this video next thanks and I'll see you next time