DataBinding in WPF using DataContext in XAML

DataBinding in WPF using DataContext in XAML

I would like to share a very simple example of databinding in WPF using DataContext in XAML file. In this WPF databinding simple example, I have a class named EmpViewModel which has two properties EmpID and EmpName. I will bind these EmpID and EmpName properties with two textboxes in the XAML file. Following is my EmpViewModel class under SampleApplication namespace:

EmpViewModel.cs

namespace SampleApplication
{
     public class EmpViewModel
    {
        private int empID;
        public int EmpID
        {
            get
            {
                return 123;
            }
            set
            {
                empID = value;
            }
        }
        
        private string empName;
        public string EmpName
        {
            get
            {
                return "ABC";
            }
            set
            {
                empName = value;
            }
        }
    }
}

After this class, I have following XAML file(MainWindow.xaml) which contains two textboxes to which I want to bind the EmpID and EmpName properties.

MainWindow.xaml

<Window x:Class="SampleApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>       
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>
        
        <Label Grid.Row="0" Grid.Column="0" Content="ID:"/>
        <Label Grid.Row="1" Grid.Column="0" Content="Name:"/>
        <TextBox Grid.Column="1" Grid.Row="0" Text="" />
        <TextBox Grid.Column="1" Grid.Row="1" Text="" /> 
    </Grid>
</Window>

I will have to make some changes/additions to this XAML file to bind the EmpID and EmpName properties to the above textboxes. 

1. First of all, I will have to add a xaml namespace like following:

xmlns:local="clr-namespace:SampleApplication"

2. Now, I have to add DataContext:

<Window.DataContext>
<local:EmpViewModel />
</Window.DataContext>

3. Finally, I have to bind properties to the textboxes:

<TextBox Grid.Column="1" Grid.Row="0" Text="{Binding EmpID}" />
<TextBox Grid.Column="1" Grid.Row="1" Text="{Binding EmpName}" /> 

My final xaml will look like this:

MainWindow.xaml

<Window x:Class="SampleApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SampleApplication"
        Title="MainWindow" Height="350" Width="525">

   <Window.DataContext>
        <local:EmpViewModel />
    </Window.DataContext>

    <Grid>       
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>
        
        <Label Grid.Row="0" Grid.Column="0" Content="ID:"/>
        <Label Grid.Row="1" Grid.Column="0" Content="Name:"/>
        <TextBox Grid.Column="1" Grid.Row="0" Text="{Binding EmpID}" />
        <TextBox Grid.Column="1" Grid.Row="1" Text="{Binding EmpName}" /> 
    </Grid>
</Window>