Data Binding allows the front-end and back-end properties to be linked together, enabling real-time updates.

For example:

Front-end XAML

<StackPanel>
    <TextBox x:Name="txtBox" BorderBrush="Black" Margin="5"/>
    <Button Margin="5" Content="Click" Click="Button_Click"/>
</StackPanel>

Back-end

First, declare a class for binding data that inherits from INotifyPropertyChanged.

public class Student : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private string name;

    public string Name
    {
        get { return name; }
        set
        {
            name = value;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Name)));
        }
    }
}

Then declare the binding in the window constructor:

private Student student;

public MainWindow()
{
    InitializeComponent();
    student = new Student();
    Binding binding = new Binding();
    binding.Source = student;
    binding.Path = new PropertyPath("Name");
    BindingOperations.SetBinding(txtBox, TextBox.TextProperty, binding);
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    student.Name += "Hello ";
}

Another Example: Binding Slider Value to TextBox

XAML:

<StackPanel>
    <TextBox x:Name="txtBox" BorderBrush="Black" Margin="5" Text="{Binding Value, ElementName=slider}"/>
    <Slider x:Name="slider" Maximum="100" Minimum="0" Margin="5"/>
</StackPanel>

Equivalent C# code:

Binding binding = new Binding("Value") { Source = this.slider };
txtBox.SetBinding(TextBox.TextProperty, binding);

Binding with Indexer Access

Access a specific character of another TextBox's text:

<StackPanel>
    <TextBox x:Name="sourceTextBox" BorderBrush="Black" Margin="5" Text="ABCDEFG"/>
    <TextBox x:Name="targetTextBox" BorderBrush="Black" Margin="5" Text="{Binding Path=Text[3], ElementName=sourceTextBox, Mode=OneWay}"/>
</StackPanel>

This displays the character at index 3 (i.e., 'D'). Mode=OneWay indicates one-way binding.

Binding Using DataContext

Declare a class to hold data:

public class MyStudent
{
    public string Name { get; set; }
    public int Age { get; set; }
}

Front-end XAML:

<StackPanel>
    <StackPanel.DataContext>
        <local:MyStudent Name="Adu" Age="28"/>
    </StackPanel.DataContext>
    <TextBox x:Name="txtName" BorderBrush="Black" Margin="5" Text="{Binding Name}"/>
    <TextBox x:Name="txtAge" BorderBrush="Black" Margin="5" Text="{Binding Age}"/>
</StackPanel>

Binding Selected Item of ListBox

XAML:

<StackPanel Background="LightBlue">
    <TextBlock FontWeight="Bold" Text="Student Name" Margin="5"/>
    <TextBox x:Name="txtStuName" Margin="5"/>
    <TextBlock FontWeight="Bold" Text="Student List" Margin="5"/>
    <ListBox x:Name="listBoxStu" Margin="5" Height="80"/>
</StackPanel>

Back-end:

List<MyStudent> students = new List<MyStudent>()
{
    new MyStudent { Name = "Jordan", Age = 60 },
    new MyStudent { Name = "James", Age = 38 },
    new MyStudent { Name = "Kobe", Age = 46 }
};

listBoxStu.ItemsSource = students;
listBoxStu.DisplayMemberPath = "Name";

Binding binding = new Binding("SelectedItem.Name") { Source = listBoxStu };
txtStuName.SetBinding(TextBox.TextProperty, binding);

Result:

Binding with ADO.NET DataTable

DataTable dt = GetStudents();
listBoxStu.ItemsSource = dt.DefaultView;
listBoxStu.DisplayMemberPath = "Name";

For DataTable, using ListView is common:

XAML:

<ListView x:Name="listViewStu" Margin="5" Height="80">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="StuID" Width="60" DisplayMemberBinding="{Binding StuID}"/>
            <GridViewColumn Header="Name" Width="60" DisplayMemberBinding="{Binding Name}"/>
            <GridViewColumn Header="Gender" Width="60" DisplayMemberBinding="{Binding Gender}"/>
        </GridView>
    </ListView.View>
</ListView>
<Button Content="Load" Height="30" Margin="5" Click="Button_Click"/>

Back-end click event:

private void Button_Click(object sender, RoutedEventArgs e)
{
    DataTable dt = GetStudents();
    listViewStu.ItemsSource = dt.DefaultView;
}

Result: