Silverlight Simple Master Detail Binding - silverlight

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>