CLR Object Binding In WPF

There are four types of binding sources in WPF, which are

CLR Objects
DependencyObject objects
ADO.NET Objects
XAML files


The objects of a CLR class are used as  binding source in data binding. When you use a CLR object as a binding source, you can use a property or indexer of the class as the binding path in data binding.

Now let us create a sample program how we can bind a CLR object to a WPF element or control.


Create a project named CLRObjectBinding. Add a new class to this project (by selecting Project -> Add class from the menu bar) named Employee.


Add the code given in the
following code snippet in the Employee class


class Employee
    {
        string name;
        int empno,empsal;
        public Employee(string name, int empno, int empsal)
        {
            this.name = name;
            this.empno = empno;
            this.empsal = empsal;
        }
        public string NameProperty
        {
            get
            {
                return name;
            }
            set
            {
                name = value;
            }
        }
        public int EmpnoProperty
        {
            get
            {
                return empno;
            }
            set
            {
                empno = value;
            }
        }
        public int EmpsalProperty
        {
            get
            {
                return empsal;
            }
            set
            {
                empsal = value;
            }
        }
    }

In the preceding code snippet, the Employee class has three variables and three public properties. These three properties are used to get and set the values of variables.


Open Window1.xaml file and replace code in the XAML view of the Window1.xaml file with the code given below.


<Window x:Class="CLRObjectBinding.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid Name="myGrid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="35*"/>
            <ColumnDefinition Width="70*"/>           
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="25*"/>
            <RowDefinition Height="25*"/>
            <RowDefinition Height="25*"/>
            <RowDefinition Height="25*"/>
            <RowDefinition Height="25*"/>
        </Grid.RowDefinitions>
        <Label Grid.ColumnSpan="2" Grid.Row="0" FontWeight="Bold" FontSize="18" HorizontalAlignment="Center">Employee Details</Label>
        <Label Grid.Column="0" Grid.Row="1" Margin="10,15,0,0">Name:</Label>
        <TextBox Name="nametext" Height="30" Grid.Column="1" Grid.Row="1" Width="150"/>
        <Label Grid.Column="0" Grid.Row="2" Margin="10,15,0,0">Emp No:</Label>
        <TextBox Name="empnotext" Height="30" Grid.Column="1" Grid.Row="2" Width="150"/>
        <Label Grid.Column="0" Grid.Row="3" Margin="10,15,0,0">Emp Salary:</Label>
        <TextBox Name="empsaltext" Height="30" Grid.Column="1" Grid.Row="3" Width="150"/>
        <Button Name="showDataButton" Content="ShowData" Height="25" Width="75" Grid.Row="4" Grid.ColumnSpan="2" Click="showDataButton_Click" />
    </Grid>
</Window>


In the preceding code snippet, the grid control named with myGrid has two columns and five rows. In the grid we placed label, text and button controls.

Open the code behind file for window1.xaml and add the following code snippet.

public partial class Window1 : Window
    {
        Employee[] myEmp = new Employee[3];
        int count;
        public Window1()
        {
            InitializeComponent();
            count = 0;
            myEmp[0] = new Employee("Anil", 001, 30000);
            myEmp[1] = new Employee("Kumar", 002, 40000);
            myEmp[2] = new Employee("Veera", 003, 50000);
            Binding nameBinding = new Binding("NameProperty");
            Binding empnoBinding = new Binding("EmpnoProperty");
            Binding empsalBinding = new Binding("EmpsalProperty");
            nametext.SetBinding(TextBox.TextProperty, nameBinding);
            empnotext.SetBinding(TextBox.TextProperty, empnoBinding);
            empsaltext.SetBinding(TextBox.TextProperty, empsalBinding);
        }

        private void showDataButton_Click(object sender, RoutedEventArgs e)
        {
            myGrid.DataContext = myEmp[count];
            ++count;
            if (count >= 3)
                showDataButton.Visibility = Visibility.Hidden;
        }
    }

The above code snippet, an array, myEmp of three objects and an int type variable, count are defined in Window1 class.

Default constructor of Window1 class initialze the count variable and three Employee objects of myEmp array. In the constructor Binding objects are defined and intializes with properties of Employee class.

The showDataButton_Click method is the click event handler for ShowData button. In this method, DataContext property of the myGrid element specifies binding source.

Conclusion

I have quite enjoyed writing this article, and I have been quite refreshed at how easy data binding in WPF

Reference

DreamTech: WPF in simple Steps