search

AvaloniaUI / Avalonia.Controls.TreeDataGrid

A combined TreeView/DataGrid for Avalonia.
MIT License
233 stars 48 forks source link

[Bug] Scrolling a control with variable row height causes visual clatter. #257

Open windracer opened 4 months ago

windracer commented 4 months ago

AvaloniaUI version 11.0.9 / TreeDataGrid version 11.0.2

Description

When a TreeDataGrid control has a TextColumn with the TextWrapping option set to TextWrapping.Wrap (or to TextWrapping.WrapWithOverflow), scrolling the control using the keyboard causes a visual clatter when scrolling passes through rows with wrapped text.

Tested in Windows and MacOS.

Steps to reproduce

  1. Create an empty AvaloniaUI project with TreeDataGrid control.
  2. Set the TextWrapping option of any text column to TextWrapping.Wrap
  3. Fill in the control by 100-1,000 rows or variable length.
  4. Run the app, and adjust the column width to ensure that at least one row is wrapped (the more the better).
  5. Scroll the control down by pressing and holding the Down Arrow on the keyboard.
  6. Notice that scrolling slows down on rows with wrapped text (they have larger height)
  7. You will see the visual clatter as in the video below. Otherwise, change the scrolling direction by pressing and holding the Up key.

Demo app

The sample app that recreates the bug: https://github.com/windracer/Avalonia.Controls.TreeDataGrid.VariableRowHeight.Bug

The demo app contains two TreeDataGrid controls displaying the same data.

On the left control, the text column has the TextWrapping option set to TextWrapping.NoWrap. The bug isn't reproducible.

On the right control, the text column has the TextWrapping option set to TextWrapping.Wrap. Some rows have a Height of 2× than others. The bug is reproducible.

Video illustrating the bug in action:

https://github.com/AvaloniaUI/Avalonia.Controls.TreeDataGrid/assets/9411121/96e79635-d4da-4a1d-a2e6-29c63974a1b5