UWP-消息提示(仿Android)

原文:UWP-消息提示(仿Android)

 在UWP中的消息提示框(一)中介绍了一些常见的需要用户主动去干涉的一些消息提示框,接下来打算聊聊不需要用户主动去干涉的一些消息提示框。效果就是像双击退出的那种提示框。

  先说说比较简单的吧,通过系统Toast通知方式(和Android的Toast是有区别的额,更像Android里的Notification),关于这种方式,在这里就不贴代码了,MSDN上讲的很清楚(快速入门:发送 Toast 通知),需要注意的事作为应用内消息提示弹出框,应该不要带音效(有特殊需求貌似也行),但是,Toast通知会在系统通知中心留下通知内容,需要监听ToastNotification实例的Dismissed事件并通过ToastNotificationManager.History.Remove(toastTag)实现在Toast通知消失后不在系统通知中心留下痕迹。还有个问题就是这种方式在PC上如果APP并不是全屏情况运行,在右下角弹出提示个人觉得有些不太友好,或者是平板上(且是平板模式)分屏运行(且当前APP在左边一块)从右下角弹出个提示用户会懵逼的。

  再来说说自定义的,既然说到Android的Toast,那就不妨再UWP里来实现类似Android Toast的消息提示框。和上篇一样,我还是通过Popup+UserControl的方式来实现,当然 实现方式也是比较多的,比如阿迪王的博客:模态框进度指示器的实现 

  Adnroid里大多手机都是在屏幕靠下位置一块带点透明度的黑色区域显示提示内容,通常为2S左右淡出消失,一般情况下这就是Adnroid里的Toast通知,描述的不大清楚,看图吧。

 

  在UWP里实现的话,就是在UserControl里写好布局,然后再写一个延迟2s执行的淡出动画。代码大致为:

NotifyPopup.xaml:

<UserControl.Resources>
        <Storyboard x:Name="sbOut" >
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="mainGrid"
                                Storyboard.TargetProperty="Opacity"
                                BeginTime="0:0:0">
                <SplineDoubleKeyFrame  KeyTime="00:00:00.00" Value="1"/>
                <SplineDoubleKeyFrame  KeyTime="00:00:00.400" Value="0.0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="mainGrid" >
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Border Grid.Row="1" Background="#aa000000" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,50" Padding="20,15">
            <TextBlock x:Name="tbNotify" TextWrapping="Wrap" Foreground="#daffffff"/>
        </Border>
    </Grid>

NotifyPopup.xaml.cs:

 public sealed partial class NotifyPopup : UserControl
    {
        private Popup m_Popup;

        private string m_TextBlockContent;
        private TimeSpan m_ShowTime;

        private NotifyPopup()
        {
            this.InitializeComponent();
            m_Popup = new Popup();
            this.Width = Window.Current.Bounds.Width;
            this.Height = Window.Current.Bounds.Height;
            m_Popup.Child = this;
            this.Loaded += NotifyPopup_Loaded; ;
            this.Unloaded += NotifyPopup_Unloaded; ;
        }

        public NotifyPopup(string content, TimeSpan showTime) : this()
        {
            this.m_TextBlockContent = content;
            this.m_ShowTime = showTime;
        }

        public NotifyPopup(string content) : this(content, TimeSpan.FromSeconds(2))
        {
        }

        public void Show()
        {
            this.m_Popup.IsOpen = true;
        }

        private void NotifyPopup_Loaded(object sender, RoutedEventArgs e)
        {
            this.tbNotify.Text = m_TextBlockContent;
            this.sbOut.BeginTime = this.m_ShowTime;
            this.sbOut.Begin();
            this.sbOut.Completed += SbOut_Completed;
            Window.Current.SizeChanged += Current_SizeChanged; ;
        }

        private void SbOut_Completed(object sender, object e)
        {
            this.m_Popup.IsOpen = false;
        }

        private void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)
        {
            this.Width = e.Size.Width;
            this.Height = e.Size.Height;
        }

        private void NotifyPopup_Unloaded(object sender, RoutedEventArgs e)
        {
            Window.Current.SizeChanged -= Current_SizeChanged;
        }
    }

然后在Page里放个按钮,点击来触发弹出该提示框:

NotifyPopup notifyPopup = new NotifyPopup("提示点东西吧!");
            notifyPopup.Show();

