Incorrect position for the first item in ItemsRepeater bound to an IObservableVector when inserting items from the front

[torleifat]

Describe the bug

If you have an ItemsRepeater bound to an IObservableVector and you use InsertAt with index 0 the newly added item will be vertically offset by a few pixels.

If you add another item the item that had previously the wrong offset will now be corrected.

Inserting to any other position will not have this effect.

Steps to reproduce the bug

1. Create a project, remove the boilerplate code in MainWindow, add a Frame and Navigate to a Page
2. In the Page add the following:

Page.idl

namespace ScrollviewReinsertIssue
{
    [default_interface]
    runtimeclass Page : Microsoft.UI.Xaml.Controls.Page
    {
        Page();

        Windows.Foundation.Collections.IObservableVector<String> Items{ get; };
    }
}

Page.xaml

<?xml version="1.0" encoding="utf-8"?>
<Page
    x:Class="ScrollviewReinsertIssue.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ScrollviewReinsertIssue"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Background="Aquamarine">
    
    <Page.Resources>
        <ResourceDictionary>
            <StackLayout x:Name="HorizontalStackLayout" Orientation="Horizontal" Spacing="0"/>
            <DataTemplate x:Key="ItemTemplate" x:DataType="x:String">
                <Border Background="Red" BorderBrush="Black" BorderThickness="1" Width="64" Height="64">
                    <TextBlock FontSize="38" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{x:Bind}"></TextBlock>
                </Border>
            </DataTemplate>
        </ResourceDictionary>
    </Page.Resources>

    <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="10">
        <Button x:Name="InsertFirstButton" Click="InsertFirstButton_Click"  HorizontalAlignment="Center">Add Duck</Button>
        <ItemsRepeater x:Name="Repeater" Layout="{StaticResource HorizontalStackLayout}" Background="Green" ItemsSource="{x:Bind Items, Mode=OneWay}" ItemTemplate="{StaticResource ItemTemplate}"/>
    </StackPanel>
</Page>

Page.xaml.h

//#pragma once
#include "Page.g.h"
namespace winrt::ScrollviewReinsertIssue::implementation
{
    struct Page : PageT<Page>
    {
        Page();
        winrt::Windows::Foundation::Collections::IObservableVector<hstring> Items();
        void InsertFirstButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e);
    private:
        winrt::Windows::Foundation::Collections::IObservableVector<hstring> m_Items;
    };
}

namespace winrt::ScrollviewReinsertIssue::factory_implementation
{
    struct Page : PageT<Page, implementation::Page>
    {
    };
}

Page.xaml.cpp

#include "pch.h"
#include "Page.xaml.h"
#if __has_include("Page.g.cpp")
#include "Page.g.cpp"
#endif

using namespace winrt;
using namespace Microsoft::UI::Xaml;

namespace winrt::ScrollviewReinsertIssue::implementation
{
    Page::Page()
    {
        m_Items = winrt::single_threaded_observable_vector<hstring>();
        for (int i = 0; i < 3; i++)
        {
            m_Items.Append(L"🐲");
        }
    }

    winrt::Windows::Foundation::Collections::IObservableVector<hstring> Page::Items()
    {
        return m_Items;
    }

    void Page::InsertFirstButton_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
    {
        hstring item = L"🦆";
        m_Items.InsertAt(0,item);
    }
}

Expected behavior

There not to be an offset vertically.

Screenshots

NuGet package version

WinUI 3 - Windows App SDK 1.5.4: 1.5.240607001

Windows version

No response

Additional context

No response

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one. Thank you!

Open similar issues:

• ItemsRepeater inside a ScrollViewer with odd behaviour when it changes size (#9584), similarity score: 0.74
• ItemsRepeater and ScrollView jumping back and forth (#9308), similarity score: 0.73

Closed similar issues:

• ItemsRepeater re-orders/removes items when scrolling within a ScrollViewer and using UniformGridLayout (#4516), similarity score: 0.74
• ItemsRepeater applying weird arranging behaviour to content when parent's ScrollViewer "HorizontalScrollBarVisibility" is set to "Visible". (#5974), similarity score: 0.73
• ItemsRepeater renders items outside its control size when it has a large amount of items (#8028), similarity score: 0.73

Note: You can give me feedback by thumbs upping or thumbs downing this comment.