How to make content inside DataGridCell scrollable?

Question

I tried to make cell scrollable with a fixed maximum height, it doesn't really work and the content inside pretty much is not visible. Here's the code on the main page:

<DataGridTemplateColumn Header="Reported" Width="*" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.CanContentScroll="True">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <ItemsControl ItemsSource="{Binding Reported}" ScrollViewer.CanContentScroll="True"/>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

And here's the code from ResourceDictionary:

<Style TargetType="{x:Type DataGridCell}" x:Key="DefaultCell">
    <Style.Setters>
        <Setter Property="TextBlock.TextAlignment" Value="Center"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
        <Setter Property="TextBlock.TextTrimming" Value="WordEllipsis"/>
        <Setter Property="MaxHeight" Value="40"/>
    </Style.Setters>
</Style>
    
<Style TargetType="{x:Type DataGrid}" x:Name="Test" x:Key="DefaultGrid" BasedOn="{StaticResource BaseStyle}">
    <Style.Setters>
        <Setter Property="CanUserSortColumns" Value="True"/>
                <Setter Property="ColumnHeaderHeight" Value="35"/>
                <Setter Property="HorizontalAlignment" Value="Center"/>
                <Setter Property="CanUserReorderColumns" Value="False"/>
                <Setter Property="IsTextSearchEnabled" Value="True"/>
                <Setter Property="CanUserAddRows" Value="False"/>
                <Setter Property="CanUserDeleteRows" Value="False"/>
                <Setter Property="SelectionUnit" Value="FullRow"/>
                <Setter Property="ColumnHeaderStyle" Value="{StaticResource DefaultHeader}"/>
                <Setter Property="IsReadOnly" Value="True"/>
                <Setter Property="CellStyle" Value="{StaticResource DefaultCell}"/>
                <Setter Property="CanUserResizeRows" Value="False"/>
    </Style.Setters>
</Style>

As you can see I've tried adding this feature in every possible way and it didn't work. Everything else works fine.

Seb · Accepted Answer · 2020-07-26T20:52:47.780

1

The ItemsControl doesn't have scrolling capabilities. You need to add them yourself:

<DataGridTemplateColumn Header="Reported" Width="*">
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <ScrollViewer VerticalScrollBarVisibility="Auto"
                          HorizontalScrollBarVisibility="Auto"
                          CanContentScroll="True">
                <ItemsControl ItemsSource="{Binding Reported}" />
            </ScrollViewer>
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

Though you should be aware the ItemsControl is not optimized out of the box as it doesn't have virtualization by default like the ListBox and will lag if you try to display lots of items.

edited Jul 26 '20 at 20:52

answered Jul 26 '20 at 20:28

Seb

620
1
5
11

Thanks for the advice, as well as the answer. Is there any disadvantage with using ListBox, I can see the whole list can't be selected, will that cause any problems in the future? – Vojin Jul 26 '20 at 21:52
1

You're welcome. The whole list can't be selected because the ListBox have its own selector. I'm pretty sure you could deactivate it somehow (never had that particular case, so I'm just guessing at that point). Otherwise, you can stay with the ItemsControl and implement virtualisation. You can check how to do it here : https://stackoverflow.com/questions/2783845/virtualizing-an-itemscontrol – Seb Jul 26 '20 at 22:08

How to make content inside DataGridCell scrollable?

1 Answers1