[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

[github-actions[bot]]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

• [iOS, MacCatalyst] CarouselView sizing issue when nested in StackLayout (#12911), similarity score: 0.80
• [Android] updating StackLayout.Orientation does not trigger a re-layout of the children (#7134), similarity score: 0.78
• CollectionView contents not sizing correctly after orientation change (#19667), similarity score: 0.77
• [net7.0] [iOS] The content of the DataTemplate of the CarouselView is not positioned correctly (#13489), similarity score: 0.76

Closed similar issues:

• MAUI Android | Carousel in the page is being stretched in landscape mode (#14989), similarity score: 0.76

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[Zhanglirong-Winnie]

This issue has been verified using Visual Studio 17.11.0 Preview 2.1(8.0.61 & 8.0.70-ci.net8.24326.4). Can repro on Android platform.

[MAUIoxo]

Is there a chance to rank this and the identified similar open issues higher to get them fixed soon?

Reason is that this is again an issue of the category I complain all the time concerning basic/standard components or basic/standard features/layouts! If they do not work as expected you almost can't use them in a reasonable way. It almost wasn't possible to figure out a possible workaround. These kinds of issues need to be fixed soon to get MAUI "stable" and feel like we can work with. Basic features must work. And the related open issues identified by the AI-bot show there are a lot of open issues reflecting the same problem

[PureWeen]

@MAUIoxo if you use Frame instead of Border do you see the same issues?

[MAUIoxo]

I tried it with the Border settings below in the XAML and it behaves the same as described in the issue. It still needed a rotation of the screen to Landscape orientation for instance to update to squared format and keep it:

<Border x:Name="SquareContainer" Background="Green" StrokeThickness="0" Padding="5" Margin="20, 20, 20, 0" StrokeShape="RoundRectangle 20" SizeChanged="MaxSizeAspectRatioContainer_SizeChanged">
    <Image Source="{Binding Image}" Aspect="AspectFit" IsAnimationPlaying="True" />
</Border>

[LogishaSelvarajSF4525]

This issue has been verified in Visual Studio Code 1.103.0 with MAUI versions 9.0.100. It can be reproduced on the Android platform.