Data Binding
In recent articles we have looked at data binding in WPF applications, using other controls or simple data objects as the source for bindings. In this article we'll expand upon this by looking at two configuration options that you can apply to your bindings. The first option allows you to control the direction of data flow between the source data and the target control. The second lets you specify when the data in the source should update after the user makes changes.
We'll need a demonstration solution for the code samples. Create a new WPF application project in Visual Studio named, "WPFBindingOptionsDemo". Once the project is ready, replace the XAML of the main window with the code below:
<Window x:Class="WPFBindingOptionsDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Binding Options Demo"
Height="235"
Width="250"
ResizeMode="NoResize">
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="24"/>
<RowDefinition Height="24"/>
<RowDefinition Height="24"/>
<RowDefinition Height="24"/>
<RowDefinition Height="24"/>
<RowDefinition Height="24"/>
<RowDefinition Height="24"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock>TwoWay</TextBlock>
<TextBox Grid.Column="1" Height="22"/>
<TextBlock Grid.Row="1">OneWay</TextBlock>
<TextBox Grid.Column="1" Grid.Row="1" Height="22"/>
<TextBlock Grid.Row="2">OneWayToSource</TextBlock>
<TextBox Grid.Column="1" Grid.Row="2" Height="22"/>
<TextBlock Grid.Row="3">OneTime</TextBlock>
<TextBox Grid.Column="1" Grid.Row="3" Height="22"/>
<TextBlock Grid.Row="4">LostFocus</TextBlock>
<TextBox Grid.Column="1" Grid.Row="4" Height="22"/>
<TextBlock Grid.Row="5">PropertyChanged</TextBlock>
<TextBox Grid.Column="1" Grid.Row="5" Height="22"/>
<TextBlock Grid.Row="6">Explicit</TextBlock>
<TextBox Name="Explicit" Grid.Column="1" Grid.Row="6"
Height="22" Margin="0 0 49 0"/>
<Button Grid.Column="1" Grid.Row="6"
Height="22" Width="50" HorizontalAlignment="Right"
Content="Update"/>
<TextBlock Grid.Row="7">Bound Value</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="7" Text="{Binding Text}"/>
</Grid>
</Window>
The window includes seven TextBox controls and some TextBlocks, most of which are used to describe other controls. We'll bind all of the text boxes to the same data shortly, using different options for each binding. We also need a class for our source data object. Create a new class named, "TestObject". Add the following code to the class file:
using System.ComponentModel;
namespace WPFBindingOptionsDemo
{
public class TestObject : INotifyPropertyChanged
{
string _text = "Hello, world";
public string Text
{
get { return _text; }
set
{
_text = value;
OnPropertyChanged("Text");
}
}
private void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
public event PropertyChangedEventHandler PropertyChanged;
}
}
Finally, modify the constructor for the main window to set the data context for the window:
public MainWindow()
{
InitializeComponent();
DataContext = new TestObject();
}
You can now run the program to see the window design. The text boxes are not yet bound so remain blank. The TextBlock at the bottom of the window shows the current value of the Text property in the source data object.
8 September 2014