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,这里就不详细描述了。

posted @ 2012-03-22 12:36  kiminozo  阅读(2762)  评论(11编辑  收藏  举报