本地Toast提示及进阶技巧自定义动画效果

关注kiminozo的博客看到一篇利用开源项目Coding4Fun.Phone.Control(以前版本可能是Coding4Fun.Phone.Toolkit不过在最新版本中是在Coding4Fun.Phone.Control这个类库中 )里的ToastPrompt类实现本地Toast的功能于是就亲自测试了一下呵呵和大家分享！！！

先来说一下Toast：首先声明部分内容摘自kiminozo博客本文主要讲解一下Coding4Fun.Phone.Control最新版本里的操作。

Toast 通知是推送通知的三种类型的其中一种。

Toast 通知显示在屏幕的顶部，用于通知用户某个事件，如新闻或天气警报。除非用户通过向右轻拂关闭通知，否则 Toast 将显示大约 10 秒钟。如果用户点按 Toast，则会启动发送该 Toast 通知的应用程序。

Toast 通知的元素如下：

标题。紧挨着应用程序图标之后显示的黑体字字符串。在 XML 架构中，该字符串定义为 Text1 属性。
内容。紧挨着“标题”之后显示的非黑体字字符串。在 XML 架构中，该字符串定义为 Text2 属性。
参数。如果用户点按 Toast，则将参数值传递给您的应用程序，而不进行显示。该参数可以指示应用程序应该启动到的页面。该参数还包含传递到应用程序的名称-值对。在 XML 架构中，该字符串定义为 Param 属性。

显示效果如下：

本地Toast 提示

有时候我们更希望在本地使用Toast来进行对用户提示但是在微软的SDK中并没有相应的实现方式必须使用推送通知才能实现

但是我们可以利用开源项目Coding4Fun.Phone.Control(以前版本可能是Coding4Fun.Phone.Toolkit不过在最新版本中是在Coding4Fun.Phone.Control这个类库中 )里的ToastPrompt类实现本地Toast的功能

首先必须先下载Coding4Fun.Phone.Control类库（最新版本为V1.5.6）然后添加引用

用法很简单代码如下

 private void button1_Click(object sender, RoutedEventArgs e)
        {
            ToastPrompt toast = new ToastPrompt();
            toast.Title = "标题";//设置标题
            toast.Message = "内容";//设置显示内容
            toast.FontSize = 50; //设置文本大小(可选)   
           toast.TextOrientation = System.Windows.Controls.Orientation.Vertical; //设置呈现为纵向   
            toast.ImageSource = new BitmapImage(new Uri("ApplicationIcon.png", UriKind.RelativeOrAbsolute));    //设置 标题前的图片(可选)   
            toast.Background = new SolidColorBrush(Colors.LightGray); //背景色(可选)  默认为系统主题颜色
            toast.Foreground = new SolidColorBrush(Colors.Red); //前景色(可选)   默认为系统前景色
            toast.Completed += new EventHandler<PopUpEventArgs<string, PopUpResult>>(toast_Completed); //Toast显示完毕后触发事件(可选)  
            //当然还有一些height之类的属性可以自己设置 不过我把高度设置了偏小就会出现内容不能显示的情况
            toast.Show();
        }

        void toast_Completed(object sender, PopUpEventArgs<string, PopUpResult> e)
        {
            //在通知完成后做相应的事件处理
        }

但是ToastPrompt的效果比较简单（就是左右晃动的那种效果），如果需要扩展就比较麻烦，下面我来说明一下如何模拟新浪微博类似的Toast。

请下载直接下载示例 https://files.cnblogs.com/kiminozo/ToastPromptDemo.rar （下载解压后运行Html文件）

了解DialogService

查看Coding4Fun的源代码，里面主要使用了DialogService类来实现的

http://blogs.claritycon.com/kevinmarshall/2010/10/13/wp7-page-transitions-sample/

DialogService的源代码请去Blog下载

比较重要的成员是

AnimationType 动画类型

Child 容器内的用于控件

IsBackKeyOverride 是否覆盖后退键

Overlay 覆盖颜色，null的情况不会影响触控操作。

Opened、Closed事件

Show()、Hide() 显示、隐藏

修改DialogService

需要自定义效果需要修改Coding4Fun的源代码，

