先上效果图

                                             

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 = ;
protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
{
e.Cancel = true; //2s之内连续按2次,退出
if (clickCount > )
{
//WP7退出代码(一般采用抛出异常退出)
//throw new Exception(); //WP8退出代码,用此行代码,请将项目升级8.0项目
//Application.Current.Terminate()
} clickCount++;
var tips = new JMessboxControl();
popup.Height = ;
popup.Width = ;
popup.IsOpen = false;
popup.Child = tips; Storyboard story = new Storyboard();
DoubleAnimation topAnimation = new DoubleAnimation();
topAnimation.From = ;
topAnimation.To = ;
Storyboard.SetTarget(topAnimation, tips);
Storyboard.SetTargetProperty(topAnimation, new PropertyPath("(UIElement.Opacity)"));
popup.IsOpen = true;
story.Begin();
story.Duration = new Duration(new TimeSpan(, , ));
story.Completed += (s1, e1) =>
{
//2s后执行此方法
clickCount = ;
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 = ;
public void Show()
{
//2s之内连续按2次,退出
if (clickCount > )
{
if (Completed != null)
{
Completed(true);
}
}
else
{ clickCount++; if (Completed != null)
{
Completed(false);
} var tips = new JMessboxControl();
popup.Height = ;
popup.Width = ;
popup.Margin = new Thickness(, , , );
popup.IsOpen = false;
popup.Child = tips; //渐变效果:透明度200毫秒内从0->1
Storyboard story = new Storyboard();
DoubleAnimation topAnimation = new DoubleAnimation();
topAnimation.From = ;
topAnimation.To = ;
topAnimation.Duration = new Duration(TimeSpan.FromMilliseconds());
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(, , ));
//story.BeginTime = new TimeSpan(0, 0, 0, 0, 1);
story.Completed += (s1, e1) =>
{
//2s后执行此方法
clickCount = ;
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、修改弹出框渐变动画效果

干掉MessageBox,自定义弹出框JMessbox (WindowsPhone)的更多相关文章

  1. js自定义弹出框

    js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...

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

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

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

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

  4. .NET MVC 学习笔记(四)— 基于Bootstarp自定义弹出框

    .NET MVC 学习笔记(四)—— 基于Bootstarp自定义弹出框 转载自:https://www.cnblogs.com/nele/p/5327380.html (function ($) { ...

  5. jquery实现自定义弹出框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  7. unity 之 自定义弹出框

    一.弹出框的搭建: 布局如图:Message为整个父物体,并且添加UiMessage代码.panel为遮罩. MessageBox为整个提示框,Panel为标题,ok为确定按钮,cancel为取消按钮 ...

  8. 自定义弹出框基于zepto 记得引入zepto

    html <!DOCTYPE html> <html> <meta charset="utf-8"> <title></tit ...

  9. android 自定义弹出框AlertDialog ,很炫的哦

      于是就小小的模仿了下自己写了这个这样的效果,主要代码如下:dlg = new AlertDialog.Builder(context).create();dlg.show();dlg.getWin ...

随机推荐

  1. 【转】Jmeter + DadBoby 安装使用

    一直接触LR比较多,这阵子突然想了解一下开源的性能测试工具,无意中接触到了Jmeter+Badboy,这两款工具对于想进行性能测试,但又对LR高额的商业费用望而止步的小公司可谓是再适合不过了. 自已小 ...

  2. java代码初学者适用,输入学生成绩,符合要求的过~~~~注意数据范围

    总结:没有基础,我从点滴开始, package com.aaa; import java.util.Scanner; //输入“repate ”次数,输入学生成绩,低于60分,输出fail.否则输入p ...

  3. resharper activate

    K03CHKJCFT-eyJsaWNlbnNlSWQiOiJLMDNDSEtKQ0ZUIiwibGljZW5zZWVOYW1lIjoibnNzIDEwMDEiLCJhc3NpZ25lZU5hbWUiO ...

  4. Deep Learning 学习笔记(5):Regularization 规则化

    过拟合(overfitting): 实际操作过程中,无论是线性回归还是逻辑回归,其假设函数h(x)都是人为设定的(尽管可以通过实验选择最优). 这样子就可能出线“欠拟合”或者“过拟合”现象. 所谓过拟 ...

  5. 第一章 初识MySQL(待续)

    ···········

  6. 【树莓派】RASPBIAN镜像初始化配置

    [树莓派]如何烧录镜像详细版 接上一节,系统已经烧录完毕了,将其放置于树莓派然后运行起来 我是直接接显示器了,若有需要转接头的自行淘宝搜索购买~~电源使用的是5V 2.5A的 首次开机会时间较长 且有 ...

  7. 处理大数据对象clob数据和blob数据

    直接上下代码: package com.learn.jdbc.chap06; import java.io.File; import java.io.FileInputStream; import j ...

  8. fatal error C1083: 无法打开包括文件:“qedit.h”: No such file or directory

    VS2010编译 DirectShow一些项目时遇到 错误:fatal error C1083: 无法打开包括文件:“qedit.h”: No such file or directory 解决方法: ...

  9. Hibernate 实体对象三种状态 :自由,持久,游离

    实体对象的状态及转化: 有了上面关于Hibernate缓存的知识,我们再来介绍实体对象的状态就非常容易理解了. A:自由态对象: 当我们通过Java的new关键字来生成一个实体对象时,这时这个实体对象 ...

  10. day18-事务与连接池 1.复习

    实际开发中事务必须得用.