WPF样式-------触发器动画

Bertha 。 2022-01-28 07:31 430阅读 0赞

与以往的框架如WinForms相比，WPF最大的优势之一就是可以更为轻松地处理动画（animation）。与以往框架中在两个静态值之间来回切换的处理方式不同，WPF直接使用触发器（Trigger）将动画作为Trigger触发时的响应。

有鉴于**EnterActions**与**ExitActions**属性存在于所有已讨论的Trigger种类（EventTrigger除外），包括单一触发与多重触发，我们将选择它们作为例子。

<Window x:Class="WpfTutorialSamples.Styles.StyleTriggerEnterExitActions"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="StyleTriggerEnterExitActions" Height="200" Width="200" UseLayoutRounding="True">
        <Grid>
            <Border Background="LightGreen" Width="100" Height="100" BorderBrush="Green">
                <Border.Style>
                    <Style TargetType="Border">
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ThicknessAnimation Duration="0:0:0.400" To="3" Storyboard.TargetProperty="BorderThickness" />
                                            <DoubleAnimation Duration="0:0:0.300" To="125" Storyboard.TargetProperty="Height" />
                                            <DoubleAnimation Duration="0:0:0.300" To="125" Storyboard.TargetProperty="Width" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ThicknessAnimation Duration="0:0:0.250" To="0" Storyboard.TargetProperty="BorderThickness" />
                                            <DoubleAnimation Duration="0:0:0.150" To="100" Storyboard.TargetProperty="Height" />
                                            <DoubleAnimation Duration="0:0:0.150" To="100" Storyboard.TargetProperty="Width" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
            </Border>
        </Grid>
    </Window>

![enter_exit_actions.png][]![enter_exit_actions_triggered.png][]

在这个例子，我们有一个绿色的正方形。它被设定成每当鼠标滑动在上面时，就会触发多项定义在**EnterActions**部分里的动画。在这里，我们以动画的方式把边缘厚度从默认值0变成3，接着再把阔度和高度从100变成125。这全都同时发生，因为它们都是属于同一个**StoryBoard**。它们甚至可以稍微不同的速度呈现动画，因为我们可以完全控制每一个动画的呈现时长。

我们利用ExitActions来逆转我们已做的更改，以动画的方式让它们恢复默认数值。我们以稍微快些的速度来呈现逆转，因为我们可以，也因为它看起来很酷。

以上的截图显示着正方形的两个形态。为了完全赏识它的效果，您应该尝试用以上源代码例子在您的电脑上执行。

## 小结 ##

以style trigger来呈现动画是非常容易的事。我们还没有完全探索所有您可以用WPF达到的动画效果，可是以上的例子应该可以给您一些关于动画与样式（style）弹性的概念。

[enter_exit_actions.png]: https://www.wpf-tutorial.com/Images/ArticleImages/1/chapters/styles/enter_exit_actions.png
[enter_exit_actions_triggered.png]: /images/20220128/2f9286139f024d2794f986e90ab2dcd6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，430人围观）

还没有评论，来说两句吧...

相关阅读

相关 Wpf旋转动画

学习新东西觉得wpf里面的一些动画效果很棒，于是就想写一篇有关旋转动画的文献来。首先在wpf里面的旋转动画是不需要用到jquery的，直接就可以在页面上敲，感谢大佬，不过一

系统管理员/ 2022年11月25日 13:25/ 0 赞/ 505 阅读

相关 WPF触发器

本文来自 [http://www.cnblogs.com/jax/archive/2008/04/04/1137255.html][http_www.cnblogs.com_j

我就是我/ 2022年08月18日 11:41/ 0 赞/ 196 阅读

相关扩展 WPF 动画类

本文来自MSDN, 版权归微软所有 [http://msdn.microsoft.com/zh-cn/magazine/cc163397.aspx][http_msdn.mi

深碍√TFBOYSˉ_/ 2022年08月18日 10:49/ 0 赞/ 184 阅读

相关 WPF样式（Style）入门

前言 WPF相较于以前学的WinForm，WPF在UI设计与动画方面的炫丽是最吸引我来学习的。在WPF中XMAL代码的引入使得代码的编写能够前后端分离，为获得更好的界面，

蔚落/ 2022年06月07日 07:13/ 0 赞/ 373 阅读

相关 WPF样式-------触发器动画

与以往的框架如WinForms相比，WPF最大的优势之一就是可以更为轻松地处理动画（animation）。与以往框架中在两个静态值之间来回切换的处理方式不同，WPF直接使用触发

Bertha 。/ 2022年01月28日 07:31/ 0 赞/ 431 阅读

相关 WPF样式------WPF多触发器和多数据触发器

在上一章，我们用触发（trigger）来得到动态样式（dynamic styles）。到目前为止它们都基于单一属性来触发动画。WPF其实也支援多重触发：检测多个属性，在每一个被

深碍√TFBOYSˉ_/ 2022年01月28日 07:31/ 0 赞/ 285 阅读

相关 WPF 样式 -------- 触发器数据触发器和事件触发器

到目前为止，我们通过为特定属性设置静态值来处理样式。但是使用触发器，一旦某个条件发生更改，您就可以更改给定属性的值。触发器有多种形式：属性触发器，事件触发器和数据触发器。

旧城等待，/ 2022年01月28日 07:27/ 0 赞/ 357 阅读

相关使用WPF样式

在前一章，我们介绍了样式的概念，我们使用了本地定义样式的一个基础示例，它针对特定类型的控件 - TextBlock。但是，样式可以在几个不同的范围中定义，具体取决于您希望在何

迈不过友情╰/ 2022年01月28日 07:25/ 0 赞/ 319 阅读

相关 WPF之触发器

简单触发器 <Window x:Class="WpfApp.Window1" xmlns="http://schemas.microso

约定不等于承诺〃/ 2021年12月11日 12:25/ 0 赞/ 346 阅读

相关 WPF动画应用-几何图形扩散动画

[WPF动画应用-几何图形扩散动画][WPF_-] 原文: [WPF动画应用-几何图形扩散动画][WPF_- 1] 最终效果图： ![852399-201902181

Bertha 。/ 2021年11月05日 11:24/ 0 赞/ 381 阅读