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;

Tags :

7 Responses to “How to Create a WPF Two Level Master-Detail Application With ComboBoxes”


  1. sandrar

    Said on September 10, 2009 :

    Hi! I was surfing and found your blog post… nice! I love your blog. :) Cheers! Sandra. R.

  2. Dave Rose

    Said on November 10, 2009 :

    IT would be great to have a downloadable project…

  3. Jeroen

    Said on November 12, 2009 :

    Nice. was looking for a solution to do exactly the same thing, thanks.

  4. Poker1Canoker

    Said on September 6, 2011 :

    This is day one stuff that we all need to know and use. Thanks for posting this!

  5. Wireless Products

    Said on February 22, 2014 :

    You need to be a part of a contest for one of the greatest blogs on the web.
    I most certainly will highly recommend this web site!

2 Trackback(s)

  1. May 28, 2008: Dew Drop - May 28, 2008 | Alvin Ashcraft's Morning Dew
  2. Jun 2, 2008: Wöchentliche Rundablage: ASP.NET MVC, .NET, ADO.NET Data Services, Silverlight, WPF… | Code-Inside Blog

Post a Comment