Přehled scénářů

  • Článek

Toto téma ukazuje, jak pomocí Storyboard objektů uspořádat a použít animace. Popisuje, jak interaktivně manipulovat s Storyboard objekty a popisuje syntaxi cílení na nepřímé vlastnosti.

Předpoklady

Abyste pochopili toto téma, měli byste znát různé typy animací a jejich základní funkce. Úvod do animace najdete v přehledu animací. Měli byste také vědět, jak používat připojené vlastnosti. Další informace o připojených vlastnostech naleznete v části Přehled připojených vlastností.

Co je storyboard

Animace nejsou jediným užitečným typem časové osy. K dispozici jsou další třídy časové osy, které vám pomůžou uspořádat sady časových os a použít časové osy na vlastnosti. Časové osy kontejnerů jsou odvozeny od TimelineGroup třídy a zahrnují ParallelTimeline a Storyboard.

A Storyboard je typ časové osy kontejneru, která poskytuje informace o cílení na časové osy, které obsahuje. Storyboard může obsahovat libovolný typ Timeline, včetně dalších časových os kontejnerů a animací. Storyboard Objekty umožňují kombinovat časové osy, které ovlivňují různé objekty a vlastnosti do jednoho stromu časové osy, což usnadňuje uspořádání a řízení složitých chování časování. Předpokládejme například, že chcete tlačítko, které tyto tři věci dělá.

  • Zvětšte a změňte barvu, když uživatel tlačítko vybere.

  • Zmenšete a po kliknutí se zvětšíte zpět na původní velikost.

  • Zmenšení a prolnutí na 50 % neprůhlednosti, když se zakáže.

V tomto případě máte několik sad animací, které se vztahují na stejný objekt, a chcete přehrávat v různých časech, a to v závislosti na stavu tlačítka. Storyboard objekty umožňují uspořádat animace a použít je ve skupinách na jeden nebo více objektů.

Kde můžete použít storyboard

Lze Storyboard použít k animaci vlastností závislostí animatable tříd (další informace o tom, co dělá třídu animatable, viz Přehled animace). Vzhledem k tomu, že storyboarding je funkce na úrovni architektury, musí objekt patřit do NameScope objektu nebo FrameworkElement .FrameworkContentElement

Můžete například použít Storyboard následující postup:

Nelze však použít animaciSolidColorBrush, která nezaregistrovala jeho název u FrameworkElement nebo FrameworkContentElementnebo nebyla použita k nastavení vlastnosti nebo FrameworkElementFrameworkContentElement.Storyboard

Použití animací pomocí scénáře

Chcete-li použít Storyboard k uspořádání a použití animací, přidáte animace jako podřízené časové osy Storyboard. Třída Storyboard poskytuje Storyboard.TargetName a Storyboard.TargetProperty připojené vlastnosti. Tyto vlastnosti nastavíte v animaci a určíte jeho cílový objekt a vlastnost.

Pokud chcete použít animace na cíle, začněte Storyboard používat akci triggeru nebo metodu. V JAZYCE XAML použijete BeginStoryboard objekt s objektem EventTrigger, Triggernebo DataTrigger. V kódu můžete také použít metodu Begin .

Následující tabulka ukazuje různá místa, kde je podporována každá Storyboard počáteční technika: pro jednotlivé instance, styl, řídicí šablonu a šablonu dat. "Pro instanci" odkazuje na techniku použití animace nebo scénáře přímo u instancí objektu, nikoli ve stylu, šabloně ovládacího prvku nebo šabloně dat.

Storyboard začíná používat... Pro každou instanci Styl Šablona ovládacího prvku Šablona dat Příklad
BeginStoryboard a EventTrigger Ano Ano Ano Yes Animace vlastnosti pomocí scénáře
BeginStoryboard a vlastnost Trigger No Ano Ano Yes Spuštění animace při změně hodnoty vlastnosti
BeginStoryboard a vlastnost MultiTrigger No Ano Ano Yes Příklad třídy MultiTrigger
BeginStoryboard a a DataTrigger No Ano Ano Yes Postupy: Aktivace animace při změně dat
BeginStoryboard a a MultiDataTrigger No Ano Ano Yes Příklad třídy MultiDataTrigger
Begin Metoda Ano Ne No Ne Animace vlastnosti pomocí scénáře

Následující příklad používá Storyboard k animaci RectangleWidth prvku a Color použitého SolidColorBrush k malování , Rectangle.

