question

EdwardJex-2634 avatar image
0 Votes"
EdwardJex-2634 asked NagendraBellamkonda-7932 edited

Xamarin Forms: popup from bottom of screen.

How would I go about creating a popup like the one shown here on the right?
54139-cart.png
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.


dotnet-csharpdotnet-xamarinformsdotnet-android
cart.png (253.8 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

LeonLu-MSFT avatar image
3 Votes"
LeonLu-MSFT answered EdwardJex-2634 commented

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.

54029-image.png

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.



image.png (49.8 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thank you so much, that is exactly what I'm looking for.

1 Vote 1 ·
NagendraBellamkonda-7932 avatar image
0 Votes"
NagendraBellamkonda-7932 answered NagendraBellamkonda-7932 edited

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


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.