Xamarin UI 中另一个布局前面的布局答案

【问题标题】：Layout in front of another layout in Xamarin UIXamarin UI 中另一个布局前面的布局
【发布时间】：2022-01-14 07:20:05
【问题描述】：

完成如下设计的最佳方法是什么，我应该使用Grid、Stack Layout、Absolute Layout 还是Relative Layout

如何在另一个布局前面添加一个布局？

【问题讨论】：

我个人会使用网格。但“最好”是见仁见智的问题。 StackLayout 不会工作，但其他人会
@Jason 如何让白色框出现在蓝色图像中，假设蓝色图像添加到网格背景中。
@AbdulsalamElsharif 如果我没记错的话，您应该能够定义白框后面元素的背景图像，并假设您有蓝色 bg 作为图像，您可以将其定义为背景它背后的元素。
@Mercyfon 这就是我的想法......正如你所见，白色框位于后面元素的背景之上，如果我使用网格布局，我该如何实现？
这能回答你的问题吗？ How to overlay elements with Xamarin.Forms。还有stackoverflow.com/questions/37566509/… 和stackoverflow.com/questions/58152889/…。或谷歌xamarin forms grid overlay two elements site:stackoverflow.com。

标签： user-interface xamarin xamarin.forms xamarin.android xamarin.ios

【解决方案1】：

有一个名为“Pancake View”的package，因为您想要实现的是在前面做一张卡片（这个“Buenas Noches...”在哪里），在它后面做一张卡片或在它后面做一个布局.所以：

用这个插件做卡片，如果你想用StackLayout做，你只需要设置它的背景图片，在StackLayout Background = "img.png"中。
如果你想做得更好，用这个插件创建卡片，但是把这张卡片放在另一个煎饼视图中，但是那个会填满整个屏幕并且它会有这个背景，例如PancakeView Background = "img.png"。

关注link 了解如何使用这个包。它显示Grid 示例，然后您将知道如何将这张卡片对齐在中心和其他东西。

【讨论】：

我读到了 PancakeView，PancakeView 可以做什么框架不能做到？

【解决方案2】：

您可以使用弹出页面插件。它可以使布局在另一个布局前面。

从 NuGet 安装：Rg.Plugins.Popup https://www.nuget.org/packages/Rg.Plugins.Popup

<rg:PopupPage
x:Class="Demo.Pages.FirstPopupPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:rg="http://rotorgames.com"
HasSystemPadding="False">
<rg:PopupPage.Animation>
    <rg:ScaleAnimation
        DurationIn="400"
        DurationOut="300"
        EasingIn="SinOut"
        EasingOut="SinIn"
        HasBackgroundAnimation="True"
        PositionIn="Center"
        PositionOut="Center"
        ScaleIn="1.2"
        ScaleOut="0.8" />
</rg:PopupPage.Animation>
<StackLayout
    Padding="20,20,20,20"
    HorizontalOptions="FillAndExpand"
    VerticalOptions="Center">
  ........
</StackLayout>
</rg:PopupPage>

【讨论】：