<!-- This example shows how to animate with a storyboard.-->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.Animation.StoryboardsExample" 
  WindowTitle="Storyboards Example">
  <StackPanel Margin="20">
    
    <Rectangle Name="MyRectangle"
      Width="100"
      Height="100">
      <Rectangle.Fill>
        <SolidColorBrush x:Name="MySolidColorBrush" Color="Blue" />
      </Rectangle.Fill>
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.MouseEnter">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="MyRectangle"
                Storyboard.TargetProperty="Width"
                From="100" To="200" Duration="0:0:1" />
              
              <ColorAnimation 
                Storyboard.TargetName="MySolidColorBrush"
                Storyboard.TargetProperty="Color"
                From="Blue" To="Red" Duration="0:0:1" />  
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle> 
  </StackPanel>
</Page>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Data;
using System.Windows.Shapes;
using System.Windows.Input;

namespace Microsoft.Samples.Animation
{
    public class StoryboardsExample : Page
    {
        public StoryboardsExample()
        {
            this.WindowTitle = "Storyboards Example";
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);

            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "MyRectangle";

            // Create a name scope for the page.
            NameScope.SetNameScope(this, new NameScope());

            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            SolidColorBrush mySolidColorBrush = new SolidColorBrush(Colors.Blue);
            this.RegisterName("MySolidColorBrush", mySolidColorBrush);
            myRectangle.Fill = mySolidColorBrush;

            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 100;
            myDoubleAnimation.To = 200;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation,
                new PropertyPath(Rectangle.WidthProperty));

            ColorAnimation myColorAnimation = new ColorAnimation();
            myColorAnimation.From = Colors.Blue;
            myColorAnimation.To = Colors.Red;
            myColorAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
            Storyboard.SetTargetName(myColorAnimation, "MySolidColorBrush");
            Storyboard.SetTargetProperty(myColorAnimation,
                new PropertyPath(SolidColorBrush.ColorProperty));
            Storyboard myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            myStoryboard.Children.Add(myColorAnimation);

            myRectangle.MouseEnter += delegate(object sender, MouseEventArgs e)
            {
                myStoryboard.Begin(this);
            };

            myStackPanel.Children.Add(myRectangle);
            this.Content = myStackPanel;
        }
    }
}

Následující části popisují TargetName a TargetProperty připojené vlastnosti podrobněji.

Cílení prvků architektury, prvků obsahu architektury a ukotvení

Předchozí část zmínila, že aby animace našla cíl, musí znát název cíle a vlastnost, která se má animovat. Určení vlastnosti, která se má animovat, je rovnou: stačí nastavit TargetProperty název vlastnosti, která se má animovat. Zadáním názvu objektu, jehož vlastnost chcete animovat, Storyboard.TargetName nastavíte vlastnost animace.

Upozornění

I když můžete vlastnost použít Target k vytvoření vazby přímo k objektu jako alternativu TargetName, není serializovatelná. Neexistuje žádná záruka, že Target objekt lze správně odkazovat v XAML.

TargetName Aby vlastnost fungovala, musí mít cílový objekt název. Přiřazení názvu k objektu FrameworkElement nebo FrameworkContentElement kódu XAML se liší od přiřazení názvu k objektu Freezable .

Prvky architektury jsou třídy, které dědí z FrameworkElement třídy. Mezi příklady prvků architektury patří Window, DockPanel, Button, a Rectangle. Prvky jsou v podstatě všechna okna, panely a ovládací prvky. Prvky obsahu architektury jsou třídy, které dědí z FrameworkContentElement třídy. Mezi příklady prvků obsahu architektury patří FlowDocument a Paragraph. Pokud si nejste jistí, zda je typem element framework nebo prvek obsahu rozhraní, zkontrolujte, zda má vlastnost Name. Pokud ano, jedná se pravděpodobně o prvek architektury nebo prvek obsahu architektury. Abyste měli jistotu, zkontrolujte část Hierarchie dědičnosti na stránce s typem.

Pokud chcete povolit cílení elementu architektury nebo elementu obsahu architektury v XAML, nastavíte jeho Name vlastnost. V kódu musíte také použít metodu RegisterName k registraci názvu elementu u elementu, pro který jste vytvořili NameScope.

Následující příklad, převzatý z předchozího příkladu, přiřadí název MyRectangleRectangle, typ FrameworkElement.

<Rectangle Name="MyRectangle"
  Width="100"
  Height="100">

