WinUI 3 ItemsRepeater 在 ScrollViewer 中滚动并使用 UniformGridLayout 时重新排序/删除项目

Question

Wanted to post my issue I have with WinUI 3 in .NET 6 here too, maybe it's not a bug and I am doing something wrong.

First of all a link to the issue on Github: https://github.com/microsoft/microsoft-ui-xaml/issues/4516

A sample project can be found here: https://github.com/brechtb86/microsoft-ui-xaml-issues

Describe the bug

When using an ItemsRepeater in a ScrollViewer on a Page within a NavigationView with a custom user control in the ItemTemplate and you start to scroll up and down, the items are re-ordered or even removed. The items are just simple objects and a UserControl bound to some properties of that object.

Steps to reproduce the bug

Open the page "ItemsRepeater Scroll Issue (re-order/remove)". Items are ordered correctly. Start scrolling up and down. Items are re-ordered and sometimes removed. Switch to another page. Switch back to page "ItemsRepeater Scroll Issue (re-order/remove)". Items are ordered correctly again. Rinse and repeat.

Expected behavior

Items should stay in the same order.

I'm using the MVVM pattern, I'm using DI to manage my viewmodels with Ninject. The project is very simple:

ItemsRepeaterScrollIssuePage.xaml:

<Page
x:Class="WinUI3Issues.ItemsRepeaterScrollIssuePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WinUI3Issues"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:models="using:WinUI3Issues.Models"
xmlns:userControls="using:WinUI3Issues.UserControls"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
DataContext="{Binding Path=ItemsRepeaterScrollIssueViewModel, Source={StaticResource ViewModelLocator}}">

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" Text="Start scrolling" />
    <ScrollViewer Grid.Row="1">
        <ItemsRepeater ItemsSource="{Binding Path=DummyObjects}">
            <ItemsRepeater.Layout>
                <UniformGridLayout Orientation="Horizontal" ItemsStretch="Fill" MinColumnSpacing="24" MinRowSpacing="24"></UniformGridLayout>
            </ItemsRepeater.Layout>
            <ItemsRepeater.ItemTemplate>
                <DataTemplate x:DataType="models:DummyObject">
                    <Grid>
                        <userControls:DummyObjectControl Title="{Binding Path=Name}"></userControls:DummyObjectControl>
                    </Grid>
                </DataTemplate>
            </ItemsRepeater.ItemTemplate>
        </ItemsRepeater>
    </ScrollViewer>
  </Grid>
</Page>

DummyObjectControl:

<UserControl
x:Class="WinUI3Issues.UserControls.DummyObjectControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WinUI3Issues.UserControls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Border Height="288" Width="192" BorderThickness="1" BorderBrush="{ThemeResource TextBoxBorderThemeBrush}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16" Text="{x:Bind Path=Title, Mode=OneWay}"></TextBlock>
    </Grid>
</Border>

ItemsRepeaterScrollIssueViewModel:

public class ItemsRepeaterScrollIssueViewModel : BaseViewModel
{
  public ObservableCollection<DummyObject> DummyObjects { get; set; }

  public ItemsRepeaterScrollIssueViewModel()
  {
      this.DummyObjects = new ObservableCollection<DummyObject>();

      for (var i = 1; i <= 100; i++)
      {
          this.DummyObjects.Add(new DummyObject(){ Name = $"Object_{i}"});
      }
  }
}

DummyObject.cs:

public class DummyObject
{
    public string Name { get; set; }
}

ViewModelLocator.cs:

public class ViewModelLocator
{
    public ItemsRepeaterScrollIssueViewModel ItemsRepeaterScrollIssueViewModel => IocKernel.Get<ItemsRepeaterScrollIssueViewModel>();
    public XamlCommandBindingIconSourceIssueViewModel XamlCommandBindingIconSourceIssueViewModel => IocKernel.Get<XamlCommandBindingIconSourceIssueViewModel>();
}

Do any of you know if I might be doing something wrong or if this is a legit bug in WinUI 3?

Answer 1

OK, I got help on Github, the issue was that my dependency properties were not marked as static, another issue was that I didn't set the x:Bind mode to OneWay in my UserControl.