[Android] Layouting issues inside CarouselView DataTemplate

[MAUIoxo]

Description

I have a CarouselView with a DataTemplate that consists of a StackLayout with a Frame and another StackLayout below containing some Labels. The Size of the Frame should be squared and therefore is calculated in the SizeChanged-Event.

I restricted the Size to a hard value of double size = 220d;.

<StackLayout>
    <Frame x:Name="SquareContainer" CornerRadius="20" Background="Green" HasShadow="False" Margin="20, 20, 20, 0" Padding="5, 5, 5, 5" SizeChanged="MaxSizeAspectRatioContainer_SizeChanged">
        <Image Source="{Binding Image}" Aspect="AspectFit" IsAnimationPlaying="True" />
    </Frame>
    <StackLayout Background="Red" Margin="10">
        <Label Text="{Binding Title}" FontAttributes="Bold" FontSize="22" HorizontalOptions="CenterAndExpand" />
        <Label Text="{Binding Description}" FontSize="16" HorizontalOptions="CenterAndExpand" Margin="10" />
    </StackLayout>
</StackLayout>

private void MaxSizeAspectRatioContainer_SizeChanged(object sender, EventArgs e)
{
    var frame = sender as Frame;
    if (frame != null)
    {
        var image = frame.Content as Image;
        if (image != null)
        {
            double size = 220d; // Math.Min(frame.Width, frame.Height);
            size = Math.Min(size, 800); // Set max size to 800

            image.WidthRequest = size;
            image.HeightRequest = size;

            frame.WidthRequest = size;
            frame.HeightRequest = size;

            image.MaximumWidthRequest = size;
            image.MaximumHeightRequest = size;

            frame.MaximumWidthRequest = size;
            frame.MaximumHeightRequest = size;

            // Also tried with these settings without success
            // this.ChangeVisualState();
            // this.InvalidateMeasure();
            // this.ForceLayout();
        }
    }
}

As can be seen here the sizes do not get calculated correctly initially. When changing the Orientation from Portrait to Landscape and back, it shows the Frame and the Image squared as intended:

Effect: Frame and Image are not calculated squared as it was calculated in the SizeChanged-Event, but still look okay


Effect: On 2nd CarouselView the Frame and Image are not calculated squared as it was calculated in the SizeChanged-Event and the Image is extended so that the StackLayout below and the Labels inside are not visible. It also does not look right.


Effect: Changing Orientation from Portrait to Landscape. The size of the Frame and Image are calculated squared as it was intended within the SizeChanged-Event. It looks right on the 2nd CarouselView.


Effect: Changing Orientation back from Landscape to Portrait it looks right and the size of the Frame and Image are correct


Effect: Moving to 1st CarouselView and the size of the Frame and Image are correct there, too

Steps to Reproduce

1. Open the Flyout > Help > Manage Items Help Page
2. See that the green Frame and the Image are not sized square as it was calculated in the SizeChanged"-Event for the Frame, but the red StackLayoutand theLabels` are still visible and in total it is looking "okay"
3. Navigate to the 2nd CarouselView-View and see that the layout is not calculated satisfactory at all. The green Frame is not squared and also the Image inside is larger than expected so that the Frame probably overlaps the red StackLayout which is not visible anymore. Also the Labels inside the StackLayout are not visible
4. Change Orientation from Portrait to Landscape: the sizes are calculated correctly now. The green Frame is squared as expected and the red StackLayout can be seen by scrolling upwards
5. Change Orientation from Landscape back to Portrait: Everything is still looking good
6. Navigate back to the 1st CarouselView-View and see that also there the green Frame is now sized correctly and everything is looking correct

Link to public reproduction project repository

https://github.com/MAUIoxo/CarouselViewLayouting_23475

Version with bug

Reproduced with: 8.0.70-ci.net8.24326.4

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android with Google Pixel 5 - API 34 (Android 14.0 - API 34)

Did you find any workaround?

Workaround: set a HeightRequest and WidthRequest on the CarouselView

Relevant log output

No response