Rectangle myRectangle = new Rectangle();
myRectangle.Name = "MyRectangle";

// Create a name scope for the page.
NameScope.SetNameScope(this, new NameScope());

this.RegisterName(myRectangle.Name, myRectangle);

Jakmile má název, můžete animovat vlastnost tohoto prvku.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle"
  Storyboard.TargetProperty="Width"
  From="100" To="200" Duration="0:0:1" />

Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
Storyboard.SetTargetProperty(myDoubleAnimation,
    new PropertyPath(Rectangle.WidthProperty));

Freezable typy jsou třídy, které dědí z Freezable třídy. Freezable Příklady zahrnutí SolidColorBrush, RotateTransforma GradientStop.

Pokud chcete povolit cílení Freezable na animaci v XAML, použijte k přiřazení názvu direktivux:Name. V kódu použijete metodu RegisterName k registraci jejího názvu v elementu, pro který jste vytvořili NameScope.

Následující příklad přiřadí název objektu Freezable .

<SolidColorBrush x:Name="MySolidColorBrush" Color="Blue" />

SolidColorBrush mySolidColorBrush = new SolidColorBrush(Colors.Blue);
this.RegisterName("MySolidColorBrush", mySolidColorBrush);

Objekt pak může být cílem animace.

<ColorAnimation 
  Storyboard.TargetName="MySolidColorBrush"
  Storyboard.TargetProperty="Color"
  From="Blue" To="Red" Duration="0:0:1" />  

Storyboard.SetTargetName(myColorAnimation, "MySolidColorBrush");
Storyboard.SetTargetProperty(myColorAnimation,
    new PropertyPath(SolidColorBrush.ColorProperty));

Storyboard objekty používají obory názvů k překladu TargetName vlastnosti. Další informace o oborech názvů WPF naleznete v tématu WPF XAML Namescopes. TargetName Pokud je vlastnost vynechána, animace cílí na prvek, na kterém je definován, nebo v případě stylů stylový prvek.

Někdy není možné přiřadit název k objektu Freezable . Pokud Freezable je například deklarován jako prostředek nebo slouží k nastavení hodnoty vlastnosti ve stylu, nedá se mu dát název. Protože nemá název, nemůže být cílený přímo , ale může být cílený nepřímo. Následující části popisují, jak používat nepřímé cílení.

Nepřímé cílení

Freezable Někdy není možné cílit přímo animací, například když Freezable je deklarována jako prostředek nebo použita k nastavení hodnoty vlastnosti ve stylu. V těchto případech, i když ho nemůžete cílit přímo, můžete objekt animovat Freezable . Místo nastavení TargetName vlastnosti s názvem Freezable, dáváte mu název prvku, do kterého Freezable "patří". Například SolidColorBrush použitý k nastavení Fill prvku obdélníku patří do tohoto obdélníku. Pokud chcete animovat štětec, nastavili byste animaci TargetProperty s řetězem vlastností, které začínají vlastností elementu architektury nebo prvku obsahu architektury, který Freezable byl použit k nastavení a končí Freezable vlastností animace.

<ColorAnimation 
  Storyboard.TargetName="Rectangle01"
  Storyboard.TargetProperty="Fill.Color"
  From="Blue" To="AliceBlue" Duration="0:0:1" />

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {Rectangle.FillProperty, SolidColorBrush.ColorProperty};
string thePath = "(0).(1)";
PropertyPath myPropertyPath = new PropertyPath(thePath, propertyChain);
Storyboard.SetTargetProperty(myColorAnimation, myPropertyPath);

Všimněte si, že pokud je zablokovaný Freezable , vytvoří se klon a tento klon bude animovaný. Když k tomu dojde, vlastnost původního objektu HasAnimatedProperties se bude nadále vracet false, protože původní objekt není ve skutečnosti animovaný. Další informace o klonování naleznete v tématu Přehled zamrznutelných objektů.

Všimněte si také, že při použití nepřímého cílení na vlastnosti je možné cílit na objekty, které neexistují. Můžete například předpokládat, že Background určité tlačítko bylo nastaveno a SolidColorBrush pokusí se animovat jeho barvu, když se ve skutečnosti LinearGradientBrush použilo k nastavení pozadí tlačítka. V těchto případech není vyvolán žádná výjimka; Animace nemá viditelný efekt, protože LinearGradientBrush nereaguje na změny Color vlastnosti.

