[Win/Android/Skia.Gtk/iOS?] Regression - Incorrect height of FlipView with Stretch inside AutoLayout

[silviuo]

Current behavior

After PR #663, the height of a stretched FlipView as a child of an AutoLayout is no longer correctly calculated. Wasm seems to be the only platform that's not affected by the regression. iOS needs to be tested to confirm.

Here is the behavior per platform (repro sample app attached):
ReproALFV regression.zip

Windows - the height of the FlipView item is divided by the number of siblings

Three children:
https://github.com/unoplatform/uno.toolkit.ui/assets/10283398/57488fdc-c6d8-40e6-b37f-c19afb0f8846
Five children:

Android - similar to Windows, but initially seems to load page with the correct height
https://github.com/unoplatform/uno.toolkit.ui/assets/10283398/e9c165d2-2a4b-4013-8673-b1a93b0b8ba4
https://github.com/unoplatform/uno.toolkit.ui/assets/10283398/5b8c53d1-3c1b-4ea9-8211-7a9c5b11dd2d

Skia.Gtk - looks better than Win/Android but something goes wrong when the height of the FlipView item surpasses the height of the ViewPort (see behavior on third FlipView page below)
https://github.com/unoplatform/uno.toolkit.ui/assets/10283398/8b6c85c4-2386-4d84-bd9e-7834695e14c9

Wasm - seems unaffected by the regression, but I would still test after the fix
https://github.com/unoplatform/uno.toolkit.ui/assets/10283398/a6273857-ad0a-44de-a3c1-a524501d9567

Expected behavior

Behavior before PR #663
https://github.com/unoplatform/uno.toolkit.ui/assets/10283398/b41b4137-2fb7-43bd-b8b1-5d8650aba2c3
ReproALFV before PR.zip

How to reproduce it (as minimally and precisely as possible)

Sample apps attached above.

• Apply Stretch to a FlipView that's a child of an AutoLayout.

Nuget Package:

Package Version(s):
"Uno.Toolkit.WinUI" Version="4.2.22"
"Uno.Toolkit.WinUI.Material" Version="4.2.22"
and all the stable versions where the PR was backported

These are the versions used to show the behavior before the PR (sample app attached under Expected behavior):
"Microsoft.Extensions.Logging.Console" Version="7.0.0"
"Microsoft.Windows.Compatibility" Version="7.0.4"
"Microsoft.Windows.SDK.BuildTools" Version="10.0.22621.756"
"Microsoft.WindowsAppSDK" Version="1.3.230724000"
"SkiaSharp.Skottie" Version="2.88.5"
"SkiaSharp.Views.Uno.WinUI" Version="2.88.5"
"Uno.Core.Extensions.Logging.Singleton" Version="4.0.1"
"Uno.Extensions.Logging.OSLog" Version="1.6.0"
"Uno.Extensions.Logging.WebAssembly.Console" Version="1.6.0"
"Uno.Material.WinUI" Version="3.0.0-dev.264"
"Uno.Dsp.Tasks" Version="1.1.0"
"Uno.Toolkit.WinUI" Version="4.0.0-dev.35"
"Uno.Toolkit.WinUI.Material" Version="4.0.0-dev.35"
"Uno.Resizetizer" Version="1.1.3"
"Uno.UI.Adapter.Microsoft.Extensions.Logging" Version="5.0.0-dev.1380"
"Uno.UniversalImageLoader" Version="1.9.36"
"Uno.Wasm.Bootstrap" Version="7.0.29"
"Uno.Wasm.Bootstrap.DevServer" Version="7.0.29"
"Uno.Wasm.Bootstrap.Server" Version="7.0.29"
"Uno.WinUI" Version="5.0.0-dev.1380"
"Uno.WinUI.Lottie" Version="5.0.0-dev.1380"
"Uno.WinUI.RemoteControl" Version="5.0.0-dev.1380"
"Uno.WinUI.Skia.Gtk" Version="5.0.0-dev.1380"
"Uno.WinUI.WebAssembly" Version="5.0.0-dev.1380"
"Xamarin.Google.Android.Material" Version="1.9.0.2"

Affected platform(s):

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

IDE:

• Visual Studio 2022
• Visual Studio 2019
• Visual Studio Code
• Visual Studio for Mac
• Rider Windows
• Rider macOS

Relevant plugins:

Anything else we need to know?

[Robert-Louis]

If we removed the utu:AutoLayout.PrimaryAlignment="Stretch" we got the exact same issue that with a StackPanel

<StackPanel Background="{ThemeResource SurfaceBrush}"
				Spacing="32"
				Padding="32">

	<FlipView x:Name="flipView"
			  utu:SelectorExtensions.PipsPager="{Binding ElementName=pipsPager}">
		<FlipView.Items>
			<FlipViewItem>
				<Rectangle Height="200"
						   Fill="Crimson" />
			</FlipViewItem>
			<FlipViewItem>
				<Rectangle Height="400"
						   Fill="Crimson" />
			</FlipViewItem>
			<FlipViewItem>
				<Rectangle Height="600"
					   Fill="Crimson" />
			</FlipViewItem>
		</FlipView.Items>
	</FlipView>

	<muxc:PipsPager x:Name="pipsPager"
					utu:AutoLayout.CounterAlignment="Center"
					MaxVisiblePips="3"
					Orientation="Horizontal"
					Style="{StaticResource PipsPagerStyle}" />
	
	<Button Content="Button 1" />
	<Button Content="Button 2" />
	<Button Content="Button 3" />
</StackPanel>

android_autolayout

android_autolayout.mp4

Android_stackpanel

Android_stackpanel.mp4

wasm_autolayout

wasm_autolayout.mp4

wasm_stackpanel

wasm_stackpanel.mp4

windows_autolayout

windows_stackpanel.mp4

windows_autolayout.mp4

windows_stackpanel

[Robert-Louis]

Grid with <RowDefinition Height="Auto"/> give a similar result.

[kazo0]

@Robert-Louis should this be fixed by #857?

[silviuo]

@kazo0 yes

[kazo0]

fixed by #857