Frame control does not respect given size on Android

[queequac]

Current behavior

Given a Frame control with a fixed size (Width="300" in the sample below), the size is not respected if the parent element provides less space (a Border with Width="100" in the sample below).

Instead the Frame shrinks to its parents size.

In the sample below, the Frame gets only a width of 100 and textwrapping occours after 100px. In case of an animation of the parent's width, the frame's content is re-layouted throughout the whole animation and the text wrapping dynamically depending on the parents size.

Note: If the Frame is smaller than the parent, the behavior is correct. Tested with Android 9 and 10

Expected behavior

Same behavior as under UWP. While the border restricts the size to 100, the Frame has still a width of 300 and content gets clipped. Frame's content remains static even if parent resizes.

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

Configure a page like the following.

<Page
    x:Class="BugTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid Width="300" Background="Green">
            <Border Width="100" VerticalAlignment="Stretch" HorizontalAlignment="Center" Background="Red">
                <Frame Width="300">
                    <Grid>
                        <TextBlock TextWrapping="WrapWholeWords">
                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                        </TextBlock>
                    </Grid>
                </Frame>
            </Border>
        </Grid>
    </Grid>
</Page>

Environment

Nuget Package Version(s): Tested with 3.0.17 and 3.1.0-dev.741

Affected platform(s):

• [ ] iOS
• [x] Android
• [ ] WebAssembly
• [ ] WebAssembly renderers for Xamarin.Forms
• [ ] macOS
• [ ] Skia
  • [ ] WPF
  • [ ] GTK (Linux)
  • [ ] Tizen
• [ ] Windows
• [ ] Build tasks
• [ ] Solution Templates

[jeromelaban]

Thank you for the report.

Currently the layout engine still has corner cases like these ones that are not well supported, particularly when children request a larger size than what the parent offers. We're gradually improving the behavior by getting closer to the original UWP behavior.

/cc @carldebilly

[Youssef1313]

https://github.com/unoplatform/uno/pull/13391 might help. Let's see Nope, this issue was for Android.

[Youssef1313]

https://github.com/unoplatform/uno/pull/18261/ will probably fix this