How to make my contentview in the center of the screen, above my grid? - xaml

Question

Right now my ContentView (acts like a pop up window) stacks on top of my grid, see code below:
<StackLayout>
<ContentView>...</>
<StackLayout>
<Grid>...</>
</StackLayout>
</StackLayout>
The grid is a form, so when I press a button in my form, I want a new pop up window (the contentview) to be above the grid, in the center of the screen. The idea is that you can still see some of the form behind the contentview.
How do I put contentview in the front and not stacked on top of my grid?
Here's my contentview
<ContentView x:Name="popupAddDetails" AbsoluteLayout.LayoutBounds="0,0,1,1"
VerticalOptions="Center" HorizontalOptions="Center">
PS: I'm new to this environment and still learning. Thankful for any help
I tried to make a stacklayout above my first stacklayout with my grid in it and then set vertical and horizontal attributes in my contentview to center. But it just stacked upon my inner stacklayout.

Answer 1

You could simply use Xamarin Community Toolkit Popup to make it.
First of all, add a new Nuget named Xamarin.CommunityToolkit to your project.
Then, create a popup page which will be shown when you click a button. This is much similar to creating a ContentPage.
<?xml version="1.0" encoding="UTF-8" ?>
<xct:Popup
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ContentDemo.CommunityPopupPage"
xmlns:xct="clr- namespace:Xamarin.CommunityToolkit.UI.Views;assembly=Xamarin.CommunityToolkit">
<StackLayout WidthRequest="200" HeightRequest="200"BackgroundColor="Red"HorizontalOptions="Center" VerticalOptions="Center">
<Label Text="hello"/>
</StackLayout>
</xct:Popup>
The .cs may be something like this:
using Xamarin.CommunityToolkit.UI.Views;
namespace ContentDemo
{
public partial class CommunityPopupPage : Popup
{
public CommunityPopupPage()
{
this.Size = new Size(300, 300); //you could change the size of the popup
InitializeComponent();
}
}
}
Finally, you may want to open this popup page via a button clicked event. Don't forget to add this line:
using Xamarin.CommunityToolkit.Extensions;
void Button_Clicked(System.Object sender, System.EventArgs e)
{
App.Current.MainPage.Navigation.ShowPopup(new CommunityPopupPage());
}
I created this demo and it worked well. You could refer to Xamarin Community Toolkit Popup and Getting Started with the Xamarin Community Toolkit for more information.
====================update =====
2.Using outer layout as a Grid instead of a StackLayout might be an alternative. Just something like this:
<Grid x:Name="outerGrid" VerticalOptions="Center" > //this grid includes the grid and the contentview to be shown
<Grid x:Name="innerGrid">
<Grid.RowDefinitions>
...
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
...
</Grid.ColumnDefinitions>
</Grid>
<ContentView>
... // design the content
<ContentView />
</Grid>
In this way, the ContentView will be placed above the innerGrid. But I prefer using a popup page.
Hope it works for you.