Simple Data Binding

Data Binding in WPF Data Binding, Binding Properties Doncho Minkov Telerik School Academy http://schoolacademy.telerik.com Technical Trainer http://www.minkov.it

Table of Contents Why We Need Data Binding? Simple Binding Binding a Control Property to Object Property Data Contexts Binding Class and its Properties Binding Control to Another Control

Table of Contents (2) Value Conversion Data Validation Binding Path Syntax Using Relative Sources Using Update Source Triggers

Why We Need Data Binding? The purpose of most applications is: Displaying data to users Letting them edit that data Developers' job is: Bring the data from a variety of sources Expose the data in object, hierarchical, or relational format With WPF’s data binding engine, you get more features with less code

Why We Need Data Binding? (2) Data binding is pulling information out of an object into another object or property Data binding means automatically change a property when another property is changed Many Windows applications are all about data Data binding is a top concern in a user interface technologies like WPF or Silverlight WPF and Silverlight0 provide very powerful data binding mechanisms

Simple B inding Simple binding in WPF is the act of registering two properties with the data binding engine Letting the engine keep them synchronized The synchronization and conversion are duties of the data binding engine in WPF

Simple B inding (2) Binding a property to a data source property: The shortcut binding syntax: Binding between the Text property of the TextBox and an object called SomeName SomeName is a property of some object to be named later <TextBox ...> <TextBox.Text> <Binding Path="SomeName" /> </TextBox.Text> </TextBox> <TextBox Text="{Binding Path=SomeName}" />

Data Contexts In WPF every FrameworkElement and every FrameworkContentElement has a DataContext property DataContext is an object used as data source during the binding, addressed by binding Path If you don’t specify a Source property WPF searches up the element tree starting at the current element Looking for a DataContext property that has been set

Data Contexts (2) Two controls with a common logical parent can bind to the same data source Providing a DataContext value for both of the text box controls  <Grid Name="GridMain"> … <TextBlock …>Name: </TextBlock> <TextBox Text="{Binding Path=Name}" … /> <TextBlock …>Age:</TextBlock> <TextBox Text="{Binding Path=Age}" … /> <Button Name="ButtonBirthday Content="Birthday!" … /> </Grid>

Data Contexts (3) Setting an object as a value of the grid’s DataContext property in the MainWindow constructor: public partial class MainWindow : Window { Person person = new Person("Tom", 11); public MainWindow() { InitializeComponent(); GridMain.DataContext = person; } … }

Binding to Other Controls WPF provides binding of one element’s property to another element’s property The button’s foreground brush will always follow foreground brush’s color of the age TextBox <TextBox Name="ageTextBox" Foreground="Red" … /> <Button … Foreground="{Binding ElementName=ageTextBox, Path=Foreground}" Content="Birthday" />

Binding to Other Controls Live Demo

The Binding Class and Its Properties

Binding Class A more full-featured binding example This features are represent in Binding class Converter – convert values back and forth from the data source ConverterParameter – parameter passed to the IValueConverter methods during the conversion <TextBox x:Name="TextBoxPerson" Foreground="{Binding Path=Age, Mode=OneWay, Source={StaticResource Tom}, Converter={StaticResource ageConverter}}" />

Binding Class (2) More Binding class properties ElementName – used when the source of the data is a UI element as well as the target Mode – one of the BindingMode values TwoWay , OneWay , OneTime , OneWayToSource , or Default Path – path to the data in the data source object Source – a reference to the data source

Binding Class (3) The binding target can be any WPF element Only allowed to bind to the element’s dependency properties The TextBox control is the binding target Object that provides the data is the binding source

Value Conversion In the previous example we might decide that anyone over age 25 is hot Should be marked in the UI as red Binding to a non-Text property Bound the age text box’s Text property to the Person object’s Age property <TextBox Text="{Binding Path=Age}" Foreground="{Binding Path=Age, …}" … />

Value Conversion (2) How to bind the Foreground property of the text box to Age property on the Person object? The Age is of type Int32 and Foreground is of type Brush Mapping from Int32 to Brush needs to be applied to the data binding from Age to Foreground That’s the job of a ValueConverter

Value Conversion (3) A value converter is an implementation of the IValueConverter interface Convert () – converting from the source data to the target UI data ConvertBack () – convert back from the UI data to the source data

Value Conversion (4) Converter Int32  Brush public class AgeToForegroundConverter : IValueConverter { public object Convert(object value, Type targetType, …) { if (targetType != typeof(Brush)) { return null; } int age = int.Parse(value.ToString()); return (age > 25 ? Brushes.Red : Brushes.Black); } … }

