Skip to content

PopupPage

Kirill edited this page Feb 11, 2018 · 19 revisions

This page talks about events, methods and properties of Rg.Plugins.Popup.Pages.PopupPage and how to work with them. That to open a popup page you should create new class or xaml file and extend it from Rg.Plugins.Popup.Pages.PopupPage.

Events

  • BackgroundClicked - Invoked when a background of the popup page is clicked

Properties

  • IsAnimationEnabled - Enables or disables an animation of PopupPage
  • Animation - Sets or gets current animation of PopupPage
  • CloseWhenBackgroundIsClicked - Enables or disables closing popup page, when a background of the PopupPage is clicked
  • HasSystemPadding - Enables or disabled applying SystemPadding for the PopupPage
  • SystemPadding - Gets current system padding. See more information about it

Virtual Methods

  • OnBackButtonPressed - Invoked when a hardware back button is pressed
  • OnBackgroundClicked - Invoked when a background of the PopupPage is clicked

PopupPage has some virtual methods for supporting a custom animation also. See more information about it here

Clickable Background Zone

If you set Fill or FillAndExpand for VerticalOptions and HorizontalOptions for a main view in the PopupPage then OnBackgroundClicked and CloseWhenBackgroundIsClicked don't work. It happens because the view fills all clickable zone and catches all touches. You should set Center, CenterAndExpand, Start, StartAndExpand, End or EndAndExpand for VerticalOptions and HorizontalOptions that OnBackgroundClicked and CloseWhenBackgroundIsClicked are invoked.

System Padding Description

SystemPadding is left, top, right and button offsets for native platforms. For example it can be a height of title bar on Android and iOS, software navigation buttons bar on Android AppCompat or height of keyboard from a bottom.

Android SystemPadding iOS SystemPadding

PopupPage implementation example

<?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="MyProject.MyPopupPage">
    <!--You can set an animation in the xaml file or in the csharp code behind-->
    <pages:PopupPage.Animation>
        <animations:ScaleAnimation 
            PositionIn="Center"
            PositionOut="Center"
            ScaleIn="1.2"
            ScaleOut="0.8"
            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="Center" 
        HorizontalOptions="Center" 
        Padding="20, 20, 20, 20">
        <Label
            Text="Test"/>
    </StackLayout>
</pages:PopupPage>
namespace MyProject
{
    public partial class MyPopupPage : Rg.Plugins.Popup.Pages.PopupPage
    {
        public MyPopupPage()
        {
            InitializeComponent();
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();
        }

        protected override void OnDisappearing()
        {
            base.OnDisappearing();
        }

        // ### Methods for supporting animations in your popup page ###

        // Invoked before an animation appearing
        protected override void OnAppearingAnimationBegin()
        {
            base.OnAppearingAnimationBegin();
        }

        // Invoked after an animation appearing
        protected override void OnAppearingAnimationEnd()
        {
            base.OnAppearingAnimationEnd();
        }

        // Invoked before an animation disappearing
        protected override void OnDisappearingAnimationBegin()
        {
            base.OnDisappearingAnimationBegin();
        }

        // Invoked after an animation disappearing
        protected override void OnDisappearingAnimationEnd()
        {
            base.OnDisappearingAnimationEnd();
        }

        protected override Task OnAppearingAnimationBeginAsync()
        {
            return base.OnAppearingAnimationBeginAsync();
        }

        protected override Task OnAppearingAnimationEndAsync()
        {
            return base.OnAppearingAnimationEndAsync();
        }

        protected override Task OnDisappearingAnimationBeginAsync()
        {
            return base.OnDisappearingAnimationBeginAsync();
        }

        protected override Task OnDisappearingAnimationEndAsync()
        {
            return base.OnDisappearingAnimationEndAsync();
        }

        // ### Overrided methods which can prevent closing a popup page ###

        // Invoked when a hardware back button is pressed
        protected override bool OnBackButtonPressed()
        {
            // Return true if you don't want to close this popup page when a back button is pressed
            return base.OnBackButtonPressed();
        }

        // Invoced when background is clicked
        protected override bool OnBackgroundClicked()
        {
            // Return false if you don't want to close this popup page when a background of the popup page is clicked
            return base.OnBackgroundClicked();
        }
    }
}
Clone this wiki locally