WP7進階技巧 自定義Toast 提示動畫效果

Coding4Fun.Phone.Toolkit 這個庫大家應該比較熟悉了吧，里面有一個ToastPrompt提供了本地Toast 方式提示，非常實用。可以參考我這篇文章WP7應用開發筆記(16) 本地Toast 提示。

但是ToastPrompt的效果比較簡單，如果需要擴展就比較麻煩，下面我來說明一下如何模擬新浪微博類似的Toast。

 

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

無法觀看，請下載直接下載示例 http://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，這里就不詳細描述了。