How to display content View over the tabs of tabbed page

Question

I am working on a tabbed page with 4 tabs. In the second tab, I have a display list of names. I have created a content view to display it as a popup and added that in my second tab.

The problem is the popup (content view) is not displaying from the top. It is displaying below the tabs. Even I tried with layout options as start and expand the position is the same.

I have to display it from the top (over the tabs below the Navigation bar), can somebody please help me with this.

Edit: Popup design

Calling popup: This is the child of the tabbed page

Answer 1

The problem is the popup (content view) is not displaying from the top.

From Rg.plugins.popup document , can custom animations as follow: https://github.com/rotorgames/Rg.Plugins.Popup/wiki/Animations#custom-animations

Creat UserAnimation class:

 class UserAnimation : MoveAnimation
{
    private double _defaultTranslationY;

    public UserAnimation()
    {
        DurationIn = DurationOut = 300;
        EasingIn = Easing.SinOut;
        EasingOut = Easing.SinIn;
        PositionIn = MoveAnimationOptions.Top;
        PositionOut = MoveAnimationOptions.Top;
    }

    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)
        {
            //top
            var topOffset = GetTopOffset(content, page);
            content.TranslationY = -topOffset;

            taskList.Add(content.TranslateTo(content.TranslationX, _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)
        {
            //top
            _defaultTranslationY = content.TranslationX;

            var topOffset = -GetTopOffset(content, page);

            taskList.Add(content.TranslateTo(content.TranslationX, topOffset, DurationOut, EasingOut));

        };

        await Task.WhenAll(taskList);
    }
}

Usage:

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

Screenshot: