WPF Value Converter Basics With BooleanToVisibilityConverter

if you're building WPF applications then there's no doubt that you've used bindings before and if you've used bindings before you've probably run into an issue where you're types don't match 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 Value converters that we can use with our bindings inside of WPF applications now this will be a very simple tutorial so if you're very familiar with how bindings and value converters work you probably don't need to watch this one unless you just want to check it out but this is intended for beginners to get started and learn all the basics about using value converters with bindings if this sounds interesting remember to subscribe to the channel and check out that pin comment for my courses on dome Trin now let's jump over to visual studio and get some value converters going to start things off I have a very simple application here and if you've been watching my other videos on WPF then this is going to look very familiar but if not you can go ahead and check out the video above and then come back to check out this one they are kind of building things in order so this will help you get started if this doesn't seem very familiar what I have on the screen is a very simple window and it's going to have a label and at the top so you can see I have a grid and then a label inside of that r at the top and this check boox what we want to be able to do is have this check boox such that when we click it it will toggle the label what I've done is I've included the binding for show Fancy text and again if you're not familiar with how bindings work go back and check that video that I linked already but I'm going to show you in just a moment that we have this show Fancy text as a property on our view model so if I go back into the main window window zaml CS you can see that this is the main window view model I'm assigning that here on the data context so that will all get configured for us but show Fancy text is going to be the property that we buy into and that means just to kind of prove it to you you can see that I have true as the default state if I go back to the main Windows AML I don't have the checkbox's check State set to true in the beginning you can see in the UI it's actually unchecked but if I go run this we should see that by default it will take that state on the Buy so show the label is checked off and it's shown but when I toggle it right we don't have anything taking place here so The Binding works on this toggle but it's not taking effect on the label so we're missing another binding what we are missing is a visibility binding that we can put onto the label so we can go look at the property called visibility here and we can go put another binding but the problem is that visibility itself is not a Bo in value so doing this right here isn't going to work visibility in WPF is not a true or a false this is what you would have in Wind forms and probably some other user interface Frameworks but visibility in WPF is actually trate which means it's not is visible like a Boolean it means visibility is visible collapsed or hidden so it can be one of three values which means a Boolean does not map directly to to this property we have a little bit of an issue we want to use this property but it's not of the right type a very common value converter that we have in C in WPF is the Boolean to visibility converter so what I'm going to do to start us off here is I'm going to introduce that and the way that that works is that we would go add converter onto here and then you need to be able to Define your converter so what we would want to be able to do is something like Boolean to visibility converter but this is not enough it's not enough because WPF and zaml in particular here doesn't know how to go find this it's like thanks for typing that but like what the heck is that right so we need to be able to give it enough context about where to find this converter there's a handful of different ways that you can do this part but what I'm going to show you is that we can go up to the main window which is what we're in I'm going to go to the resources and it's really cool because co-pilot is doing all of the work for me you can see that it's put this in here if I press tab I'll explain what this is doing in just a moment what we've been able to do and it's a little bit wrong but it you can see that it's trying to reference Boolean to visibility converter from this namespace this is the part that's wrong and then you can see that it's giving it a key called Boolean to visibility converter so when we want to go use this converter in our zaml we can give it this name and it will find it and it's going to look for this converter but I said that that this is wrong and it's wrong because this name space WPF playground converters that's not something that I have inside of my project so that converter doesn't exist there maybe we can see if the intellisense will go find it for us before we move on this is just a quick reminder that I do have a course on C refactoring available on dome train refactoring is one of the most critical skills that you can learn as a software engineer and this helps you continue to build upon applications that already exist making sure that they can scale and have sensibility I walk you through a bunch of various techniques and give you some examples that we walk through together to see how we can apply these techniques to refactor the code check out the pin comment and the links in the description to get this course now back to the video and in fact by default Boolean to visibility converter is being resolved so when I hover over this you can see system Windows controls Boolean to visibility converter and a nice little test here is if I press F12 to jump to the definition you can see that it's bringing us to a real class so this is a real built-in thing you can see that it's I value converter and then it has the logic to do the conversion so definitely a real thing we're on the right track and what I want to do just to show you that we can use a different key versus just the name here I'm going to call it cool Biz converter so we're going to use this name as the key and then I'm going to put it down here and it's still not quite right because this syntax and this is the part you have to pay attention to takes a little bit of muscle memory but you can't just put the name like this we have to basically refer to the static resources that are on this examl file so you use this syntax to say static resource and then you can see in the autocomplete cool viz converter is there so now we got this thing where we can whoa my keyboard we got this thing where we can get the visibility bound to show Fancy text but it's going to use the right converter to go from Boolean to visibility let's have a quick check here I think one more thing that we might want to explicitly say and I'm just going to separate this out onto some separate lines to hopefully make it a little bit easier to read is that we can explicitly say that we want this to be uh oneway binding so we want the visibility of the label to be read only right so the control itself is never setting the visibility on The View model but it's only reading from the vew model down here with the checkbox it's a little bit different and we could be more explicit as well but we could say binding we could do mode and we could say two-way but it doesn't really matter two-way is going to allow for the initial state to be read in it will allow for that or if something else was allowed to change that then the uh the checkbox will also update on its own but we can just do one way to source and basically make it so that the checkbox is the only thing that's going to change that state so just to call it out again this initial State won't even be read so we can just leave it like like this to quickly check where we're at we have show Fancy text we don't care about the initial State from here because I'm using one way to Source on here but when we use the checkbox it should now change show Fancy text that Boolean value it should set it to whatever the check state is and the visibility of the label should be mapped to that properly now because we are using cool viz converter which maps to up here a Boolean to visibility converter so we should be able to change booleans to visibility let's go ahead and run this we can see that by default show the label that's the check box right it's unchecked we don't see the label so the checked state is set to false but when I check it we get fancy showing up so now the check state is true and then the Boolean to visibility converter is going to change a true Boolean value to visibility which is an enum it's going to pick the visible property if we uncheck it what it's doing is still using that same value converter the check state is false so false goes into the value converter and that will map it to collapsed and that's why we actually see that it collapses the whole user interface when it's hiding the label so a very simple value converter now that's all good and well we're able to use a builtin value converter to do something that's very common in WPF actually so if you want to see how you can make your own value converters and that way you can map between different types on your view models and your control r s you can check out this video next thanks and I'll see you next time