WPF Binding by LearnNowOnline

WPF: Binding

Learn More @ http://www.learnnowonline.com Copyright ÂŠ by Application Developers Training Company

Objectives • Learn to use Binding objects to bind data sources and targets • Add data converters to manage conversion during the binding process • Use data templates to modify the layout of bound data in lists

Agenda • • • •

Introducing Binding Working with Type Converters Binding Lists and Data Templates Using Binding and Data Templates

Introducing Binding • Often need to update one element with information from another • Display information from collection of objects in list, or combo box • Or need to work with data from database • In all these cases • Simplest solution is to bind data from binding source to

target

• In other words—need some way to perform binding

When to Use Binding? • Display in the number of characters in a text box, in a TextBlock control • Display the value of Slider control in a TextBlock • Display list of customers in ListBox • Display customer’s photo in Image control • Display and edit customer’s name in TextBox • Of course, there are an infinite number of reasons

Connecting Sources and Targets • Every time you use binding • Must supply source for data, and target • Normally, target is dependency property of some

user interface element

Connecting Sources and Targets • Binding source can be any property of any CLR object • Binding object connects source to binding target • Must be dependency property of some

FrameworkElement object

Under the Hood • When using binding in XAML • Create instance of Binding class, setting various

properties that affect its behavior

• XAML provides binding markup extension • Hides this fact, but still working with Binding object • Completely transparent if you create Binding object in

code

Value Converters • Value Converter block in figure represents instance of class that implements System.Windows.Data.IValueConverter interface • Doing binding declaratively, in XAML, often requires value converter • Select a customer from a ListBox, display combined FirstName

and LastName fields in TextBlock • Select an integer, bind to BorderThickness of Border

• Can’t bind directly—BorderThickness is a Thickness structure

• Infinite reasons to use a value converter • But only if binding declaratively

A Few Simple Examples • DEMO

Binding Details • Standard Binding markup extension includes ElementName and Path attributes: • Text=

"{Binding ElementName=DemoSlider, Path=Value}"

• Path attribute not required: • Text="{Binding Value,

ElementName=DemoSlider }"

Binding Details • Path property can refer to property, or property of a property, or indexed property • Need to refer to an attached property? • Grid.Row, for example • Set Path property to (Grid.Row) (in parentheses)

Binding Details • Binding Markup extension shortcut for child element syntax: <TextBox Width="40" Name="DemoTextBox" Height="23"> <TextBox.Text> <Binding ElementName="DemoSlider" Path="Value" /> </TextBox.Text> </TextBox> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Setting the Binding Mode • In previous demo, data moves from Slider to TextBox • Changes you make in TextBox have no effect on slider

• Binding is one-way: Data moves in one direction • Set Mode property of Binding to change • Set Mode to: • OneTime • OneWay • TwoWay Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Additional Binding Mode Options (WPF) • Can also set Mode to: • OneWayToSource • Default

DEMO • Two-way binding, SimpleBinding3

A Simple Example • Enter text into TextBox, update TextBlock with length of the text • Could react to TextChanged event of TextBox • Better: Bind Text property of TextBlock to Text.Length property of TextBox • Points out that binding can use expressions

DEMO • SimpleBinding4

Agenda • • • •

Introducing Binding Working with Type Converters Binding Lists and Data Templates Using Binding and Data Templates

Working with Type Converters • Every example so far moved data from source to target without modifying data • Or relied on built-in type converters

• What happens when source to target requires conversion? • You have color name, want to apply to a property that requires a brush? • How can you convert during the binding process? Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Type Converters to the Rescue • Type converter injects itself into the binding process • Converts data from the source to the target type

• Must implement System.Windows.Data.IValueConverter interface • Two methods: Convert and ConvertBack

• Simple to create converter, in general • Can often use StringFormat property of Binding instead

Using the StringFormat Property • Many conversions consist of formatting a string • Could create a type converter; not necessary • Convert a value into a formatted string? • Can often use StringFormat property

DEMO • BindingWithConverter1

StringFormat Details • Simplest format: StringFormat=0.0 • Can also specify numeric formatting string, as if calling String.Format method: • StringFormat={}{0:F1} • {} “escapes” formatting string • Include text, don’t need escape • StringFormat=The value is: {0:F1}

• More tricks: • Can bind to multiple elements using MultiBinding • Check it out!

Using a Type Converter • Sometimes, StringFormat can’t do the job • Will need to run code as data transfers • Need a type converter

• Determine source and target data types • Write code to perform the conversion • Perhaps write code to convert back (for two-way binding)

• Sample binds integer from combo box to BorderThickness property • What’s the problem? Thickness structure has four values

Creating the Type Converter • Attempt to bind SelectedValue of ComboBox to BorderThickness of Border, and fails • Need type (or value) converter

Converters • Implement IValueConverter interface • Requires Convert and ConvertBack methods • Parameters: • value (System.Object) • targetType (System.Type) • parameter (System.Object) • culture (System.Globalization.Culture)

Converter Warning • Converter doesn’t trap exceptions • Treated as runtime errors

• You must trap and handle all runtime errors • Return DependencyProperty.UnsetValue on

error

• Not handled in this simple demo • Worth considering!

DEMO • IntegerToThicknessConverter

Referencing the Type Converter • Need way to refer to type converter in XAML • Like any other resource, declare instance in resources; UserControl.Resources in demo • Need namespace reference • xmlns:local="clr-namespace:Binding"

• Then, within UserControl.Resources: • <UserControl.Resources>

<local:IntegerToThicknessConverter x:Key="thicknessConverter" /> </UserControl.Resources>

Using the Type Converter • Add a setting in Binding markup extension <Border BorderThickness="{Binding ElementName=ThicknessComboBox, Path=SelectedValue, Converter={StaticResource thicknessConverter}}" BorderBrush="Black" Margin="5">

Using the Visual Studio Designer • DEMO

Agenda • • • •

Introducing Binding Working with Type Converters Binding Lists and Data Templates Using Binding and Data Templates

Binding Lists and Data Templates • Common use of binding: Display data in lists • ComboBox/ListBox

• Whether retrieving data from database, or using a collection in memory • Useful to be able to display data

Filling the List/Displaying the Data • DEMO

Adding a Data Template • Given ListBox displaying numbers • Next task is to modify layout for each item in list

• XML Data Template designed just for this • Allows you to pass one row of data at a time through custom

format, as control renders output

• Data template simply a chunk of XAML markup • Defines how each row should be displayed • Can contain any markup you like • Include at least one Binding markup extension • Otherwise, pretty dull

Agenda • • • •

Introducing Binding Working with Type Converters Binding Lists and Data Templates Using Binding and Data Templates

Using Binding and Data Templates • A final scenario that uses binding and data templates • Display list of color names and color “swatches” • Select a color and set background color for border

Learn More! • This is an excerpt from a larger course. Visit www.learnnowonline.com for the full details! • Learn more about WPF on SlideShare:  Intro to Windows Presentation Foundation (WPF)  WPF: Advanced Controls