当前位置: 移动技术网 > IT编程>开发语言>c# > Xamarin.Forms弹出对话框插件

Xamarin.Forms弹出对话框插件

2020年01月10日  | 移动技术网IT编程  | 我要评论

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

xamarin.forms弹出对话框插件

内容目录

  1. 实现效果
  2. 业务场景
  3. 编码实现
  4. 本文参考
  5. 源码下载

1.实现效果

弹出动画
弹出动画

2.业务场景

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

3.编码实现

3.1 添加nuget库

创建名为“app5”的xamarin.forms项目,添加rg.plugins.popupnuget库:弹出框由该插件提供,看下图1.31m下载量,请放心使用。

rg.plugins.popupnuget插件

3.2 工程结构

数个文件变动:

  1. 共享库中的mainpage:主窗口
  2. 共享库中的loginpage:弹出的登录对话框
  3. mainactivity.cs:android中需要注册上面的插件
  4. 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

注册弹出插件
android项目中的mainactivity.cs注册弹出插件

3.7 ios项目中的appdelegate.cs

注册弹出插件
ios项目中的appdelegate.cs注册弹出插件

4.本文参考

houssem dellai 大神的学习视频:popup in xamarin forms

5.代码下载

文中代码已经全部提供,参考github源码:xamarin-forms-popup-demo

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

转载请注明本文地址:

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

dotnet9

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网