WP7进阶技巧 自定义Toast 提示动画效果

Coding4Fun.Phone.Toolkit 这个库大家应该比较熟悉了吧，里面有一个ToastPrompt提供了本地Toast 方式提示，非常实用。可以参考我这篇文章WP7应用开发笔记(16) 本地Toast 提示。

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

 

做之前首先看看SL的模拟效果吧：

无法观看，请下载直接下载示例 https://files.cnblogs.com/kiminozo/ToastPromptDemo.rar

  

了解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/releases/view/79749下载。

 

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

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

枚举如下

public enum AnimationTypes 
        { 
            Slide, 
            SlideHorizontal, 
            Swivel, 
            SwivelHorizontal, 
            Vetical//new 
        }

为了实现我需要的效果，我添加了一种名叫Vetical的动画类型。

 

为这个类型添加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()同理

 

然后找到Coding4Fun的ToastPrompt类，修改Show()里面的

AnimationType = DialogService.AnimationTypes.Vetical,

 

如下：

public void Show() 
{ 
           ..

            dialogService = new DialogService 
            { 
                AnimationType = DialogService.AnimationTypes.Vetical, 
                Child = this, 
                IsBackKeyOverride = true 
            };

         ...

  }

 

当然也可以使用面向对象的知识多态化ToastPrompt，这里就不详细描述了。