Xamarin页面底部背景中的半圆叠加

Question

我正在努力在页面底部的背景中添加一个固定的半圆形叠加层。

应用内所有页面的结构（所有页面都是响应式的）

<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 中的所有代码推到了顶部（拉伸它，看起来很糟糕）。

如何在每个页面的底部添加这个半圆叠加，上面的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 可以合并类似堆栈的区域。）

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