Xamarin Forms: popup from bottom of screen.

Question

How would I go about creating a popup like the one shown here on the right?

Specifically, I need it come from the bottom of the screen and to still have the other content behind it but darkened. Any suggestions as to where to look would be useful.

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

You can use Rg.Plugins.Popup to achieve it.

https://github.com/rotorgames/Rg.Plugins.Popup

Here is running screenshot.

First of all, please follow this article to getting Started with Rg.Plugins.Popup

https://github.com/rotorgames/Rg.Plugins.Popup/wiki/Getting-started

Then create a popuppage with following code.

   <?xml version="1.0" encoding="utf-8" ?>  
   <pages:PopupPage    
       xmlns="http://xamarin.com/schemas/2014/forms"  
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
       xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"  
       xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"  
                x:Class="App20.PopUpPageFromBottom">  
       <pages:PopupPage.Animation>  
           <animations:ScaleAnimation   
               PositionIn="Bottom"  
               PositionOut="Bottom"  
                
               DurationIn="400"  
               DurationOut="300"  
               EasingIn="SinOut"  
               EasingOut="SinIn"  
               HasBackgroundAnimation="True"/>  
       </pages:PopupPage.Animation>  
       <!--You can use any elements here which are extended from Xamarin.Forms.View-->  
       <StackLayout   
           VerticalOptions="EndAndExpand"   
           HorizontalOptions="FillAndExpand"   
          >  
           <Frame CornerRadius="20"  HorizontalOptions="FillAndExpand" HeightRequest="200" >  
               <StackLayout>  
                   <Label Text="This is test label"></Label>  
                   <Label Text="This is test label"></Label>  
                   <Button  Text="close" Clicked="Button_Clicked"></Button>  
               </StackLayout>  
           </Frame>  
           
       </StackLayout>  
   </pages:PopupPage>  

Here is layout's background code.

   using Rg.Plugins.Popup.Extensions;  
   using System;  
   using System.Collections.Generic;  
   using System.Linq;  
   using System.Text;  
   using System.Threading.Tasks;  
     
   using Xamarin.Forms;  
   using Xamarin.Forms.Xaml;  
     
   namespace App20  
   {  
       [XamlCompilation(XamlCompilationOptions.Compile)]  
       public partial class PopUpPageFromBottom : Rg.Plugins.Popup.Pages.PopupPage  
       {  
           public PopUpPageFromBottom()  
           {  
               InitializeComponent();  
           }  
     
           private async void Button_Clicked(object sender, EventArgs e)  
           {  
               await Navigation.PopPopupAsync();  
           }  
       }  
   }  

When we click the Button to open the popup page, please use following code,

   private async void Button_Clicked(object sender, EventArgs e)  
           {  
               await Navigation.PushPopupAsync(new PopUpPageFromBottom());  
           }  

Best Regards,

Leon Lu

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hi,

I am also using similar code after updating Xamarin forms 5 I can not see the popup and my app also stuck many I know how can I solve this issue ,Issue is happen in IOS only