为什么Xamarin Absolute Layout堆叠不尊重儿童订单

Question

我正在尝试实现一种布局，其中内容在背景上有图像（位于左下角，垂直扩展100％，水平扩展60％）

整个内容包装在AbsoluteLayout中，然后主要内容是这个布局的子节点，由StackLayout（以及其他一些内容）组成。

Visual Studio中的预览器（Visual Studio Community 2017）正确显示了布局 - 图像位于内容之下，内容按预期放置在中间。但是，VS Emulator和Genymotion都会在内容上方显示图像。

我将代码修剪为尽可能可读（剥离样式）

...

        <Frame VerticalOptions="End" AbsoluteLayout.LayoutFlags="All" Margin="0" Padding="0" IsClippedToBounds="True" AbsoluteLayout.LayoutBounds="0,1,0.6,1">
            <Image Source="Graphic_Anna.png" />
        </Frame>

        <!-- Start: Actual Page Content -->
        <StackLayout VerticalOptions="Center" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" x:Name="ApplicationLayoutContentLevel">

            <Label Text="This is some text in main content" />

        </StackLayout>
        <!-- End: Actual Page Content -->

    </AbsoluteLayout>
</ContentPage.Content>

...

预期结果显示在此屏幕截图中（来自预览器）：https://i.imgur.com/C8GBMSi.png

但是，两个模拟器的结果似乎都是这样做的：https://i.imgur.com/NvJFZan.png

不幸的是，我目前无法在实际的Android手机上测试该应用

Answer 1

你想实现如下截图吗？我不知道你使用的是哪种尺寸，所以我从截图中剪下了图片。

如果是这样，有我的代码。如果你想实现覆盖效果，我使用两个stacklayout，第一个布局将被第二个布局覆盖。注意：如果你设置VerticalOptions将影响AbsoluteLayout.LayoutBounds

 <ContentPage.Content>
    <AbsoluteLayout>


        <StackLayout VerticalOptions="End" AbsoluteLayout.LayoutFlags="All" Margin="0" Padding="0" IsClippedToBounds="True" AbsoluteLayout.LayoutBounds="0,1,0.6,1">

            <Image Source="Graphic_Anna.png" />

        </StackLayout>
        <!-- Start: Actual Page Content -->
        <StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0.8,0.7,0.5,0.5"  x:Name="ApplicationLayoutContentLevel">
            <Image Source="start.png"  Scale="0.7"/>
            <Label Text="10/10" TextColor="Black" FontSize="50" Margin="20,10,0,0"/>
            <Label Text="Great job! you got everything" TextColor="Black" Margin="0,10,0,0" />
            <Label Text="Back to games" TextColor="red"  Margin="25,20,0,0"  />
        </StackLayout>
    <!-- End: Actual Page Content -->

    </AbsoluteLayout>

</ContentPage.Content>