ListBox Group Header Expand And Collapse In WPF


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 it’s Contents.

Creating WPF Project

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

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<Person> myList;

 


public Window1()

{

InitializeComponent();

myList = new
ObservableCollection<Person>()

{


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.

<ListBox x:Name=”lbPersonList” Margin=”19,17,162,25″ AlternationCount=”2″>


<ListBox.GroupStyle>


<GroupStyle />


</ListBox.GroupStyle>

 


<ListBox.ItemTemplate>


<DataTemplate>


<TextBlock Text=”{Binding Name}”/>


</DataTemplate>


</ListBox.ItemTemplate>


</ListBox>

 

Now run the application and you will see the Sorting in the Grouped contents too.

Now we will add the code for Expand and Collapse of Header.

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

<Style x:Key=”ContainerStyle” TargetType=”{x:Type GroupItem}”>


<Setter Property=”Template”>


<Setter.Value>


<ControlTemplate>


<Expander Header=”{Binding Name}” IsExpanded=”True”>


<ItemsPresenter />


</Expander>


</ControlTemplate>


</Setter.Value>


</Setter>


</Style>

 

Add the Style to the GroupStyle of ListBox.

<ListBox.GroupStyle>


<GroupStyle ContainerStyle=”{StaticResource ContainerStyle}”/>


</ListBox.GroupStyle>

 

Now run the application to See the Expand and Collapse of Grouped Headers.

That’s it. Hope this article helps.

Advertisements