最终效果如图:

  当然还可以在UserControl里增加些控件,配合写动画弄出格式各样的提示框。

 

   UWP中的常见消息提示框差不多介绍完,最后来个问题,细心的小伙伴会发现,我这边给UserControl指定的宽高是Window.Current.Bounds.Width和Window.Current.Bounds.Height,这样看似没什么问题,但需要注意的是如果提示框里内容偏下,就修改下上面的代码,让其在APP最下方弹出,NotifyPopup.xaml做如下改动:

 PC和一些实体导航栏的手机还算正常,但是在虚拟导航栏的手机且虚拟导航栏在现实时的情况这样弹窗就不正常了(这里的例子就只显示了一根线

关于这种屏幕的适配,下次再聊。。。滚去搬砖咯

抄自:http://www.cnblogs.com/helloblog/p/5225306.html

时间: 2024-10-30 23:33:59

UWP-消息提示(仿Android)的相关文章

环信的消息提示是在哪个接口中

问题描述 解决方案 新消息提示么  Android:http://docs.easemob.com/doku.php?id=start:200androidcleintintegration:40broadcastreceiver#注册接收新消息的监听广播ios: 看下didReceiveMessage回调

Android仿QQ消息提示实现弹出式对话框_Android

本文在<7种形式的Android Dialog使用实例>在这篇文章的基础进行学习,具体内容如下 1.概述 android原生控件向来以丑著称(新推出的Material Design当另说),因此几乎所有的应用都会特殊定制自己的UI样式.而其中弹出式提示框的定制尤为常见,本篇我们将从模仿QQ退出提示框来看一下常见的几种自定义提示框的实现方式. 这里使用的几种弹出框实现方法概括为以下几种: 自定义Dialog 自定义PopupWindow 自定义Layout View Activity的Dialo

Android仿QQ消息提示实现弹出式对话框

本文在<7种形式的Android Dialog使用实例>在这篇文章的基础进行学习,具体内容如下 1.概述 android原生控件向来以丑著称(新推出的Material Design当另说),因此几乎所有的应用都会特殊定制自己的UI样式.而其中弹出式提示框的定制尤为常见,本篇我们将从模仿QQ退出提示框来看一下常见的几种自定义提示框的实现方式. 这里使用的几种弹出框实现方法概括为以下几种: 自定义Dialog 自定义PopupWindow 自定义Layout View Activity的Dialo

android icon-急求类似qq桌面未读消息提示效果(android)

问题描述 急求类似qq桌面未读消息提示效果(android) 注:不需要快捷方式,如http://www.eoeandroid.com/forum.php?mod=viewthread&tid=542394&extra=page%3D1%26filter%3Dauthor%26orderby%3Ddateline里面的三星手机测试失败,如果有谁能够纠正一下的话,非常感谢.

【Android开发】消息提示框与对话框-使用AlertDialog创建对话框

AlertDialog类的功能十分强大,它不仅可以生成带按钮的提示对话框,还可以生成带列表的列表对话框,概括起来有一下4种: 1.带确定.中立和取消等N个按钮的提示对话框,其中的按钮个数不是固定的,可以根据需要添加.例如,不需要中立按钮,则可以只生成带有确定和取消按钮的对话框,也可以是只需有一个按钮的对话框. 2.带列表的列表对话框 3.带多个单选列表项和N个按钮的列表对话框 4.带多个多选列表项和N个按钮的列表对话框 在使用AlertDialog类生成对话框时,常用的方法如下所示: setTi

【Android开发】消息提示框与对话框-使用Toast显示消息提示框

在前面的实例中,已经应用过Toast类来显示一个简单的提示框了.这次将对Toast进行详细介绍.Toast类用于在屏幕中显示一个消息提示框,该消息提示框没有任何控制按钮,并且不会获得焦点,经过一段时间后自动消失.通常用于显示一些快速提示信息,应用范围非常广泛. 使用Toast来显示消息提示框非常简单,只需要一下三个步骤: (1).创建一个Toast对象.通常有两种方法:一种是使用构造方式进行创建: Toast toast=new Toast(this); 另一种是调用Toast类的makeTex

C#仿QQ来消息提示

问题描述 如何实现 解决方案 解决方案二:http://www.google.com.hk/#hl=zh-CN&newwindow=1&safe=strict&q=C%23%E4%BB%BFQQ+%E6%B6%88%E6%81%AF%E6%8F%90%E7%A4%BA+&oq=C%23%E4%BB%BFQQ+%E6%B6%88%E6%81%AF%E6%8F%90%E7%A4%BA+&aq=f&aqi=&aql=&gs_sm=e&gs_

微信小程序-消息提示框实例_javascript技巧

做Android的时候对toast是很熟悉的.微信小程序开发中toast也是重要的消息提示方式. 提示框: wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明: 示例代码: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) wx.hideToast() 隐藏消息提示框 wx.showToast({ title: '加载中', icon: 'loading', duration: 10000 }

群申请的时候,调用了接口没有log输出,也没有消息提示

问题描述 new Thread(new Runnable() {                    public void run() {                        try {                            //如果是membersOnly的群,需要申请加入,不能直接join                            if(group.isMembersOnly()){                                Lo