7. xaml & wpf - binding lists

Doncho Minkov

Telerik Software Academyacademy.telerik.com

Technical Trainerhttp://www.minkov.it

Binding Lists in WPF

http://academy.telerik.com/

Table of Contents1. Complex Binding in WPF

Accessing the "SelectedItem" Using DisplayMemberPath and ValueMemberPath

2. Using Look-up Bindings

3. Using Data Templates

4. Sorting, Filtering and Grouping Items from a Collection View

2

Table of Contents (2)7. Data Source Providers

Object Relational XML

8. Master-detail Binding

9. Hierarchical Binding

3

Complex Data BindingBinding to a Collection of Items

Complex Binding

Binding to a list data source is exactly the same way as if we were binding to a single object data source

5

// Create an alias for a generic type so that we// can create a list of Person objects in XAMLclass People : List<Person> { }<!-- Declaring a collection in XAML --> <local:People x:Key="Family"> <local:Person Name="Tom" Age="11" /> <local:Person Name="John" Age="12" /> <local:Person Name="Melissa" Age="38" /></local:People>

Complex Binding (2)

Each TextBox can be bound to a property from only a single Person object In this example the TextBox will be

bound to the first item in the collection ( i.e. "Tom")

6

<Grid DataContext="{StaticResource Family}"> … <TextBlock …>Name:</TextBlock> <TextBox Text="{Binding Path=Name}" … /> <TextBox Text="{Binding Path=Age}" Foreground="{Binding Path=Age, Converter=…}" …/>

Complex Data Binding

Live Demo

Accessing the "Current

Item"

Accessing the "Current Item"

The text box properties can be bound to only a single object at a time

The binding engine is giving them the current item in the list of objects

9

Accessing the "Current Item" (3)

Collection view in WPF A mediator between the data bound

control and the collection of items Accessed through CollectionViewSource

The job of the collection view is to provide services on top of the data Control of the current item Sorting Filtering Grouping

10

Accessing the "Current Item" (2)

Getting the current item of bound collection:

11

public partial class MainWindow : Window { … private void birthdayButton_Click(object sender, RoutedEventArgs e) { People people = (People)this.FindResource("Family"); ICollectionView view = CollectionViewSource.GetDefaultView(people); Person person = (Person)view.CurrentItem; ++person.Age; MessageBox.Show(person.Age.ToString()); }}

Navigating Between Items

We can change which item is current Using the MoveCurrentTo(…) methods

of the ICollectionView interface

12

ICollectionView GetFamilyView(){ People people =(People)this.FindResource("Family"); return CollectionViewSource.GetDefaultView(people);}private void buttonBack_Click(object sender, RoutedEventArgs e){ ICollectionView view = GetFamilyView(); view.MoveCurrentToPrevious(); if (view.IsCurrentBeforeFirst) view.MoveCurrentToFirst();}

Navigating Between ItemsLive Demo

Binding List ControlsDisplayMemberPath and

SelectedValuePath

Binding List Controls List controls like ListBox and ComboBox display multiple items at a time Can be bound to a collection in the DataContext

Can keep track of the current item

When binding the DisplayMemberPath specifies the property to be displayed The SelectedValuePath specifies the

property to be used as selected value (some ID)

15

DisplayMemberPath If we want to show every object of the Person class and display one of its properties The ListBox class provides the DisplayMemberPath property

16

<ListBox ItemsSource="{Binding}" DisplayMemberPath="Name" IsSynchronizedWithCurrentItem="True"/> <!--The result is-->

SelectedValuePath The ItemsControl class provides a path to describe the selected value of a piece of data

Data which is often used when the selection changes or an item is double-clicked

17

<ListBox Name="ListBoxPeople" ItemsSource="{Binding}" DisplayMemberPath="Name" SelectedValuePath="Age" />

private void ListBoxPeople_SelectionChanged( object sender, SelectionChangedEventArgs e){ int index = ListBoxPerson.SelectedIndex; if (index < 0) { return; } Person item = (Person) ListBoxPerson.SelectedItem; int value = (int) ListBoxPerson.SelectedValue; …}

DisplayMemberPath and

SelectedValuePathLive Demo

Using Look-up Bindings

Using Look-up Bindings We want to provide a UI that maps numbers to their textual representation in English We must construct a NamedAge type

for use in populating a look-up table

20

public class NamedAge{ public string NameForAge { get; set; } public int AgeId { get; set; }}

class NamedAges : List<NamedAge> { }

Using Look-up Bindings (2)

Populate the table for looking up

The final step is the bit of binding that tells the ComboBox control where to get the currently selected value

21

<local:NamedAges x:Key="NamedAgeLookup"> <local:NamedAge NameForAge="zero" AgeId="0" /> <local:NamedAge NameForAge="one" AgeId="1" /></local:NamedAges>

