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">
                            <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();
        }
    }
}