how to create custom popup window in Xamarin.Form

Question

In Xamarin.Forms I need to create a popup window that shows login page in popup window.

here is my code using xlab popup control.

MainPage l = new MainPage();    
Navigation.PushModalAsync(l); 
PopupLayout popupLayout = new PopupLayout();
popupLayout.Content = l.Content;
ShowPopup(l);

MainPage extends ContentPage and currently its working fine for login screen, but my requirement is to show it as a popup. Can anyone please help on this? Or is there any other way to do this ?

Answer 1

Here is how you do it

private async void ShowPopup()
{
     //Create `ContentPage` with padding and transparent background
     ContentPage loginPage = new ContentPage
     {
           BackgroundColor = Color.FromHex("#D9000000"),
           Padding = new Thickness(20, 20, 20, 20)
     };

     // Create Children

     //Create desired layout to be a content of your popup page. 
     var contentLayout = new StackLayout
     {
          VerticalOptions = LayoutOptions.CenterAndExpand,
          HorizontalOptions = LayoutOptions.FillAndExpand,
          Orientation = StackOrientation.Vertical,
          Children = 
          {
              // Add children
          }
     };

     //set popup page content:
     loginPage.Content = contentLayout;

     //Show Popup
     await Navigation.PushModalAsync(loginPage, false);
}

Answer 2

@misho thanks for your help

here is my final working code. But it can't be called popup window. This can just fulfill my purpose.

        private async void ShowPopup()
        {
            ContentPage detailsPage = new ContentPage
            {
                BackgroundColor = Color.Transparent,// Color.FromHex("#00F0F8FF"),
                Padding = new Thickness(40, 40, 40, 40)
            };
            MainPage l = new MainPage();
            detailsPage.Content = l.Content;
            Button b = l.FindByName<Button>("btnClose");
            b.Clicked += ((o2, e2) =>
            {
                this.Navigation.PopModalAsync();
            });
            await Navigation.PushModalAsync(detailsPage, false);
        }

Hi @Misho here is actual screen shot op popup screen.