Následující části popisují syntaxi cílení nepřímých vlastností podrobněji.

Nepřímé cílení na vlastnost zamrznutí v XAML

Pokud chcete cílit na vlastnost zamrznutí v jazyce XAML, použijte následující syntaxi.

Syntaxe vlastností
ElementPropertyName.FreezablePropertyName

Kde

Následující kód ukazuje, jak animovat Color použitou SolidColorBrush k nastavení Fill obdélníkového prvku.

<Rectangle
  Name="Rectangle01"
  Height="100"
  Width="100"
  Fill="{StaticResource MySolidColorBrushResource}">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseEnter">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation 
            Storyboard.TargetName="Rectangle01"
            Storyboard.TargetProperty="Fill.Color"
            From="Blue" To="AliceBlue" Duration="0:0:1" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Někdy potřebujete cílit na zmrazení obsažené v kolekci nebo poli.

Pokud chcete cílit na zmrazení obsažené v kolekci, použijte následující syntaxi cesty.

Syntaxe cesty
ElementPropertyName.Children[CollectionIndex].FreezablePropertyNameName

Where CollectionIndex je index objektu v jeho poli nebo kolekci.

Předpokládejme například, že obdélník má TransformGroup prostředek použitý na jeho RenderTransform vlastnost a chcete animovat jednu z transformací, která obsahuje.

<TransformGroup x:Key="MyTransformGroupResource"
  x:Shared="False">
  <ScaleTransform />
  <RotateTransform />
</TransformGroup>

Následující kód ukazuje, jak animovat Angle vlastnost zobrazenou RotateTransform v předchozím příkladu.

<Rectangle
  Name="Rectangle02"
  Height="100"
  Width="100"
  Fill="Blue"
  RenderTransform="{StaticResource MyTransformGroupResource}">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseEnter">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Storyboard.TargetName="Rectangle02"
            Storyboard.TargetProperty="RenderTransform.Children[1].Angle"
            From="0" To="360" Duration="0:0:1" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Nepřímo cílí na vlastnost zamrznutí v kódu

V kódu vytvoříte PropertyPath objekt. Při vytváření , PropertyPathzadáte a PathPathParameters.

Chcete-li vytvořit PathParameters, vytvoříte pole typu DependencyProperty , který obsahuje seznam polí identifikátoru vlastnosti závislosti. První pole identifikátoru je určené pro vlastnost FrameworkElement nebo FrameworkContentElement pro Freezable nastavení. Pole dalšího Freezable identifikátoru představuje vlastnost cíle. Představte si ho jako řetězec vlastností, které spojují Freezable objekt FrameworkElement .

Následuje příklad řetězce vlastností závislostí, který cílí na ColorSolidColorBrush použitou k nastavení Fill obdélníkového prvku.

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {Rectangle.FillProperty, SolidColorBrush.ColorProperty};

Musíte také zadat .Path A Path je String , která říká Path , jak interpretovat jeho PathParameters. Používá následující syntaxi.

Syntaxe cesty k vlastnosti
(OwnerPropertyArrayIndex).(FreezablePropertyArrayIndex)

Kde

Následující příklad ukazuje Path , které by doprovázelo PathParameters definované v předchozím příkladu.

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {Rectangle.FillProperty, SolidColorBrush.ColorProperty};
string thePath = "(0).(1)";

Následující příklad kombinuje kód v předchozích příkladech k animaci ColorSolidColorBrush použitého k nastavení Fill obdélníkového prvku.


// Create a name scope for the page.
NameScope.SetNameScope(this, new NameScope());

Rectangle rectangle01 = new Rectangle();
rectangle01.Name = "Rectangle01";
this.RegisterName(rectangle01.Name, rectangle01);
rectangle01.Width = 100;
rectangle01.Height = 100;
rectangle01.Fill =
    (SolidColorBrush)this.Resources["MySolidColorBrushResource"];

ColorAnimation myColorAnimation = new ColorAnimation();
myColorAnimation.From = Colors.Blue;
myColorAnimation.To = Colors.AliceBlue;
myColorAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
Storyboard.SetTargetName(myColorAnimation, rectangle01.Name);

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {Rectangle.FillProperty, SolidColorBrush.ColorProperty};
string thePath = "(0).(1)";
PropertyPath myPropertyPath = new PropertyPath(thePath, propertyChain);
Storyboard.SetTargetProperty(myColorAnimation, myPropertyPath);

Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myColorAnimation);
BeginStoryboard myBeginStoryboard = new BeginStoryboard();
myBeginStoryboard.Storyboard = myStoryboard;
EventTrigger myMouseEnterTrigger = new EventTrigger();
myMouseEnterTrigger.RoutedEvent = Rectangle.MouseEnterEvent;
myMouseEnterTrigger.Actions.Add(myBeginStoryboard);
rectangle01.Triggers.Add(myMouseEnterTrigger);

