干掉MessageBox，自定义弹出框JMessbox (WindowsPhone)
先上效果图
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->1 Storyboard 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、修改弹出框渐变动画效果
