Hello
Suppose you have a Slider and you want a TextBlock to show it's value. You can implement a handler for ValueChanged event , get the value , convert to string, and set the TextBlock Text to this string.
The above is common in Silverlight, so common that it is given a special mechanism called data binding.
Data binding is actually a link between two properties, so when one property is changing also the other changes. It can also be bidirectional binding.
The binding mechanism use events internally for handling change of properties and it can be defined entirely in XAML.
Data binding is possible between two UIelements or between a UIElement an arbitrary data.
One Way Binding
Source sample
DataBinding_NK.zip
The sample implement a binding between a Slider and a TextBlock.
OneWayBinding.xaml
The central class here is
Binding class.
Two important properties :
- ElementName - name of binding source element
- Path - path to the binding source
Note that you can write the TextBlock element in the following short cut
Actually Binding can be done also in the code behind instead of in the XAML. To show this i have added another TextBlock Name oTextBlock into the xaml
OneWayBinding.xaml
And added to Slider.xaml.cs a binding object
Run the Application and click "OneWay Binding" button , then move the slider to the right to produce
Source and target
The binding is between the properties Slider Value and TextBlock Text
The source property is oSlider.Value so ElementName is oSlider and Path is Value.
The target property is TextBlock.Text , so the Binding element is under TextBlock.Text. Binding is done on the target element
Target and mode
Target property must be backed up by
dependency property (see
blog) and it must also be a property of UIElement.
Binding has property name
Mode which determines the direction of data flow in the binding. by default it's OneWay i.e. a change in source will be reflected in the target , but not vice verse.
Source sample
DataBinding_NK.zip
TwoWayBinding.xaml
Notice that Binding use TwoWay Mode i.e. change in source is reflected in target and vice verse.
Run the Application and click "TwoWay Binding" button , then move the slider to the right or change the value in the TextBox to produce
Binding Converter
Binding has a property name
Converter which is used to convert the data passed between source and target. For example we can use converter to make sure that the text block will be formatted e.g. no more then two digit after the floating point.
Converter is type
IvalueConverter which has two methods :
- Convert - Convert data passed from source to target
- ConverBack - Convert data passed from target to source
Source sample
DataBinding_NK.zip.
To illustrate this i will add a TextBox with converter.
Convertor.cs
Converter.xaml
A resource is defined type CConverter
The resource - oCConverter is used as converter
Run the Application and click "Converter" button , then move the slider to the right to produce :
Note that the last TextBox text reflect the converter action.
Remark - Binding has a property
ConverterParameter which may used as parameter for the Converter. This parameter is the third argument of the methods of
IvalueConverter.
Source Definitions
The source can be defined in four ways
- Binding.ElementName - Source is UIElement which is created on XAML
- Binding. Source - Source is an object. Object is typcally created on ResourceDirectory and given a key
- Binding. RelativeSource - Source is defined according to it's position relative to the target
- DataContext - Source is defined using the DataContext property
Binding.Source
Source is defined by using Source property of Binding.
Source is an object. Object is typically created on ResourceDirectory and given a key
Source sample
DataBinding_NK.zip
Binding is done between a source - object type CUser and target - TextBlock. To be more precise :
- Source property Name of CUser is bind to the target Text property of a TextBlock which represent name
- Source property Family of CUser is bind to the target Text property of a TextBlock which represent family
User.cs
BindingSource.xaml
A resource called oUser is defined with Name Nathan and Family Krasney.
Binding is performed on two TextBlocks using Source property of Binding.
A style name styleTextBlock is defined for TextBlock and used later by all TextBlocks
Run the Application and click "Binding.Source" button to produce :
Notification
Given the sample of Binding.xaml, what will happen if i will add a button which change the properties of oUser ? actually we would like the target TextBlocks to reflect the change but this will not happen. Note that oUser is type CUser which has no dependency properties so it has no notification mechanism regarding changes of it's properties values.
To overcome this that source object must implement the interface
INotifyPropertyChanged
Source sample
DataBinding_NK.zip
UserNotify.cs
Notice the set - it updates the value only in case it has changed and only in this situation it fires the PropertyChanged event. This event is handled by the binding client which update the TextBlocks Text property.
BindingSourceNotification.xaml
The file is very similar to BindingSource.xaml beside using CUserNotify instead of CUser and using the Toggle button
BindingSourceNotification.xaml.cs
Only interesting issue here is the Button handler
Run the Application and click "Binding.Source Notification" button and click the Toggle button to produce :
Click on the Toggle button cause a change in Name and Family via binding and notification,
DataContext
FrameworkElement has property name
DataContext.
Binding source is defined using DataContext.
DataContext type is object
DataContext simplify individual binding in case of one common source by eliminating repetition .
DataContext is a concept which allows objects to inherits binding specification from their parents.
Source sample
DataBinding_NK.zip
The sample is actually the same as for Binding.Source beside the use of DataContext.
DataContext.xaml
Note that ContentPanel has DataContext set to Binding object with oUser as Source. Now all children can inherit this source and Binding of the TextBlocks need only Path.
Run the Application and click "DataContext" button to produce :
RelativeSource
Source is defined according to it's position relative to the target. This is important for templates
Source sample
DataBinding_NK.zip
Source is the TexBlock.FontFamily
Target is the same TextBlock but property is Text.
RelativeSource.xaml
Self means the same element.
Run the Application and click "Binding.RelativeSource" button to produce :
Note that the FontFamily - "Portable User Interface" which is the TextBlock FontFamily appears as the TextBlock Text.
Nathan.
