微信公众号：Dotnet9，网站：Dotnet9，问题或建议，请网站留言；

如果您觉得Dotnet9对您有帮助，欢迎赞赏。

Xamarin.Forms弹出对话框插件

内容目录

实现效果
业务场景
编码实现
本文参考
源码下载

1.实现效果

弹出动画

2.业务场景

主窗口弹出登录或者其他小窗口时使用

3.编码实现

3.1 添加Nuget库

创建名为“App5”的Xamarin.Forms项目，添加Rg.Plugins.PopupNuget库：弹出框由该插件提供，看下图1.31M下载量，请放心使用。

Rg.Plugins.PopupNuget插件

3.2 工程结构

数个文件变动：

共享库中的MainPage：主窗口
共享库中的LoginPage：弹出的登录对话框
MainActivity.cs：Android中需要注册上面的插件
AppDelegate.cs：iOS中需要注册上面的插件

3.3 共享库中的MainPage

简单的一个按钮控件，点击模拟触发弹出登录窗口

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:d="http://xamarin.com/schemas/2014/forms/design"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             mc:Ignorable="d"

             x:Class="App5.MainPage">

    <StackLayout Spacing="18"

                 VerticalOptions="Center">

        <Button Clicked="ShowPopup"

                Text="弹出窗体" />

    </StackLayout>

</ContentPage>

后台弹出登录窗口

private void ShowPopup(object o, EventArgs e)

{

    PopupNavigation.Instance.PushAsync(new LoginPage());

}

3.4 共享库中的LoginPage

登录窗口，引入弹出插件Rg.Plugins.Popup，设置弹出框动画

<?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:d="http://xamarin.com/schemas/2014/forms/design"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"

    xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"

    x:Class="App5.Views.LoginPage">

    <pages:PopupPage.Animation>

        <animations:ScaleAnimation DurationIn="400"

                                   DurationOut="300"

                                   EasingIn="SinOut"

                                   EasingOut="SinIn"

                                   HasBackgroundAnimation="True"

                                   PositionIn="Center"

                                   PositionOut="Center"

                                   ScaleIn="1.2"

                                   ScaleOut="0.8" />

    </pages:PopupPage.Animation>

    <Grid BackgroundColor="White" VerticalOptions="Center" Margin="30" HeightRequest="350">

        <Grid.RowDefinitions>

            <RowDefinition Height="80"/>

            <RowDefinition Height="*"/>

            <RowDefinition Height="50"/>

        </Grid.RowDefinitions>

        <StackLayout Orientation="Horizontal" HorizontalOptions="Center" Margin="0,10,0,0">

            <Label Text="选择语言"/>

            <Image Source="down_arrow.png" Opacity="0.6" VerticalOptions="Start" Margin="0,3,0,0"/>

        </StackLayout>

        <Grid Grid.Row="1" Margin="20,0,20,0">

            <Grid.RowDefinitions>

                <RowDefinition Height="*"/>

                <RowDefinition Height="50"/>

                <RowDefinition Height="50"/>

                <RowDefinition Height="Auto"/>

                <RowDefinition Height="40"/>

                <RowDefinition Height="40"/>

                <RowDefinition Height="Auto"/>

                <RowDefinition Height="*"/>

            </Grid.RowDefinitions>

            <Image Source="person.png" HeightRequest="70" VerticalOptions="End"/>

            <Entry Grid.Row="1" Placeholder="账号" PlaceholderColor="#bababa" FontSize="16"/>

            <Entry Grid.Row="2" Placeholder="密码" PlaceholderColor="#bababa" FontSize="16"/>

            <Button Grid.Row="3" Text="登录" BackgroundColor="#3897f0" TextColor="White" HeightRequest="50" VerticalOptions="Start"/>

            <Label Grid.Row="4" Text="没有账号？请联系管理员。" HorizontalOptions="Center" Margin="0,10,0,0" FontSize="12"/>

        </Grid>

    </Grid>

</pages:PopupPage>

3.6 Android项目中的MainActivity.cs

注册弹出插件

3.7 iOS项目中的AppDelegate.cs

注册弹出插件

4.本文参考

Houssem Dellai 大神的学习视频：Popup in Xamarin Forms

5.代码下载

文中代码已经全部提供，参考Github源码：Xamarin-Forms-Popup-Demo

除非注明，文章均由 Dotnet9 整理发布，欢迎转载。

转载请注明本文地址：https://dotnet9.com/6829.html

欢迎扫描下方二维码关注 Dotnet9 的微信公众号，本站会及时推送最新技术文章

巴特西

Xamarin.Forms弹出对话框插件

Xamarin.Forms弹出对话框插件

1.实现效果

2.业务场景

3.编码实现

3.1 添加Nuget库

3.2 工程结构

3.3 共享库中的MainPage

3.4 共享库中的LoginPage

3.6 Android项目中的MainActivity.cs

3.7 iOS项目中的AppDelegate.cs

4.本文参考

5.代码下载

最新文章

热门文章