Xamarin.Forms弹出对话框插件

程序员文章站 2022-06-19 21:11:06

微信公众号： "Dotnet9" ，网站： "Dotnet9" ，问题或建议，请网站留言； "如果您觉得Dotnet9对您有帮助，欢迎赞赏" 。 Xamarin.Forms弹出对话框插件内容目录 1. 实现效果 2. 业务场景 3. 编码实现 4. 本文参考 5. 源码下载 1.实现效果弹出动画 ......

微信公众号：dotnet9，网站：dotnet9，问题或建议，请网站留言；
如果您觉得dotnet9对您有帮助，欢迎赞赏。

xamarin.forms弹出对话框插件

内容目录

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

1.实现效果

弹出动画
Xamarin.Forms弹出对话框插件

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>