Někdy potřebujete cílit na zmrazení obsažené v kolekci nebo poli. Předpokládejme například, že obdélník má TransformGroup prostředek použitý na jeho RenderTransform vlastnost a chcete animovat jednu z transformací, která obsahuje.

<TransformGroup x:Key="MyTransformGroupResource"
  x:Shared="False">
  <ScaleTransform />
  <RotateTransform />
</TransformGroup>

Pokud chcete cílit na kolekci obsaženou Freezable , použijte následující syntaxi cesty.

Syntaxe cesty
(OwnerPropertyArrayIndex CollectionChildrenPropertyArrayIndex CollectionIndex].([)FreezablePropertyArrayIndex).()

Where CollectionIndex je index objektu v jeho poli nebo kolekci.

Chcete-li cílit na Angle vlastnost RotateTransform, druhá transformace v TransformGroup, byste použili následující Path a PathParameters.

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {
            Rectangle.RenderTransformProperty,
            TransformGroup.ChildrenProperty,
            RotateTransform.AngleProperty
        };
string thePath = "(0).(1)[1].(2)";
PropertyPath myPropertyPath = new PropertyPath(thePath, propertyChain);
Storyboard.SetTargetProperty(myDoubleAnimation, myPropertyPath);

Následující příklad ukazuje kompletní kód pro animaci AngleRotateTransform obsaženého v souboru TransformGroup.

Rectangle rectangle02 = new Rectangle();
rectangle02.Name = "Rectangle02";
this.RegisterName(rectangle02.Name, rectangle02);
rectangle02.Width = 100;
rectangle02.Height = 100;
rectangle02.Fill = Brushes.Blue;
rectangle02.RenderTransform =
    (TransformGroup)this.Resources["MyTransformGroupResource"];

DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 0;
myDoubleAnimation.To = 360;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
Storyboard.SetTargetName(myDoubleAnimation, rectangle02.Name);

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {
            Rectangle.RenderTransformProperty,
            TransformGroup.ChildrenProperty,
            RotateTransform.AngleProperty
        };
string thePath = "(0).(1)[1].(2)";
PropertyPath myPropertyPath = new PropertyPath(thePath, propertyChain);
Storyboard.SetTargetProperty(myDoubleAnimation, myPropertyPath);

Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
BeginStoryboard myBeginStoryboard = new BeginStoryboard();
myBeginStoryboard.Storyboard = myStoryboard;
EventTrigger myMouseEnterTrigger = new EventTrigger();
myMouseEnterTrigger.RoutedEvent = Rectangle.MouseEnterEvent;
myMouseEnterTrigger.Actions.Add(myBeginStoryboard);
rectangle02.Triggers.Add(myMouseEnterTrigger);

Nepřímo zacílení s možností zmrazení jako výchozího bodu

Předchozí části popisují, jak nepřímo cílit Freezable na to, že začnete řetězcem FrameworkElement nebo FrameworkContentElement vytváříte řetězec vlastností k Freezable dílčí vlastnosti. Můžete také použít Freezable jako výchozí bod a nepřímo cílit na jednu z jejích Freezable dílčích vlastností. Jedno další omezení platí pro použití Freezable jako výchozího bodu pro nepřímé cílení: počáteční Freezable a každé Freezable mezi ním a nepřímo cílená dílčí vlastnost nesmí být zmrazena.

Interaktivní řízení scénáře v XAML

Ke spuštění scénáře v xaml (Extensible Application Markup Language) použijete akci triggeru BeginStoryboard . BeginStoryboard distribuuje animace objektům a vlastnostem, které animují, a spustí scénář. (Podrobnosti o tomto procesu najdete v tématu Přehled systému animace a časování.) Pokud dáte BeginStoryboard název zadáním jeho Name vlastnosti, nastavíte ho jako řídicí scénář. Po spuštění pak můžete scénáře interaktivně ovládat. Následuje seznam řídicích akcí scénáře, které používáte s triggery událostí k řízení scénáře.

