Displaying hierarchal parent child data in WPF DataGrid

Question

I need to be able to display parent / child rows in a WPF datagrid, the parent are displayed with a plus / minus control which when clicked shows the related children records.

In order to do this I basically place a second datagrid inside the parent grids RowDetailsTemplate and a style trigger to flip the detailsvisibility property on each row. e.g.

<Grid>
    <DataGrid AutoGenerateColumns="False" IsReadOnly="True" ItemsSource="source" Margin="10,10,14,14" Name="dataGrid1" RowDetailsVisibilityMode="Collapsed" SelectionMode="Single">
        <DataGrid.Columns>
            <DataGridTextColumn Binding="{Binding FullName}" Header="Name" />
            <DataGridTextColumn Binding="{Binding Details}" Header="Details" />
        </DataGrid.Columns>
        <DataGrid.RowDetailsTemplate>
            <DataTemplate>
                <DataGrid HeadersVisibility="None" AutoGenerateColumns="False" IsReadOnly="True" ItemsSource="{Binding Path=Attachments}">
                    <DataGrid.Columns>
                        <DataGridTextColumn Binding="{Binding Document}" Header="Document" />
                        <DataGridTextColumn Binding="{Binding Created}" Header="Date Created" />
                    </DataGrid.Columns>
                </DataGrid>
            </DataTemplate>
        </DataGrid.RowDetailsTemplate>
        <DataGrid.RowHeaderTemplate>
            <DataTemplate>
                <ToggleButton IsChecked="{Binding Converter={StaticResource visibleConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}, Path=DetailsVisibility}">
                    <Image>
                        <Image.Style>
                            <Style TargetType="Image">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ToggleButton}, Path=IsChecked}" Value="false">
                                        <Setter Property="Image.Source" Value="Images/plus-8.png" />
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ToggleButton}, Path=IsChecked}" Value="true">
                                        <Setter Property="Image.Source" Value="Images/minus-8.png" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Image.Style>
                    </Image>
                </ToggleButton>
            </DataTemplate>
        </DataGrid.RowHeaderTemplate>
    </DataGrid>
</Grid>

Problem 1 is when i use the keyboard to navigate up and down the parent grid it skips the child grid, skipping over the RowDetailsTemplate area.

Another side effect of using multiple grids is if I use the mouse to select rows I can get multiple 'selected' rows effect, ie one of the parents is selected and other child records for other parents that have been previously selected in the inner grids look like they are still highlighted.

Can anybody give me any pointers here as to how to get round these problems?

Here the code for the visibilityConverter referenced in the XAML above ;

 public class VisibleConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        bool visibleValue = false;
        if (value != null && value is Visibility)
        {
            visibleValue = !((Visibility)value == Visibility.Collapsed);
        }
        return visibleValue;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        Visibility visibleValue = Visibility.Collapsed;
        if (value is bool)
        {
            if ((bool)value == true)
            {
                visibleValue = Visibility.Visible;
            }
        }
        return visibleValue;
    }
}

Answer 1

Even i have the same requirement. I have implemented the condition in following way. When the expander is opened, you can have the following code.

private void Expander_Expanded(object sender, RoutedEventArgs e)
{
   foreach (var item in viewModel.Results)
   {
     if (item.SubResults.Count > 0)
      {
        item.SubResults.SelectedItem = null;
      }
   }
}

Where Results is the items source for my outer grid, and Subresults is the datasource for my inner grid. This code helps to reset the selected item, whenever the expander is opened.