The Basics of Data Binding in WPF

in this video we talk about data binding data binding is a system in WPF that allows you to create a connection between the user interface and the underlying data this connection ensures that the changes made in the data are automatically reflected in the user interface and vice versa this is useful because it helps to keep the user interface and the data in sync which can make it easier to create and maintain complex applications let's go to visual studio and explore the basics of data binding and see how we can use data binding in WPF projects so what I have here in Visual Studio is a WPF project setup let's start by examining what we have defined in the UI here so I have a grid split in half by defining two columns here the column on the left contains some labels as well as the column on the right so I'll be simply using this UI to demonstrate data binding let's go to the main window.cs file now to fully understand data binding we need to understand the features that WPF provides for us to be able to implement data binding and one of the most noted features is the data context now the data context is simply a property that we can use to specify the source of the data when we are trying to perform data binding now every element or every class in WPF that inherits from the framework element contains a property called the data context so what we can do here is we can get the instance of this window by using the this keyword then we can examine the property here so we have the data context property here if I navigate to the definition of this property we can see it's simply an object and it's defined in the framework element class so as long as a class inherits from this class it contains that property so this property allows us to specify the source of the data within a given context so in this case this will be within the context of the window now if we go to the main window.xaml file here we have a grid and the grid contains the name my grid so we can access the reference of that grid through the name so say my grid and we can also see it contains the data context property so we use this property to set the object which will be the default source of the data during data binding so what I'll do is I'll create a class that we're going to use to perform the data binding so right here in the data bindings basics namespace or define a class and I'll call this class person and this class is going to contain some properties the first one will be of the type string and I'll simply give it a property name of name simply copy the other property will be email then address and finally number like a phone number I'll set this to an integer and I'll set it to a nullable type okay so I'm going to add a Constructor so c t o r then I'll click tab twice then we have the Constructor defined okay so there we have it so we have the percent class so what I'll do here is I'm going to create an instance of the person class right within the main Windows Constructor so I'll say person and I'll say underscore person is equals to a new instance of the percent class now I'm going to set the properties so starting with a name as a name is equal to Jamie then I'll set the email at one two three dot net so I'll do the same for the address just set it to Wall Street and finally the number one two three four five okay all right so we have an instance of the person class so how do we perform data binding to the UI here to display the details that we have in the object here so we can do this by simply specifying the data context on the window and we can access it using this keyword so this window then we set the data context object to this instance of person so simply copy so by doing that we now have access to the person's data right here in the main window so the data context of this window here is set to person so how is that possible well this window here and this window here are actually one class why is that because this is defined as a partial class now a partial class is simply a class split into two files so one part of the class is defined in C sharp chord here and the other is defined in XML so when compiling this application this XML code is actually going to be turned into C sharp chord so we're actually within the same class so the data context object is available here so here I have the labels on the right side so I'm going to get rid of the name here so instead of username I'm going to use a binding so I'll simply use the binding attribute so I'll say binding then I'm just going to bind it to a property and this property is the name property here so I'll copy this and I'll paste it here so we have name I'll do the same for the address so I'll say binding the same for the email and the same for the number all right so now here we see we do not have data because this will be resolved at runtime so let's go ahead and run the application all right and there we have it so we have the data displayed here so we have Jamie Wall Street and the email as well so this data is coming from an object that we have defined in the code and we are able to see it in the UI all right so I'll go ahead and close this now we can also specify the mode of The Binding so here on the mod we can either set it to One Time One Way two-way binding so by default the mode is set to a two-way binding which means if we had to make the changes in the UI then those changes would reflect in the code behind in the object that we created now the label control is a read-only control which means we can't actually edit the data here sort of these I'll simply change this to a text box and I'll change that to the text property so I'll do the same for the rest all right so there we have it so we have some text blocks here so what I'll do is around the application we have an error so simply get rid of this comma here then we run the application again all right so the application is up and running and we can see the text boxes defined here so we can actually edit the data all right so what I'm going to do is I'm going to space these out by changing the margin so I'll change this to 80. all right so that's it so to allow some space okay then what I'm going to do for the text boxes is I'm going to define a height in this case I'll Define it to 25 for each all right just to allow some space and also to find the width to 100 pixels all right so there we had it let's run the application okay so here we can see that we have the names and this is the data that we defined in the object that we created so I can actually make changes here and those changes would reflect in the object so how do we see those changes reflect so what I'm going to do is I'm going to create a button here so when we click the button we're going to get the object and display it inside the message box to see if the changes will be made so close this then I'll add the button so I'll set the content property of the button to show then I'm going to add a click event handler so say click then add an event handler all right so we have a click event handler so here I'll go to the main window then we can see we have a Handler here so what I'll do is I'll simply say message box then show then here we can specify the text that we want to show so what I'll simply do is I'm going to use string interpolation so I'm going to add the dollar sign at the beginning curly braces so simply say show the person's name now we can't access this object because it's defined within the Constructor which means we can only Define we can only access it if we are calling a method from within here so what I'm going to do is I'll get this object and make it a global object by placing it at the class level okay so we have person available here so simply say person then we can get the name so this time I'm only going to display the name nothing else all right so let's go ahead and run the application now here we mentioned that by default The Binding mode is set to a binding which means if I change the name here the name in the object which is the person object will also be changed so this time let's try mic and here's my button sorry I minimized so we have mic so if I show we see that the name is Mike now we're getting this name from the person object if I say okay then let me change it to Dave and we see it's changed to Dave all right so let's go ahead and close all right so there we have it so what we can do is we can also set the mode to one way so simply say mode then set it to one way so I'll copy this all right so I'll go ahead and run the application and here I'll expand this to expose the button so if I change the name from Jamie to Mike and try to show we see it still shows Jamie that's because this data wasn't reflected or wasn't synchronized the other way so that's one way binding demonstrated so go ahead and close this and we can see that there are also other types of bindings like one-time binding so this type of binding is used when you're trying to initialize the UI so it only happens once so get rid of that so what I'm going to demonstrate now is the ability to bind between elements for instance I can bind between a text box and a label so I can exchange information between these two elements so what I'm going to do is I'm going to add a rectangle to the UI so I'll simply say rectangle so set the height to a 100 and the width to 100 . then I'll set the field to a shade of Orange alright so we have a rectangle here so our degrees are simply move it downwards there then I'll change this button to a checkbox so set its content property to just set it to button all right so that we can see we have something there and I'll move it further to the right so set the margin to 200. okay so what I'll be doing is I'll be binding the property from this to this here so what I'm going to do is I'll give this a name so simply say name then I'll say C box So that's its name now I'm going to bind it to the visibility property so I'll say visibility now we can see that the visibility property is defined as an enum so we have collapse hidden and visible so I'll try to bind it to the checked property of this checkbox is checked if I set this to true by clicking this if I set this to true I would like to bind it to the visibility so I would like this to disappear or appear now the thing is that this is defined as an innum and this is defined as a Boolean so these properties are not compatible WPF provides a way to solve this problem where we're trying to bind to incompatible types and this is by using value converters so here if I specify a binding so I'll say binding then I'll specify the source of the binding this time I'm going to use the element name so I'll say C box so by doing so we are overriding the default source which is the data context Source this time we're getting this from this box element here because we specified the name so what I'm going to do now is I can specify the path so this time I'm going to specify the path as the is checked property so say is checked all right now if we try to run the application this won't work why because this is a Boolean and the visibility is an enum type so we need to use what is called a value converter and right here in The Binding we can specify a converter so we can specify a converter that converts a Boolean into visibility so to do that right here in the xaml I'm going to declare a resource so in the window I'm going to say window then resources then within this window resource I'm going to declare a converter and this is the visibility to Boolean converter so here we have it Boolean to visibility converter so this is already defined in.net so we don't really need to Define our own converter so specify a key and this key is going to be my converter all right so we have a Boolean to visibility converter and we gave it a name a key so here in The Binding we can now specify that converter so I'll simply say my in fact what I'll do is I'll simply copy this and paste it here probably there's an exception so when binding to the converter we need to specify a static resource so in this case we need to specify that and then we Define the converter all right and let's go ahead and run the application okay I'm going to resize all right so we have the button here and right now we haven't clicked it so the visibility is set to Hidden why that's because it's binding to this buttons is checked property so if I click we see it appear if I click it disappears so this is a binding happening all right so that's it for the basics of data binding in WPF remember to give this video a thumbs up and subscribe to this channel if you find this content useful I'll see you in the next one

Channel: Tactic Devs

Views: 13,521

Keywords: data binding, what is data binding, wpf, c#, MVVM, mvvm wpf c# tutorial, mvvm wpf c#, mvvm wpf tutorial, how to Code

Id: hZmpa53b5R8

Length: 20min 52sec (1252 seconds)

Published: Fri Apr 07 2023