I need the Expand / Collapse for RowDetailsTemplate

问题

I have a WPFToolkit DataGrid. It has DataGrid.RowDetailsTemplate. I need to do like, when a button is clicked it must Expand / Collapse.

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

回答1:

Check this ...

Adding a Button to a 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;
        }
}

Output

回答2:

Include Collapsed and expanded events as below

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

In the code behind

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

回答3:

Selecting a Row on the Grid should expand the Row using the RowDetailsTemplate to display the content. This makes that Row the Selected Row and sets the value of the DataGrid's SelectedIndex Property.

To collapse the Row set the DataGrid's SelectedIndex Property to -1.

回答4:

I have improved the previous answer :

Instead of using DataGrid.RowHeaderTemplate use DataGridTemplateColumn as below:

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

Benifit is you need not to re position your mouse after clicking expander button.

来源：https://stackoverflow.com/questions/3829137/i-need-the-expand-collapse-for-rowdetailstemplate

标签

wpf

datagrid

wpftoolkit