forms插件(Xamarin.Forms弹出对话框插件)

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

内容目录

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

1.实现效果

forms插件(Xamarin.Forms弹出对话框插件)(1)

弹出动画

2.业务场景

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

3.编码实现

3.1 添加Nuget库

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

forms插件(Xamarin.Forms弹出对话框插件)(2)

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

forms插件(Xamarin.Forms弹出对话框插件)(3)

注册弹出插件

3.7 iOS项目中的AppDelegate.cs

forms插件(Xamarin.Forms弹出对话框插件)(4)

注册弹出插件

4.本文参考

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

5.代码下载

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


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

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

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页