A InfoWiki wikiből

A lap 2009. január 1., 17:20-kori változata

Forgatókönyv

Windows Presentation Foundation

Windows Forms Reloaded

Hernyák Zoltán

Deklaratív animációk és a forgatókönyv

Animációk létrehozása utáni probléma, hogyan indítsuk el őket. A kódban egyszerű, a 'BeginAnimation()' indítja el az animációt. De XAML leírásban nem olyan triviális feladat megadni az animáció pontos indulásának idejét.

• Forgatókönyv (storyboard): ez gyakorlatilag a XAML-beli BeginAnimation()
• Trigger, amely reagálhat egy property értékének módosulására, vagy valamely esemény (event) bekövetkeztére.

Forgatókönyv

Egy kiterjesztett időszalag (timeline), amelyben összefoghatunk több animációt. Ennek segítségével leállíthatjuk, folytathatjuk, sőt, adott időpillanatra állíthatjuk (pozícionálás) az animációinkat.

De ami a legfontosabb része a forgatókönyvnek, az két property (TargetProperty és TargetName):

<Storyboard TargetName="cmdGrow" TargetProperty="Width">
  <DoubleAnimation From="160" To="300" Duration="0:0:5"></DoubleAnimation>
</Storyboard>

vagy

<Storyboard>
<DoubleAnimation
 Storyboard.TargetName="cmdGrow" Storyboard.TargetProperty="Width"
  From="160" To="300" Duration="0:0:5"></DoubleAnimation>
</Storyboard>

Ez utóbbi szintaxis előnye, hogy több animációt is befoglalhatunk így egyetlen forgatókönyvbe, és minden animáció más-más property-t tud animálni.

Trigger

A triggerek olyan eseménykezelők, amelyekhez pl. animációk indulását lehet kötni. Négy helyen definiálhatunk triggereket:

• stílusokban (Styles.Triggers gyűjtemény)
• adatsablonokban (DataTemaplate.Triggers gyűjtemény)
• vezérlő sablonokban (ControlTemplate.Triggers gyűjtemény)
• elemben (FrameWorkElement.Triggers gyűjtemény)

Az alábbi példa a nyomógomb Triggers gyűjteményét használja hogy tevékenységet hajtsunk végre. Az esemény, amihez kötjük a végrehajtást a 'Click' esemény. Amit végre kell hajtani az a 'BeginStoryboard', vagyis animáció indítása. Az animáció leírását helyben láthatjuk:

<Button Name="cmdGrow" ...>
 <Button.Triggers>
  <EventTrigger RoutedEvent="Button.Click">
   <EventTrigger.Actions>
    <BeginStoryboard>
     <Storyboard>
      <DoubleAnimation Storyboard.TargetProperty="Width" To="300" Duration="0:0:5"></DoubleAnimation>
     </Storyboard>
    </BeginStoryboard>
   </EventTrigger.Actions>
  </EventTrigger>
 </Button.Triggers>
 <Button.Content>Click and Make Me Grow</Button.Content>
 </Button>