Binding Lists in WPF - Sort, Filter, Group Data

Binding Lists in WPF ,[object Object],[object Object],[object Object],[object Object],[object Object]

Table of Contents ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Table of Contents (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Complex Data Binding Binding to a Collection of Items

Complex B inding ,[object Object],// Create an alias for a generic type so that we // can create a list of Person objects in XAML class People : List<Person> { }  <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 B inding (2) ,[object Object],[object Object],<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" ,[object Object],[object Object]

Accessing the "Current Item" (3) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Accessing the "Current Item" (2) ,[object Object],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 ,[object Object],[object Object],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 Items Live Demo

Binding List Controls DisplayMemberPath and SelectedValuePath

Binding List Controls ,[object Object],[object Object],[object Object],[object Object],[object Object]

DisplayMemberPath ,[object Object],[object Object],<ListBox ItemsSource="{Binding}" DisplayMemberPath="Name" IsSynchronizedWithCurrentItem="True" />

SelectedValuePath ,[object Object],[object Object],<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 SelectedValuePath Live Demo

Using Look-up Bindings ,[object Object],[object Object],public class NamedAge { public string NameForAge { get; set; } public int AgeId { get; set; } } class NamedAges : List<NamedAge> { }

Using Look-up Bindings (2) ,[object Object],[object Object],<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 Bindings Live Demo

Using Data Templates ,[object Object],[object Object],[object Object],[object Object],[object Object]

Using Data Templates (2) ,[object Object],<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) ,[object Object],[object Object],[object Object]

Sorting Items ,[object Object],[object Object],[object Object],[object Object]

Sorting Items (2) ,[object Object],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(); }

Filtering ,[object Object],[object Object],[object Object],private void buttonFilter_Click(object sender, RoutedEventArgs e) { ICollectionView view = GetFamilyView(); // the example continues

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

Grouping ,[object Object],[object Object],[object Object],if (view.GroupDescriptions.Count == 0) { view.GroupDescriptions.Add( new PropertyGroupDescription("Age")); } else { view.GroupDescriptions.Clear(); }

Grouping (2) ,[object Object],[object Object],[object Object],[object Object],<ListBox … ItemsSource="{Binding}" > <ListBox.GroupStyle> <x:Static Member="GroupStyle.Default" /> </ListBox.GroupStyle> </ListBox>

Filtering and Grouping Live Demo

Declarative Sorting and Grouping

Declarative Sorting and Grouping ,[object Object],[object Object],[object Object],[object Object],xmlns:compModel="clr-namespace:System.ComponentModel; assembly=WindowsBase" xmlns:data="clr-namespace:System.Windows.Data;assembly= PresentationFramework">

Declarative Sorting and Grouping (2) <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 Grouping Live Demo

Object Data Provider ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Object Data Provider – Example ,[object Object],[object Object],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) ,[object Object],[object Object],[object Object],<Window.Resources> ... <ObjectDataProvider x:Key="Family" ObjectType="{x:Type local:RemotePeopleLoader}" MethodName="LoadPeople" /> </Window.Resources>

Binding to Relational Data ,[object Object],[object Object],[object Object],[object Object],DataClassesPeopleDataContext dataContextPeople = new DataClassesPeopleDataContext();

Binding to Relational Data (2) ,[object Object],<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) ,[object Object],[object Object],People newPerson = new People(); newPerson.PersonName = TextBoxAdd.Text; dataContexPeople.Peoples.InsertOnSubmit(newPerson); dataContexPeople.SubmitChanges();

Binding to Relational Data Live Demo

XML Data Source Provider ,[object Object],[object Object],<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>

XML Data Source Provider (2) ,[object Object],[object Object],… <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) ,[object Object],[object Object],[object Object],void birthdayButton_Click(object sender, RoutedEventArgs e) { ICollectionView view = GetFamilyView( ); XmlElement person = (XmlElement)view.CurrentItem; // the example continues

XML Data Source Provider (4) 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 Provider Live Demo

Master-Details Binding ,[object Object],[object Object],[object Object],[object Object],[object Object]

Master-Details Binding (2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Master-Details Binding – Example ,[object Object],<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) ,[object Object],<Window.Resources> <local:Families x:Key="Families">…</local:Families> </Window.Resources> <Grid DataContext="{StaticResource Families}"> …  <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) ,[object Object],<Grid DataContext="{StaticResource Families}"> ... …  <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 ,[object Object],[object Object],[object Object],[object Object],[object Object]

Hierarchical Binding (2) ,[object Object],[object Object],<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) ,[object Object],[object Object],<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>

Binding Lists ,[object Object],http://academy.telerik.com

Exercises ,[object Object],[object Object]

Exercises (2) ,[object Object],Design a form to view products by ID and bind all controls to their relevant columns from the database tables.

Exercises (3) ,[object Object],[object Object]

Binding Lists in WPF - Sort, Filter, Group Data

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (13)

Similar to Binding Lists in WPF - Sort, Filter, Group Data

Similar to Binding Lists in WPF - Sort, Filter, Group Data (20)

More from Doncho Minkov

More from Doncho Minkov (18)

Recently uploaded

Recently uploaded (20)

Binding Lists in WPF - Sort, Filter, Group Data

Editor's Notes