在特定位置打开弹出窗口-Xamarin.Forms

问题描述

我有一个使用Rg.Plugins.Popup的xamarin.forms应用程序。我在每个视图单元格上都有一个带有“编辑”图标的列表视图。当我们单击此图标时,我将打开弹出窗口。问题是无论列表视图单元格位于什么位置,弹出窗口都会在屏幕中央打开。我们如何才能完全在被单击的列表视图单元格的位置打开弹出窗口?可能吗?任何帮助表示赞赏。

解决方法

目前,Rg.Plugins.Popup支持Animations的右,左,中,上,下。

有关Animations的更多详细信息,您可以检查下面的链接。 https://github.com/rotorgames/Rg.Plugins.Popup/wiki/Animations#custom-animations

在xaml文件中应用自定义动画:

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

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

        await Task.WhenAll(taskList);
    }
}

用法:

  <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事件:

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

enter image description here

如果您希望左,顶部,波顿,弹出式窗口中心不显示,则可以更改自定义动画的MoveAnimationOptions

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