Microsoft-ui-xaml: ItemsRepeater placed in MUX ScrollViewer does not render all its items

[RBrid]

When an ItemsRepeater, with VerticalAlignment="Bottom", is in the MUX ScrollViewer it only renders the first item of a collection of items that gets added to its source.

1. Create an app with this XAML and code behind:

    <StackPanel Orientation="Horizontal">
        <controls:ScrollViewer x:Name="muxScrollViewer" Width="300" Height="400"
            Margin="1" Background="AliceBlue" VerticalAlignment="Top">
            <controls:ItemsRepeater
                ItemsSource="{x:Bind messages}" VerticalAlignment="Bottom" VerticalCacheLength="0"/>
        </controls:ScrollViewer>

        <Button x:Name="btnAppendItems" Content="Append Items" Click="BtnAppendItems_Click" Margin="1" VerticalAlignment="Top"/>
    </StackPanel>

    public sealed partial class MainPage : Page
    {
        public ObservableCollection<string> messages = new ObservableCollection<string>();

        public MainPage()
        {
            this.InitializeComponent();
        }

        private void BtnAppendItems_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            messages.Add("One");
            messages.Add("Two");
            messages.Add("Three");
        }
    }

1. Run the app and hit its "Append Items" button.

Result:
Only the "One" item appears, and not the "Two" and "Three".

Expected:
All three added items are rendered.

• This repros with the latest WinUI code, on 19H1.
• If you resize the app a bit, the hidden items start to render.

I could not see anything wrong at the Scroller/ScrollViewer level. The ItemsRepeater should be looked at next.

[chingucoding]

I would like to look into this.

[chingucoding]

After 8 hours of debugging I am quite sure now, that the issue here is the MUXC ScrollView. I think the easiest way to explain the issue is through visualzations. First of all it is important to note that ItemsRepeater contains logic to "clean up" after measure to throw away all items that are outside of the current view window it has. This step is called "DiscardElementsOutsideWindow" and checks which realized items are not within the bounds of the repeaters viewport.

In the case of WUXC ScrollViewer we have:

When running it's DiscardElementsOutsideWindow step, it throws away all items that are not inside the viewport (a bit oversimplified but that's the core thing to know).

In the case of MUXC ScrollView though, we have the following issue:

Note how the perceived viewport and the actual viewport don't line up? Any items in the green area are being thrown away except one, because the code actually limits the repeater to not throw away all items but at least leave one item in there.

So the question here is: How do we fix this? Quite frankly, I have absolute no idea how we get that dirty viewport, and I also have not much knowledge about the ScrollView and ScrollPresenter making it very difficult for me to assess if, how and where the fix in those components would be. In the meantime should we have a workaround inside repeater? This behavior is only present if the ItemsRepeater sits at the bottom. If we set the horizontal alignment to right, a similiar effect does not happen, only VerticalAlignment bottom is problematic.

[RBrid]

Thanks much @chingucoding, unfortunately the situation here is complex enough that I cannot provide more info without doing a deep dive investigation (like you). I would hold off putting a workaround in the ItemsRepeater at this point and wait until someone has time to dig into this further.

[zhuxb711]

Same here: