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

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 开发者_JAVA技巧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)

---

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>

---

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)

---

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.

---

I had the same problem and it was caused by the DataGrid's MaxHeight property not being set to a multiple of the row size, so the left over space was showing up at the bottom of the DataGrid. For example: if there are 5 rows that are 10 pixels in height and the MaxHeight property is set to 55 then there will be 5 pixels of space at the bottom.

---

Somehow I guess it may be because that DataGrid has to show the first visible row at row boundary, e.g. it can't display only the lower half of the first visible row in order to make the last row align with the bottom of the control.

You can test that by two steps: 1) scroll to the bottom of your DataGrid, and see the extra gray space; 2) slowly resize the DataGrid (or its containing window) vertically, and see how that gray space change, while noting the first visible row stays unmoved.

---

I had a similar problem and the answer is simple. All you have to do is to put the following in your datagrid definition in XAML:

<DataGrid AutoGenerateColumns="False"  ItemsSource="{Binding ItemList}"
CanUserAddRows="false"

and you are clear.

Another similar stuff is, if you get a blank column in your data grid then the solution is to put the Width="*" in your last column definition also in XAML.

Hope that works for you.

---

Set ScrollViewer.CanContentScroll="False" & ScrollViewer.HorizontalScrollBarVisibility="Disabled" in DataGrid.

---

set both ScrollViewer.CanContentScroll and CanUserAddRows to false.