Windows 8: Binding

Windows 8 Binding – Part 1 http://www.LearnNowOnline.com

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

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

Agenda • • • •

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

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

When to Use Binding?

• Display 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

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

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

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

DependencyObject instance

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

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

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

Value Converters • Value Converter provides instance of class that implements Windows.UI.Xaml.Data.IValueConverter interface • Binding declaratively often requires value converter

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

Value Converters • 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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

A Few Simple Examples • SimpleBinding1 • SimpleBinding2

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

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 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

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) • Parentheses force evaluation—won’t work without • Parentheses not necessary for property of a property

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

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.Tet> </TextBox> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

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

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

DEMO • Two-way binding, SimpleBinding3

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

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

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

DEMO • SimpleBinding4

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

Agenda • • • •

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

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

Using 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

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

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

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

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

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

Handle Null Case • Always possible that value will be null • Code runs at design time!

• Always verify that value isn’t null before performing conversion

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

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!

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

DEMO • IntegerToThicknessConverter

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

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

• Then, within Page.Resources: • <local:IntegerToThicknessConverter

x:Key="thicknessConverter" /> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

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

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

Using the Visual Studio Designer • DEMO

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

End of Part 1 http://www.LearnNowOnline.com

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