干掉MessageBox，自定义弹出框JMessbox (WindowsPhone)

2023-08-07 10:27:22

先上效果图

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、修改弹出框渐变动画效果

码农公寓

相关文章