本篇主要针对界面进行动画效果处理。首先在打开或关闭界面时，使其产生动态效果而不是生硬的显示或消失（如下图）。其次在鼠标放到关闭窗口图标上时，使其出现闪动效果。下面将通过Storyboard和EventTrigger实现这些效果。

1. 先从简单的入手吧，为关闭图标增加闪动效果，首先要在ScrollViewer中添加一个关闭窗口图标。

... ...
<ScrollViewer Name="queryScrollViewer" ScrollViewer.VerticalScrollBarVisibility="Visible"><StackPanel Orientation="Vertical"><!-- 关闭窗口图标，尺寸设为20x20 --><Image Source="image/close.png" Name="closeImage" Height="20" Width="20"Cursor="Hand" Margin="5" HorizontalAlignment="Right"><Image.ToolTip>Close</Image.ToolTip></Image><Grid Name="queryGrid"></Grid></StackPanel>
</ScrollViewer>
... ...

2. 在Window.Resources中添加一个闪动效果，这个DoubleAnimation针对closeImage的Width进行缩小操作，并处于循环重复状态。这样可以保证鼠标在其上时，它总是闪动状态。

<Window.Resources><Storyboard x:Key="flashCloseImage"><DoubleAnimation Storyboard.TargetName="closeImage" Storyboard.TargetProperty="Width"To="15" Duration="0:0:0.8" RepeatBehavior="Forever"></DoubleAnimation></Storyboard>... ...
</Window.Resources>

3. 效果添加好了，然后就要增加能使其能动起来的事件（EventTrigger），一个是鼠标放上（MouseEnter）开始闪动，另一个是鼠标离开（MouseLeave）停止。另外，由于这个图标也控制着窗口关闭效果，所以再为它加一个点击（MouseLeftButtonDown）事件（该事件效果后面会继续讲到）。

<Window.Triggers><!-- 开始闪动，而且要调用Window.Resources中的x:Key=”flashCloseImage” --><EventTrigger SourceName="closeImage" RoutedEvent="Image.MouseEnter"><BeginStoryboard Name="closeImageBeginStoryboard" Storyboard="{StaticResource flashCloseImage}">
</BeginStoryboard></EventTrigger><!-- 停止闪动，它的对象就是上面的closeImageBeginStoryboard --><EventTrigger SourceName="closeImage" RoutedEvent="Image.MouseLeave"><StopStoryboard BeginStoryboardName="closeImageBeginStoryboard">
</StopStoryboard></EventTrigger><!-- 关闭窗口事件，稍后会讲 --><EventTrigger SourceName="closeImage" RoutedEvent="Image.MouseLeftButtonDown"><BeginStoryboard Name="closeQueryCanvasStoryboard" Storyboard="{StaticResource closeQueryCanvas}">
</BeginStoryboard></EventTrigger>... ...
</Window.Triggers>

4. 所有动画效果和事件都添加好了，可以看看效果：

待续 … …

本文转自Gnie博客园博客，原文链接：http://www.cnblogs.com/gnielee/archive/2009/12/12/wpf-xmarket-game-part6.html，如需转载请自行联系原作者