<ComboBox Name="ComboBoxNumbers" ItemsSource= "{Binding Source={StaticResource NamedAgeLookup}}" DisplayMemberPath="NameForAge" SelectedValuePath="AgeId" SelectedValue="{Binding Path=Age}" />

Using Look-up BindingsLive Demo

Using Data Templates

Using Data Templates

Data templates allow displaying more than one property from a custom class

A data template is a tree of elements to expand in a particular context

For example, for each Person object, you might like to be able to concatenate the name and age together

This is a logical template that looks like this Name (age:Age)

24

Using Data Templates (2)

To define this template for items in the ListBox, we create a DataTemplate element

25

<ListBox ItemsSource="{Binding}"> <ListBox.ItemTemplate> <DataTemplate> <TextBlock> <TextBlock Text="{Binding Path=Name}" /> (age: <TextBlock Text="{Binding Path=Age}" Foreground="{Binding Path=Age, Converter={StaticResource ageConverter}}" />) </TextBlock> </DataTemplate> </ListBox.ItemTemplate></ListBox>

Using Data Templates (2)

The ListBox control has an ItemTemplate property Accepts an instance of the DataTemplate class

The ListBox shows all the items in the collection

26

Sorting Items

Sorting Items The view allows us to do a number of things to the data before it’s displayed Including changing the order in

which the data is shown The simplest way to sort is by manipulating the SortDescriptions property of the view Also we can provide the view with a

custom sorting by implementing IComparer

28

Sorting Items (2) Sorting items view in WPF:

29

private void buttonSort_Click (object sender, RoutedEventArgs e) { ICollectionView view = GetFamilyView(); if (view.SortDescriptions.Count == 0) { view.SortDescriptions.Add( new SortDescription("Name", ListSortDirection.Ascending)); view.SortDescriptions.Add( new SortDescription("Age", ListSortDirection.Descending)); } else view.SortDescriptions.Clear();}

Sorting ItemsLive Demo

Filtering

Filtering If we want to filter the objects from the view by some criteria

We need to feed the view an implementation of the Predicate<object> delegate Takes a single object parameter and

returns a Boolean

32

private void buttonFilter_Click(object sender, RoutedEventArgs e){ ICollectionView view = GetFamilyView();

// the example continues

Filtering (2)

33

if (view.Filter == null) { view.Filter = delegate(object item) { return ((Person)item).Age >= 25; };}else { view.Filter = null; } } // The result is:

Grouping

Grouping

To set up grouping Establish the groups you would like to use Manipulating the GroupDescriptions

collection on your view

35

if (view.GroupDescriptions.Count == 0) { view.GroupDescriptions.Add( new PropertyGroupDescription("Age"));}else { view.GroupDescriptions.Clear();}

Grouping (2) The PropertyGroupDescription object Takes the name of the property you

would like to use for grouping GroupStyle

Collection of group visualization related information

36

<ListBox … ItemsSource="{Binding}" > <ListBox.GroupStyle> <x:Static Member="GroupStyle.Default" /> </ListBox.GroupStyle></ListBox>

Filtering and GroupingLive Demo

Declarative Sorting and

Grouping

Declarative Sorting and Grouping

Bring in the System.ComponentModel and System.Windows.Data namespaces

Create SortDescription and PropertyGroupDescription objects

Then create a CollectionViewSource object, which sorts and groups the data Exposes an ICollectionView

implementation

39

xmlns:compModel="clr-namespace:System.ComponentModel; assembly=WindowsBase" xmlns:data="clr-namespace:System.Windows.Data;assembly=PresentationFramework">

Declarative Sorting and

Grouping (2)

40

<CollectionViewSource x:Key="SortedGroupedFamily" Source="{StaticResource Family}"> <CollectionViewSource.SortDescriptions> <compModel:SortDescription PropertyName="Name" Direction="Ascending" /> <compModel:SortDescription PropertyName="Age" Direction="Descending" /> </CollectionViewSource.SortDescriptions> <CollectionViewSource.GroupDescriptions> <data:PropertyGroupDescription PropertyName="Age" Converter="{StaticResource ageConverter}" /> <data:PropertyGroupDescription PropertyName="Age" /> </CollectionViewSource.GroupDescriptions> </CollectionViewSource>

Declarative Sorting and

GroupingLive Demo

Data Source

Providers

Object Data Provider Data Providers are wrappers around existing data models (relational data, XML, …) Used to simplify data binding with

DB or XML WPF works with two data source providers ObjectDataProvider XmlDataProvider

Both derive from DataSourceProvider

Data source providers create a layer of indirection for any kind of operation

43

Object Data Provider – Example

Load a set of Person from some source

