#985 – Displaying Expandable Groups within a ListBox

You can group items in a ListBox using a CollectionViewSource.  You can then set the GroupStyle property of the ListBox to be an Expander control so that the groups can be expanded and collapsed.

In the example below, we group a collection of Actors by the decade of their birth.

        <CollectionViewSource x:Key="cvsActors" Source="{Binding ActorList}" >
                <scm:SortDescription PropertyName="DecadeBorn" />
                <scm:SortDescription PropertyName="LastName" />
                <data:PropertyGroupDescription  PropertyName="DecadeBorn"/>

        <ListBox Name="lbActors" Margin="15" Width="200" Height="240"
                 ItemsSource="{Binding Source={StaticResource cvsActors}}">
                        <Style TargetType="{x:Type GroupItem}">
                            <Setter Property="Template">
                                        <Expander Header="{Binding Name}" IsExpanded="True">
                                            <ItemsPresenter />

We can now expand and collapse the groups representing an actor’s birth decade.





About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

4 Responses to #985 – Displaying Expandable Groups within a ListBox

  1. Pingback: Dew Drop – January 13, 2014 (#1700) | Morning Dew

  2. jemdream says:

    Hey Sean,

    do you possibly know how to sort/order those groups that are being generated? I know how to order elements insideof them etc. but I want to reorder whole groups. I feel like I have no control of them after they appear. I try to stick to MVVM approach.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: