Xamarin.forms：（Rg.Plugins.Popup）Nuget包的使用小案例

操作步骤：

首先：文件》新建》项目》已安装》Visual C#》Cross-Plaform

出现以下界面选择第一项



确定》选择模板》空白应用》可移植类库（PCL）



OK

右键》可移植的（PCL）》管理NuGet程序包

查找Rg.Plugins.Popup包并下载



每个项目都装上以免出现问题





运行效果图：





DCL:

App.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using MyDialog.Pages;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace MyDialog
{
public class App : Application
{
public App()
{
// The root page of your application
MainPage = new NavigationPage(new MainPage())
{
BarBackgroundColor = Color.FromHex("#7dbbe6"),
BarTextColor = Color.White
};
}
protected override void OnStart()
{
// Handle when your app starts
}

protected override void OnSleep()
{
// Handle when your app sleeps
}

protected override void OnResume()
{
// Handle when your app resumes
}
}
}

MainPage.xaml

XMAL部分：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyDialog.Pages.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<Style TargetType="Button">
<Setter Property="BackgroundColor" Value="#7dbbe6"/>
<Setter Property="TextColor" Value="White"/>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout Spacing="20" Margin="10, 15">
<Button Text="My Dialog" Clicked="OnOpenDialogPage"></Button>
</StackLayout>
</ContentPage>

C#部分：

using Rg.Plugins.Popup.Extensions;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace MyDialog.Pages
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MainPage : ContentPage
{
private MyDialogPage _loginPopup;
public MainPage()
{
InitializeComponent();
_loginPopup = new MyDialogPage();
}
private async void OnOpenDialogPage(object sender, EventArgs e)
{
var page = new MyDialogPage();
await Navigation.PushPopupAsync(page);
}
}
}

MyDialogPage.xaml

XMAL部分：

<?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="MyDialog.Pages.MyDialogPage">
<pages:PopupPage.Resources>
<ResourceDictionary>
<Style x:Key="EntryStyle" TargetType="Entry">
<Setter Property="PlaceholderColor" Value="#9cdaf1"/>
<Setter Property="TextColor" Value="#7dbbe6"/>
</Style>
</ResourceDictionary>
</pages:PopupPage.Resources>
<pages:PopupPage.Animation>
<animations:ScaleAnimation PositionIn="Bottom" PositionOut="Center" ScaleIn="1" ScaleOut="0.7" DurationIn="700" EasingIn="BounceOut"/>
</pages:PopupPage.Animation>
<ScrollView HorizontalOptions="Center" VerticalOptions="Center">
<AbsoluteLayout>
<Frame x:Name="FrameContainer" Margin="15" HorizontalOptions="Center" BackgroundColor="White">
<StackLayout IsClippedToBounds="True" Padding="10, 5" Spacing="3">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="0.01*" />
<RowDefinition Height="0.5*" />
<RowDefinition Height="0.01*" />
<RowDefinition Height="0.5*" />
<RowDefinition Height="0.01*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.15*" />
<ColumnDefinition Width="0.25*" />
<ColumnDefinition Width="0.2*" />
<ColumnDefinition Width="0.6*" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" HorizontalOptions="Start" HeightRequest="20" WidthRequest="30">
<Image.Source>
<OnPlatform x:TypeArguments="ImageSource" Android="icon.png" iOS="github_octocat.png"/>
</Image.Source>
</Image>
<Label FontSize="11" TextColor="#696969" Text="XXX" Grid.Row="0" Grid.Column="1" HorizontalOptions="Start" VerticalOptions="Center" />
<Label FontSize="15" TextColor="#696969" Text="XXXXXXXXXX" Grid.Row="0" Grid.Column="2" Grid.ColumnSpan="2" HorizontalOptions="End" VerticalOptions="Center" />
<Image Grid.Row="1" BackgroundColor="#A9A9A9" Grid.ColumnSpan="4"/>
<Image Grid.Row="2" Grid.ColumnSpan="3"/>
<Image Grid.Row="2" Grid.Column="0" HorizontalOptions="Start" HeightRequest="20" WidthRequest="30">
<Image.Source>
<OnPlatform x:TypeArguments="ImageSource" Android="icon.png" iOS="github_octocat.png"/>
</Image.Source>
</Image>
<Label FontSize="11" TextColor="#696969" Text="XXXXXX" Grid.Row="2" Grid.Column="1" HorizontalOptions="Start" VerticalOptions="Center" />
<Label FontSize="15" TextColor="#696969" Text="10个" Grid.Row="2" Grid.Column="2" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" />
<Button BackgroundColor="#FF4500" FontSize="13" Text="XXXXXX" Grid.Row="2" Grid.Column="3" HorizontalOptions="End" VerticalOptions="Center" HeightRequest="36" />
<Image Grid.Row="3" BackgroundColor="#A9A9A9" Grid.ColumnSpan="4"/>
<Image Grid.Row="4" Grid.Column="0" HorizontalOptions="Start" HeightRequest="20" WidthRequest="30">
<Image.Source>
<OnPlatform x:TypeArguments="ImageSource" Android="icon.png" iOS="github_octocat.png"/>
</Image.Source>
</Image>
<Grid Grid.Row="4" Grid.Column="1" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand">

