此示例演示如何使用 WPF 动画对依赖项属性的值进行动画处理。本示例使用 DoubleAnimation（一种生成 Double 值的动画类型）对 Rectangle 的 Opacity 属性进行动画处理。因此，Rectangle 将逐渐进入视野并逐渐从视野中消失。
示例的第一部分创建一个 Rectangle 元素，并将其显示在 Page 中。下面的步骤表明如何创建动画并将其应用于矩形的 Opacity 属性。
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowTitle="Fading Rectangle Example">
<StackPanel Margin="10">
<Rectangle
Name="MyRectangle"
Width="100"
Height="100"
Fill="Blue">
</Rectangle>
</StackPanel>
</Page>using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;
namespace Microsoft.SDK.Animation
{
public class RectangleOpacityFadeExample : Page
{
public RectangleOpacityFadeExample()
{
NameScope.SetNameScope(this, new NameScope());
this.WindowTitle = "Fading Rectangle Example";
StackPanel myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);
Rectangle myRectangle = new Rectangle();
myRectangle.Name = "myRectangle";
this.RegisterName(myRectangle.Name, myRectangle);
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = Brushes.Blue;
myPanel.Children.Add(myRectangle);
this.Content = myPanel;
}
}
}第 1 部分：创建 DoubleAnimation
使元素逐渐进入视野并逐渐从视野中消失的一种方法是对其 Opacity 属性进行动画处理。由于 Opacity 属性的类型是 Double，因此需要一个产生双精度值的动画。DoubleAnimation 就是这样的一个动画。DoubleAnimation 创建两个双精度值之间的过渡。若要指定其起始值，可设置其 From 属性。若要指定其终止值，可设置其 To 属性。
不透明度值 1.0 使对象完全不透明，不透明度值 0.0 使对象完全不可见。若要使动画的不透明度值从 1.0 过渡为 0.0，可以将其 From 属性设置为 1.0，将其 To 属性设置为 0.0。
...
<DoubleAnimation From="1.0" To="0.0" />
...
[C#]
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
然后，必须指定 Duration。动画的 Duration 指定了从其起始值过渡为目标值所需的时间。在下面的示例中，为动画指定的持续时间为五秒钟。
...
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />
...
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
上面的代码显示了不透明度值从 1.0 向 0.0 转换的动画，此转换使目标元素从完全不透明逐渐转变为完全不可见。若要使元素在消失后再逐渐回到视野中，请将动画的 AutoReverse 属性设置为 true。若要使动画无限期地重复，请将其 RepeatBehavior 属性设置为 Forever。
...
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>
...
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
第 2 部分：创建演示图板
若要向对象应用动画，请创建 Storyboard 并使用 TargetName 和 TargetProperty附加属性指定要进行动画处理的对象和属性。
创建 Storyboard 并将动画添加为其子项。
...
<Storyboard>
<DoubleAnimation
From="1.0" To="0.0" Duration="0:0:1"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
...在代码中，将 Storyboard 声明为类成员。
public class RectangleOpacityFadeExample : Page
{
private Storyboard myStoryboard;然后初始化 Storyboard 并将动画添加为其子项。
myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
Storyboard 必须知道要在哪里应用动画。使用 Storyboard..::.TargetName 附加属性指定要进行动画处理的对象。在下面的代码中，为 DoubleAnimation 指定了一个目标名称 MyRectangle，这是要进行动画处理的对象的名称。
...
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
From="1.0" To="0.0" Duration="0:0:1"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
...Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
使用 TargetProperty 附加属性指定要进行动画处理的属性。在下面的代码中，动画被配置为面向 Rectangle 的 Opacity 属性。
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));
有关 TargetProperty 语法的更多信息以及其他示例，请参见演示图板概述。
第 3 部分 (XAML)：将演示图板与触发器关联
在 XAML 中应用和启动 Storyboard 的最简单的方法是使用事件触发器。
创建一个 BeginStoryboard 对象并将演示图板与其关联。BeginStoryboard 是一种应用和启动 Storyboard 的 TriggerAction。
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
创建 EventTrigger 并将 BeginStoryboard 添加至其 Actions 集合。将 EventTrigger 的 RoutedEvent 属性设置为启动 Storyboard 所需的路由事件。（有关路由事件的更多信息，请参见路由事件概述。）
<!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
将 EventTrigger 添加至矩形的 Triggers 集合。
<Rectangle
Name="MyRectangle"
Width="100"
Height="100"
Fill="Blue">
<Rectangle.Triggers>
<!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
第 3 部分（代码）：将演示图板与事件处理程序关联
在代码中应用和启动 Storyboard 的最简单的方法是使用事件处理程序。
注册矩形的 Loaded 事件。
[C#]
myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
声明事件处理程序。在事件处理程序中，使用 Begin 方法来应用演示图板。
[C#]
...
public void myRectangleLoaded(object sender, RoutedEventArgs e)
{
myStoryboard.Begin(this);
}
...
完整的示例
下面的示例演示了一段完整代码，这段代码用于创建逐渐进入视野并从视野中逐渐消失的矩形。
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowTitle="Fading Rectangle Example">
<StackPanel Margin="10">
<Rectangle
Name="MyRectangle"
Width="100"
Height="100"
Fill="Blue">
<Rectangle.Triggers>
<!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</StackPanel>
</Page>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;
namespace SDKSample
{
public class RectangleOpacityFadeExample : Page
{
private Storyboard myStoryboard;
public RectangleOpacityFadeExample()
{
NameScope.SetNameScope(this, new NameScope());
this.WindowTitle = "Fading Rectangle Example";
StackPanel myPanel = new StackPanel();
myPanel.Margin = new Thickness(10);
Rectangle myRectangle = new Rectangle();
myRectangle.Name = "myRectangle";
this.RegisterName(myRectangle.Name, myRectangle);
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Fill = Brushes.Blue;
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
myDoubleAnimation.AutoReverse = true;
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));
// Use the Loaded event to start the Storyboard.
myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
myPanel.Children.Add(myRectangle);
this.Content = myPanel;
}
private void myRectangleLoaded(object sender, RoutedEventArgs e)
{
myStoryboard.Begin(this);
}
}
}