FlipView displays only the first 4 items in a loop

[kaismic]

Describe the bug

When FlipView.ItemTemplate contains a custom view class which is derived from a FrameworkElement, the FlipView only displays the first 4 items and loops through them.

Sometimes even the same image appears twice in a row when scrolling back.

Specifically:

ImageCollectionPanel.xaml

<Grid>
    <Image>
        <Image.Source>
            <BitmapImage UriSource="{x:Bind ImageInfo.ImageFilePath}"/>
        </Image.Source>
    </Image>
</Grid>

This works fine:

    <FlipView ItemsSource="{x:Bind ViewModel.ImageCollectionPanelVMs}">
        <FlipView.ItemTemplate>
            <DataTemplate x:DataType="vms:ImageCollectionPanelVM">
                <Image>
                    <Image.Source>
                        <BitmapImage UriSource="{x:Bind ImageInfo.ImageFilePath}"/>
                    </Image.Source>
                </Image>
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>

But this does not:

    <FlipView ItemsSource="{x:Bind ViewModel.ImageCollectionPanelVMs}">
        <FlipView.ItemTemplate>
            <DataTemplate x:DataType="vms:ImageCollectionPanelVM">
                <vpviews:ImageCollectionPanel ImageInfo="{x:Bind ImageInfo}"/>
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>

Steps to reproduce the bug

1. Clone the Demo, run it then close the app.
2. Copy and paste the example image files in images folder to C:\%USERPROFILE%\AppData\Local\Packages\ce327634-4e8f-4be9-ada0-51371298762e_90dh4avacgaqr\LocalCache\Local.
3. Rerun the app and only the first 4 images will display in a loop.

Expected behavior

FlipView should show all the images as I flip through the pages.

Screenshots

No response

NuGet package version

WinUI 3 - Windows App SDK 1.6.1: 1.6.240923002

Windows version

Windows 10 (20H2): Build 19042

Additional context

it probably won't matter but:
My .csproj contains

    <TargetFramework>net8.0-windows10.0.19041.0</TargetFramework>
    <TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>

[marcelwgn]

I think this might need an issue with how the property ImageInfo is defined in your UserControl ImageCollectionPanel. Can you try implementing it as a DependencyProperty and use BindingMode.OneWay inside ImageCollectionPanel.xaml and see if it still repros?

[kaismic]

I think this might need an issue with how the property ImageInfo is defined in your UserControl ImageCollectionPanel. Can you try implementing it as a DependencyProperty and use BindingMode.OneWay inside ImageCollectionPanel.xaml and see if it still repros?

Yep, it worked. Thank you very much!

ImageCollectionPanel.xaml

<Grid>
    <Image>
        <Image.Source>
            <BitmapImage UriSource="{x:Bind ImageInfo.ImageFilePath, Mode=OneWay}"/>
        </Image.Source>
    </Image>
</Grid>

ImageCollectionPanel.xaml.cs

    public sealed partial class ImageCollectionPanel : Grid {

        public static readonly DependencyProperty ImageInfoProperty = DependencyProperty.Register(
            nameof(ImageInfo),
            typeof(ImageInfo),
            typeof(ImageCollectionPanel),
            null
        );

        public ImageInfo ImageInfo {
            get => (ImageInfo)GetValue(ImageInfoProperty);
            set => SetValue(ImageInfoProperty, value);
        }

        //public ImageInfo ImageInfo { get; set; }

        public ImageCollectionPanel() {
            InitializeComponent();
        }
    }