Open popup at specific position - Xamarin.Forms

Question

I have a xamarin.forms app which uses Rg.Plugins.Popup. I have a list view with an "edit" icon on each view cell. I am opening the popup when we click on this icon. The problem is the popup will open at the center of screen no matter what where the listview cells position. How can we open the popup exactly at the position of listview cell which being clicked? Is it possible? Any help is appreciated.

Answer 1

For now, Rg.Plugins.Popup support the Animations for Right, Left, Center, Top, Bottom.

For more details of Animations, you could check the link below. https://github.com/rotorgames/Rg.Plugins.Popup/wiki/Animations#custom-animations

Applying a custom animations in a xaml file:

  class UserAnimation : MoveAnimation
{
    private double _defaultTranslationY;

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

    }

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

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

Usage:

  <pages:PopupPage.Animation>
    <animations:UserAnimation />
</pages:PopupPage.Animation>
<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
    <Frame BackgroundColor="Silver">
        <StackLayout Spacing="20">
            <Label
                FontSize="16"
                HorizontalOptions="Center"
                Text="User Animation" />
            <Button Clicked="OnClose" Text="Close" />
        </StackLayout>
    </Frame>
</StackLayout>

OnClose event:

  private void OnClose(object sender, EventArgs e)
    {
        PopupNavigation.Instance.PopAsync();
    }

If you wannna Left, Top, Botton, Center for the Popup, you could change the MoveAnimationOptions of your custom animations.

  PositionIn = MoveAnimationOptions.Right;
        PositionOut = MoveAnimationOptions.Right;