Display Grouped Data in HeaderedItemsControl in Silverlight


Sometimes it is required to display grouped data in Headered Items Control, with group name as top header and the related items under it. We could achieve it using TreeView control as well as Header Items Control. In this article we would achieve this.

Setup Silverlight Project

Create a Silverlight project, or use it in your existing project. For this sample we would use MVVMLight toolkit, Silverlight toolkit and Silverlight SDK controls.

To display sample data I have created an Entity “Product”, which has the following structure.

As you see above, GetProducts is a static method which would provide us sample data.

Let’s get our ViewModel ready.

Create MainPageViewModel, inherit ViewModelBase from MVVM Light Toolkit.

Add a Property: PagedCollection, which is of type: PagedCollectionView.

To use PagedCollectionView you have use System.Windows.Data assembly.

Now we would have the grouped data assigned to the PagedCollection Property.

As you see in above code, the constructor is initializing with all the Products, and then we are adding a group description to it. For this sample it is “Brand”.


Now the main part, where we would design the data template of the Headered items Control.

As you see in above, the ItemTemplate is having an expander control, which has content as another Headered Items Control.

Now let’s run the application and see the result.

Looks like we have achieved what we are looking for.


The tree view control could be used to display grouped data, the group would be parent nodes and the other related items would respective children of their parent nodes.

Hope you like the article. Thanks for reading.

Download Article as PDF: Click Here

Full Source Code: Click Here