c# - Xamarin页面底部背景中的半圆形叠加

Question

我正在努力在页面底部的背景中添加一个固定的半圆覆盖。
App 中所有页面的结构(所有页面都是响应式的)

<ContentPage.Content>
    <StackLayout>
        
        // Top Bar => Icons e.t.c
        <StackLayout VerticalOptions="Start">
        </StackLayout>

        // Center => Content
        <StackLayout HorizontalOptions="CenterAndExpand"
                     VerticalOptions="CenterAndExpand">
        </StackLayout>

        // End => Button
        <StackLayout HorizontalOptions="Center"
                         VerticalOptions="End">
        </StackLayout>

    </StackLayout>
</ContentPage.Content>

现在，我想添加一个半圆形覆盖，但我无法通过代码来实现，所以我使用了这个半圆形覆盖的图像。
我想在最后添加它 StackLayout ，但不能放 RelativeLayout在 StackLayout .所以，我删除了最后一个 StackLayout并粘贴 RelativeLayout代替代码。

<RelativeLayout
    HorizontalOptions="End">
    <Image
        Source="drawable/background_halfcircle.png"
        RelativeLayout.WidthConstraint=
        "{ConstraintExpression Type=RelativeToParent, Property=Width}"
        RelativeLayout.HeightConstraint=
        "{ConstraintExpression Type=RelativeToParent, Property=Height}"/>
    <Grid
        RelativeLayout.WidthConstraint=
        "{ConstraintExpression Type=RelativeToParent, Property=Width}"
        RelativeLayout.HeightConstraint=
        "{ConstraintExpression Type=RelativeToParent, Property=Height}">

        <Button
            Text="Button"
            Margin="0,0,0,10"/>
    </Grid>
</RelativeLayout>

现在，问题是它把所有的代码都推送到了 Start 中。 & Center StackLayout到顶部(拉伸(stretch)它，看起来很糟糕)。
我怎么能在每页的底部和上面添加这个半圆覆盖 StackLayout没有生效？

Answer 1

使用单行网格更容易叠加:

<ContentPage.Content>
    <Grid>
        <!-- Grid Row/Column default to 0. -->
        <StackLayout>
            ... everything that isn't in the overlay ...
        </StackLayout>
        <!-- Grid Row/Column default to 0; so overlaid on StackLayout -->
        <RelativeLayout ...
            ...
        </RelativeLayout>
    </Grid>
</ContentPage.Content>

事实上，我从不使用RelativeLayout。可以使用 Grid 行和列做任何你想做的事情。

通过指定相同的行/列进行叠加。

使用行/列说明符的比例，例如“2*”、“3*”。

使用“自动”高度或宽度的类似堆栈的布局。 (我会在方便时使用 StackLayout；只是提到 Grid 可以合并类似堆栈的区域。)

在纸上画出想要的布局。绘制垂直和水平线以分隔区域。然后可以确定如何放入一个网格。例如，一个区域可能跨越两列。