8/28/2007

Data Binding

U2U 2007

Data Binding

The need for data binding

Using simple data binding
Converting and validating data
Using complex data binding
Customizing data binding with templates
Master-detail data binding
Filtering, sorting and grouping data
Xml, LINQ, ADO.NET data binding
Debugging Data Binding

U2U 2007

8/28/2007

The need for Data Binding

Imagine showing data retrieved from DB
Move data from a column to a control
Allow user to edit the data
Validate the data
Then move data from control to column
Update the column

Data Binding automates this!

U2U 2007

What is Data Binding

4

Object
Property

Control
Property

U2U 2007

8/28/2007

Simple Data Binding

Bind one controls property to one objects data

Control to control

Control to (data) object

U2U 2007

Data Conversion
Bind to another type by converting it

Add Converter class as a resource:

Use Converter

2000-2007 U2U Belgium - www.u2u.net

8/28/2007

Building a Converter
Implement the IValueConverter interface

2000-2007 U2U Belgium - www.u2u.net

UpdateSourceTrigger
TextBox doesnt change value immediately

To do so, set UpdateSourceTrigger

UpdateSourceTrigger values:

Default
LostFocus (= Default for TextBox)
PropertyChanged
Explicit
2000-2007 U2U Belgium - www.u2u.net

8/28/2007

Data Validation
Users will always make mistakes
Validation helps users determine these
Default DataBinding doesnt support this

You need more verbose Binding

2000-2007 U2U Belgium - www.u2u.net

Exception Validation
Data Source can throw Exception

10

ExceptionValidationRule catches this

2000-2007 U2U Belgium - www.u2u.net

8/28/2007

Custom Validation Rules

Derive from ValidationRule

11

2000-2007 U2U Belgium - www.u2u.net

Using the ValidationRule

Add it to the <ValidationRules> element

12

2000-2007 U2U Belgium - www.u2u.net

8/28/2007

Custom Error Feedback

Define a ControlTemplate resource

13

2000-2007 U2U Belgium - www.u2u.net

Using the ControlTemplate

Set Validation.ErrorTemplate attached prop

14

Validation will use this for feedback

2000-2007 U2U Belgium - www.u2u.net

8/28/2007

Using Styles
Even better, use a style for all textboxes

15

2000-2007 U2U Belgium - www.u2u.net

Using Tooltips
User cannot see what is wrong
Use a tooltip to show the actual error

16

2000-2007 U2U Belgium - www.u2u.net

8/28/2007

Data Binding Multiple Properties

Avoid repeating the same source

17

Use DataContext!

2000-2007 U2U Belgium - www.u2u.net

Provide Data from Code

May be easier to load data in codebehind
Can set DataContext in code

18

Foo myDataObject = new Foo();

myDataObject.Bar = 42;
// Set DataContext
myWindow.DataContext = myDataObject;

2000-2007 U2U Belgium - www.u2u.net

8/28/2007

Using Complex Data Binding

Bind a controls items to list of objects

19

Objects are displayed using ToString()

2000-2007 U2U Belgium - www.u2u.net

Using Data Templates

Display object with a DataTemplate

20

Set controls ItemTemplate

DataTemplate DataContext = object

2000-2007 U2U Belgium - www.u2u.net

10

8/28/2007

Selecting the DataTemplate

By Name

21

By Type

Type selects
DataTemplate

2000-2007 U2U Belgium - www.u2u.net

Dynamically Selecting a Template

Use a DataTemplateSelector

22

2000-2007 U2U Belgium - www.u2u.net

11

8/28/2007

PersonDataTemplateSelector
23

U2U 2007

Binding with DataProviders

Use DataProvider in XAML

24

Your class or
Service Proxy

(Optional)
Method to call

Then set ItemsSource in XAML

2000-2007 U2U Belgium - www.u2u.net

12

8/28/2007

Asynchronous Data Binding

Data Provider allows async binding

25

Call method in background

2000-2007 U2U Belgium - www.u2u.net

Master Detail Binding

Use ItemsControl (e.g. ListBox) as master

26

Set IsSynchronizedWithCurrentItem="True"

Other bindings on same source will follow

master

2000-2007 U2U Belgium - www.u2u.net

13

8/28/2007

Master Detail
27

U2U 2007

DisplayMemberPath
Replaces single-field template

28

2000-2007 U2U Belgium - www.u2u.net

14

8/28/2007

Filtering with Views

Use a CollectionView

29

CollectionViewSource in XAML

Implement the Filter event

2000-2007 U2U Belgium - www.u2u.net

Sorting and Grouping

Again use a CollectionView

30

2000-2007 U2U Belgium - www.u2u.net

15

8/28/2007

Sorting and Grouping

Use a CollectionViewSource

31

Define a GroupStyle

2000-2007 U2U Belgium - www.u2u.net

Binding to XML
cars.xml
<XmlDataProvider
x:Key="cars"
XPath="/Cars/Car"
Source="cars.xml" />

32

<Cars>
<Car Make="Ford"
Model="F-150">
<Image>truck.png</Image>
</Car>
<Car> ... </Car>
</Cars>

<TextBlock
TextContent="{Binding XPath=@Make,
Source={StaticResource cars}}"
/>

2000-2007 U2U Belgium - www.u2u.net

16

8/28/2007

Provide XML from Code

Can load XML data in codebehind

33

Just like any other data

XmlDocument doc = new XmlDocument();
doc.LoadXml("<Foo><Bar>Hello, world</Bar></Foo>");

myGrid.DataContext = doc;

2000-2007 U2U Belgium - www.u2u.net

Binding To DataSets
Fill the DataSet as usual
Then use it as the DataContext

34

Controls use Path to reference

Tables
Columns

2000-2007 U2U Belgium - www.u2u.net

17

8/28/2007

Categories To Products
Building a Master-Detail

35

2000-2007 U2U Belgium - www.u2u.net

List and Detail

Use a listbox for item selection
Use TextBoxes for details and editing

36

2000-2007 U2U Belgium - www.u2u.net

18

8/28/2007

Categories List
ListBox uses ItemsSource

37

And ItemTemplate

IsSynchronizedWithCurrentItem=True
2000-2007 U2U Belgium - www.u2u.net

Categories Detail
TextBoxes bind to same data

38

Use Mode=OneWay for read-only columns

2000-2007 U2U Belgium - www.u2u.net

19

8/28/2007

Product List
ListBox is bound using DataRelation

39

ItemsSource is a CollectionViewSource

2000-2007 U2U Belgium - www.u2u.net

Product Detail
Uses a DataTemplate

40

2000-2007 U2U Belgium - www.u2u.net

20

8/28/2007

Product Detail
Use the ContentControl

41

2000-2007 U2U Belgium - www.u2u.net

Hierarchical Binding
42

<Foo xmlns=''>
<Quux>
<Wibble />
</Quux>
<Bar />
<Spong>
<Ick />
<Iyck/>
<Baz />
</Spong>
</Foo>

<TreeView ItemsSource="{Binding}, XPath='/*'}">

<TreeView.ItemTemplate>
<HierarchicalDataTemplate
ItemsSource="{Binding XPath='*'}">
<TextBlock Text="{Binding Path=Name}"/>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>

U2U 2007

21

8/28/2007

Debugging Data Binding

Binding failures generate debug messages

43

Check the Output window in Visual Studio

2000-2007 U2U Belgium - www.u2u.net

22