V následujícím příkladu se řídicí akce scénáře používají k interaktivnímu řízení scénáře.

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.SDK.Animation.ControllableStoryboardExample"
  WindowTitle="Fading Rectangle Example">
  <StackPanel Margin="10">

    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
    </Rectangle>

    <Button Name="BeginButton">Begin</Button>
    <Button Name="PauseButton">Pause</Button>
    <Button Name="ResumeButton">Resume</Button>
    <Button Name="SkipToFillButton">Skip To Fill</Button>
    <Button Name="StopButton">Stop</Button>

    <StackPanel.Triggers>
      <EventTrigger RoutedEvent="Button.Click" SourceName="BeginButton">
        <BeginStoryboard Name="MyBeginStoryboard">
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="MyRectangle" 
              Storyboard.TargetProperty="(Rectangle.Opacity)"
              From="1.0" To="0.0" Duration="0:0:5" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="PauseButton">
        <PauseStoryboard BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="ResumeButton">
        <ResumeStoryboard BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="SkipToFillButton">
        <SkipStoryboardToFill BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="StopButton">
        <StopStoryboard BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
    </StackPanel.Triggers>
  </StackPanel>
</Page>

Interaktivní řízení scénáře pomocí kódu

Předchozí příklady ukázaly, jak animovat pomocí akcí triggeru. V kódu můžete také řídit scénář pomocí interaktivních metod Storyboard třídy. Storyboard Aby byl v kódu interaktivní, musíte použít příslušné přetížení metody scénáře Begin a určittrue, aby bylo možné jej ovládat. Další informace najdete na Begin(FrameworkElement, Boolean) stránce.

Následující seznam ukazuje metody, které lze použít k manipulaci s Storyboard po spuštění:

Výhodou použití těchto metod je, že nemusíte vytvářet Trigger ani TriggerAction objekty. Potřebujete jenom odkaz na ovládací prvek Storyboard , se kterým chcete manipulovat.

Poznámka:

Všechny interaktivní akce provedené na , Clocka proto také na Storyboard dojde na další klíště časovací modul, který se stane krátce před dalším vykreslení. Pokud například použijete metodu Seek pro přechod na jiný bod animace, hodnota vlastnosti se okamžitě nezmění, spíše se hodnota změní na další záškrtu časování modulu.

Následující příklad ukazuje, jak použít a řídit animace pomocí interaktivních metod Storyboard třídy.

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 ControllableStoryboardExample : Page
    {
        private Storyboard myStoryboard;

        public ControllableStoryboardExample()
        {

            // Create a name scope for the page.

            NameScope.SetNameScope(this, new NameScope());

            this.WindowTitle = "Controllable Storyboard Example";
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(10);

            // Create a rectangle.
            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";

            // Assign the rectangle a name by
            // registering it with the page, so that
            // it can be targeted by storyboard
            // animations.
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;
            myStackPanel.Children.Add(myRectangle);

            //
            // Create an animation and a storyboard to animate the
            // rectangle.
            //
            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 1.0;
            myDoubleAnimation.To = 0.0;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(5000));
            myDoubleAnimation.AutoReverse = true;

            // Create the storyboard.
            myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

            //
            // Create some buttons to control the storyboard
            // and a panel to contain them.
            //
            StackPanel buttonPanel = new StackPanel();
            buttonPanel.Orientation = Orientation.Horizontal;
            Button beginButton = new Button();
            beginButton.Content = "Begin";
            beginButton.Click += new RoutedEventHandler(beginButton_Clicked);
            buttonPanel.Children.Add(beginButton);
            Button pauseButton = new Button();
            pauseButton.Content = "Pause";
            pauseButton.Click += new RoutedEventHandler(pauseButton_Clicked);
            buttonPanel.Children.Add(pauseButton);
            Button resumeButton = new Button();
            resumeButton.Content = "Resume";
            resumeButton.Click += new RoutedEventHandler(resumeButton_Clicked);
            buttonPanel.Children.Add(resumeButton);
            Button skipToFillButton = new Button();
            skipToFillButton.Content = "Skip to Fill";
            skipToFillButton.Click += new RoutedEventHandler(skipToFillButton_Clicked);
            buttonPanel.Children.Add(skipToFillButton);
            Button setSpeedRatioButton = new Button();
            setSpeedRatioButton.Content = "Triple Speed";
            setSpeedRatioButton.Click += new RoutedEventHandler(setSpeedRatioButton_Clicked);
            buttonPanel.Children.Add(setSpeedRatioButton);
            Button stopButton = new Button();
            stopButton.Content = "Stop";
            stopButton.Click += new RoutedEventHandler(stopButton_Clicked);
            buttonPanel.Children.Add(stopButton);
            myStackPanel.Children.Add(buttonPanel);
            this.Content = myStackPanel;
        }

        // Begins the storyboard.
        private void beginButton_Clicked(object sender, RoutedEventArgs args)
        {
            // Specifying "true" as the second Begin parameter
            // makes this storyboard controllable.
            myStoryboard.Begin(this, true);
        }

        // Pauses the storyboard.
        private void pauseButton_Clicked(object sender, RoutedEventArgs args)
        {
            myStoryboard.Pause(this);
        }

        // Resumes the storyboard.
        private void resumeButton_Clicked(object sender, RoutedEventArgs args)
        {
            myStoryboard.Resume(this);
        }

        // Advances the storyboard to its fill period.
        private void skipToFillButton_Clicked(object sender, RoutedEventArgs args)
        {
            myStoryboard.SkipToFill(this);
        }

        // Updates the storyboard's speed.
        private void setSpeedRatioButton_Clicked(object sender, RoutedEventArgs args)
        {
            // Makes the storyboard progress three times as fast as normal.
            myStoryboard.SetSpeedRatio(this, 3);
        }

        // Stops the storyboard.
        private void stopButton_Clicked(object sender, RoutedEventArgs args)
        {
            myStoryboard.Stop(this);
        }
    }
}


Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Shapes
Imports System.Windows.Media
Imports System.Windows.Media.Animation

