Question

I have a datagrid that displays items with two columns of text row data and a larger free text detail that I’m displaying via a rowdetails template with just a border and a textblock.

The problem I have is that the text details are often larger than the area allowed for the grid. The default scroll behaviour of the datagrid means that the users can’t view the whole detail as the scroll jumps to the next item. If I resolve this by using

ScrollViewer.CanContentScroll="False"

then the datagrid becomes unusably slow with significant numbers of rows as the virtualization is turned off.

I did think that I could get around this by wrapping the rowdetail in a scrollviewer, but that doesn’t work as the detail area isn’t constrained to the render area.

So, can anyone offer some usable options? My WPF knowledge is pretty minimal, so apologies if there’s some obvious way of solving this.

Edit: RowDetailsTemplate

<DataGrid.RowDetailsTemplate>
    <DataTemplate >
        <Border Background="Gray"
                Padding="5,5,5,5" CornerRadius="5">
            <TextBlock Background="Transparent" 
                       Foreground="White" 
                       TextWrapping="Wrap"
                       Text="{Binding Text}"/>
        </Border>
    </DataTemplate>
</DataGrid.RowDetailsTemplate>

Answer 1

One way to add a ScrollViewer for RowDetails is by specifying a MaxHeight for the RowDetails like this

<DataGrid ...>
    <DataGrid.RowDetailsTemplate>
        <DataTemplate>
            <Grid MaxHeight="75">
                <ScrollViewer>
                    <Border HorizontalAlignment="Stretch" CornerRadius="5" Background="Black" Margin="5" Padding="5">
                        <TextBlock Text="{Binding RowDetails}" Foreground="#509CD5" FontSize="20" Width="300" TextWrapping="Wrap"/>
                    </Border>
                </ScrollViewer>
            </Grid>                    
        </DataTemplate>
    </DataGrid.RowDetailsTemplate>
    <DataGrid.Columns>
    <!-- ... -->
</DataGrid>