Select text
2012-12-28 14:42:25
WPF: Bind Collection with Collection to a ListBox with groups
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.
 
http://stackoverflow.com/questions/896587/wpf-bind-collection-with-collection-to-a-listbox-with-groups
Select text
Direct link
28 Dec 2012, 02:44 PM

This is the pop-up flow.

[close]

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>
share|edit|flag
edited May 22 '09 at 9:05
 
answered May 22 '09 at 7:25
 
idursun
2,7361320
 
 
This is quiet helpful and equal to my old solution, where I had an Expander per group and a ListBox for the Contacts. The problem here is, that you can select a person per list, but I supposed you can do it with one. I try to copy the UI of the Windows Live Messenger 2009 contact list. I think they used only one ListBox and an Expander as ControlTemplate for the group. But I also assume, they defined the group as property. But I really don't know, how they can count the online persons. By the way, you are right with your classes. – user110918 May 22 '09 at 8:01
 
 
Why don't you use TreeView control for displaying hierarchical data? – idursun May 22 '09 at 8:24
 
 
You are absolutely right! I think, that would solve my problem for sure. I've got no answer for the "why". I haven't used the TreeView control a lot. But this would be the best for my problem. Thanks! – user110918 May 22 '09 at 9:01
 
 
I edited my answer with a TreeView example. – idursun May 22 '09 at 9:06
 
 
TreeView was really that what I needed. – user110918 May 22 '09 at 9:35
Invalid Email or Password