Namespace SDKSample

    Public Class ControllableStoryboardExample
        Inherits Page
        Private myStoryboard As Storyboard

        Public Sub New()

            ' Create a name scope for the page.

            NameScope.SetNameScope(Me, New NameScope())

            Me.WindowTitle = "Controllable Storyboard Example"
            Dim myStackPanel As New StackPanel()
            myStackPanel.Margin = New Thickness(10)

            ' Create a rectangle.
            Dim myRectangle As New Rectangle()
            myRectangle.Name = "myRectangle"

            ' Assign the rectangle a name by 
            ' registering it with the page, so that
            ' it can be targeted by storyboard
            ' animations.
            Me.RegisterName(myRectangle.Name, myRectangle)
            myRectangle.Width = 100
            myRectangle.Height = 100
            myRectangle.Fill = Brushes.Blue
            myStackPanel.Children.Add(myRectangle)

            '
            ' Create an animation and a storyboard to animate the
            ' rectangle.
            '
            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 1.0
            myDoubleAnimation.To = 0.0
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromMilliseconds(5000))
            myDoubleAnimation.AutoReverse = True

            ' Create the storyboard.
            myStoryboard = New Storyboard()
            myStoryboard.Children.Add(myDoubleAnimation)
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
            Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

            '
            ' Create some buttons to control the storyboard
            ' and a panel to contain them.
            '
            Dim buttonPanel As New StackPanel()
            buttonPanel.Orientation = Orientation.Horizontal
            Dim beginButton As New Button()
            beginButton.Content = "Begin"
            AddHandler beginButton.Click, AddressOf beginButton_Clicked
            buttonPanel.Children.Add(beginButton)
            Dim pauseButton As New Button()
            pauseButton.Content = "Pause"
            AddHandler pauseButton.Click, AddressOf pauseButton_Clicked
            buttonPanel.Children.Add(pauseButton)
            Dim resumeButton As New Button()
            resumeButton.Content = "Resume"
            AddHandler resumeButton.Click, AddressOf resumeButton_Clicked
            buttonPanel.Children.Add(resumeButton)
            Dim skipToFillButton As New Button()
            skipToFillButton.Content = "Skip to Fill"
            AddHandler skipToFillButton.Click, AddressOf skipToFillButton_Clicked
            buttonPanel.Children.Add(skipToFillButton)
            Dim setSpeedRatioButton As New Button()
            setSpeedRatioButton.Content = "Triple Speed"
            AddHandler setSpeedRatioButton.Click, AddressOf setSpeedRatioButton_Clicked
            buttonPanel.Children.Add(setSpeedRatioButton)
            Dim stopButton As New Button()
            stopButton.Content = "Stop"
            AddHandler stopButton.Click, AddressOf stopButton_Clicked
            buttonPanel.Children.Add(stopButton)
            myStackPanel.Children.Add(buttonPanel)
            Me.Content = myStackPanel


        End Sub

        ' Begins the storyboard.
        Private Sub beginButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            ' Specifying "true" as the second Begin parameter
            ' makes this storyboard controllable.
            myStoryboard.Begin(Me, True)

        End Sub

        ' Pauses the storyboard.
        Private Sub pauseButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            myStoryboard.Pause(Me)

        End Sub

        ' Resumes the storyboard.
        Private Sub resumeButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            myStoryboard.Resume(Me)

        End Sub

        ' Advances the storyboard to its fill period.
        Private Sub skipToFillButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            myStoryboard.SkipToFill(Me)

        End Sub

        ' Updates the storyboard's speed.
        Private Sub setSpeedRatioButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            ' Makes the storyboard progress three times as fast as normal.
            myStoryboard.SetSpeedRatio(Me, 3)

        End Sub

        ' Stops the storyboard.
        Private Sub stopButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            myStoryboard.Stop(Me)

        End Sub

    End Class

