Silverlight Simple Master Detail Binding

Question

I have what I think is a very simple problem, but for some reason the answer is escaping me. I am creating a simple Master/Detail DataGrid in Silverlight. Most of the samples on the web display this by creating an object with a Collection of some kind, and binding the Detail grid to the collection. In my case, I just want to bind the detail grid to the same object as the row acting as the master. I know my example code is simple, but I'm just trying to make the simplest possible demo to recreate it. That being said, let's say I have this data:

public class Customer
{
    public int CustomerId { get; set; }
    public string CustomerName { get; set; }
    public string FavoriteColor { get; set; }
}

public class CustomerCollection : ObservableCollection<Customer>
{
    public CustomerCollection()
    {
        Add(new Customer() { CustomerId = 101, CustomerName = "Todd", FavoriteColor = "Red" });
        Add(new Customer() { CustomerId = 102, CustomerName = "Melissa", FavoriteColor = "White" });
        Add(new Customer() { CustomerId = 102, CustomerName = "Alicia", FavoriteColor = "Blue" });
        Add(new Customer() { CustomerId = 104, CustomerName = "Matthew", FavoriteColor = "Yellow" });
    }
}

OK. Pretty darn simple. Now, I'm going to bind this collection to a datagrid. Each row should show the CustomerId and CustomerName. And when you click the row, I want to display their favorite color in the details datagrid.

So the question is... How do I bind the details grid so that it shows the Favorite Color? Or in other words, how do bind to the parent row as my data source?

<UserControl x:Class="Sample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="419" d:DesignWidth="742" 
             xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
            xmlns:src="clr-namespace:Sample">

    <UserControl.Resources>
        <src:CustomerCollection x:Key="CustDs"></src:CustomerCollection>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource CustDs}}">
        <Grid.RowDefinitions>
            <RowDefinition Height="56*" />
            <RowDefinition Height="363*" />
        </Grid.RowDefinitions>
        <TextBlock Name="TextBlock1" Text="Customer Information" FontSize="28" TextAlignment="Center" />
        <sdk:DataGrid AutoGenerateColumns="False" Grid.Row="1"
                      Height="301" HorizontalAlignment="Left" Margin="30,22,0,0"
                      Name="DgCust" VerticalAlignment="Top" Width="681" ItemsSource="{Binding}"
                       HeadersVisibility="All" ColumnWidth="*">
            <sdk:DataGrid.Columns>
                <sdk:DataGridTextColumn Header="Customer Id" Binding="{Binding CustomerId}"></sdk:DataGridTextColumn>
                <sdk:DataGridTextColumn Header="Customer Name" Binding="{Binding CustomerName}"></sdk:DataGridTextColumn>
            </sdk:DataGrid.Columns>
            <sdk:DataGrid.RowDetailsTemplate>
                <DataTemplate>
                    <sdk:DataGrid Height="200" Width="600" AutoGenerateColumns="False" ColumnWidth="*" 
                                  ItemsSource="{Binding}">
                        <sdk:DataGrid.Columns>
                            <sdk:DataGridTextColumn Header="Favorite Color" Binding="{Binding}"></sdk:DataGridTextColumn>
                        </sdk:DataGrid.Columns>
                    </sdk:DataGrid>
                </DataTemplate>
            </sdk:DataGrid.RowDetailsTemplate>
        </sdk:DataGrid>
    </Grid>
</UserControl>

Answer 1

Your data doesn't represent a Master/Detail scenario. If you just want to display the favorite color in a details area, do this in the DataTemplate section:

            <sdk:DataGrid.RowDetailsTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding FavoriteColor}" />
            </DataTemplate>
        </sdk:DataGrid.RowDetailsTemplate>

If you actually want Master/Details, try this instead:

    public class Customer
{
    public int CustomerId { get; set; }
    public string CustomerName { get; set; }
    public string FavoriteColor { get; set; }
    public List<FavoriteShow> Shows { get; set; }
}

public class FavoriteShow
{
    public string Name {get;set;}
    public int Stars {get;set;}
}

public class CustomerCollection : ObservableCollection<Customer>
{
    public CustomerCollection()
    {
        List<FavoriteShow> showList1 = new List<FavoriteShow>();
        showList1.Add(new FavoriteShow { Name="Bugs Bunny", Stars = 4});
        showList1.Add(new FavoriteShow { Name="Superman", Stars=2});
        showList1.Add(new FavoriteShow { Name="A-Team", Stars=3});

        List<FavoriteShow> showList2 = new List<FavoriteShow>();
        showList2.Add(new FavoriteShow { Name = "Dallas", Stars = 1 });
        showList2.Add(new FavoriteShow { Name = "Loony Tunes", Stars = 3 });

        Add(new Customer() { CustomerId = 101, CustomerName = "Todd", FavoriteColor = "Red", Shows = showList1 });
        Add(new Customer() { CustomerId = 102, CustomerName = "Melissa", FavoriteColor = "White" });
        Add(new Customer() { CustomerId = 102, CustomerName = "Alicia", FavoriteColor = "Blue", Shows = showList2 });
        Add(new Customer() { CustomerId = 104, CustomerName = "Matthew", FavoriteColor = "Yellow" });
    }
}

And the XAML:

<UserControl x:Class="Sample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
         d:DesignHeight="419"
         d:DesignWidth="742"
         xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
         xmlns:src="clr-namespace:Sample">

<UserControl.Resources>
    <src:CustomerCollection x:Key="CustDs"></src:CustomerCollection>
</UserControl.Resources>

<Grid x:Name="LayoutRoot"
      Background="White"
      DataContext="{Binding Source={StaticResource CustDs}}">
    <Grid.RowDefinitions>
        <RowDefinition Height="56*" />
        <RowDefinition Height="363*" />
    </Grid.RowDefinitions>
    <TextBlock Name="TextBlock1"
               Text="Customer Information"
               FontSize="28"
               TextAlignment="Center" />
    <sdk:DataGrid AutoGenerateColumns="False"
                  Grid.Row="1"
                  Height="301"
                  HorizontalAlignment="Left"
                  Margin="30,22,0,0"
                  Name="DgCust"
                  VerticalAlignment="Top"
                  Width="681"
                  ItemsSource="{Binding}"
                  HeadersVisibility="All"
                  ColumnWidth="*">
        <sdk:DataGrid.Columns>
            <sdk:DataGridTextColumn Header="Customer Id"
                                    Binding="{Binding CustomerId}"></sdk:DataGridTextColumn>
            <sdk:DataGridTextColumn Header="Customer Name"
                                    Binding="{Binding CustomerName}"></sdk:DataGridTextColumn>
        </sdk:DataGrid.Columns>
        <sdk:DataGrid.RowDetailsTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding FavoriteColor}" />
                    <sdk:DataGrid ItemsSource="{Binding Shows}" />
                </StackPanel>
            </DataTemplate>
        </sdk:DataGrid.RowDetailsTemplate>
    </sdk:DataGrid>
</Grid>