방법: Timeline이 완료될 때 알림 받기
업데이트: 2007년 11월
Timeline이 완료되면 Completed 이벤트가 발생합니다. Timeline이 활성 기간의 끝에 도달하면 완료된 것으로 간주되며 대화형으로 다시 시작되지 않는 한 더 이상 재생되지 않습니다. "완료"는 "재생 중지"와 다릅니다. Timeline을 중지하면 Completed 이벤트가 트리거되지 않지만 Timeline의 전체 기간으로 건너뛰면 이벤트가 트리거됩니다.
예제
다음 예제에서는 ImageSource 개체를 사용하여 저장하고 Image 컨트롤을 사용하여 표시하는 두 이미지 간의 애니메이션 변환을 만들기 위해 Storyboard 개체 두 개가 사용됩니다. Storyboard 하나는 이미지 컨트롤이 사라질 때까지 축소합니다. 이 작업이 완료되면 이전 ImageSource가 다른 ImageSource로 바뀌고 이미지 컨트롤이 다시 원래 크기가 될 때까지 두 번째 Storyboard가 이미지 컨트롤을 확대합니다.
<!-- 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);
}
}
}
타이밍 이벤트에 대한 자세한 내용은 타이밍 이벤트 개요를 참조하십시오.