请去http://coding4fun.codeplex.com/SourceControl/list/changesets下载。

添加效果最重要的是增加AnimationType

默认只有2种Slide，Coding4Fun代码里面增加了2种SlideHorizontal

枚举如下

 public enum AnimationTypes
        {
            Slide,
            SlideHorizontal,
            Swivel,
            SwivelHorizontal,
            Vetical//新添加的
        }

vetucal是我们现在要添加的动画类型。

为这个类型添加2个Storyboard（当然你也可以添加其他的动画）

private const string VeticalInStoryboard = 
             @"<Storyboard  xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""> 
                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=""(UIElement.RenderTransform).(TranslateTransform.Y)""> 
                      <EasingDoubleKeyFrame KeyTime=""0"" Value=""-50""/> 
                      <EasingDoubleKeyFrame KeyTime=""0:0:2"" Value=""0""> 
                      <EasingDoubleKeyFrame.EasingFunction>\ 
                         <ExponentialEase EasingMode=""EaseInOut"" Exponent=""6""/> 
                     </EasingDoubleKeyFrame.EasingFunction> 
                     </EasingDoubleKeyFrame> 
                 </DoubleAnimationUsingKeyFrames> 
                 <DoubleAnimation Storyboard.TargetProperty=""(UIElement.Opacity)"" From=""0"" To=""1"" Duration=""0:0:2"" 
                             Storyboard.TargetName=""LayoutRoot""> 
                 <DoubleAnimation.EasingFunction> 
                          <ExponentialEase EasingMode=""EaseOut"" Exponent=""6""/> 
                </DoubleAnimation.EasingFunction> 
                </DoubleAnimation> 
           </Storyboard>";

     private const string VeticalOutStoryboard = 
             @"<Storyboard  xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""> 
                 <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=""(UIElement.RenderTransform).(TranslateTransform.Y)""> 
                      <EasingDoubleKeyFrame KeyTime=""0"" Value=""0""/> 
                      <EasingDoubleKeyFrame KeyTime=""0:0:1"" Value=""-50""> 
                      <EasingDoubleKeyFrame.EasingFunction>\ 
                         <ExponentialEase EasingMode=""EaseInOut"" Exponent=""6""/> 
                     </EasingDoubleKeyFrame.EasingFunction> 
                     </EasingDoubleKeyFrame> 
                 </DoubleAnimationUsingKeyFrames> 
                 <DoubleAnimation Storyboard.TargetProperty=""(UIElement.Opacity)"" From=""1"" To=""0"" Duration=""0:0:1"" 
                             Storyboard.TargetName=""LayoutRoot""> 
                 <DoubleAnimation.EasingFunction> 
                          <ExponentialEase EasingMode=""EaseIn"" Exponent=""6""/> 
                </DoubleAnimation.EasingFunction> 
                </DoubleAnimation> 
           </Storyboard>";

修改在Show()方法的switch添加

 case AnimationTypes.Vetical:
                        storyboard = XamlReader.Load(VeticalInStoryboard) as Storyboard;
                        _overlay.RenderTransform = new TranslateTransform();
                        break;

在Hide()方法的switch添加

 case AnimationTypes.Vetical:
                    storyboard = XamlReader.Load(VeticalOutStoryboard ) as Storyboard;
                    break;

PS：以上的枚举和要添加的动画及show() Hide() 都在 DialogService类里

最后修改ToastPrompt类的show()方法

由于新版本中ToastPrompt类继承自PopUp<string, PopUpResult>类所以要修改基类中的Show()方法

修改如下

public virtual void Show()
        {
            _popUp = new DialogService
                         {
                  //AnimationType =AnimationType;修改这一行为下面一行
                             AnimationType = DialogService.AnimationTypes.Vetical,
                             Child = this,
                             BackgroundBrush = Overlay,
                             IsBackKeyOverride = IsBackKeyOverride
                         };
        ........................
         }

OK 大功告成重新生成一下取出Coding4Fun.Phone.Control类库添加到程序里试试效果！！！

posted on 2012-05-01 01:14 MessageDream 阅读(891) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

MessageDream