C#使用Xamarin开发可移植移动应用(5.进阶篇显示弹出窗口与通讯中心)附源码

前言

源码地址:https://github.com/l2999019/DemoApp

可以Star一下,随意 - -

说点什么..

没啥好说的.开干吧.

今天的学习内容?

今天的内容比较简单.

就几个弹出框和内置的消息通讯中心.

如图:

正文

1.xamarin中的弹出窗

xamarin帮我们把各个系统的弹出窗做了2个统一的类.

 1.DisplayAlert

 2.DisplayActionSheet

我们就来一一看看

DisplayAlert,其实很简单,就是一个类似于HTML的alert的弹出层.当然,你也可以作为commit来使用,代码如下:

alert的使用方式:

        private void Button_Clicked(object sender, EventArgs e)
        {
            DisplayAlert("提示", "这里是提示信息", "确定");
        }

commit的使用方式:

 private async void Button_Clicked_3(object sender, EventArgs e)
        {
           var date = await DisplayAlert("提示", "你确定要选择这个按钮么?", "确定","取消");
            await DisplayAlert("提示", "选中了"+date, "确定");
        }

DisplayActionSheet其实是一个多选的弹出层,你可以设置其中的选项,然后自定义下面的按钮,代码如下:

        private async void Button_Clicked_1(object sender, EventArgs e)
        {
            var action = await DisplayActionSheet("请选择分享到的位置", "取消", null, "QQ空间", "微博", "微信");
            await DisplayAlert("提示", "选中了" + action, "确定");
        }

第一个参数是标题内容,第二第三个参数为按钮,后面的参数为选项

下面是带2个按钮的代码例子:

  private async void Button_Clicked_2(object sender, EventArgs e)
        {
            var action = await DisplayActionSheet("请选择内容", "取消", "删除", "QQ空间", "微博", "微信");
            await DisplayAlert("提示", "选中了" + action, "确定");
        }

2.Xamarin中的消息通讯中心( MessagingCenter)

MessagingCenter允许视图模型和其他组件进行通信,而不需要知道任何关于彼此的信息.

       嗯,上面一句是官方的解释.

       MessagingCenter分2个角色,一个叫做订阅者(Subscriber),一个叫做发送者(Sender).

       意思就已经很明确了,订阅者先订阅消息,然后发送者根据业务情况,来发送消息,让订阅者接收,以方便做一些事情.

       MessagingCenter可以用于:用户交互(如按钮点击),系统事件(如控制更改状态)或其他事件(如异步下载完成)。

       订阅者可能需要接收以改变用户界面的外观,保存数据或触发其他操作。

       MessagingCenter有以下API,我们就来一一讲解.

  • Subscribe<TSender> (object subscriber, string message, Action<TSender> callback, TSender source = null)
  • Subscribe<TSender, TArgs> (object subscriber, string message, Action<TSender, TArgs> callback, TSender source = null)
  • Send<TSender> (TSender sender, string message)
  • Send<TSender, TArgs> (TSender sender, string message, TArgs args)
  • Unsubscribe<TSender, TArgs> (object subscriber, string message)
  • Unsubscribe<TSender> (object subscriber, string message)

       Subscribe当然就是订阅的方法了,里面有3个必填参数,订阅对象,信息,回调函数.

       Send当然就是发送,2-3个参数,第一个是发送者,信息,回调函数的参数..

       Unsubscribe 就是取消订阅.

       举个栗子,我需要在跳转页面的同时传递一个消息给一个Page,并根据参数改变他的界面,那么我们就在接收的Page中创建一个订阅.

       代码如下:

            MessagingCenter.Subscribe<MainPage, string>(this, "Hello",  (obj, item) => {

                 DisplayAlert("提示", "传过来的参数为" + item, "确定");
                 this.lab.Text = item;
                lab.TextColor = Color.Red;



            });

然后,我们在前一个页面跳转之后发送这个消息.

 private void Button_Clicked_10(object sender, EventArgs e)
        {
            
            Navigation.PushAsync(new DisplayingAlertsPages());
         

                MessagingCenter.Send<MainPage, string>(this, "Hello", "消息~~~");
         

        }

在Page的释放事件中取消这个订阅

 protected override void OnDisappearing()
        {
            MessagingCenter.Unsubscribe<MainPage, string>(this, "Hello");
            base.OnDisappearing();
        }

最终的效果如图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术博客

ExtJs七(ExtJs Mvc创建ViewPort)

在4.1的时候,要先创建一个扩展于Ext.app.Application的类,然后用create创建它的实例来开始应用程序的。而在4.1.1,则可直接调用app...

1404
来自专栏CRPER折腾记

Angular 2 + 折腾记 :(8) 动手写一个不怎么靠谱的上传组件

上传功能在任何一个网站中的地位都是举足轻重的,这篇文章主要扯下如何实现一个上传组件

1611
来自专栏程序猿DD

一文告诉你,Intellij IDEA神器隐藏的11种实用小技巧!

我们可以使用【Presentation Mode】,将IDEA弄到最大,可以让你只关注一个类里面的代码,进行毫无干扰的coding。

1653
来自专栏腾讯社交用户体验设计

vuejs初体验-Chrome插件开发实录

3272
来自专栏向治洪

React Native开发之调试

在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低B...

2768
来自专栏雪胖纸的玩蛇日常

Vue+koa2开发一款全栈小程序(6.个人中心)

如果报错(往往因为mysql的版本8.0什么的,加密方式导致初始化脚本报错),解决办法

2532
来自专栏前端大白专栏

基于mpvue开发微信小程序,vue能用的,用mpvue哪些情况不能用

3927
来自专栏Python小屋

Python使用matplotlib绘制正多边形逼近圆周

运行结果:用鼠标单击或拖动Slider组件并修改其值,单击按钮组件可以恢复Slider组件的默认值6。

2882
来自专栏lonelydawn的前端猿区

打造炫酷的通知插件EasyToaster

引用 <link rel="stylesheet" type="text/css" href="./index.css"> <div id="slider"><...

3779
来自专栏向治洪

React Native程序调试

在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低B...

2926

扫码关注云+社区

领取腾讯云代金券