Master-detail Data Grid in Sketchflow

Question

I have created a simple master-details screen using two DataGrids in SketchFlow, but have been unable to have the child DataGrid update when a row is selected in the master DataGrid. The strange thing is, it works perfectly fine if the child is a ListBox rather than a DataGrid.

I have used Blend to create some hierarchical sample data like so:

<xs:schema xmlns:tns="Expression.Blend.SampleData.SampleDataSource" xmlns:blend="http://schemas.microsoft.com/expression/blend/2008" targetNamespace="Expression.Blend.SampleData.SampleDataSource" xmlns:xs="http://www.w3.org/2001/XMLSchema"&gt;
  <xs:element name="SampleDataSource" type="tns:SampleDataSource" />
  <xs:complexType name="SampleDataSource">
    <xs:sequence>
      <xs:element name="Collection" type="tns:ItemCollection" />
    </xs:sequence>
  </xs:complexType>
  <xs:complexType name="ItemCollection">
    <xs:sequence>
      <xs:element maxOccurs="unbounded" name="Item" type="tns:Item" />
    </xs:sequence>
  </xs:complexType>
  <xs:complexType name="Item">
    <xs:sequence>
      <xs:element name="ChildRecords" type="tns:ChildRecords" />
    </xs:sequence>
    <xs:attribute name="Property1" type="xs:string" />
    <xs:attribute name="Property2" type="xs:boolean" />
  </xs:complexType>
  <xs:complexType name="ChildRecords">
    <xs:sequence>
      <xs:element maxOccurs="unbounded" name="ChildRecordsItem" type="tns:ChildRecordsItem" />
    </xs:sequence>
  </xs:complexType>
  <xs:complexType name="ChildRecordsItem">
    <xs:attribute name="Property1" type="xs:string" />
    <xs:attribute name="Property2" type="xs:string" />
    <xs:attribute name="Property3" type="xs:string" />
  </xs:complexType>
</xs:schema>

And the relevant XAML is as below. No code is being used as we're trying to allow our designers to be able to do this using the Blend UI.

<data:DataGrid x:Name="dataGrid" HorizontalAlignment="Left" Margin="21,48,0,106" Width="274"
 AutoGenerateColumns="False"
 ItemsSource="{Binding Collection}" IsReadOnly="True">
 ...
</data:DataGrid>
<data:DataGrid Margin="316,48,39,0" AutoGenerateColumns="False"
 ItemsSource="{Binding SelectedItem.ChildRecords, ElementName=dataGrid, Mode=OneWay}" Height="141" VerticalAlignment="Top" IsReadOnly="True">
 ...
</data:DataGrid>

I've pretty much decided this is a bug in the DataGrid, as I can't otherwise explain how it works for a ListBox.

Answer 1

This will work if you databind the datacontext of the 2nd datagrid to the selecteditem of the first, and then bind the itemssource to the ChildRecords property:

<data:DataGrid ItemsSource="{Binding ChildRecords, Mode=OneWay}" 
    DataContext="{Binding SelectedItem, ElementName=dataGrid, Mode=OneWay}"/>

Alternatively, you might be able to use the built in detail view: http://silverlight.net/learn/videos/silverlight-videos/simple-masterdetails-with-datagrid/