Extra space below rows that appears when scrolling to the bottom of a DataGrid?

Question

Ok, so I have a DataGrid (the standard WPF DataGrid, which comes with .Net 4.0, NOT the WPF Toolkit DataGrid) with the CanUserAddRows=false. It's bound to an ObservableCollection in the ViewModel. It has a MaxHeight set properly, so that it will scroll if there are too many rows for the screen.

It works just fine the way it is, except for the fact that if the user puts their mouse over the DataGrid and then moves the Scroll-wheel downwards, then some extra space appears below the rows:

I would rather that the gray space does not appear in this case (where there is no need to scroll). How do I accomplish this?

P.S. I've actually built my own functionality for a new row at the bottom of the DataGrid due to some special requirements for our program, thus the blank row at the bottom of the DataGrid. It's done totally in the VM, so it shouldn't affect the answer to this question.

Update:

This behavior happens on every DataGrid I have currently. However, when the MaxHeight is set on the DataGrid, and there are more rows than can be displayed, then the content starts to scroll. In this situation, the grey space below the lines is variable in size. That is, since the DataGrid scrolls based on content rather than physical scrolling (see this for details about the difference, under the remarks section), there is a little extra space at the bottom below the last row when you scroll all the way to the bottom. The grey space fills that extra space. Here is an example:

To clarify, I don't mind that behavior that much, it's just when the grey space appears when there is no need for scrolling. I just thought that this behavior would help indicate the cause of the problem.

Update #2:

I have discovered what can cause the problem: if you set the EnableRowVirtualization to false, then this problem occurs. However, if I want to set it to false, how can I prevent the grey space/"extra line" from occurring when there is no need to scroll? (this is my main concern and the main point of this question)

Answer 1

Try this: Set

• ScrollViewer.CanContentScroll to False
• ScrollViewer.HorizontalScrollBarVisibility to Disabled

Then

<DataGrid x:Name="myDataGrid"
          RowHeaderWidth="{Binding RelativeSource={RelativeSource Self}, Path=RowHeight}"
          ScrollViewer.CanContentScroll="False" 
          ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Width="*" Binding="{Binding Name}"/>
        <DataGridTextColumn Header="Age" Width="*" Binding="{Binding Age}"/>
    </DataGrid.Columns>
</DataGrid>

Answer 2

I've faced the same issue. In my case extra space at the bottom was because MaxHeight being set and bacause of

VirtualizingPanel.ScrollUnit="Item"

After setting it to

VirtualizingPanel.ScrollUnit="Pixel"

the problem actually dissapears (still having MaxHeight property)

Answer 3

You question is a little unclear but I can offer some investigative steps to find out what the cause is.

1. Make sure that your observable collection is not harboring any null values. A null entry in the collection will still show up in the grid as a blank row.

2. The fact that it is happening on different environment means that your data source may be different, so that is a good place to check. Check here that the count of the collection is directly matched with the number of rows on the grid (including the empty row).

3. Make sure that this is not a control templating issue. If possible, look at the Style and DataTemplate for your DataGrid control to see if this is not a visual side-effect.

Apart from that, you should include more details in your question, such as the type of DataGrid you are using (eg. WPF Toolkit, Telerik, DevExpress, etc) so that we can rule out a templating issue.