ItemsControl with VirtualizingStackPanel disables horizontal animations in ScrollViewer

Question

I'm building a custom XAML control for a UWP app that relies heavily on a ScrollViewer with snap points.

I would really like the content that is bound to the control to be virtualized, so I'm using an ItemsControl. However, when I use a VirtualizingStackPanel in the ItemsControl, and then call ChangeView() on the ScrollViewer to a specific HorizontalOffset, the animation effect when scrolling to the new offset is disabled (it just jumps directly to the offset). If I simply replace the VirtualizingStackPanel with a StackPanel (no virtualization), the horizontal animations work.

Question: Does anyone know how to use a VirtualizingStackPanel and enable horizontal animations when changing the offset?

Here is the C# adjusting the horizontal offset (the customScrollViewer is being accessed via tree-crawling, since it is part of the ControlTemplate style):

customScrollViewer.ChangeView(500, null, null, false);

And here is the XAML style for the ItemsControl:

       <Style x:Key="ItemsControlSnapStyle" TargetType="ItemsControl">
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ItemsControl">
                    <ScrollViewer
                        x:Name="customScrollViewer"
                        VerticalScrollBarVisibility="Disabled" 
                        HorizontalScrollBarVisibility="Auto" 
                        HorizontalSnapPointsType="Mandatory">
                        <ItemsPresenter />
                    </ScrollViewer>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Thanks!

Nico Zhu - MSFT Nico Zhu - MSFT · Accepted Answer · 2020-04-03T08:30:22

Great question, I could reproduce this behavior, and it looks by-design. Derive from VirtualizingStackPanel document. It can only be used to display items in an ItemsControl. Generally. At the remarks part, Starting in Windows 8.1, ItemsStackPanel is used as the default ItemsPanel for ListView. If you modify the ItemsPanel, we recommend you use ItemsStackPanel or ItemsWrapGrid instead of VirtualizingStackPanel or WrapGrid.

If we replace VirtualizingStackPanel with ItemsStackPanel, and ChangeView method could work with animation. And ItemsStackPanel also support virtualizes. So we suggest you could use ItemsStackPanel as ItemsPanel for the ItemsControl.

<Setter Property="ItemsPanel">
    <Setter.Value>
        <ItemsPanelTemplate>
            <ItemsStackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </Setter.Value>
</Setter>

ItemsControl with VirtualizingStackPanel disables horizontal animations in ScrollViewer

1 Answers