Value Conversion (4) Creating an instance of the converter class in the XAML: <Window … xmlns:local="clr-namespace:WithBinding"> <Window.Resources> <local:Person x:Key="Tom" … /> <local:AgeToForegroundConverter x:Key="ageConverter"/> </Window.Resources> <Grid DataContext="{StaticResource Tom}"> … <TextBox Text="{Binding Path=Age}" Foreground="{Binding Path=Age, Converter={StaticResource ageConverter}}" … /> … <Button … Foreground="{Binding Path=Foreground, ElementName=ageTextBox}">Birthday</Button> </Grid> </Window>

Data Validation A validation validates a piece of data in the target when the binding occurs Derives from the base ValidationRule class class EGNValidationRule : ValidationRule { public override ValidationResult Validate( object value, CultureInfo cultureInfo) { if (Regex.IsMatch((string)value, "\A\d{10}\Z")) return new ValidationResult(true, null); else return new ValidationResult(false, "Invalid EGN"); } }

Data Validation (2) When a validation result indicates invalid data, a ValidationError object is created Checking for errors: Getting the error messages: You can also listen to the ValidationError attached event Validation.GetHasError(UIElement) var errors = Validation.GetErrors(UIElement); string errorMsg = (string)errors[0].ErrorContent;

Data Validation (3) <Window x:Class="BindingValidation.MainWindow" … xmlns:local="clr-namespace:BindingValidation" /> … <TextBox Name="TextBoxEGN"> <TextBox.Text> <Binding Path="EGN"> <Binding.ValidationRules> <local:EGNValidationRule /> </Binding.ValidationRules> </Binding> </TextBox.Text> </TextBox> … </Window> Enabling validation rules in the XAML:

Data Validation (4) <Window.Resources> <Style TargetType="{x:Type TextBox}"> <Setter Property="Validation.ErrorTemplate"> <Setter.Value> <ControlTemplate> <WrapPanel> <Border BorderBrush="Red"> <AdornedElementPlaceholder/> </Border> <TextBlock Foreground="Red">!</TextBlock> </WrapPanel> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> Styling the UI controls containing an error:

Binding Path Syntax When you use Path=Something in a Binding statement, the Something can be in a number of formats Path=Property – bind to the property of the current object ( Path=Age ) Path=( OwnerType.AttachedProperty ) – bind to an attached dependency property ( Path=( Validation.HasError ) ) Path=Property.SubProperty – bind to a subproperty ( Path=Name.Length )

Binding Path Syntax (2) Other formats Path=Property[n] – bind to an indexer ( Path=Names[0] ) Path=Property/Property – master-detail binding ( Path=Customers/Orders ) Path=(OwnerType.AttachedProperty)[n].SubProperty – bind to a mixture of properties, subproperties , and indexers Path=(Validation.Errors)[0].ErrorContent)

R elative S ources D escribes the location of the binding source relative to the position of the binding target Relative sources Self FindAncestor TemplatedParent Previous <TextBox ... ToolTip="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}">

U pdate S ource T riggers In previous example validation doesn’t happen until the age text box loses focus Validation can happen immediately when the control state changes Using the UpdateSourceTrigger property on the Binding object <TextBox …> <TextBox.Text> <Binding Path="Age" UpdateSourceTrigger="PropertyChanged"> … </Binding> </TextBox.Text> </TextBox>

U pdate S ource T riggers UpdateSourceTrigger values Default – updates "naturally" based on the target control PropertyChanged – updates the source immediately LostFocus – updates the source when focus changes Explicit – when BindingExpression. UpdateSource () is explicitly called

Simple Data Binding Questions? http://academy.telerik.com

Exercises Write a program that show a simple window, it contains two controls a Slider and a TextBlock with a single line of text. If you pull the thumb in the slider to the right, the font size of the text is increased immediately. Add a label that shows the current font size. Use data binding. Add to the previous exercise few buttons each of which applies a preset value to the slider. When you click the "Set to Large" button the code in Click event sets the value of the slider, which in turn forces a change to the font size of the text through data binding.

Exercises (2) Write a program that shows a simple window, which contains a TextBlock and setup the TextBlock to draw its text from a TextBox and its current foreground and background colors from separate lists of colors. Create an application to enter person's name and age. Bind the person's age with a slider showing the range [1..100]. Add c ustom validation rules to make sure that person’s age is within a the range ( derive from the ValidationRule class and override the Validate() method).

Simple Data Binding

Recommended

More Related Content

What's hot (20)

Similar to Simple Data Binding (20)

More from Doncho Minkov (20)

Recently uploaded (20)

Simple Data Binding

Editor's Notes