Layout in front of another layout in Xamarin UI

Question

What is the best way to accomplish the design like the below, Should I used Grid, Stack Layout, Absolute Layout or Relative Layout

How can I add a layout front of another layout?

I would use a Grid, personally. But "best" is a matter of opinion. StackLayout will NOT work, but the others would — Jason, Dec 09 '21 at 12:56
@Jason How can I make the white box appear in from of the blue image, Assuming that the blue images added in background of the grid. — Abdulsalam Elsharif, Dec 09 '21 at 13:03
@AbdulsalamElsharif If I am not wrong, you should be able to define a background image of the element behind the white box and assuming you have the blue bg as an image you can define that as the background of the element behind it. — Mercyfon, Dec 09 '21 at 14:11
@Mercyfon That is what I'm thinking .. as you see the white box is above the background of the behind element, If I'm using Grid layout how can I accomplish that? — Abdulsalam Elsharif, Dec 09 '21 at 14:35
Does this answer your question? [How to overlay elements with Xamarin.Forms](https://stackoverflow.com/questions/31723913/how-to-overlay-elements-with-xamarin-forms). Also https://stackoverflow.com/questions/37566509/how-do-overlap-in-xamarin-forms, and https://stackoverflow.com/questions/58152889/overlapping-frame-in-a-grid-xamarin-forms. Or google `xamarin forms grid overlay two elements site:stackoverflow.com`. — ToolmakerSteve, Dec 09 '21 at 22:16

score 0 · Answer 1 · answered Dec 09 '21 at 16:17

There is a package called "Pancake View", because what you want to achieve is do a card in front (where this "Buenas Noches..." is) and a card behind of it OR a layout behind it. So:

Do the card with this plugin, if you want to do with StackLayout, you just need to set the background image of it, in StackLayout Background = "img.png".
If you want to do better, create the card with this plugin, BUT put this card inside of another pancake view, but that one will fill all the screen and it will have this background, e.g PancakeView Background = "img.png".

Follow this link to know how to use this package. It shows Grid examples and then you will know how to align this card in the center and other stuffs.

I read about the PancakeView, What can the PancakeView do that the Frame Cant? — Abdulsalam Elsharif, Dec 12 '21 at 08:02

score 0 · Answer 2 · answered Dec 10 '21 at 06:12

You could use the Popup Page Plugin. It could make the Layout in front of another layout.

Install from 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>

Layout in front of another layout in Xamarin UI

2 Answers2