In Xamarin.Forms how to set a popup page in desired position using RG.Plugin?

Question

I installed the Nuget package Rg.plugins.popup. Tried to set a popup page that should appear on right. Tried different ways but not able find a solution

<pages:PopupPage.Animation>

    <animations:MoveAnimation 
     PositionIn="Right"
     PositionOut="Right"
     DurationIn="300"
     DurationOut="300"
     EasingIn="SinOut"
     EasingOut="SinIn"
     HasBackgroundAnimation="True"/>

 </pages:PopupPage.Animation>

Any solution with RG plugin?

Answer 1

It's not about the animation, that will only control the appearance. You should make sure the content of the popup page is properly arranged. For instance, here is the XAML for a popup page that will display a square popup in the top right corner.

<?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="MyApp.Views.RandomPopupPage">
    <StackLayout
        BackgroundColor="White"
        HorizontalOptions="End"
        VerticalOptions="Start"
        Margin="20"
        WidthRequest="100"
        HeightRequest="100"
        Spacing="0">
        <Label
            VerticalTextAlignment="Center"
            HorizontalTextAlignment="Center"
            VerticalOptions="Center"
            HorizontalOptions="Center"
            Text="Some text here" />
    </StackLayout>
</pages:PopupPage>

It has a StackLayout vertically aligned with start (TOP) and horizontally aligned with end (right). It also has a fixed width and height. You should arrange its elements as you do with a normal page keeping in mind it has a transparent background.

It looks like this: See image

Answer 2

Tried to set a popup page that should appear on right.

From Rg.plugins.popup document , can custom animations as follow:

Creat UserAnimation class

class UserAnimation : MoveAnimation
{
    private double _defaultTranslationY;

    public UserAnimation()
    {
        DurationIn = DurationOut = 300;
        EasingIn = Easing.SinOut;
        EasingOut = Easing.SinIn;
        PositionIn = MoveAnimationOptions.Right;
        PositionOut = MoveAnimationOptions.Right;
    }
    //1
    public override void Preparing(View content, PopupPage page)
    {
        base.Preparing(content, page);
        page.IsVisible = false;
        if (content == null) return;
        _defaultTranslationY = content.TranslationY;

    }

    //3
    public override void Disposing(View content, PopupPage page)
    {
        base.Disposing(content, page);
        page.IsVisible = true;
        if (content == null) return;
        content.TranslationY = _defaultTranslationY;

    }
    //2
    public async override Task Appearing(View content, PopupPage page)
    {
        var taskList = new List<Task>();
        taskList.Add(base.Appearing(content, page));
        if (content != null)
        {
            var topOffset = GetTopOffset(content, page);
            var leftOffset = GetLeftOffset(content, page);
            taskList.Add(content.TranslateTo(content.Width, _defaultTranslationY, DurationIn, EasingIn));
        };

        page.IsVisible = true;
        await Task.WhenAll(taskList);
    }
    //4
    public async override Task Disappearing(View content, PopupPage page)
    {
        var taskList = new List<Task>();
        taskList.Add(base.Disappearing(content, page));
        if (content != null)
        {
            _defaultTranslationY = content.TranslationX - content.Width;

            var topOffset = GetTopOffset(content, page);
            var leftOffset = GetLeftOffset(content, page);

            taskList.Add(content.TranslateTo(leftOffset, _defaultTranslationY, DurationOut, EasingOut));
        };

        await Task.WhenAll(taskList);
    }
}

Use it in Xaml:

<pages:PopupPage.Animation>
    <animations:UserAnimation/>
</pages:PopupPage.Animation>

Not sure if the effect below is what you want, but you can use this method to customize the animation.