Question

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

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

这适用于Xamarin.Forms：iOS和Android。

Answer 1

简单的步骤：

在所有项目中安装插件
添加PopUp Xaml
使用他们在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 初始化之前。

iOS 项目也是一样，在 AppDelegate.cs FinishedLaunching method() 内

 //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) 添加到您的视图目录。

<?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 事件委托。

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

2 个答案: