Master-Detail is a pattern for displaying details of a specific item selected from a list of items. In this post I’ll demonstrate how to use master-detail in WPF with two levels of objects, each displayed in a ComboBox and Data Binding  to tie them together. I Used teams and players to demonstrate it, where the top combo box contains a list of teams to select from, the second combo box contains the list of players of the selected team and the details shown are of the selected player:

class Team
{
    public Team(string name, params Player[] players)
    {
        this.Name = name;
        Players = new ObservableCollection<Player>();
        foreach (Player  p in players)
        {
            Players.Add(p);
        }
    }
    public string Name { get; set; }
    public ObservableCollection<Player> Players { get; set; }
}
class Player
{
    public Player(string firstName, string lastName)
    {
        this.FirstName = firstName;
        this.LastName = lastName;
    }

    public string FirstName { get; set; }
    public string LastName { get; set; }

    public string FullName
    {
        get { return FirstName + " " + LastName; }
    }
}

Lets look at the xaml code, the DataContext here is ObservableCollection<Team> (I’ll show how it was created later):

<!--Master1-->
<ComboBox x:Name="teamComboBox"
          Grid.Row="0" Width="200" Height="25"
          ItemsSource="{Binding}"
          DisplayMemberPath="Name"
          SelectedValuePath="Name"
          SelectedIndex="0"/>
<!--Master2-->
<ComboBox x:Name="playerComboBox"
          Grid.Row="1" Width="200" Height="25"
          ItemsSource="{Binding Path=SelectedItem.Players , ElementName=teamComboBox}"
          DisplayMemberPath="FullName"
          SelectedValuePath="FullName"
          SelectedIndex="0"/>
<!--Detail-->
<WrapPanel Grid.Row="2" Margin="10">
    <TextBlock Width="100" Height="25"
               Text="{Binding Path=SelectedItem.FirstName, ElementName=playerComboBox}"/>
    <TextBlock Width="100" Height="25"
               Text="{Binding Path=SelectedItem.LastName, ElementName=playerComboBox}"/>
</WrapPanel>

The first combo box is bounded to the teams collection. The second one is bounded to the selected item of the first one, and the details are bounded to the selected item of the second one.

The code for creating the DataContext looks like this:

ObservableCollection<Team> teams = new ObservableCollection<Team>();
teams.Add(new Team("LA Lakers",
    new Player("Kobe", "Bryant"),
    new Player("Pau", "Gasol"),
    new Player("Lamar","Odom" )));

teams.Add(new Team("Detroit Pistons",
    new Player("Richard", "Hamilton"),
    new Player("Chauncey","Billups"),
    new Player("Tayshaun","Prince ")));

teams.Add(new Team("San Antonio Spurs",
    new Player("Tony", "Parker"),
    new Player("Damon", "Stoudamire" ),
    new Player("Tim", "Duncan")));

teams.Add(new Team("Boston Celtics",
    new Player("Ray","Allen"),
    new Player("Tony", "Allen"),
    new Player("P.J.","Brown")));

this.DataContext = teams;