When using TabBar inside a ItemsRepeater - we have a delay to load the page and lost info

[rafael-rosa-knowcode]

What would you like to be added:

When using a TabBar inside a ItemsRepeater the App runs fast.

This video shows the timing.
Notice,

• more than 2 seconds for the first loading.
• The second, we lost part of the information.
• The third, we lost all the information.
• The fourth, we have a delay of more than 5 seconds.

Video

ItemsRepeater.and.TabBar.mp4

This is the Project File with the repro.

UnoApp186.zip

Why is this needed:

To be able to use TabBar on a project.

For which Platform:

• WebAssembly
• Android
• iOS
• macOS (AppKit)
• Mac Catalyst
• Skia
  • WPF
  • GTK (Linux)
  • Linux Framebuffer
  • Tizen
• Windows

Anything else we need to know?

[kazo0]

Placing a TabBar inside of an itemsrepeater is a strange use-case. @rafael-rosa-knowcode if you were to just use an ItemsControl with some hardcoded items instead of TabBar, do you still see performance issues?

[nickrandolph]

Placing a TabBar inside of an itemsrepeater is a strange use-case. @rafael-rosa-knowcode if you were to just use an ItemsControl with some hardcoded items instead of TabBar, do you still see performance issues?

Apologies, my (now deleted comment) was talking about using IC instead of IR - still performs badly.
Using a series of Buttons, or a ListView is significantly faster

[Xiaoy312]

So after investigating, the problem stems from the application of ItemContainerStyle on a mismatched type.
The OP's sample can be boiled down to:

<ItemsRepeater ItemsSource="{Binding ItemsRepeaterData}">
	<ItemsRepeater.ItemTemplate>
		<DataTemplate>
			<utu:TabBar x:Name="SourcesListView" ItemsSource="{Binding TabBarList}">
				<utu:TabBar.ItemTemplate>
					<DataTemplate>
						<utu:TabBarItem>
							<TextBlock Text="{Binding Name}" />

For context, toolkit provides a global implicit TabBar style, which contains a setter for ItemContainerStyle to a TabBarItem style.

Now, look at the visual-tree the hierarchy is not simply just: TabBar>Grid>ItemsPresenter>(TarBarItem)*n. But rather there is a ContentPresenter between IP and TBI: TabBar>Grid>ItemsPresenter>(ContentPresenter>TarBarItem)*n. This is introduced in #1261 as a mean to solve the doubly-nested TabBarItem problem, where if you would to declare TBI as the root of TB::ItemTemplate, we will generated another in GetContainerForItemOverride to wrap around. To workaround that, we return a ContentPresenter when we detect you are using TBI as the root element for TB::ItemTemplate.

Now, when ItemsControl is trying to apply the ItemContainerStyle to the container, which is now the ContentPresenter, the binding engine is throwing a bunch InvalidOperationException, because we were trying to set TBI properties that don't existing on CP. And, this is causing the performance issue.

As a temporary workaround, I have suggested to set ItemsContainerStyle to null:

<utu:TabBar ... ItemContainerStyle="{x:Null}">