Xamarin.Forms弹出对话框插件

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

Xamarin.Forms弹出对话框插件

内容目录

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

1.实现效果

弹出动画
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mo52qJEl-1578316180111)(https://img.dotnet9.com/20200106202901.gif ‘弹出动画’)]
在这里插入图片描述

2.业务场景

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

3.编码实现

3.1 添加Nuget库

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

Rg.Plugins.PopupNuget插件
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

注册弹出插件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xV2EoqXo-1578316180112)(https://img.dotnet9.com/20200106203218.png ‘Android项目中的MainActivity.cs注册弹出插件’)]

3.7 iOS项目中的AppDelegate.cs

注册弹出插件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4hXGMcQX-1578316180112)(https://img.dotnet9.com/20200106203250.png ‘iOS项目中的AppDelegate.cs注册弹出插件’)]

4.本文参考

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

5.代码下载

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

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

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

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

Dotnet9

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值