使用带有Xamarin表单的Rg插件弹出窗口

Question

我是Xamarin Forms开发的新手,我需要一个弹出对话框.我在https://github.com/rotorgames/Rg.Plugins.Popup找到了我正在寻找的东西,但我不能为我的生活弄清楚如何使用它.有人能指出我的工作实例或提供一些使用方向吗？网站上的README.md对我帮助不大.

我希望在顶部导航栏中单击信息按钮时显示弹出对话框.所有弹出窗口都需要1-2个按钮(和标签)来设置用户设置.

这适用于Xamarin.Forms:iOS和Android.

Answer 1

简单的步骤:

1. 在所有项目中安装插件
2. 在Xaml中添加PopUp
3. 使用他们在documentacion上提供的方法来显示/隐藏PopUp:
   • 任务PushAsync(PopupPage页面,bool animate = true)
   • 任务PopAllAsync(bool animate = true)

他们还提供了一个演示,请检查它:https: //github.com/rotorgames/Rg.Plugins.Popup/tree/master/src/Demo

Answer 2

添加对库的引用，即从 nuget 到所有项目。

在 Android 项目中，将其添加 Rg.Plugins.Popup.Popup.Init(this, savedInstanceState); 到 MainActivity.cs OnCreate 方法中的 Xamarin Forms Inits 之前。

对于 iOS 项目也是如此，在 AppDelegate.cs FinishedLaunching 方法() 中

 //Android
 protected override void OnCreate(Bundle savedInstanceState)
 {
    base.OnCreate(savedInstanceState);
    Rg.Plugins.Popup.Popup.Init(this, savedInstanceState);  /*Must add before the other Xamarin Inits*/
     Xamarin.Essentials.Platform.Init(this, savedInstanceState);
     Xamarin.Forms.Forms.Init(this, savedInstanceState);
 }

  //iOS
  public override bool FinishedLaunching(UIApplication app, NSDictionary options)
  {
      Rg.Plugins.Popup.Popup.Init();   /* place at the top*/
      ....
  }

将新的 ContentPage (.xaml) 添加到您的 Views 目录。

<?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="MyProjectName.Views.MyContentPageName">
<pages:PopupPage.Animation>
    <animations:ScaleAnimation 
        PositionIn="Center"
        PositionOut="Center"
        ScaleIn="1.2"
        ScaleOut="0.8"
        DurationIn="400"
        DurationOut="300"
        EasingIn="SinOut"
        EasingOut="SinIn"
        HasBackgroundAnimation="True"/>
</pages:PopupPage.Animation>
  <StackLayout HorizontalAlignment="FillAndExpand" VerticalAlignment="FillAndExpand"> 
    <!-- place your layout content here ....fx a close popup button -->
     <Button Clicked="CloseBtn_Clicked" Text="Close" />
  </StackLayout>

</pages:PopupPage>

在ContentPage（PopupPage）代码隐藏文件中，添加using Rg.Plugins.Popup.Services;并继承以下内容

using Rg.Plugins.Popup.Services;
using System;
using System.Threading.Tasks;
using Xamarin.Forms;

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MyContentPageName: Rg.Plugins.Popup.Pages.PopupPage
{
     public MyContentPageName()
    {
        InitializeComponent();            
    }      

      public void OnAnimationStarted(bool isPopAnimation)
    {
        // optional code here   
    }


    public void OnAnimationFinished(bool isPopAnimation)
    {
        // optional code here   
    }   

      protected override bool OnBackButtonPressed()
    {
        // Return true if you don't want to close this popup page when a back button is pressed
        return true;
    }


    // Invoked when background is clicked
    protected override bool OnBackgroundClicked()
    {
        // Return false if you don't want to close this popup page when a background of the popup page is clicked
        return false;
    }
    
    private async void CloseBtn_Clicked(object sender, EventArgs e)
    {
        await PopupNavigation.Instance.PopAsync(true);   
    }
}

在您想要打开弹出窗口的 .xaml.cs 页面中，添加以下内容：

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
using Rg.Plugins.Popup.Contracts;
using Rg.Plugins.Popup.Services;

public partial class MyOtherPage : ContentPage
{
   private IPopupNavigation _popup { get; set; }
   private MyContentPageName _modalPage;

    public MyOtherPage()    
    {
        _popup = PopupNavigation.Instance;
        _modalPage = new MyContentPageName();
    }   

   protected override void OnAppearing()
   {
       base.OnAppearing();          
       _popup.Popped += Popup_Popped;
   }

   protected override void OnDisappearing()
   {
       base.OnDisappearing();           
       _popup.Popped -= Popup_Popped;
   }

   private async void Tapped_OpenModal(object sender, EventArgs e)
   {
       await _popup.PushAsync(_modalPage);
   }
  
   /// <summary> Triggered when the MyContentPageName popup is closed "PopAsync()" </summary>
    private async void Popup_Popped(object sender, Rg.Plugins.Popup.Events.PopupNavigationEventArgs e)
    {
        /* add your logic here, if necessary  */
    }
}

*注意：如果您的模态框仅显示静态内容，则无需在 OnAppearing()/OnDisappearing() 中使用 _popped 事件委托。