How to show only RowDetails (not the row) when a DataGridRow is selected?

Question

I got the following DataGrid:

<DataGrid ItemsSource="{Binding MyList}" AutoGenerateColumns="False" SelectionUnit="FullRow">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Header" Binding="{Binding MainText}"/>
    </DataGrid.Columns>
    <DataGrid.RowDetailsTemplate>
        <DataTemplate DataType="{x:Type local:MyViewModel}">
            <TextBlock Text="{Binding DetailText}"/>
        </DataTemplate>
    </DataGrid.RowDetailsTemplate>
</DataGrid>

Assumong MyList is a collection of MyViewModel objects:

public class MyViewModel {
    public string MainText { get; set; }
    public string DetailText { get; set; }
}

When the user clicks the row the row details are visible. Is it somehow possible to hide the row and only show the details on selection?

"hide the row and only show the details on selection" -> do you mean somehow replacing the selected line regular template with the `DataGrid.RowDetailsTemplate`? — Corentin Pane, Mar 19 '20 at 13:52
I think yes. I want to see only the rowdetails on selection. Not the current row itself with all of the other columns. Just the TextBlock with binding on "SecondTextInList" — , Mar 19 '20 at 13:55

score 0 · Answer 1 · answered Mar 19 '20 at 14:32

You can edit the ControlTemplate of each DataGridRow to hide its main content when it is selected.

You can for example use the Style provided here by MSDN. This is a big style so I'm only gonna paste important parts here:

<Style TargetType="{x:Type DataGridRow}">
  <!-- ...some setters... -->
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type DataGridRow}">
        <Border x:Name="DGR_Border"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                SnapsToDevicePixels="True">
          <Border.Background>
              <!-- ... -->
          </Border.Background>
          <VisualStateManager.VisualStateGroups>
            <!-- ...some states... -->
          </VisualStateManager.VisualStateGroups>
          <SelectiveScrollingGrid>
            <SelectiveScrollingGrid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="*" />
            </SelectiveScrollingGrid.ColumnDefinitions>
            <SelectiveScrollingGrid.RowDefinitions>
              <RowDefinition Height="*" />
              <RowDefinition Height="Auto" />
            </SelectiveScrollingGrid.RowDefinitions>
            <DataGridCellsPresenter Grid.Column="1"
                                    ItemsPanel="{TemplateBinding ItemsPanel}"
                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
            <DataGridDetailsPresenter Grid.Column="1"
                                      Grid.Row="1"
                                      Visibility="{TemplateBinding DetailsVisibility}"
                                      SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, 
                                                    ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical},
                                                    Converter={x:Static DataGrid.RowDetailsScrollingConverter}, 
                                                    RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
            <DataGridRowHeader Grid.RowSpan="2"
                               SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
                               Visibility="{Binding HeadersVisibility, 
                                            ConverterParameter={x:Static DataGridHeadersVisibility.Row}, 
                                            Converter={x:Static DataGrid.HeadersVisibilityConverter}, 
                                            RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
          </SelectiveScrollingGrid>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

The key is to change the Visibility of the DataGridCellsPresenter to Visibility.Collapsed when the DataGridRow is selected. You can do it by adding the following <DataGridCellsPresenter.Style> markup in the template:

<DataGridCellsPresenter Grid.Column="1"
                        ItemsPanel="{TemplateBinding ItemsPanel}"
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
    <DataGridCellsPresenter.Style>
        <Style TargetType="DataGridCellsPresenter">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=DataGridRow}}" Value="True">
                    <Setter Property="Visibility" Value="Collapsed" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </DataGridCellsPresenter.Style>
</DataGridCellsPresenter>

If you test the application again, this will collapse the main content on selected rows, hence only display the detail row.

How to show only RowDetails (not the row) when a DataGridRow is selected?

1 Answers1