WPF Binding

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 wordsneed 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 customers photo in Image control Display and edit customers 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
Can set Mode property of Binding to control direction of data flow (one/two directions?)
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
Cant bind directlyBorderThickness 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 }"
Choose whichever you like

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>
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
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

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?
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, dont 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 cant 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

Whats 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 doesnt 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

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
Imagine scenario:
Want to display list box with numbers
Also display bar with magnitude

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
Start with static data, then add binding

Agenda

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


WPF Binding

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WPF Binding

Uploaded by

Copyright:

Available Formats

WPF: Binding

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

In other wordsneed some way to perform binding

Learn More @ http://www.learnnowonline.com

When to Use Binding?

Learn More @ http://www.learnnowonline.com

Connecting Sources and Targets

user interface element

Learn More @ http://www.learnnowonline.com

Connecting Sources and Targets

Learn More @ http://www.learnnowonline.com

Under the Hood

properties that affect its behavior

XAML provides binding markup extension

Completely transparent if you create Binding object in

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

Cant bind directlyBorderThickness is a Thickness structure

Infinite reasons to use a value converter

Learn More @ http://www.learnnowonline.com

A Few Simple Examples

Learn More @ http://www.learnnowonline.com

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

Path attribute not required:

Choose whichever you like

Set Path property to (Grid.Row) (in parentheses)

Learn More @ http://www.learnnowonline.com

Setting the Binding Mode

Additional Binding Mode Options (WPF)

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Working with Type Converters

Type Converters to the Rescue

Must implement System.Windows.Data.IValueConverter interface

Simple to create converter, in general

Learn More @ http://www.learnnowonline.com

Using the StringFormat Property

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Using a Type Converter

Need a type converter

Determine source and target data types

Sample binds integer from combo box to BorderThickness property

Learn More @ http://www.learnnowonline.com

Creating the Type Converter

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

You must trap and handle all runtime errors

Not handled in this simple demo

Learn More @ http://www.learnnowonline.com

Learn More @ http://www.learnnowonline.com

Referencing the Type Converter

Then, within UserControl.Resources:

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

Learn More @ http://www.learnnowonline.com

Using the Type Converter

Learn More @ http://www.learnnowonline.com

Using the Visual Studio Designer

Learn More @ http://www.learnnowonline.com