Connecting Two ListViews

Question

I'm trying to use two listviews (that are on same page - wpf) to display info about a group class. In the first Listview I want to display the group # and group size(using gridview) and in the second listview I want to display the first name and last name of each person that is in the group that I have selected in the first listview box. Both listviews are using gridviews. I have one observableCollection that the first listview is binded to. Do I make another observablecollection to bind to the second listview. If so how do I connect the two collections? I cannot figure out how to do this. Any help is greatly greatly appreciated.

xaml:

   <ListView HorizontalAlignment="Stretch" Margin="0,12" x:Name ="listViewGroups" ItemsSource="{Binding Groups}" IsSynchronizedWithCurrentItem="{x:Null}" Grid.Column="1">
        <ListView.View>
            <GridView>
                <GridViewColumn DisplayMemberBinding="{Binding GroupNumber}" Width="40">
                    <GridViewColumnHeader Tag="GroupNumber" Content="#" Click="SortClick" />
                </GridViewColumn>
                <GridViewColumn DisplayMemberBinding="{Binding GroupLeader}" Width="120">
                    <GridViewColumnHeader Tag="GroupLeader" Content="Group Leader" Click="SortClick" />
                </GridViewColumn>
                <GridViewColumn DisplayMemberBinding="{Binding GroupSize}" Width="70">
                    <GridViewColumnHeader Tag="GroupSize" Content="Group Size" Click="SortClick" />
                </GridViewColumn>
            </GridView>
        </ListView.View>
    </ListView>

            <Label Content="Leader" Height="28" Margin="12,12,0,0" Name="lblFirstName" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" />
            <TextBox Text="{Binding SelectedItem.GroupLeader, ElementName =listViewGroups}" Height="23" Margin="12,31,0,0" Name="txtFirstName" MaxWidth="160" Grid.Column="2" VerticalAlignment="Top" HorizontalAlignment="Left" Width="160" />
            <Label Content="Group Members" Height="28" HorizontalAlignment="Left" Margin="14,60,0,0" Name="label1" VerticalAlignment="Top" Grid.Column="2" />
            <ListView HorizontalAlignment="Stretch" Margin="12,80,188,12" x:Name ="listViewGroupMembers" ItemsSource="{Binding Groups}"  IsSynchronizedWithCurrentItem="{x:Null}" VerticalAlignment="Stretch" Grid.Column="2">
                <ListView.View>
                    <GridView>
                        <GridViewColumn DisplayMemberBinding="{Binding FirstName}" Width="100">
                            <GridViewColumnHeader Tag="Name" Content="First Name" Click="SortClick" />
                        </GridViewColumn>
                        <GridViewColumn DisplayMemberBinding="{Binding LastName}" Width="80">
                            <GridViewColumnHeader Tag="Name" Content="Last Name" Click="SortClick" />
                        </GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>

Group Class:

public class Group
{

    public List<Camper> members;
    private String name;
    public static int groupCount = 0; 
    private static int optimalSize = 8;



    public string GroupNumber { get; set; }

    public string GroupLeader { get; set; }

    public int GroupSize { get; set; }

    public string FirstName { get { return "Testing"; } set { } }

    public string LastName { get; set; } 

    public Group()
    {        
        this.members = new List<Camper>();
        this.name = "Group " + groupCount;
        groupCount++;
    }
}

In the Mainwindow : this click event below has to do with a custom button that is on a toolbar i made. When I click the button Groups are customly made.

   ObservableCollection<Group> bind = new ObservableCollection<Group>();

    private void btnRun_Click(object sender, RoutedEventArgs e)
    {
        allGroups = AssignRelationshipValues.assignGroups(allCampers);
       ObservableCollection<Camper> groupCampers = new ObservableCollection<Camper>();

        bind.Groups.Clear();

        for (int g = 0; g < allGroups.Count; g++)
        {
            for (int i = 0; i < allGroups[g].members.Count; i++)
            {
                groupCampers.Add(allGroups[g].members[i]);

            } bind.Groups.Add(new Group { GroupNumber = allGroups[g].getName(), GroupSize = allGroups[g].getOptimalSize(), Members = groupCampers });

        } 
    }

Answer 1

If I'm reading this correctly, what you'd want is for your second ListView to be bound like so:

<ListView ItemsSource="{Binding SelectedItem.members, ElementName=listViewGroups}" />

Similar to what you have on your TextBox that's bound to GroupLeader. Also, Shouldn't FirstName and LastName be properties on the Camper class rather than on the Group class? They would have to be in order for this to work if I'm understanding what you're after.

Some clarification: What this binding is saying is "Go to the 'listViewGroups' ListView and get the SelectedItem". This will be a Group object, since listViewGroups is bound to a collection of Group objects. Then it will try to find a property on the selected Group item called members, which is your List<Camper> - which you'll probably want to change to an ObservableCollection. Then anything inside your second ListView will then reference the objects in the collection it's bound to (Group.members) to resolve bindings, which means it will look for FirstName and LastName on the Camper objects within members.

You can go here for further explanation from MSDN about Silveright/WPF databinding.