The Fairway Technologies Blog

The WPF ListBox Can Do That?! - Part 5

In WPF, data, WPF List Controls No Comments
October 23, 2019

In this fifth part of a series of blog posts on the WPF ListBox, you are going to learn to use the CollectionViewSource class in .NET to group product data on one of the columns. The CollectionViewSource class can be created in XAML and passed parameters in order to group the product data coming from your data source. In addition, you may instantiate a CollectionViewSource class in code and change the grouping of the data based on a user selection.

Before reading this blog post, it is recommended you read my blog post on Using WPF List Controls - Part 1 at https://bit.ly/2LaACHb. This will introduce you to the data layer used in this blog post and review how WPF List Controls work.

Grouping

Grouping is a method in which you can take a property, or properties, from your collection of data and group the data on unique instances from that property(ies). For example, in the Product table there are a finite number of colors. You can get a distinct list of those colors (ie. Grey, Red, Blue, etc.), display those unique colors and list all products within each of those colors as shown in Figure 1.

Group Using XAML

Use the same CollectionViewSource you used in the previous blog post but add a new SortDescription on the Colorproperty. Add a <GroupDescriptions> element just below the closing SortDescriptions element. Add a <PropertyGroupDescription> element with the PropertyName property set to "Color".

Screen Shot 2019-10-17 at 1.36.34 PM

Modify the ListBox to once again use the CollectionViewSource as it's ItemsSource. Within the ListBox element, add a <ListBox.GroupStyle> element to lay out how to display each Color value as shown in Figure 1. You can see there is a thin border around the color value, and the background of the value is Blue. The complete code for the ListBox is shown below.

Screen Shot 2019-10-17 at 1.38.19 PM

The Text property of the TextBlock control is bound to a Name property. This is not the Name property from the Product class, but the name of the Group defined by XAML.

Screen Shot 2019-10-17 at 11.51.34 AMFigure 1: Group data using XAML

Group Using Code

Let's once again add some RadioButton controls to this user control (Figure2) in order to select how to group the data. You are going to add code to group the data by color and by size. Add a Tag property to each of the two RadioButton controls; set one to "Color" and one to "Size". These are the names of the columns in the Product class upon which you are going to group the data.

Screen Shot 2019-10-17 at 1.53.22 PM

Create the GroupTheData event procedure and write the code shown below.

Screen Shot 2019-10-17 at 1.59.56 PM

Just as you did in the previous section, clear the SortDescriptions collection, then re-add the SortDescription objects. The first one should be the column name you are grouping upon. The second can be any other property. Next, add a PropertyGroupDescription object to the GroupDescriptions collection. This grouping is from the value of the RadioButton object clicked upon. Once this CollectionView object has been created, assign it to the ItemsSource of the ListBox to have the ListBox redraw itself and display the data grouped and sorted in the specified manner as shown in Figure 2.

Screen Shot 2019-10-17 at 11.54.03 AMFigure 2: Use code to change the grouping on the fly

Summary

In this blog post, you learned how to group data from the Product table based on color and size. You create a set of GroupDescriptions and add the properties you wish to group on. The CollectionViewSource creates a distinct list of values in each of the properties and uses those to group the rest of the data from your Product table. You may either express these GroupDescriptions in XAML, or you may create them using C#.

 

NOTE: You can download the sample code for this article by visiting my website at http://www.fairwaytech.com/downloads. Select “Fairway/PDSA Blog,” then select “Getting the Most out of the WPF List Box - Part 5” from the dropdown list.