WPF样式动画Trigger.EnterActions和Trigger.ExitActions(ExitActions其实可以不做任何事情)

最新推荐文章于 2024-11-26 15:24:39 发布

weixin_33849942

最新推荐文章于 2024-11-26 15:24:39 发布

阅读量553

点赞数

本文介绍了一种使用WPF实现的鼠标移入控件时触发的平滑动画效果。通过设置EnterActions和ExitActions，实现了鼠标悬停时控件向左移动及移出时返回原位的效果，并解释了未指定To属性时的行为。

这是一个鼠标移入后，控件往左移动的动画：

 1               <Style TargetType="{x:Type StackPanel}">
 2                             <Setter Property="RenderTransform">
 3                                 <Setter.Value>
 4                                     <TranslateTransform X="{Binding ElementName=borderContent,Path=ActualWidth}"/>
 5                                 </Setter.Value>
 6                             </Setter>
 7                             
 8                             <Style.Triggers>
 9                                 <Trigger Property="IsMouseOver" Value="True">
10                                     <Trigger.EnterActions>
11                                         <BeginStoryboard>
12                                             <Storyboard>
13                                                 <DoubleAnimation To="0"  Duration="0:0:0.2" AccelerationRatio="0.5"  Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"/>
14                                             </Storyboard>
15                                         </BeginStoryboard>
16                                     </Trigger.EnterActions>
17                                     <Trigger.ExitActions>
18                                         <BeginStoryboard>
19                                             <Storyboard>
20                                                 <DoubleAnimation Duration="0:0:0.2" AccelerationRatio="0.5" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)"/>
21                                             </Storyboard>
22                                         </BeginStoryboard>
23                                     </Trigger.ExitActions>
24                                 </Trigger>
25                             </Style.Triggers>
26                         </Style>