End Namespace

Animace ve stylu

Objekty můžete použít Storyboard k definování animací v objektu Style. Animace s in a in a StoryboardStyle je podobná použití jinde Storyboard , s následujícími třemi výjimkami:

  • Nezadáte znak ; TargetNameStoryboard vždy cílí na prvek, na který Style se použije. Pokud chcete cílit Freezable na objekty, musíte použít nepřímé cílení. Další informace o nepřímém cílení najdete v části Nepřímé cílení .

  • Nemůžete zadat SourceName pro určitou EventTrigger položku nebo hodnotu Trigger.

  • K nastavení Storyboard nebo hodnotám vlastností animace nemůžete použít dynamické odkazy na prostředky ani výrazy datové vazby. Je to proto, že všechno uvnitř Style musí být bezpečné pro přístup z více vláken a systém časování musí FreezeStoryboard objekty, aby byly bezpečné pro přístup z více vláken. A Storyboard nelze zablokovat, pokud její podřízené časové osy obsahují dynamické odkazy na prostředky nebo výrazy datové vazby. Další informace o zmrazení a dalších Freezable funkcích naleznete v přehledu zmrazených objektů.

  • V XAML nemůžete deklarovat obslužné rutiny událostí pro Storyboard animační události.

Příklad znázorňující, jak definovat scénář ve stylu, najdete v příkladu Animace ve stylu .

Animace v objektu ControlTemplate

Objekty můžete použít Storyboard k definování animací v objektu ControlTemplate. Animace s in a in a StoryboardControlTemplate je podobná použití Storyboard jinde, s následujícími dvěma výjimkami:

  • Může TargetName odkazovat pouze na podřízené objekty ControlTemplate. Pokud TargetName není zadán, animace cílí na prvek, na který ControlTemplate se použije.

  • Objekty nebo objekty Trigger mohou odkazovat pouze na podřízené objekty ControlTemplate.EventTriggerSourceName

  • K nastavení Storyboard nebo hodnotám vlastností animace nemůžete použít dynamické odkazy na prostředky ani výrazy datové vazby. Je to proto, že všechno uvnitř ControlTemplate musí být bezpečné pro přístup z více vláken a systém časování musí FreezeStoryboard objekty, aby byly bezpečné pro přístup z více vláken. A Storyboard nelze zablokovat, pokud její podřízené časové osy obsahují dynamické odkazy na prostředky nebo výrazy datové vazby. Další informace o zmrazení a dalších Freezable funkcích naleznete v přehledu zmrazených objektů.

  • V XAML nemůžete deklarovat obslužné rutiny událostí pro Storyboard animační události.

Příklad znázorňující, jak definovat scénář v objektu ControlTemplate, podívejte se na animaci v příkladu ControlTemplate .

Animace při změně hodnoty vlastnosti

V šablonách stylů a ovládacích prvků můžete objekty Trigger použít k zahájení scénáře při změně vlastnosti. Příklady najdete v tématu Aktivace animace Při změně hodnoty vlastnosti a animace v ControlTemplate.

Animace použité objekty vlastností Trigger se chovají složitějším způsobem než EventTrigger animace nebo animace, které začaly používat Storyboard metody. "Předání" pomocí animací definovaných jinými Trigger objekty, ale vytvoří EventTrigger animace a animace aktivované metodou.

Viz také