先上效果图

                                             

QQ退出效果                                                                                  小弟控件效果图

首先分析一下页面结构,QQ图中弹出框的组成:透明背景,文字背景,文字颜色

在wp上,小弟分别采用Popup控件,用户控件(透明背景,文字背景用Border,显示文字用BlockText)

不想卖关子,直接上代码解析

哦,这里要说一下,这个类库结构,Resource只要放资源文件,系统编译时候会自动编译进去dll里头

1、用户控件UI代码,很简单吧,主要注意一下Border设置一下CornerRadius圆角属性

<UserControl x:Class="JM.Phone.Control.JMessboxControl"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d"FontFamily="{StaticResource PhoneFontFamilyNormal}"FontSize="{StaticResource PhoneFontSizeNormal}"Foreground="{StaticResource PhoneForegroundBrush}"d:DesignHeight="480" d:DesignWidth="480"><Grid x:Name="LayoutRoot" Width="480" Height="800"><Grid.Background><ImageBrush x:Name="layoutRootImage" ImageSource="/JM.Control;component/Resource/bg_transparent.png"></ImageBrush></Grid.Background><Border Height="65" Width="200" CornerRadius="2"><Border.Background><ImageBrush x:Name="textImage" ImageSource="/JM.Control;component/Resource/bg_tips.png"></ImageBrush></Border.Background><TextBlock Text="再按一次离开" FontSize="24" Height="35" TextAlignment="Center" Foreground="White"></TextBlock></Border></Grid>
</UserControl>

  