LoadPeople method will load people however it also returns that data for binding

44

public class Person : INotifyPropertyChanged { … }

public class People : ObservableCollection<Person> {}

public class RemotePeopleLoader { public People LoadPeople() { // Load people from somewhere People people = new People( ); … return people; } …}

Object Data Provider – Example (2)

Create the RemotePeopleLoader and call the LoadPeople method in XAML file

ObjectType specifies the type of the class to create

The MethodName specifies the name of the method to call to retrieve the data

45

<Window.Resources> ... <ObjectDataProvider x:Key="Family" ObjectType="{x:Type local:RemotePeopleLoader}" MethodName="LoadPeople" /></Window.Resources>

Binding to Relational Data

We create a database with one table "People"

Using Solution Explorer add LINQ-SQL mappings

Drag the People table from the Database Explorer

Add an instance of DataClassesPeopleDataContext in .xaml.cs

46

DataClassesPeopleDataContext dataContextPeople = new DataClassesPeopleDataContext();

Binding to Relational Data (2)

Binding to relational data declaratively

47

<Window.Resources> <DataTemplate x:Key="DataTemplatePersonName"> <TextBlock Text="{Binding Path=PersonName}"/> </DataTemplate></Window.Resources> ...<ListBox Name="ListBoxPeople" ItemTemplate= "{StaticResource DataTemplatePersonName }"/>

Binding to Relational Data (3)

Adding new records to the database

Committing the changes to database

48

People newPerson = new People();newPerson.PersonName = TextBoxAdd.Text; dataContexPeople.Peoples.InsertOnSubmit(newPerson);

dataContexPeople.SubmitChanges();

Binding to Relational DataLive Demo

XML Data Source Provider

WPF also supports binding to XML data

We can bind to it using the XmlDataProvider

50

<Window.Resources> <XmlDataProvider x:Key="Family" Source="family.xml" XPath="/sb:Family/sb:Person"> <XmlDataProvider.XmlNamespaceManager> <XmlNamespaceMappingCollection> <XmlNamespaceMapping Prefix="sb" Uri="http://sellsbrothers.com" /> </XmlNamespaceMappingCollection> </XmlDataProvider.XmlNamespaceManager> </XmlDataProvider> <!--the example continues-->

XML Data Source Provider (2)

Use of the XmlDataProvider with a relative URL that points to the family.xml

Using namespace prefixes in the XAML makes it possible to construct the XPath statement

51

…<StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding XPath=@Name}" /> <TextBlock Text=" (age: " /> <TextBlock Text="{Binding XPath=@Age}" Foreground="{Binding XPath=@Age, Converter= {StaticResource ageConverter}}" /> <TextBlock Text=")" /></StackPanel>…

XML Data Source Provider (3)

In the XML data binding we use XmlDocument and XmlElement

For updating and accessing values, use the XmlElement.SetAttribute method

Sorting or grouping is also supported, but paths are preceded by @ (e.g., @Age)

52

void birthdayButton_Click(object sender, RoutedEventArgs e){ ICollectionView view = GetFamilyView( ); XmlElement person = (XmlElement)view.CurrentItem;

// the example continues

XML Data Source Provider (4)

53

person.SetAttribute("Age", (int.Parse( person.Attributes["Age"].Value) + 1).ToString( )); MessageBox.Show( string.Format("Happy Birthday, {0}, age {1}!", person.Attributes["Name"].Value, person.Attributes["Age"].Value), "Birthday");}…void groupButton_Click(object sender, RoutedEventArgs e) { ICollectionView view = GetFamilyView( ); if( view.GroupDescriptions.Count == 0 ) { view.GroupDescriptions.Add(new PropertyGroupDescription("@Age")); } else { view.GroupDescriptions.Clear(); }}

XML Data Source ProviderLive Demo

Master-Detail Binding

Master-Details Binding Master-details binding means to bind two related lists Selecting a row in the first list

shows its detail rows in the second list

You need to have a parent data object that provides a collection of related child objects

Master-details binding is a form of filtering Where the selection in the master

list acts as filtering parameter for the associated detail list

56

Master-Details Binding (2)

In previous example we have families and people

Instances of Families, Family, People, and Person looked like this

57

The Families collection is the master data It is holding instances

of the Family class Each of which holds

members property of type People

Which holds the detail Person

Master-Details Binding – Example

Declaring master-detail data:

58

<Window.Resources> <local:Families x:Key="Families"> <local:Family FamilyName="Piyandetata"> <local:Family.Members> <local:People> <local:Person Name="Joro Vodkata" Age="21" /> … </local:People> </local:Family.Members> </local:Family> <local:Family FamilyName="Addams"> <local:Family.Members> <local:People> <local:Person Name="Uncle Fester" Age="135" /> … </local:Families></Window.Resources>

Master-Details Binding –

Example (2) Binding to master Family data:

59

<Window.Resources> <local:Families x:Key="Families">…</local:Families></Window.Resources><Grid DataContext="{StaticResource Families}"> … <!-- Families Column --> <TextBlock Grid.Row="0" Grid.Column="0">Families:</TextBlock> <ListBox Grid.Row="1" Grid.Column="0" IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding}"> <ListBox.ItemTemplate> <DataTemplate> <TextBlock Text="{Binding Path=FamilyName}" /> </DataTemplate> </ListBox.ItemTemplate> </ListBox>

