Gewusst wie: Empfangen von Benachrichtigung bei Abschluss einer Zeitachse
Aktualisiert: November 2007
Durch das Completed-Ereignis werden Sie benachrichtigt, wenn eine Timeline abgeschlossen wird. Eine Zeitachse wird als abgeschlossen betrachtet, nachdem sie das Ende ihres aktiven Zeitraums erreicht hat und nicht länger wiedergegeben wird, sofern sie nicht interaktiv neu gestartet wird. Beachten Sie, dass "Abgeschlossen" nicht gleich "Wiedergabe angehalten" ist: Durch das Anhalten einer Zeitachse wird dasCompleted-Ereignis nicht ausgelöst (wohl aber durch das Überspringen des Füllzeitraums).
Beispiel
Im folgenden Beispiel werden zwei Storyboard-Objekte verwendet, um einen Animationsübergang zwischen zwei Bildern zu erstellen, gespeichert unter Verwendung von ImageSource-Objekten und angezeigt mithilfe eines Image-Steuerelements. Ein Storyboard verkleinert das Bildsteuerelement, bis es verschwindet. Nach Abschluss wird die alte ImageSource durch die neue ImageSource, und ein zweites Storyboard ausgetauscht, das das Bildsteuerelement wieder auf die volle Größe vergrößert.
<!-- 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);
}
}
}
Weitere Informationen zu Zeitsteuerungsereignissen finden Sie unter Übersicht über Zeitsteuerungsereignisse.