FlipView creating additional FlipViewItem on resize - xaml

Question

I have a FlipView with items and and an item template. Initially when the control is loaded, three FlipView items are created. I noticed that if I resize the window after that, the FlipView decides to create an additional fourth item. To demonstrate this strange behaviour I've created the following small example:
<Page
x:Class="Test.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Test"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<FlipView x:Name="items">
<FlipView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Loaded="TextBlock_Loaded"/>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
And this is the code-behind:
public sealed partial class MainPage : Page
{
public MainPage()
{
InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
items.ItemsSource = new string[] { "Text 1", "Text 2", "Text 3", "Text 4" };
}
private void TextBlock_Loaded(object sender, RoutedEventArgs e)
{
var textBlock = sender as TextBlock;
System.Diagnostics.Debug.WriteLine(textBlock.Text);
}
}
When the page is loaded, you will see "Text 1", "Text 2", "Text 3" in the program output. Then if you try to resize the window while still on the first item, "Text 4" will also appear in the output.
My question is: Why does this happen and can I do anything to prevent it?

Answer 1

When the page is loaded, you will see "Text 1", "Text 2", "Text 3" in the program output. Then if you try to resize the window while still on the first item, "Text 4" will also appear in the output.
The root cause of this behavior: FlipView is using VirtualizingStackPanel as its itemsPanel. When you have a lot of items VirtualizingStackPanel will load the items as needed, which will increase the performance.
To prevent it, you only need to replace the itemsPanel with other "not Virtualized Panel":
<FlipView x:Name="items" Style="{StaticResource FlipViewStyle1}">
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
<FlipView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Loaded="TextBlock_Loaded"/>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
Notes:Please note that disabling UI virtualization for FlipView may negatively impact performance especially when there are a lot of big size items.