WPF Types of Binding in XAML

 in WPF  tagged data / binding / one / two / way / WPF Data Binding by
This entry is part 7 of 7 in the series WPF Data Binding

WPF Data Binding

DataBinding allows the flow of data between UI and business model. Any modification done on data in your business model after binding is done, will automatically reflect in the UI, and vice versa. This post is based on an article over at C# Corner called DataBinding In WPF. There are four types.

  • OneWay
  • TwoWay
  • OneWayToSource
  • OneTime

One Way XAML

view source
print?
1<Window x:Class="DataBindingCSharpCorner1Way.MainWindow"
2        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6        xmlns:local="clr-namespace:DataBindingCSharpCorner1Way"
7        mc:Ignorable="d"
8        Title="DataBindingCSharpCorner1Way" Height="150" Width="370">
9    <Grid>
10        <Grid.RowDefinitions>
11            <RowDefinition Height="Auto" />
12            <RowDefinition Height="Auto" />
13            <RowDefinition Height="Auto" />
14            <RowDefinition Height="*" />
15        </Grid.RowDefinitions>
16        <Grid.ColumnDefinitions>
17            <ColumnDefinition Width="Auto" />
18            <ColumnDefinition Width="200" />
19        </Grid.ColumnDefinitions>
20        <Label Name="nameLabel" Margin="2">_Name:</Label>
21        <TextBox Name="nameText" Grid.Column="1" Margin="2" Text="{Binding FirstName, Mode=OneWay}" />
22        <Label Name="titleLabel" Margin="2" Grid.Row="1">_Title:</Label>
23        <TextBox Name="titleText" Grid.Column="1" Grid.Row="1" Margin="2" Text="{Binding Title, Mode=OneWay}" />
24        <StackPanel Grid.Row="2" Grid.ColumnSpan="2">
25            <Button Content="_Show..." Click="Button_Click" />
26        </StackPanel>
27        <TextBlock Grid.Row="3" Grid.ColumnSpan="2">This is Mode=OneWay. </TextBlock>
28    </Grid>
29</Window>

Below is the code-behind.

view source
print?
1using System.Windows;
2namespace DataBindingCSharpCorner1Way
3{
4    public partial class MainWindow : Window
5    {
6        Employee employee = new Employee
7        {
8            EmployeeNumber = "217",
9            FirstName = "Bob",
10            LastName = "Roberts",
11            Title = "Bobbie",
12            Department = "Investigations"
13        };
14        public MainWindow()
15        {
16            InitializeComponent();
17            this.DataContext = employee;
18        }
19        private void Button_Click(object sender, RoutedEventArgs e)
20        {
21            string message = employee.FirstName + " is a " + employee.Title;
22            MessageBox.Show(message, "One Way");
23        }
24        public class Employee
25        {
26            public string EmployeeNumber { get; set; }
27            public string FirstName { get; set; }
28            public string LastName { get; set; }
29            public string Title { get; set; }
30            public string Department { get; set; }
31        };
32    }
33}

Two Way XAML

With Two-Way the user is able to enter in their own text and when they click the Show button they see a message box with their own text in it.

view source
print?
1<Window x:Class="DataBindingCSharpCorner2Way.MainWindow"
2        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6        xmlns:local="clr-namespace:DataBindingCSharpCorner2Way"
7        mc:Ignorable="d"
8        WindowStartupLocation="CenterScreen"
9        Title="DataBindingCSharpCorner2Way" Height="150" Width="370">
10    <Grid>
11        <Grid.RowDefinitions>
12            <RowDefinition Height="Auto" />
13            <RowDefinition Height="Auto" />
14            <RowDefinition Height="*" />
15        </Grid.RowDefinitions>
16        <Grid.ColumnDefinitions>
17            <ColumnDefinition Width="Auto" />
18            <ColumnDefinition Width="200" />
19        </Grid.ColumnDefinitions>
20        <Label Name="nameLabel" Margin="2">_Name:</Label>
21        <TextBox Name="nameText" Grid.Column="1" Margin="2" Text="{Binding FirstName, Mode = TwoWay}" />
22        <Label Name="titleLabel" Margin="2" Grid.Row="1">_Title:</Label>
23        <TextBox Name="titleText" Grid.Column="1" Grid.Row="1" Margin="2" Text="{Binding Title, Mode = TwoWay}" />
24        <StackPanel Grid.Row="2" Grid.ColumnSpan="2">
25            <Button Content="_Show..." Click="Button_Click" />
26        </StackPanel>
27    </Grid>
28</Window>

Below is the C#.

view source
print?
1using System.Windows;
2namespace DataBindingCSharpCorner2Way
3{
4    public partial class MainWindow : Window
5    {
6        Employee employee = new Employee
7        {
8            EmployeeNumber = "217",
9            FirstName = "Bob",
10            LastName = "Roberts",
11            Title = "Bobbie",
12            Department = "Investigations"
13        };
14        public MainWindow()
15        {
16            InitializeComponent();
17            this.DataContext = employee;
18        }
19        private void Button_Click(object sender, RoutedEventArgs e)
20        {
21            string message = employee.FirstName + " is a " + employee.Title;
22            MessageBox.Show(message, "Two Way");
23        }
24        public class Employee
25        {
26            public string EmployeeNumber { get; set; }
27            public string FirstName { get; set; }
28            public string LastName { get; set; }
29            public string Title { get; set; }
30            public string Department { get; set; }
31        };
32    }
33}
Series Navigation<< WPF DataContext StaticResource