如何在 Xamarin 中创建动画自定义弹出窗口？

问题描述

我想在我的应用程序中显示一个自定义弹出窗口，我希望他们从页面底部提出一个自定义消息，而后页要稍微暗一些，以引起对弹出窗口的注意。当用户单击“确定”时，会发生相反的情况，消息消失，后屏恢复正常。就像视频一样！ 我在主屏幕上设计帖子、按钮和框架没有问题，我只是在打开弹出窗口和动画时遇到问题。 我使用了下面的代码，但尽管 Stacklayout 被隐藏了，但整个屏幕都是黑色的，什么也没有显示！！！此外，此弹出窗口没有动画。

用户界面：

<StackLayout BackgroundColor="Azure" AbsoluteLayout.LayoutBounds="0,1,1" AbsoluteLayout.LayoutFlags="All">  
    <StackLayout HorizontalOptions="CenterandExpand" VerticalOptions="CenterandExpand" >  
        <Label Text="Xamarin Monkeys" HorizontalOptions="Center" FontAttributes="Bold" FontSize="Medium"/> 
        <Image x:Name="imgMonkey" HeightRequest="200" WidthRequest="200"/>  
        <Button HorizontalOptions="Center" VerticalOptions="Center" Clicked="btnPopupButton_Clicked" Text="Show Popup"/> 
    </StackLayout>  
</StackLayout>
<ContentView x:Name="popupLoadingView" BackgroundColor="#C0808080" Padding="10,0" IsVisible="false" AbsoluteLayout.LayoutBounds="0,1" AbsoluteLayout.LayoutFlags="All">  
    <StackLayout VerticalOptions="Center" HorizontalOptions="Center">  
        <StackLayout Orientation="Vertical" HeightRequest="150" WidthRequest="200" BackgroundColor="White">  
  
            <ActivityIndicator x:Name="activityIndicator" Margin="0,50,0" VerticalOptions="Center" HorizontalOptions="Center" Color="Black" WidthRequest="30" HeightRequest="30"/>  
            <Label x:Name="lblLoadingText" TextColor="Black" VerticalOptions="Center" HorizontalOptions="Center" VerticalTextAlignment="Center" Text="Loading..."/> 
        </StackLayout>  
    </StackLayout>  
</ContentView>

编程代码：

private void btnPopupButton_Clicked(object sender,EventArgs e)  
{  
    popupImageView.IsVisible = true;  
    activityIndicator.IsRunning = true;
} 

这是我尝试创建的预览视频链接：https://drive.google.com/file/d/1YaBAw7rJN8elloBLZojgJzjynDw42dgW/view?usp=sharing

感谢您的帮助

解决方法

根据您的描述，建议您可以尝试使用Rg.Plugins.Popup来显示弹窗。

首先，通过 Nuget 包安装 Rg.Plugins.Popup 插件。

然后创建弹出页面。

<pages:PopupPage
x:Class="FormsSample.popup.popup1"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup">
<pages:PopupPage.Animation>
    <animations:ScaleAnimation
        DurationIn="400"
        DurationOut="300"
        EasingIn="SinOut"
        EasingOut="SinIn"
        HasBackgroundAnimation="False"
        PositionIn="Bottom"
        PositionOut="Bottom"
        ScaleIn="1.2"
        ScaleOut="0.8" />
</pages:PopupPage.Animation>
<ContentPage.Content>
    <StackLayout
        Padding="20,0"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="Center">
        <Frame
            Padding="0"
            BackgroundColor="CadetBlue"
            CornerRadius="10">
            <StackLayout Padding="10">
                <Label
                    FontSize="20"
                    HorizontalOptions="Center"
                    Text="First Popup Page"
                    TextColor="Black" />
                <ScrollView>
                    <StackLayout>
                        <Label Text="Hello Xamarin Guys" TextColor="Red" />
                        <StackLayout Orientation="Horizontal">
                            <Label Text="This is Very Awesome Popup Plugins For Xamarin forms" TextColor="LightBlue" />
                            <Button
                                Clicked="Button_Clicked"
                                Text="Close"
                                TextColor="Black" />
                        </StackLayout>
                    </StackLayout>
                </ScrollView>
            </StackLayout>
        </Frame>
    </StackLayout>
</ContentPage.Content>
</pages:PopupPage>

背后的代码。

public partial class popup1 : PopupPage
{
    public popup1()
    {
        InitializeComponent();
    }

    private async void Button_Clicked(object sender,EventArgs e)
    {
        await PopupNavigation.PopAsync(true);
    }
}

最后，在另一个页面调用这个弹出窗口。

  private async void btnPopupButton_Clicked(object sender,EventArgs e)
    {
        await PopupNavigation.PushAsync(new popup1());
    }

截图：