Wpf Datacontext And Bindingcontext Complete Guide

Step 1: Create a WPF Application

First, create a new WPF application in Visual Studio.

File > New Project

• Select WPF App (.NET Framework)
• Enter the desired project name (e.g., WpfDataBindingExample)
• Click Create

Step 2: Create a Data Model

Create a simple data model that you will bind to your UI controls.

1. Right-click on the WpfDataBindingExample project in the Solution Explorer.
2. Add a new class file (e.g., Person.cs).

// Person.cs
using System.ComponentModel;

namespace WpfDataBindingExample
{
    public class Person : INotifyPropertyChanged
    {
        private string name;
        private int age;

        public string Name
        {
            get { return name; }
            set
            {
                if (name != value)
                {
                    name = value;
                    OnPropertyChanged(nameof(Name));
                }
            }
        }

        public int Age
        {
            get { return age; }
            set
            {
                if (age != value)
                {
                    age = value;
                    OnPropertyChanged(nameof(Age));
                }
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

This class implements INotifyPropertyChanged, which notifies any bindings that the property values have changed.

Step 3: Create the ViewModel

Create a ViewModel class that contains the instance of the Person model and provides properties and commands for the view to bind to.

1. Right-click on the WpfDataBindingExample project in the Solution Explorer.
2. Add a new class file (e.g., MainViewModel.cs).

// MainViewModel.cs
using System.Windows.Input;
using System.Windows;

namespace WpfDataBindingExample
{
    public class MainViewModel
    {
        private Person currentPerson;

        public Person CurrentPerson
        {
            get { return currentPerson; }
            set { currentPerson = value; }
        }

        public ICommand UpdatePersonCommand { get; }

        public MainViewModel()
        {
            CurrentPerson = new Person { Name = "John Doe", Age = 30 };
            UpdatePersonCommand = new RelayCommand(UpdatePerson);
        }

        private void UpdatePerson(object obj)
        {
            MessageBox.Show($"Updated Person: {CurrentPerson.Name}, {CurrentPerson.Age}");
        }
    }

    // RelayCommand.cs - A simple implementation of ICommand to handle commands
    public class RelayCommand : ICommand
    {
        private readonly Action<object> _execute;
        private readonly Predicate<object>? _canExecute;

        public RelayCommand(Action<object> execute, Predicate<object>? canExecute = null)
        {
            _execute = execute ?? throw new ArgumentNullException(nameof(execute));
            _canExecute = canExecute;
        }

        public bool CanExecute(object? parameter)
        {
            return _canExecute == null || _canExecute(parameter);
        }

        public void Execute(object? parameter)
        {
            _execute(parameter);
        }

        public event EventHandler? CanExecuteChanged
        {
            add => CommandManager.RequerySuggested += value;
            remove => CommandManager.RequerySuggested -= value;
        }
    }
}

Step 4: Set the DataContext in MainWindow.xaml.cs

The DataContext of your XAML controls should be set to an instance of the ViewModel. This is done typically in the code-behind file of the main window.

Open MainWindow.xaml.cs and modify it as follows:

// MainWindow.xaml.cs
using System.Windows;

namespace WpfDataBindingExample
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new MainViewModel();
        }
    }
}

Step 5: Create the UI Elements and Bind Them

Now, let’s create a simple UI to show bindings in action. Modify the MainWindow.xaml as follows:

<!-- MainWindow.xaml -->
<Window x:Class="WpfDataBindingExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="250" Width="500">

    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Row="0" Grid.Column="0" Text="Name:" VerticalAlignment="Center" Margin="5"/>
        <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding CurrentPerson.Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="5"/>

        <TextBlock Grid.Row="1" Grid.Column="0" Text="Age:" VerticalAlignment="Center" Margin="5"/>
        <TextBox Grid.Row="1" Grid.Column="1" Text="{Binding CurrentPerson.Age, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Margin="5"/>

        <Button Grid.Row="2" Grid.ColumnSpan="2" Content="Update Person" Margin="5"
                Command="{Binding UpdatePersonCommand}"
                HorizontalAlignment="Center"/>
    </Grid>
</Window>

Explanation

• DataContext: The DataContext of the Window is set to an instance of MainViewModel.

• Data Bindings:

  • {Binding CurrentPerson.Name}: Two-way binds the TextBox to the Name property of the CurrentPerson. It updates the TextBox whenever Name changes and vice versa.
  • {Binding CurrentPerson.Age}: Similarly, binds the TextBox to the Age property of the CurrentPerson.

• UpdateSourceTrigger: This is set to PropertyChanged so the source (ViewModel) property is updated every time the text in the input field changes.

• Commands: The Button has its Command bound to UpdatePersonCommand in the ViewModel, and the UpdatePerson method is called when the button is clicked.

Running the Application

Run the application. You should see a TextBox for entering a name and another for entering an age. When you type into these text boxes and click the "Update Person" button, a message box will display the updated person information.

Further Reading

• WPF Data Binding Overview
• MVVM Tutorial in WPF