WPF Binding

WPF: Binding

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

Objectives


Objectives
• Learn to use Binding objects to bind
data sources and targets


Objectives
• Add data converters to manage
conversion during the binding process


Objectives
• Add data converters to manage
conversion during the binding process
• Use data templates to modify the
layout of bound data in lists


Agenda


Agenda
• Introducing Binding


Agenda
• Working with Type Converters


Agenda
• Binding Lists and Data Templates


Agenda
• Binding Lists and Data Templates
• Using Binding and Data Templates


Introducing Binding


Introducing Binding
• Often need to update one element with
information from another


Introducing Binding
• Display information from collection of
objects in list, or combo box


Introducing Binding
• Or need to work with data from database


Introducing Binding
• In all these cases


Introducing Binding
• Simplest solution is to bind data from binding
source to target


Introducing Binding
• 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


TextBlock
• Display list of customers in ListBox


TextBlock
• Display customer’s photo in Image control


TextBlock
• Display customer’s photo in Image control
• Display and edit customer’s name in
TextBox


Connecting Sources and
Targets


Targets
• Every time you use binding


Targets
• Must supply source for data, and target


Targets
• Must supply source for data, and target
• Normally, target is dependency property
of some user interface element


Targets
• Binding source can be any property of
any CLR object


Targets
any CLR object
• Binding object connects source to
binding target


Targets
any CLR object
• Binding object connects source to
binding target
• Must be dependency property of some
FrameworkElement object


Under the Hood


Under the Hood
• When using binding in XAML


Under the Hood
• Create instance of Binding class, setting
various properties that affect its behavior


Under the Hood
• XAML provides binding markup extension


Under the Hood
• Hides this fact, but still working with Binding
object


Under the Hood
object
• Completely transparent if you create Binding
object in code


Under the Hood
object
• Completely transparent if you create Binding
object in code
• Can set Mode property of Binding to
control direction of data ﬂow (one/two


Value Converters


Value Converters
• Value Converter block in ﬁgure represents
instance of class that implements
System.Windows.Data.IValueConverter
interface


Value Converters
interface
• Doing binding declaratively, in XAML, often
requires value converter


Value Converters
interface
• Select a customer from a ListBox, display
combined FirstName and LastName ﬁelds in
TextBlock


Value Converters
interface
TextBlock
• Select an integer, bind to BorderThickness of
Border


Value Converters
interface
TextBlock
• Select an integer, bind to BorderThickness of
Border
• Can’t bind directly—BorderThickness is a Thickness


A Few Simple Examples


A Few Simple Examples
• DEMO


Binding Details


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


Binding Details
attributes:
• Text=
"{Binding ElementName=DemoSlider,
Path=Value}"


Binding Details
attributes:
• Text=
Path=Value}"
• Path attribute not required:


Binding Details
attributes:
• Text=
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


Binding Details
property
• Need to refer to an attached property?


Binding Details
property
• Grid.Row, for example


Binding Details
property
• Grid.Row, for example
• Set Path property to (Grid.Row) (in
parentheses)


Binding Details
• Binding Markup extension shortcut for
child element syntax:


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


to TextBox
• Changes you make in TextBox have no effect
on slider


to TextBox
on slider
• Binding is one-way: Data moves in one
direction


to TextBox
on slider
direction
• Set Mode property of Binding to change


to TextBox
on slider
direction
• Set Mode to:


to TextBox
on slider
direction
• Set Mode to:
• OneTime


Additional Binding Mode Options
(WPF)


(WPF)
• Can also set Mode to:


(WPF)
• OneWayToSource


(WPF)
• OneWayToSource
• Default


DEMO


DEMO
• Two-way binding, SimpleBinding3


A Simple Example


A Simple Example
• Enter text into TextBox, update
TextBlock with length of the text


A Simple Example
• Could react to TextChanged event of
TextBox


A Simple Example
TextBox
• Better: Bind Text property of TextBlock
to Text.Length property of TextBox


A Simple Example
TextBox
• Better: Bind Text property of TextBlock
to Text.Length property of TextBox
• Points out that binding can use
expressions


DEMO
• SimpleBinding4


Working with Type
Converters


Working with Type
Converters
• Every example so far moved data from
source to target without modifying
data


Working with Type
Converters
data
• Or relied on built-in type converters


