Compartir a través de


Timeline.Completed Evento

Definición

Se produce cuando esta escala de tiempo ha terminado de reproducirse totalmente: ya no especificará su período activo.

public:
 event EventHandler ^ Completed;
public event EventHandler Completed;
member this.Completed : EventHandler 
Public Custom Event Completed As EventHandler 

Tipo de evento

EventHandler

Ejemplos

En el ejemplo siguiente, se usan dos Storyboard objetos para crear una transición de animación entre dos imágenes, almacenadas mediante ImageSource objetos y mostradas mediante un Image control . Un guión gráfico reduce el control de imagen hasta que desaparece. Una vez completado, el antiguo ImageSource se intercambia con el otro ImageSourceguión gráfico y un segundo guión gráfico que expande el control de imagen hasta que vuelva a tener un tamaño completo.

<!-- 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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>

Comentarios

Si esta escala de tiempo es la escala de tiempo raíz de un árbol de escala de tiempo, se ha completado la reproducción después de llegar al final de su período activo (lo que incluye repeticiones) y todos sus elementos secundarios han alcanzado el final de sus períodos activos. Si esta escala de tiempo es una escala de tiempo secundaria, se considera que ha terminado de reproducirse completamente cuando la escala de tiempo raíz del árbol de escala de tiempo al que pertenece alcanza el final de su período activo y todas sus escalas de tiempo secundarias han terminado de reproducirse.

Detener una escala de tiempo no desencadena su evento completado, pero omitirlo en su período de relleno.

El Object parámetro del controlador de EventHandler eventos es el de la escala de tiempo.Clock

Aunque este controlador de eventos parece estar asociado a una escala de tiempo, realmente se registra con el Clock creado para esta escala de tiempo. Para obtener más información, vea Información general sobre eventos de control de tiempo.

Se aplica a