在 WPF DataGrid 中显示分层父子数据 [英] Displaying hierarchal parent child data in WPF DataGrid

问题描述

我需要能够在 WPF 数据网格中显示父行/子行，父行显示有加/减控件，单击时会显示相关的子记录.

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.

为了做到这一点，我基本上在父网格 RowDetailsTemplate 中放置了第二个数据网格和一个样式触发器来翻转每一行的 detailsvisibility 属性.例如

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>

问题 1 是当我使用键盘在父网格上下导航时，它会跳过子网格，跳过 RowDetailsTemplate 区域.

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?

这里是上面XAML中引用的visibilityConverter的代码；

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;
    }
}

推荐答案

我也有同样的需求.我已经按照以下方式实现了条件.当扩展器打开时，您可以有以下代码.

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;
      }
   }
}

其中，Results 是外部网格的项目源，Subresults 是内部网格的数据源.此代码有助于在打开扩展器时重置所选项目.

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.

这篇关于在 WPF DataGrid 中显示分层父子数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！