AvaloniaUI / Avalonia

Develop Desktop, Embedded, Mobile and WebAssembly apps with C# and XAML. The most popular .NET UI client technology
https://avaloniaui.net
MIT License
25.88k stars 2.24k forks source link

[Bug] VirtualizingStackPanel (horizontal) issue in ListBox when scrolling using arrow keys [11.0.11 -> now][with repro] #17125

Closed dbriard closed 1 month ago

dbriard commented 1 month ago

Describe the bug

I noticed a problem in ListBox when selecting items using arrow keys.

My ListBox I am pressing Right arrow key. As you can see in the video, once the last items is selected, the listbox scroll by 1 page instead of 1 item. Moreover, it do not end at the last item, but it wrap to the begining. In addition, the scroll bar do not reflect the position in the ScrollView.

https://github.com/user-attachments/assets/7466543c-eb0b-4488-951f-3c346176d0e4

And if I use the left arrow, instead of right, it scroll by 1 item at the time, with no wrapping...

I checked in 11.0.10 and it work perfectly The video is captured using 11.0.13 => bug 11.0.11 => bug I tested latest version 11.1.3 and 11.2 beta and same problem.

To Reproduce

AvaloniaListBoxBug.zip

Expected behavior

Working perfectly in 11.0.10

https://github.com/user-attachments/assets/1c0488b7-c3b5-46a0-93ca-2db188fa6fce

Avalonia version

11.0.11

OS

Windows

Additional context

My ListBox is horizontal

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Disabled"
    Height="150"
    DockPanel.Dock="Bottom"
    ItemsSource="{Binding Items}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemContainerTheme>
        <ControlTheme BasedOn="{StaticResource {x:Type ListBoxItem}}" TargetType="ListBoxItem">
            <Setter Property="Margin" Value="2" />
            <Setter Property="Width" Value="120" />
            <Setter Property="Height" Value="120" />
        </ControlTheme>
    </ListBox.ItemContainerTheme>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

It look like the issue is in VirtualizingStackPanel when Orientation is Horizontal, not ListBox.

Changes from 11.0.10 to 11.0.11 image

EDIT: no problem with StackPanel instead of VirtualizingStackPanel no problem with vertical direction

dbriard commented 1 month ago

@grokys

May be the bug is here? Missing an Orientation check? image

timunie commented 1 month ago

Yeah could be a missing orientation check. Should be easy to add. Can you file a PR for it?

dbriard commented 1 month ago

Yeah could be a missing orientation check. Should be easy to add. Can you file a PR for it?

Ok, done here: https://github.com/AvaloniaUI/Avalonia/pull/17135