#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.

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

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

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

985-001

 

985-002

Advertisements

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.

    Thanks,
    Jemdream

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 )

Google+ photo

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

Twitter picture

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

Facebook photo

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

w

Connecting to %s

%d bloggers like this: