ListBox Grouping WPF

Question

I'm trying to group a listbox. And all I can get to show up is the header.

I've got a list list of 'Online Users' , which look like this.

public class OnlineUser{
  public string Branch {get;set;}
  public string FirstName{get;set;}
  public string LastName{get;set;}
}

Then i populate the list with some users, and put that list into a ICollectionView 'FilterableOnlineUsers'

FilterableOnlineUsers = CollectionViewSource.GetDefaultView(OnlineUsers);
FilterableOnlineUsers.GroupDescriptions.Add(new PropertyGroupDescription("Branch"));
FilterableOnlineUsers.SortDescriptions.Add(new SortDescription("Branch", ListSortDirection.Descending));

And in my Xaml:

<ListBox  SelectedItem="{Binding DataContext.SelectedUser" ItemsSource="{Binding DataContext.FilterableOnlineUsers" >
<ListBox.GroupStyle>
    <GroupStyle />
</ListBox.GroupStyle>
<ListBox.ItemTemplate>
    <DataTemplate>
         <StackPanel Orientation="Horizontal">
            <TextBlock>
                <TextBlock.Text>
                    <MultiBinding StringFormat="{}{0} {1}">
                         <Binding Path="FirstName"></Binding>
                        <Binding Path="LastName"></Binding>
                    </MultiBinding>
                </TextBlock.Text>
            </TextBlock>
        </StackPanel>
    </DataTemplate>
 </ListBox.ItemTemplate>

All I can get to show up in the Listbox is the branch name. I can't get first name or lastname to show up underneath the group Descriptions..

Thanks.

Answer 1

You should define a CollectionViewSource in XAML resource Like Below and make the ItemsSource set to the CollectionViewSource,

<CollectionViewSource x:Key="ListBoxItems" Source="{Binding Path=ListOfOnlineUser}">
        <CollectionViewSource.GroupDescriptions>
            <PropertyGroupDescription PropertyName="Branch" />
        </CollectionViewSource.GroupDescriptions>
</CollectionViewSource>

In List Box

 <ListBox ItemsSource="{Binding Source={StaticResource ListBoxItems}}"/>

Detail Below is the ListBox show grouped branch and each branch is inside an expander which you can collapse and expand each groups.

    <ListBox
        Margin="0,0,5,0"
        ItemsSource="{Binding Source={StaticResource ListBoxItems}}"
        SelectedIndex="-1"
        SelectedItem="{Binding SelectedBranch}">            
        <ListBox.GroupStyle>
            <GroupStyle>
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Vertical" />
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
                <GroupStyle.ContainerStyle>
                    <Style TargetType="{x:Type GroupItem}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <Expander
                                        Padding="0"                                           
                                        BorderThickness="0"
                                        Header="{Binding Name}"
                                        IsExpanded="True">
                                        <ItemsPresenter/>
                                    </Expander>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GroupStyle.ContainerStyle>
            </GroupStyle>
        </ListBox.GroupStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Border BorderThickness="0">
                    <Grid>                            
                        <StackPanel Orientation="Horizontal">                               
                            <TextBlock Text="{Binding FirstName}" />
                            <TextBlock Text="{Binding LastName}" />
                        </StackPanel>                            
                    </Grid>
                </Border>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Padding" Value="0" />
                <Setter Property="Margin" Value="0" />
            </Style>
        </ListBox.ItemContainerStyle>
    </ListBox>