Windows 8: Binding

859 views

Published on

Learn to use Binding objects to bind data sources and targets, add data converters to manage conversion during the binding process, and use data templates to modify the layout of bound data in lists.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
859
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Windows 8: Binding

  1. 1. Windows 8 Binding – Part 1 http://www.LearnNowOnline.com Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. A Few Simple Examples• SimpleBinding1• SimpleBinding2 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. DEMO• Two-way binding, SimpleBinding3 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  16. 16. 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
  17. 17. DEMO• SimpleBinding4 Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. DEMO• IntegerToThicknessConverter Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  25. 25. 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
  26. 26. 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
  27. 27. Using the Visual Studio Designer• DEMO Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
  28. 28. End of Part 1 http://www.LearnNowOnline.com Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

×