Working with Type
Converters
data
• What happens when source to target
requires conversion?


Working with Type
Converters
data
• You have color name, want to apply to
a property that requires a brush?


Working with Type
Converters
data
• You have color name, want to apply to
a property that requires a brush?
• How can you convert during the binding
process? More @ http://www.learnnowonline.com
Learn

Type Converters to the
Rescue


Rescue
• Type converter injects itself into the
binding process


Rescue
binding process
• Converts data from the source to the target
type


Rescue
binding process
type
• Must implement
interface


Rescue
binding process
type
• Must implement
interface
• Two methods: Convert and ConvertBack


Rescue
binding process
type
• Must implement
interface
• Two methods: Convert and ConvertBack
• Simple to create converter, in general


Using the StringFormat
Property


Property
• Many conversions consist of formatting
a string


Property
a string
• Could create a type converter; not
necessary


Property
a string
necessary
• Convert a value into a formatted
string?


Property
a string
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:


• More tricks:
• Can bind to multiple elements using
MultiBinding


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


binding)
• Sample binds integer from combo box to
BorderThickness property


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


Creating the Type Converter


• Attempt to bind SelectedValue of
ComboBox to BorderThickness of
Border, and fails


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


Converters


Converters
• Implement IValueConverter interface


Converters
• Requires Convert and ConvertBack
methods


Converters
methods
• Parameters:


Converters
methods
• Parameters:
• value (System.Object)


Converters
methods
• Parameters:
• targetType (System.Type)


Converters
methods
• Parameters:
• parameter (System.Object)


Converters
methods
• Parameters:
• parameter (System.Object)
• culture (System.Globalization.Culture)


Converter Warning


Converter Warning
• Converter doesn’t trap exceptions


Converter Warning
• Treated as runtime errors


Converter Warning
• You must trap and handle all runtime
errors


Converter Warning
errors
• Return DependencyProperty.UnsetValue
on error


Converter Warning
errors
on error
• Not handled in this simple demo


Converter Warning
errors
on error
• Not handled in this simple demo
• Worth considering!


DEMO
• IntegerToThicknessConverter


Referencing the Type
Converter


Converter
• Need way to refer to type converter in
XAML


Converter
XAML
• Like any other resource, declare instance
in resources; UserControl.Resources in
demo


Converter
XAML
demo
• Need namespace reference


Converter
XAML
demo
• xmlns:local="clr-namespace:Binding"


Converter
XAML
demo
• Then, within UserControl.Resources:


Converter
XAML
demo
• Then, within UserControl.Resources:
• <UserControl.Resources>
<local:IntegerToThicknessConverter
x:Key="thicknessConverter" />


Using the Type Converter


• Add a setting in Binding markup
extension


• 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


Using the Visual Studio
Designer
• DEMO


Binding Lists and Data
Templates


Templates
• Common use of binding: Display data
in lists


Templates
in lists
• ComboBox/ListBox


Templates
in lists
• Whether retrieving data from database,
or using a collection in memory


Templates
in lists
• Useful to be able to display data


Templates
in lists
• Imagine scenario:


Templates
in lists
• Want to display list box with numbers


Templates
in lists
• Want to display list box with numbers
• Also display bar with magnitude

Filling the List/Displaying the
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


markup
• Deﬁnes how each row should be displayed


markup
• Can contain any markup you like


markup
• Include at least one Binding markup extension


markup
• Include at least one Binding markup extension
• Otherwise, pretty dull


Using Binding and Data
Templates


Templates
• A ﬁnal scenario that uses binding and
data templates


Templates
data templates
• Display list of color names and color
“swatches”


Templates
data templates
• Display list of color names and color
“swatches”
• Select a color and set background color
for border


Learn More!


Learn More!
• This is an excerpt from a larger course. Visit
www.learnnowonline.com for the full details!


Learn More!

• Learn more about WPF on SlideShare:


Learn More!

 Intro to Windows Presentation Foundation
(WPF)


Learn More!

 Intro to Windows Presentation Foundation
(WPF)
 WPF: Advanced Controls


WPF Binding

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie WPF Binding

Ähnlich wie WPF Binding (20)

Mehr von LearnNowOnline

Mehr von LearnNowOnline (7)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

WPF Binding

Hinweis der Redaktion