2、用户控件后台代码也很简单,定义2个属性,方便以后扩展。。这里只能设置本地图片。。当然你也可以拿到源代码后,自己修改为网络路径图片

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using System.Windows.Media;
using System.Windows.Media.Imaging;namespace JM.Phone.Control
{public partial class JMessboxControl : UserControl{/// <summary>/// popup背景图片/// </summary>private string _layoutRootImage = "/JM.Phone.Control;component/Resource/bg_transparent.png";public string LayoutRootImage{get { return _layoutRootImage; }set { _layoutRootImage = value; }}/// <summary>/// 文本背景/// </summary>private string _textImage = "/JM.Phone.Control;component/Resource/bg_tips.png";public string TextImage{get { return _textImage; }set { _textImage = value; }}public JMessboxControl(){InitializeComponent();this.Loaded += JTipsControl_Loaded;}void JTipsControl_Loaded(object sender, RoutedEventArgs e){layoutRootImage.ImageSource = SetSource(LayoutRootImage);textImage.ImageSource = SetSource(TextImage);}/// <summary>/// 设置图片路径 (针对相对路径uri)/// </summary>/// <param name="uri"></param>/// <returns></returns>public  ImageSource SetSource(string uri, UriKind rk = UriKind.Relative){BitmapImage bit = new BitmapImage();bit.UriSource = new Uri(uri, rk);return bit;}}
}

  

3、调用方式在页面重写OnBackKeyPress方法,注意要引用这个控件dll

int clickCount = 0;protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e){e.Cancel = true;//2s之内连续按2次,退出if (clickCount > 0){//WP7退出代码(一般采用抛出异常退出)//throw new Exception();//WP8退出代码,用此行代码,请将项目升级8.0项目                //Application.Current.Terminate()
            }clickCount++;var tips = new JMessboxControl();popup.Height = 800;popup.Width = 480;popup.IsOpen = false;popup.Child = tips;Storyboard story = new Storyboard();DoubleAnimation topAnimation = new DoubleAnimation();topAnimation.From = 0;topAnimation.To = 1;Storyboard.SetTarget(topAnimation, tips);Storyboard.SetTargetProperty(topAnimation, new PropertyPath("(UIElement.Opacity)"));popup.IsOpen = true;story.Begin();story.Duration = new Duration(new TimeSpan(0, 0, 2));story.Completed += (s1, e1) =>{//2s后执行此方法clickCount = 0;popup.IsOpen = false;story.Stop();};base.OnBackKeyPress(e);}

里面大概原理:

1、如果用户在2s之内点击后退按钮2次,就当做是退出。。。

2、用一个动画显示此控件出来,动画2s运行完后,执行Completed ,清除计数器并关闭Popup(这里也可以制作一个渐变隐藏动画,小弟偷懒,就不贴代码)

用着这个控件,顿时感觉我程序高端大气上档次啦

顿时想法,改进之后代码

4、定义一个类,这个类主要作用给页面调用

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls.Primitives;
using System.Windows.Media.Animation;namespace JM.Phone.Control
{public class JMessBox{public Action<bool> Completed;Popup popup = new Popup();//这里定义个静态变量,避免每次初始化都变为0//静态变量,个人理解,只会初始化一次static int clickCount = 0;public void Show(){//2s之内连续按2次,退出if (clickCount > 0){if (Completed != null){Completed(true);}}else{clickCount++;if (Completed != null){Completed(false);}var tips = new JMessboxControl();popup.Height = 65;popup.Width = 200;popup.Margin = new Thickness(140, 380, 0, 0);popup.IsOpen = false;popup.Child = tips;//渐变效果:透明度200毫秒内从0->1Storyboard story = new Storyboard();DoubleAnimation topAnimation = new DoubleAnimation();topAnimation.From = 0;topAnimation.To = 1;topAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(200));Storyboard.SetTarget(topAnimation, tips);Storyboard.SetTargetProperty(topAnimation, new PropertyPath("(UIElement.Opacity)"));story.Children.Add(topAnimation);popup.IsOpen = true;story.Begin();//动画延迟2秒story.Duration = new Duration(new TimeSpan(0, 0, 2));//story.BeginTime = new TimeSpan(0, 0, 0, 0, 1);story.Completed += (s1, e1) =>{//2s后执行此方法clickCount = 0;popup.IsOpen = false;story.Stop();};}}}
}
 

那么以上第三点改为这样子调用

protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e){e.Cancel = true;JMessBox jb = new JMessBox();jb.Completed += (b) =>{if (b){//WP7退出代码throw new Exception();//WP8退出代码
                }};jb.Show();}

大牛请嘴下留情。。。。

要源代码,猛撸这里。注意:项目是vs2012

2013-11-10修改

1、增加文字透明背景

2、修复弹出框,无法点击页面问题

2013-11-11修改

1、修改弹出框渐变动画效果

转载于:https://www.cnblogs.com/walleyekneel/p/3415010.html

干掉MessageBox,自定义弹出框JMessbox (WindowsPhone)相关推荐

  1. Qt总结:QMessageBox(原生态弹出框及究极超nice封装自定义弹出框)

    一.前言 在Qt中经常需要弹出窗口,QMessageBox可以实现此功能,一共有三种窗口,information, question, 和 warning,critical, about分别对应感叹号 ...

  2. react native仿微信性别选择-自定义弹出框

    简述 要实现微信性别选择需要使用两部分的技术: 第一.是自定义弹出框: 第二.单选框控件使用: 效果 实现 一.配置弹出框 弹出框用的是:react-native-popup-dialog(Git地址 ...

  3. android自定义弹出框样式实现

    前言: 做项目时,感觉Android自带的弹出框样式比较丑,很多应用都是自己做的弹出框,这里也试着自己做了一个. 废话不说先上图片: 实现机制 1.先自定义一个弹出框的样式 2.自己实现CustomD ...

  4. OpenLayers标记地图点及点击地图点显示自定义弹出框

    css代码(设置弹出框样式) /*设置弹出框样式*/.ol-popup {position: absolute;background-color: #eeeeee;-webkit-filter: dr ...

  5. 所有网站都通用的自定义弹出框alert

    A.所有网站都通用的自定义弹出框.A </body> <script>var Alert = function(data){//没有数据则返回if(!data){return; ...

  6. android弹出框自定义按钮,安卓(kotlin)自定义弹出框

    在安卓开发中,我们经常会遇到这种情况,就是可爱的UI们设计了一套属于我们自己风格的弹出框,为了彰显我们自己的风格,使用自动的dialog当然满足不了我们的需求,所以还是得这基础上写出我们自己的提示框, ...

  7. 阻止window.onbeforeunload事件的弹出框 或 自定义弹出框

    前引:网上很多关于window.onbeforeunload用来监听页面的意外退出或者关闭事件的用法但都会出现下面的弹出框.为此本博客提供方案使下面弹出框消失,但又能实现自己的相应业务功能. 在使用 ...

  8. bootstrap插件bootbox参数和自定义弹出框宽度设置

    插件官方地址:http://bootboxjs.com/ alert: 1 bootbox.alert("Hello world!", function() {}); dialog ...

  9. 关于flask入门教程-自定义弹出框

    SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义,支持设置提示框标题.提示类型.内容展示图片.确认取消按钮文 ...

最新文章

  1. matlab 颜色图名称
  2. Easyui入门视频教程 第11集---Window的使用
  3. 乾坤大挪移:SAP CRM WebClient UI 和 SAP Fiori UI 混搭并存
  4. 我认真写下9段如翔一般的代码,只为等你来品鉴
  5. 最优间隔分类器-SVM
  6. 160 - 24 Chafe.2
  7. Python导入运行的当前模块报错
  8. 荔枝派 Nano 全志 F1C100s 编译运行 Linux ubuntu并升级gcc
  9. 基于JAVA+SpringMVC+Mybatis+MYSQL的就业信息管理系统
  10. linux进程通信中有名管道的特点,linux进程通信之(四):有名管道的读与写
  11. open cv+C++错误及经验总结(十四)
  12. VS2005无法打开网站
  13. distinct 多列详解
  14. 【2018-2019 ACM-ICPC Pacific Northwest Regional Contest (Div. 1) D】Count The Bits【数位DP】
  15. L1-023 输出GPLT (20分) 给定一个长度不超过10000的、仅由英文字母构成的字符串。请将字符重新调整顺序,按GPLTGPLT....这样的顺序输出,并忽略其它字符。当然,四种字符(不区分
  16. [NOI2002]贪吃的九头龙(树形dp)
  17. 研发人员的特质_9个有效开发人员的人格特质
  18. 2022-2028年全球与中国个人冷却装置行业竞争格局与投资战略研究
  19. 一文解决C语言运算符的优先性与结合性——Think like a computer
  20. /etc/passwd文件详解

热门文章

  1. ubuntu16.04 配置双网卡机器
  2. Vue中添加新的路由并访问
  3. linux内存源码分析 - 内存压缩(同步关系)
  4. spring中间scope详细解释
  5. 分布式服务框架Dubbo疯狂更新!阿里开源要搞大事情?
  6. M站开发规范——By Klax
  7. GZFramwork数据库层《四》单据主从表增删改查
  8. 用MFC类来操作数据库的方法
  9. MFC 重设对话框的尺寸
  10. 分享Silverlight/WPF/Windows Phone一周学习导读(3月1日-3月5日)