Master-Details Binding –

Example (3) Binding to detail Person data:

60

<Grid DataContext="{StaticResource Families}"> ... … <!-- Members Column --> <StackPanel Grid.Row="0" Grid.Column="1" Orientation="Horizontal"> <TextBlock Text="{Binding Path=FamilyName}" /> <TextBlock Text=" Family Members:" /> </StackPanel> <ListBox Grid.Row="1" Grid.Column="1" IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding Path=Members}" > <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Path=Name}" /> <TextBlock Text=" (age: " /> <TextBlock Text="{Binding Path=Age}" /> <TextBlock Text=" )" /> …

Master-Details Binding

Live Demo

Hierarchical Binding

Hierarchical Binding Hierarchical binding generally involves some number of levels, unknown until runtime E.g. a tree of items, each with few

child items Control that can expand itself as appropriate, like a menu or a tree needs hierarchical binding

WPF has built-in support for hierarchical binding using a special kind of data template Knows both how to display the

current level of data and where to go for the next level

63

Hierarchical Binding (2) Binding a TreeView control’s root item

Provide a data template

64

<DataTemplate DataType="{x:Type local:Family}"> <TextBlock Text="{Binding Path=FamilyName}" /> </DataTemplate></Window.Resources>… <TreeView DataContext="{StaticResource Families}"> <TreeViewItem ItemsSource="{Binding}" Header="Families" /> </TreeView>

Hierarchical Binding (3) HierarchicalDataTemplate element

Provides the ItemsSource property so that the tree can keep digging into the data

65

<HierarchicalDataTemplate DataType="{x:Type local:Family}" ItemsSource="{Binding Path=Members}"> <TextBlock Text="{Binding Path=FamilyName}" /></HierarchicalDataTemplate>

<HierarchicalDataTemplate DataType="{x:Type local:Person}" ItemsSource="{Binding Path=Traits}"> <TextBlock> <TextBlock Text="{Binding Path=Name}" /> (age: <TextBlock Text="{Binding Path=Age}" />) </TextBlock></HierarchicalDataTemplate>

форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно

програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки

уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop

уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC

безплатен курс "Разработка на софтуер в cloud среда"

BG Coder - онлайн състезателна система - online judge

курсове и уроци по програмиране, книги – безплатно от Наков

безплатен курс "Качествен програмен код"

алго академия – състезателно програмиране, състезания

ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NETкурсове и уроци по програмиране – Телерик академия

курс мобилни приложения с iPhone, Android, WP7, PhoneGap

free C# book, безплатна книга C#, книга Java, книга C#Дончо Минков - сайт за програмиранеНиколай Костов - блог за програмиранеC# курс, програмиране, безплатно

?

? ? ??

?? ?

?

?

?

??

?

?

? ?

Questions?

?http://academy.telerik.com

Binding Lists

Exercises1. Write a program to manage a simple

system with information about towns and countries. Each country is described by name, language, national flag and list of towns. Each town is described by name, population and country. You should create navigation over the towns and countries. Enable editing the information about them. Don't use list controls but only text boxes and simple binding

2. Rewrite the previous exercise using list controls. 67

Exercises (2)

3. Create a database with two tables – Categories and Products. Each category has category name. Each product has category, model number, model name unit cost, and description. Consider the simple window look like the screenshot below:

68

Design a form to view products by ID and bind all controls to their relevant columns from the database tables.

Exercises (3)4. Using complex data binding create a

system, resembling the system from the first exercise (towns and countries). Add to the system a set of continents – each country is in one of them. Display data and enable navigation. Load and save the data in a XML file. Add sorting, filtering and grouping functions. Use master-details bindings.

5. Rewrite the previous exercise to use database and LINQ-to-SQL. Ensure all entities can be added / edited / deleted (continents, countries and towns). 69

Free Trainings @ Telerik Academy

Desktop Applications with C# and WPF academy.telerik.com/

Telerik Software Academy academy.telerik.com

Telerik Academy @ Facebook facebook.com/TelerikAcademy

Telerik Software Academy Forums forums.academy.telerik.com