ItemsRepeater applying weird arranging behaviour to content when parent's ScrollViewer "HorizontalScrollBarVisibility" is set to "Visible".

Describe the bug

When you create an ItemsRepeater and fill the content with differently width sized elements, the alignement of those elements is completely messed up, when you place a ScrollViewer as the parent of the ItemsRepeater and set the ScrollViewers HorizontalScrollBarVisibility to “Visible” or “Hidden” or “Auto” (Everything but “Disabled”).

Setting HorizontalAlignment of the Rectangles to “Center” does not help.

Steps to reproduce the bug

1. Create a new UWP Solution
2. Install Microsoft.UI.Xaml via Nuget
3. In App.xaml replace with the following code:

<Application
    x:Class="ItemsRepeaterFix.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ItemsRepeaterFix">
    <Application.Resources>
        <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
    </Application.Resources>
</Application>

1. In MainPage.xaml replace with the following code:

<Page
    x:Class="ItemsRepeaterFix.MainPage"
    x:Name="PageElement"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ItemsRepeaterFix"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <muxc:ItemsRepeaterScrollHost>
            <ScrollViewer ZoomMode="Enabled" HorizontalScrollBarVisibility="Auto">
                <muxc:ItemsRepeater ItemsSource="{Binding ElementName=PageElement, Path=WidhtList}" HorizontalAlignment="Center">
                    <muxc:ItemsRepeater.Layout>
                        <muxc:StackLayout Orientation="Vertical" Spacing="15" ></muxc:StackLayout>
                    </muxc:ItemsRepeater.Layout>

                    <muxc:ItemsRepeater.ItemTemplate>
                        <DataTemplate x:DataType="x:Double">
                            <Rectangle Fill="Green" Width="{Binding}" Height="300"></Rectangle>
                        </DataTemplate>
                    </muxc:ItemsRepeater.ItemTemplate>
                </muxc:ItemsRepeater>
            </ScrollViewer>
        </muxc:ItemsRepeaterScrollHost>
    </Grid>
</Page>

1. In MainPage.xaml.cs replace with the following code:

public sealed partial class MainPage : Page {
        public List<double> WidhtList { get; set; } = new List<double>() {
            500,
            500,
            500,
            1000,
            500,
            500,
            500,
        };
        public MainPage()
        {
            this.InitializeComponent();
        }
}

Expected behavior

All the rectangles are always aligned to the center of the screen and do not jump around.

Screenshots

NuGet package version

Microsoft.UI.Xaml 2.7.0

Windows app type

• UWP
• Win32

Device form factor

Desktop

Windows version

May 2021 Update (19043)

Additional context

If this is not a bug, I would incredibly appreciate a short guide on how to fix this issue.

[kmahone]

@ranjeshj as FYI.

The layout is virtualizing, so as we realize more items with different sizes, the repeater’s width is changing, so we try to center based on what we realized so far. I don’t know if there is any way to know the maximum width without realizing everything.

Would a non-virtualizing layout work for your scenario? If so, you could try copy NonVirtualStackLayout code into you app from here: dev\Repeater\APITests\Common\NonVirtualStackLayout.cs

Alternatively, would it be possible for you to determine the max width ahead of time and set that as a width on the ItemsRepeater?

[DilanBoskan]

@kmahone Alright thank you for the comment on the issue.

First of all, I do need the virtualization as my items are quite resource intensive. However, in my situation, I do know the maximum width of the elements in the ItemsRepeater so I was able to solve the issue based on your suggestion to set the width of the ItemsRepeater to the maximum width of the element in the collection, thank you.

I wonder how this would be solved if the maximum width of the elements where not known, say when loading images for example. The ItemsRepeater is obviously not supposed to behave as it does currently in that situation. Something is going wrong with the arranging of the elements.