WPF Types of Binding in XAML


This entry is part 7 of 7 in the series 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

<Window x:Class="DataBindingCSharpCorner1Way.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DataBindingCSharpCorner1Way"
        mc:Ignorable="d"
        Title="DataBindingCSharpCorner1Way" Height="150" Width="370">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>
        <Label Name="nameLabel" Margin="2">_Name:</Label>
        <TextBox Name="nameText" Grid.Column="1" Margin="2" Text="{Binding FirstName, Mode=OneWay}" />
        <Label Name="titleLabel" Margin="2" Grid.Row="1">_Title:</Label>
        <TextBox Name="titleText" Grid.Column="1" Grid.Row="1" Margin="2" Text="{Binding Title, Mode=OneWay}" />
        <StackPanel Grid.Row="2" Grid.ColumnSpan="2">
            <Button Content="_Show..." Click="Button_Click" />
        </StackPanel>
        <TextBlock Grid.Row="3" Grid.ColumnSpan="2">This is Mode=OneWay. </TextBlock>
    </Grid>
</Window>

Below is the code-behind.

using System.Windows;
namespace DataBindingCSharpCorner1Way
{
    public partial class MainWindow : Window
    {
        Employee employee = new Employee
        {
            EmployeeNumber = "217",
            FirstName = "Bob",
            LastName = "Roberts",
            Title = "Bobbie",
            Department = "Investigations"
        };
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = employee;
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            string message = employee.FirstName + " is a " + employee.Title;
            MessageBox.Show(message, "One Way");
        }
        public class Employee
        {
            public string EmployeeNumber { get; set; }
            public string FirstName { get; set; }
            public string LastName { get; set; }
            public string Title { get; set; }
            public string Department { get; set; }
        };
    }
}

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.

<Window x:Class="DataBindingCSharpCorner2Way.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DataBindingCSharpCorner2Way"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="DataBindingCSharpCorner2Way" Height="150" Width="370">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="200" />
        </Grid.ColumnDefinitions>
        <Label Name="nameLabel" Margin="2">_Name:</Label>
        <TextBox Name="nameText" Grid.Column="1" Margin="2" Text="{Binding FirstName, Mode = TwoWay}" />
        <Label Name="titleLabel" Margin="2" Grid.Row="1">_Title:</Label>
        <TextBox Name="titleText" Grid.Column="1" Grid.Row="1" Margin="2" Text="{Binding Title, Mode = TwoWay}" />
        <StackPanel Grid.Row="2" Grid.ColumnSpan="2">
            <Button Content="_Show..." Click="Button_Click" />
        </StackPanel>
    </Grid>
</Window>

Below is the C#.

using System.Windows;
namespace DataBindingCSharpCorner2Way
{
    public partial class MainWindow : Window
    {
        Employee employee = new Employee
        {
            EmployeeNumber = "217",
            FirstName = "Bob",
            LastName = "Roberts",
            Title = "Bobbie",
            Department = "Investigations"
        };
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = employee;
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            string message = employee.FirstName + " is a " + employee.Title;
            MessageBox.Show(message, "Two Way");
        }
        public class Employee
        {
            public string EmployeeNumber { get; set; }
            public string FirstName { get; set; }
            public string LastName { get; set; }
            public string Title { get; set; }
            public string Department { get; set; }
        };
    }
}
Series Navigation<< WPF DataContext StaticResource