WPF: Bind Collection with Collection to a ListBox with groups

Question

Hi,

sometimes WPF is too complex for me. I've got my "Window1" holding a collection of "Group"s. "Group" is a class with a collection of "Person"s. In the end this should be a contact list. What I simply want to do is to show the groups with its person in a ListBox, where the group name of the list groups equals the Name Property of my class "Groups".

I've tried with a CollectionViewSource bound to the "Collection". The groups are shown correct, but the items of the list are equal to the group names. So each group has only one item: its group name.

Many examples here show the grouping of items with only one collection. What I can do is to set the group name as Property of "Person". But then I can't count (and that is really neccessary): - how many persons are in each group - how many of that persons have the "Status" "Online".

I use linq in the "Group" class to count that. Thanks for any advice helping me to get started.

Answer 1

If you have a copy of Programming WPF, jump to Page 221. If not I'll summarize (in my inept sort of way)

First you don't need to manually group the Person objects.

If each Person object has a Group property,

People people = // retrieve the List<Person> somehow
ICollectionView view = CollectionViewSource.GetDefaultView(people);
view.GroupDescriptions.Add( new PropertyGroupDescription("Group") );

All controls that derive from ItemsControl can display grouped items, so

// the XAML
<ListBox ... ItemsSource={Binding}>
  <ListBox.GroupStyle>
    <x:Static Member="GroupStyle.Default" />
  </ListBox.GroupStyle>
</ListBox>

You can also define a custom GroupStyle and specify the GroupStyle.HeaderTemplate to define a new DataTemplate that shows custom attributes like 'some PropertyValue (Count)' - Bind the one TextBlock to {Binding SomeProperty} and the other to {Binding ItemCount}

HTH

Answer 2

Well, I am not sure if this is what you want achieve but here is a way that you can try:

Assuming your classes are like these:

public class Group
{
    public string Name { get; set; }
    public List<Contact> Contacts { get; set; }
}

public class Contact
{
    public string Name { get; set; }
    public bool IsOnline { get; set; }
}

You can set ListBox.ItemTemplate as another ListBox bind to Contacts property, like:

<CollectionViewSource x:Key="groups" Source="{Binding}" >
    <CollectionViewSource.GroupDescriptions>
        <PropertyGroupDescription PropertyName="Name" />
    </CollectionViewSource.GroupDescriptions>
</CollectionViewSource>

<DataTemplate x:Key="groupTemplate" DataType="Group">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="{Binding Name}" />
    </StackPanel>
</DataTemplate>

<ListBox ItemsSource="{Binding Source={StaticResource groups}}">
    <ListBox.GroupStyle>
        <GroupStyle HeaderTemplate="{StaticResource groupTemplate}" />
    </ListBox.GroupStyle>
    <ListBox.ItemTemplate>
        <DataTemplate DataType="Contact">
            <ListBox ItemsSource="{Binding Contacts}">
                <ListBox.ItemTemplate>
                    <DataTemplate DataType="Contact">
                        <TextBlock Text="{Binding Name}" />
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

You have to style the inner listbox a little bit.

Edit: Another solution by using TreeView

<DataTemplate DataType="Contact">
   <TextBlock Text="{Binding Name}" />
</DataTemplate>

<TreeView ItemsSource="{Binding Source={StaticResource groups}}">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate DataType="Group" ItemsSource="{Binding Contacts}">
            <TextBlock Text="{Binding Name}" />
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>