Master-Detail patter implemented using WPF

The master-detail pattern is a very neat way of displaying and organizing data that falls within some hierarchy. It is a quite efficient way of creating a custom user experience by allowing the user to start from various entry points and navigate to the items they are interested in. Master-detail pattern is used in almost all desktop and web applications so recently I also came across a problem that needed its implementation. If you've never done that and you like data binding as much as I do keep reading to see how it can be done in WPF :-)

Problem definition: I have a list of animal species and a list of examples for each of the species. Every example have some additional information. I would like to organize it nicely into two lists (species, examples) and a custom way of displaying the additional information. User will choose a species and see a list of examples, than he will choose an example an see the details.

Master-detail solution: (1) the list of species is a master for the examples list, the examples list is a detail for each item in the list of species (2) the examples list is a master for additional information, additional information is a detail for each item in the list of examples. So my solution will use master-detail patter twice.

Implementation details: LifeSource is an object of a data source containing all data I need to create this example. First of all I bind a collection of Spiecies to items source of a ListBox:

<ListBoxName="SpeciesListBox" 
    ItemsSource="{Binding Path=LifeSource.SpeciesCollection}"/>

Than another list box items source is bound to a selected element from the first one (species – examples):

<ListBox Name="AnimalsListBox" ItemsSource="{Binding 
    Path=SelectedItem.Animals, ElementName=SpeciesListBox}"/>

And last binding – some controls which will show the additional information about items from AnimalsListBox:

<Label Content="{Binding Path=SelectedItem.Name, 
                 Mode=OneWay, ElementName=AnimalsListBox}"/> 
<Label Content="{Binding Path=SelectedItem.LatinName, 
                 Mode=OneWay, ElementName=AnimalsListBox}"/>
<Image Source="{Binding Path=SelectedItem.Photo, 
                Mode=OneWay, ElementName=AnimalsListBox}" />

Finally the master-detail animal show (selected items have blue background):

Here you can find c#/xaml code and VS2008 project. All photos and information used in this example comes from Wikipedia.