В Xamarin.Forms, как установить всплывающую страницу в нужной позиции с помощью RG.Plugin?

Question

Я установил пакет Nuget Rg.plugins.popup. Пытался установить всплывающую страницу, которая должна отображаться справа. Пробовал разные способы, но не смог найти решение

<pages:PopupPage.Animation>

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

 </pages:PopupPage.Animation>

Любое решение с плагином RG?

Answer 1

Речь идет не об анимации, которая будет контролировать только внешний вид. Вы должны убедиться, что содержимое всплывающей страницы правильно расположено. Например, вот XAML для всплывающей страницы, которая будет отображать квадратное всплывающее окно в верхнем правом углу.

<?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>

Он имеет StackLayout, вертикально выровненный с началом (TOP) и горизонтально выровненный с концом (справа). Он также имеет фиксированную ширину и высоту. Вы должны расположить его элементы как обычную страницу, имея в виду, что она имеет прозрачный фон.

Это выглядит так: См. Изображение

Answer 2

Пытался установить всплывающую страницу, которая должна отображаться справа.

Из Rg.plugins.popup документа, можно пользовательских анимаций следующим образом:

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

Используйте его в Xaml :

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

Не уверен, что эффект ниже того, что вы хотите, но вы можете использовать этот метод для настройки анимации.