c49f
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Label FontSize="11" TextColor="#696969" Text="XXXXX" HorizontalOptions="Start" VerticalOptions="EndAndExpand" />
<Label FontSize="15" TextColor="#696969" Text="15X" Grid.Row="1" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" />
</Grid>
<Image Grid.Row="5" BackgroundColor="#A9A9A9" Grid.ColumnSpan="4"/>
</Grid>
<StackLayout Margin="0,30,0,0">
<Label FontSize="11" Text="XXXXXXXXXX？" TextColor="#696969" HorizontalOptions="CenterAndExpand" VerticalOptions="EndAndExpand" />
</StackLayout>
<Grid Margin="0,5">
<Button Style="{StaticResource EntryStyle}" BorderColor="#696969" BackgroundColor="#FFFFFF" TextColor="#696969" FontSize="15" HorizontalOptions="Fill" x:Name="LoginButton" Text="取消">
<Button.HeightRequest>
<OnPlatform x:TypeArguments="x:Double" Android="38" iOS="30" WinPhone="30"/>
</Button.HeightRequest>
</Button>
<Button Style="{StaticResource EntryStyle}" BorderColor="#696969" BackgroundColor="#FFFFFF" Grid.Column="1" TextColor="#696969" FontSize="15" HorizontalOptions="Fill" Text="确定">
<Button.HeightRequest>
<OnPlatform x:TypeArguments="x:Double" Android="38" iOS="30" WinPhone="30"/>
</Button.HeightRequest>
</Button>
</Grid>
<!--<Image HorizontalOptions="Center" x:Name="OctocatImage" Margin="10" HeightRequest="150" WidthRequest="150">
<Image.Source>
<OnPlatform x:TypeArguments="ImageSource" Android="github_octocat.png" iOS="github_octocat.png"/>
</Image.Source>
</Image>-->
<!--<Entry HorizontalOptions="Center" x:Name="UsernameEntry" Style="{StaticResource EntryStyle}" Placeholder="Username" />
<Entry HorizontalOptions="Center" x:Name="PasswordEntry" Style="{StaticResource EntryStyle}" Placeholder="Password" IsPassword="True"/>-->
</StackLayout>
</Frame>
<ContentView AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="1, 0, -1, -1">
<ContentView.GestureRecognizers>
<TapGestureRecognizer Tapped="OnCloseButtonTapped"/>
</ContentView.GestureRecognizers>
<Image x:Name="CloseImage" HeightRequest="30" WidthRequest="30">
<Image.Source>
<OnPlatform x:TypeArguments="ImageSource" Android="close_circle_button.png" iOS="close_circle_button.png"/>
</Image.Source>
</Image>
</ContentView>
</AbsoluteLayout>
</ScrollView>
</pages:PopupPage>

C#部分：

using Rg.Plugins.Popup.Pages;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace MyDialog.Pages
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MyDialogPage : PopupPage
{
public MyDialogPage()
{
InitializeComponent();
}
protected override void OnAppearing()
{
base.OnAppearing();

FrameContainer.HeightRequest = -1;

CloseImage.Rotation = 30;
CloseImage.Scale = 0.3;
CloseImage.Opacity = 0;

LoginButton.Scale = 0.3;
LoginButton.Opacity = 0;

//UsernameEntry.TranslationX = PasswordEntry.TranslationX = -10;
//UsernameEntry.Opacity = PasswordEntry.Opacity = 0;
}

protected async override Task OnAppearingAnimationEnd()
{
var translateLength = 400u;

//await Task.WhenAll(
//    UsernameEntry.TranslateTo(0, 0, easing: Easing.SpringOut, length: translateLength),
//    UsernameEntry.FadeTo(1),
//    (new Func<Task>(async () =>
//    {
//        await Task.Delay(200);
//        await Task.WhenAll(
//            PasswordEntry.TranslateTo(0, 0, easing: Easing.SpringOut, length: translateLength),
//            PasswordEntry.FadeTo(1));

//    }))());

await Task.WhenAll(
CloseImage.FadeTo(1),
CloseImage.ScaleTo(1, easing: Easing.SpringOut),
CloseImage.RotateTo(0),
LoginButton.ScaleTo(1),
LoginButton.FadeTo(1));
}

protected async override Task OnDisappearingAnimationBegin()
{
var taskSource = new TaskCompletionSource<bool>();

var currentHeight = FrameContainer.Height;

await Task.WhenAll(
//UsernameEntry.FadeTo(0),
//PasswordEntry.FadeTo(0),
LoginButton.FadeTo(0));

FrameContainer.Animate("HideAnimation", d =>
{
FrameContainer.HeightRequest = d;
},
start: currentHeight,
end: 170,
finished: async (d, b) =>
{
await Task.Delay(300);
taskSource.TrySetResult(true);
});

await taskSource.Task;
}

//private async void OnLogin(object sender, EventArgs e)
//{
//    var loadingPage = new LoadingPopupPage();
//    await Navigation.PushPopupAsync(loadingPage);
//    await Task.Delay(2000);
//    await Navigation.RemovePopupPageAsync(loadingPage);
//    await Navigation.PushPopupAsync(new LoginSuccessPopupPage());
//}

private void OnCloseButtonTapped(object sender, EventArgs e)
{
CloseAllPopup();
}

protected override bool OnBackgroundClicked()
{
CloseAllPopup();

return false;
}

private async void CloseAllPopup()
{
//await Navigation.PopAllPopupAsync();
}
}
}