我需要对行详细信息模板进行展开/折叠功能。

Question

我有一个DataGrid，它有一个 DataGrid.RowDetailsTemplate。当点击按钮时，应该展开/折叠；我该怎么做？

<Custom:DataGrid RowDetailsVisibilityMode="VisibleWhenSelected" SelectionMode="Extended" CanUserAddRows="False" CanUserDeleteRows="False" CanUserResizeRows="False" CanUserSortColumns="False">
    <Custom:DataGrid.RowDetailsTemplate>
        <DataTemplate>
            <Custom:DataGrid>
                <Custom:DataGrid.Columns>
                    <Custom:DataGridTextColumn Binding="{Binding idClient, Mode=Default}" Header="Ид" IsReadOnly="True"/>
                    <Custom:DataGridTextColumn Binding="{Binding name_client, Mode=Default}"  Header="Имя" IsReadOnly="True"/>
                </Custom:DataGrid.Columns>
            </Custom:DataGrid>
        </DataTemplate>
    </Custom:DataGrid.RowDetailsTemplate>
    <Custom:DataGrid.Columns>
        <Custom:DataGridTemplateColumn>
            <Custom:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Expander IsExpanded="True"/>
                </DataTemplate>
            </Custom:DataGridTemplateColumn.CellTemplate>
        </Custom:DataGridTemplateColumn>
        <Custom:DataGridTextColumn Binding="{Binding idPartner, Mode=Default}" Header="Ид" IsReadOnly="True"/>
        <Custom:DataGridTextColumn Binding="{Binding name_partner, Mode=Default}"  Header="Имя" IsReadOnly="True"/>
    </Custom:DataGrid.Columns>
</Custom:DataGrid>

- Mediator

Answer 1

检查这个...

在WPF DataGrid中添加按钮

或者

XAML：

<DataGrid Name="dg1" AutoGenerateColumns="False" SelectionMode="Single" CanUserAddRows="false" CanUserDeleteRows="False" SelectionUnit="FullRow" >
    <DataGrid.CellStyle>
        <Style TargetType="DataGridCell">
            <Setter Property="BorderThickness" Value="0"/>
        </Style>
    </DataGrid.CellStyle>

    <DataGrid.RowHeaderTemplate>
        <DataTemplate>
            <Expander Expanded="Expander_Expanded" Collapsed="Expander_Collapsed">

            </Expander>
        </DataTemplate>
    </DataGrid.RowHeaderTemplate>

    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" IsReadOnly="True" Width="100" Binding="{Binding Name}" />
        <DataGridTextColumn Header="Title" IsReadOnly="True" Width="100" Binding="{Binding Title}" />
        <DataGridTextColumn Header="Job" IsReadOnly="True" Width="100" Binding="{Binding Job}" />
    </DataGrid.Columns>

    <DataGrid.RowDetailsTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Isi, Converter={StaticResource ResourceKey=isiTextConverter}}" Margin="10,5,0,0" />
        </DataTemplate>
    </DataGrid.RowDetailsTemplate>
</DataGrid>

MainWindow.xaml.cs

private void Expander_Expanded(object sender, RoutedEventArgs e)
{
    for (var vis = sender as Visual; vis != null; vis = VisualTreeHelper.GetParent(vis) as Visual)
    if (vis is DataGridRow)
    {
        var row = (DataGridRow)vis;
        row.DetailsVisibility = row.DetailsVisibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;
        break;
    }
}

private void Expander_Collapsed(object sender, RoutedEventArgs e)
{
    for (var vis = sender as Visual; vis != null; vis = VisualTreeHelper.GetParent(vis) as Visual)
        if (vis is DataGridRow)
        {
            var row = (DataGridRow)vis;
            row.DetailsVisibility = row.DetailsVisibility == Visibility.Visible ? Visibility.Collapsed : Visibility.Visible;
            break;
        }
}

输出

- penjepitkertasku

---

顺便提一句，Expander_Expanded和Expander_Collapsed是相同的。如果这是预期的结果，可以使用一个方法来处理Expanded和Collapsed事件。 - ASh

我同意@ASh的观点，而且一个人不必要亲自处理树形结构...请看下面我的回答，其中回答/更新了这些问题。 - ΩmegaMan

这个答案缺少的是将数据网格的 RowDetailsVisibilityMode 设置为 DataGridRowDetailsVisibilityMode.Collapsed。否则，展开器和数据网格都会展开行。数据网格在任何行单击时都会这样做，而不仅仅是在单击展开器时。 - BartoszKP

Answer 2

不要通过遍历树来查找扩展器中的数据网格行，而是使用静态方法GetRowContainingElement，该方法可以在DataGridRow中找到。例如：

private void Expander_Process(object sender, RoutedEventArgs e)
{
    if (sender is Expander expander)
    {
        var row = DataGridRow.GetRowContainingElement(expander);

        row.DetailsVisibility = expander.IsExpanded ? Visibility.Visible 
                                                    : Visibility.Collapsed;
    }
}

然后，对于每个事件，扩展器只有一个方法调用：

 <Expander Expanded="Expander_Process"  Collapsed="Expander_Process" />

- ΩmegaMan

Answer 3

我已经改进了之前的答案：

不要使用DataGrid.RowHeaderTemplate，而是使用以下的DataGridTemplateColumn：

<DataGridTemplateColumn>
   <DataGridTemplateColumn.CellTemplate>
          <DataTemplate>
                <Expander Expanded="Expander_OnExpanded"     Collapsed="Expander_OnCollapsed">
                </Expander>
           </DataTemplate>
   </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

受益之处在于您无需在点击展开按钮后重新调整鼠标位置。

- Palash Roy

---

不确定您所说的重新定位鼠标是什么意思。下面是更新后的答案。 - ΩmegaMan

@ΩmegaMan，我的意思是展开按钮的位置不会改变，因此无需将鼠标指针上下移动以进一步单击展开按钮。谢谢。 - Palash Roy

Answer 4

将Collapsed和Expanded事件包含在以下HTML代码中：

   <Custom:DataGridTemplateColumn>
   <Custom:DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <Expander Collapsed="exp_Collapsed" Expanded="exp_Expanded"/>
            </DataTemplate>
        </Custom:DataGridTemplateColumn.CellTemplate>
    </Custom:DataGridTemplateColumn>

在后台代码中。

 private void exp_Collapsed(object sender, RoutedEventArgs e)
        {
            this.dataGrid1.RowDetailsVisibilityMode = DataGridRowDetailsVisibilityMode.Collapsed;
        }

        private void exp_Expanded(object sender, RoutedEventArgs e)
        {
            this.dataGrid1.RowDetailsVisibilityMode = DataGridRowDetailsVisibilityMode.VisibleWhenSelected;
        }

- Bindya

---

选择一行将打开它。通过调用折叠，将折叠所有行，无论该行是否被选中。 - ΩmegaMan

Answer 5

在网格上选择一行应该使用RowDetailsTemplate展开该行以显示内容。这将使该行成为选定行，并设置DataGrid的SelectedIndex属性的值。

要折叠该行，请将DataGrid的SelectedIndex属性设置为-1。

- Paul Lydon

Answer 6

ΩmegaMan的答案非常好！不要忘记添加：

 <DataGrid x:Name="DGrid" RowDetailsVisibilityMode="Collapsed"/>

- John