PopupPage

This page tells about events, methods and properties of Rg.Plugins.Popup.Pages.PopupPage and how to work with them. 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
• SystemPaddingSides - Allows to set only one or a few sides for calculation SystemPadding in PopupPage. SystemPadding property contains all sides whatever how the SystemPaddingSides property is set.
• HasKeyboardOffset - Set it as false to avoid resizing PopupPage when a keyboard appears. Default true.
• KeyboardOffset - A keyboard offset from bottom. If it is 0 then there is not a keybord on the screen.
• BackgroundInputTransparent - true if a background of PopupPage should receive input and should, instead, pass inputs to the elements that are visually behind the current visual element. Works only on Android and iOS at the moment.
• BackgroundClickedCommand - A Bindable Command that is automatically executed when the BackgroundClicked event is invoked
• BackgroundClickedCommandParameter An Optional Parameter that will be passed into the BackgroundClickedCommand when it is executed
• AndroidTalkbackAccessibilityWorkaround - (Android Only) Set as true to allow for a Popups to take focus of TalkBack, this can cause minor side effects however, read more here

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 work.

System Padding Description

SystemPadding is left, top, right and bottom 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. You can select only one or a few sides using SystemPaddingSides or to avoid resizing a popup page you can set HasSystemPadding to false. Also if a keyboard appears a popup page will be resized using KeyboardOffset but you can avoid this behavior if you set HasKeyboardOffset to false

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();
        }

        // Invoked 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();
        }
    }
}