Link a Windows Forms Control to an Object: Data Binding

Recently, i have been working on this project called EasyCRM. It’s an ASP.NET MVC 2 web application that offers functionalities to manage customer relationship . Anyway, in my application, i had several forms, to create/edit contacts,  accounst, opportunities, tasks, etc. In the form that created a contact for instance, i could attached each of his fields, to the corresponding properties of an  object of my class ‘Contact’. For example, a html input of type ‘text’ was associated to the property ‘FirstName’ of the ‘Contact’ object. When submitting the form, the ASP.NET MVC framework automatically set the value of the property ‘FirstName’ to whatever contained  the input field. So in my response method, i could directly retrieved the  whole filled-in object, instead of fetching each field individually. I was very amazed by this feature, that saved me so much time. So, i asked myself whether the same thing existed for Windows Form Controls too.  The answer fortunately is yes! it’s called Data Binding.

What is data binding in Windows Forms?

As said on the official MSDN page,

Data binding in Windows Forms gives you the means to display and make changes to information from a data source in controls on the form. You can bind to both traditional data sources as well as almost any structure that contains data.

A data source here, as you may imagine, is where the data comes from. It can be a table in your database, an array, a collection of values, or a single object.

Types of  Data Bindings

There are two kind of data bindings: Simple and Complex Data Bindings.

• Simple Data Binding

This is the type of binding typical for controls such as a TextBox control or Label control, which are controls that typically only displays a single value.

Data sources can be direct properties of a class, or even a nested properties.

• Complex Data Binding

Complex binding is also called list-based binding. Examples of controls that support complex binding are the DataGridView, ListBox, and ComboBox controls.

To simplify data binding, Windows Forms enables to bind a data source to the BindingSource component and then bind controls to the BindingSource. It can be used in simple or complex binding scenarios. In either case, the BindingSource acts as an intermediary between the data source and bound controls providing change notification currency management and other services like adding new item, moving to the next/previous item of the data source (in case of complex data binding), etc .

So the correct schemas should be the followings:

Show Time: Using Data Binding in Visual Studio

Now that we have understood what data binding is, let us create a simple Windows Forms project to see how to put it in use.

Step 1: Creating the project

We will need two things: a form with some fields, and a class whose properties will be bounded to those fields. I kind of like my ‘Contact’ example, so let’s go ahead with it !

ContactForm.cs

Contact.cs

public class Contact
{
    public string FirstName     { get; set; }
    public string LastName      { get; set; }
    public string Email         { get; set; }
    public bool   IsReliable    { get; set; }
}

Step 2: Linking the Controls to the Binding Source of  ‘Contact’  Class

Now we are going to bind each control of the form to the corresponding property of the ‘Contact’ class.

1. Select a control, for example the TextBox control that will hold the ‘FirstName’ property of the ‘Contact’ object.

2. In the Properties Window, expand the ‘DataBindings’ node and click on the icon next to the field ‘Advanced’.

3. In the following window, expand the ‘Binding’ combo box. This combo box displays all BindingSource components available. As we haven’t added any binding source yet, the list is empty. So click on ‘Add Project Data Source’.

4. In the next window, set the data source type to ‘Object’, click on ‘Next’ and Select the ‘Contact’ class, then hit the ‘Finish’ button.

This has created a new BindingSource component named by default contactBindingSource ( you can rename it if you want).

5. Back to the Step 3. The ‘Binding’ combo box now contains our contactBindingSource. Expand it, choose the property ‘FirstName’, and validate.

Note: The ‘Properties’ ListBox in the left, allows you to choose which property of the control will be bound to the property of the binding data source. By default, the preselected value is the main property of the control: for e.g. ‘Text’ for a TextBox control, ‘CheckState’ for CheckBox or RadioButton controls, etc.

6. That’s it! The ‘FirstName’ property of the class ‘Contact’ is now bound to the ‘FirstName’ TextBox control. Repeat the steps 1, 2, 5 for the others controls.

Step 3: Linking the ‘Contact’ Binding Source to  a ‘Contact’ Data Source

Last step, we need to tell to the contactBindingSource component where the data come from, i.e. we need to set his ‘DataSource’ property .

You can do that anywhere you want in your code. For this example, i have chosen to set it in the form’s  Load Event.

1. From the designer, double click on the ‘ContactForm’. This, should create a [chsarp]private void ContactForm_Load(object sender, EventArgs e)[/csharp] method in the ContactForm.cs file.

2. Add these lines inside the method:

private void ContactForm_Load(object sender, EventArgs e)
{
     this.contactBindingSource.DataSource = _contact;
}

3. Declare a member of type ‘Contact’ named _contact in your ‘ContactForm’ class, and initialize it inside the constructor, it as such:

public ContactForm()
{
    InitializeComponent();
    _contact = new Contact()
                    {
                        FirstName = "Mike",
                        LastName = "Hammer",
                        Email = "mike@example.com",
                        IsReliable = true
                    };
}

Note: I take advantage of a great “syntactic sugar” language feature called “object Initializers” that allows me to create objects this way.

4. Now, Let’s run this code:

Voila!  isn’t this great?
Now any changes made to the controls are immediately reflected to the contact object, and vice versa.

Happy coding folks!