.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> WPF >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Expand and Collapse ListBox Group Header in WPF

Posted By:Diptimaya Patra       Posted Date: March 24, 2010    Points: 25    Category: WPF    URL: http://www.dotnetspark.com  

Expand and Collapse ListBox Group Header in WPF. In this article we will see how can we expand and collapse the header and its contents.
 

Introduction


In my previous article we had seen how to achieve grouping and sorting in ListBox. In this article we will see how can we expand and collapse the header and its contents.


Creating WPF Project


Fire up Visual Studio 2008 and create a new WPF Project. Name it as ListBoxSampleWPF.


1.gif



Now we will add a ListBox to the application and it will look as following:


Now let's add some sample data to the ListBox.


public class Person
{
       public string Name { get; set; }
       public int Age { get; set; }
       public string Country { get; set; }
}
ObservableCollection myList;
public Window1()
{
           InitializeComponent();
           myList = new ObservableCollection()
           {
               new Person{ Name="Name 1", Age=24, Country="Japan"},
               new Person{ Name="Name 2", Age=24, Country="India"},
               new Person{ Name="Name 3", Age=24, Country="China"},
               new Person{ Name="Name 4", Age=24, Country="Japan"},
               new Person{ Name="Name 5", Age=24, Country="India"},
               new Person{ Name="Name 6", Age=24, Country="US"},
               new Person{ Name="Name 7", Age=24, Country="US"},
               new Person{ Name="Name 8", Age=24, Country="India"},
               new Person{ Name="Name 9", Age=24, Country="India"},
               new Person{ Name="Name 10", Age=24, Country="India"},
               new Person{ Name="Name 11", Age=24, Country="India"},
               new Person{ Name="Name 12", Age=24, Country="China"},
               new Person{ Name="Name 13", Age=24, Country="India"},
               new Person{ Name="Name 14", Age=24, Country="India"},
               new Person{ Name="Name 15", Age=24, Country="India"},
               new Person{ Name="Name 16", Age=24, Country="China"},
               new Person{ Name="Name 17", Age=24, Country="India"},
               new Person{ Name="Name 18", Age=24, Country="India"},
               new Person{ Name="Name 19", Age=24, Country="India"},
               new Person{ Name="Name 20", Age=24, Country="US"},
               new Person{ Name="Name 21", Age=24, Country="US"},
               new Person{ Name="Name 22", Age=24, Country="India"},
           };
           lbPersonList.ItemsSource = myList;
}

Now we would like to see the persons from different countries. Then add the following code.


ICollectionView view = CollectionViewSource.GetDefaultView(myList);
view.GroupDescriptions.Add(new PropertyGroupDescription("Country"));
view.SortDescriptions.Add(new SortDescription("Country", ListSortDirection.Ascending));
view.SortDescriptions.Add(new SortDescription("Name", ListSortDirection.Ascending));
lbPersonList.ItemsSource = view;

And in XAML we need to add the GroupStyle for the ListBox.



           
               
       
           
               
                   
               
           

Now run the application and you will see the sorting in the grouped contents too.


2.gif

 
Now we will add the code for expand and collapse of header.


Now add a style to the Window.Resources as follows:



Add the style to the GroupStyle of ListBox.



               

Now run the application to see the expand and collapse of grouped headers.


3.gif

 
That's it. Hope this article helps.

 Subscribe to Articles

     

Further Readings:

Responses
Author: Bogdan         Company URL: http://www.dotnetspark.com
Posted Date: August 24, 2011

Great article and introduction. But going deeper and more complicated.

I have WPF window that I refresh every 15 seconds and pull new data.
It is either a list or a group view.
In a group view if I expand/collapse some or one of the groups I would like them to stay that way after the refresh.
So what kind of code / binding would I use to accomplish that? Maybe just XAML can do that for me? doubtful.
How to save that to have it added to the result set that comes back new.

<expander header="{Binding Name}" isexpanded="{Biding ??}">
<itemspresenter>
</itemspresenter></expander>

I have not found a solution yet but hope to get it done soon.
MVVM maybe come to rescue but that would mean re-factor some things in my project.

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend