HOW TO：當時刻表完成時接收通知
更新：2007 年 11 月
當 Timeline 完成時，Completed 事件會通知您。在時刻表的作用期結束之後，便會將時刻表視為已經完成，而且除非以互動方式重新啟動，否則不會再播放。請注意，「完成」與「停止播放」不同；停止時刻表並不會觸發 Completed 事件 (但是跳到時刻表的填滿期間則會)。
範例
在下列範例中，我們使用兩個 Storyboard 物件建立兩個影像間的動畫轉換效果，使用 ImageSource 物件儲存，並使用 Image 控制項顯示這些效果。其中一個腳本可將影像控制項縮小，直到消失為止。完成之後，舊的 ImageSource 將與另一個 ImageSource，以及可放大影像控制項，直到恢復成完整大小為止的第二個腳本調換。
<!-- TimelineCompletedExample.xaml
This example creates an animated transition between
two images. When the user clicks the Start Transition button,
a storyboard shrinks an image until it disappears.
The Completed event is used to notify the class when this
storyboard has completed. The code behind file handles
this event by swapping the image and making it visible again.
-->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SDKSample.TimelineCompletedExample"
WindowTitle="Timeline Completed Example"
Loaded="exampleLoaded">
<Page.Resources>
<!-- A simple picture of a rectangle. -->
<DrawingImage x:Key="RectangleDrawingImage">
<DrawingImage.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="White">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,100,100" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing Brush="Orange">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="25,25,50,50" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
<!-- A simple picture of a cirlce. -->
<DrawingImage x:Key="CircleDrawingImage">
<DrawingImage.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="White">
<GeometryDrawing.Geometry>
<RectangleGeometry Rect="0,0,100,100" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<EllipseGeometry Center="50,50" RadiusX="25" RadiusY="25" />
</GeometryDrawing.Geometry>
<GeometryDrawing.Brush>
<RadialGradientBrush GradientOrigin="0.75,0.25" Center="0.75,0.25">
<GradientStop Offset="0.0" Color="White" />
<GradientStop Offset="1.0" Color="LimeGreen" />
</RadialGradientBrush>
</GeometryDrawing.Brush>
</GeometryDrawing>
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
<!-- Define the storyboard that enlarges the image.
This storyboard is applied using code when
ZoomOutStoryboard completes. -->
<Storyboard x:Key="ZoomInStoryboardResource">
<DoubleAnimation
Storyboard.TargetName="AnimatedImageScaleTranform"
Storyboard.TargetProperty="ScaleX"
Duration="0:0:5" To="1" />
<DoubleAnimation
Storyboard.TargetName="AnimatedImageScaleTranform"
Storyboard.TargetProperty="ScaleY"
Duration="0:0:5" To="1" />
</Storyboard>
</Page.Resources>
<StackPanel Margin="20" >
<Border
BorderBrush="Gray" BorderThickness="2"
HorizontalAlignment="Center" VerticalAlignment="Center">
<!-- Displays the current ImageSource. -->
<Image
Name="AnimatedImage"
Width="200" Height="200"
RenderTransformOrigin="0.5,0.5">
<Image.RenderTransform>
<ScaleTransform x:Name="AnimatedImageScaleTranform"
ScaleX="1" ScaleY="1" />
</Image.RenderTransform>
</Image>
</Border>
<!-- This StackPanel contains buttons that control the storyboard. -->
<StackPanel Orientation="Horizontal" Margin="0,30,0,0">
<Button Name="BeginButton">Start Transition</Button>
<Button Name="SkipToFillButton">Skip To Fill</Button>
<Button Name="StopButton">Stop</Button>
<StackPanel.Triggers>
<!-- Begin the storyboard that shrinks the image. After the storyboard
completes, -->
<EventTrigger RoutedEvent="Button.Click" SourceName="BeginButton">
<BeginStoryboard Name="ZoomOutBeginStoryboard">
<Storyboard x:Name="ZoomOutStoryboard"
Completed="zoomOutStoryboardCompleted" FillBehavior="Stop">
<DoubleAnimation
Storyboard.TargetName="AnimatedImageScaleTranform"
Storyboard.TargetProperty="ScaleX"
Duration="0:0:5" To="0" FillBehavior="Stop" />
<DoubleAnimation
Storyboard.TargetName="AnimatedImageScaleTranform"
Storyboard.TargetProperty="ScaleY"
Duration="0:0:5" To="0" FillBehavior="Stop" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<!-- Advances ZoomOutStoryboard to its fill period.
This action triggers the Completed event. -->
<EventTrigger RoutedEvent="Button.Click" SourceName="SkipToFillButton">
<SkipStoryboardToFill BeginStoryboardName="ZoomOutBeginStoryboard" />
</EventTrigger>
<!-- Stops the storyboard. This action does not
trigger the completed event. -->
<EventTrigger RoutedEvent="Button.Click" SourceName="StopButton">
<StopStoryboard BeginStoryboardName="ZoomOutBeginStoryboard" />
</EventTrigger>
</StackPanel.Triggers>
</StackPanel>
</StackPanel>
</Page>
// TimelineCompletedExample.xaml.cs
// Handles the ZoomOutStoryboard's Completed event.
// See the TimelienCompletedExample.xaml file
// for the markup that creates the images and storyboards.
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Navigation;
namespace SDKSample
{
public partial class TimelineCompletedExample : Page
{
private Storyboard zoomInStoryboard;
private ImageSource currentImageSource;
private ImageSource nextImageSource;
public TimelineCompletedExample()
{
InitializeComponent();
}
private void exampleLoaded(object sender, RoutedEventArgs e)
{
// Cache the zoom-out storyboard resource.
zoomInStoryboard =
(Storyboard) this.Resources["ZoomInStoryboardResource"];
// Cache the ImageSource resources.
currentImageSource =
(ImageSource) this.Resources["RectangleDrawingImage"];
nextImageSource =
(ImageSource) this.Resources["CircleDrawingImage"];
// Display the current image source.
AnimatedImage.Source = currentImageSource;
}
// Handles the zoom-out storyboard's completed event.
private void zoomOutStoryboardCompleted(object sender, EventArgs e)
{
AnimatedImage.Source = nextImageSource;
nextImageSource = currentImageSource;
currentImageSource = AnimatedImage.Source;
zoomInStoryboard.Begin(AnimatedImage, HandoffBehavior.SnapshotAndReplace);
}
}
}
如需計時事件的詳細資訊，請參閱計時事件概觀。