#4 - Usare lo Storyboard come timer

di Marco Leoncini, in Silverlight 1.0, 21 febbraio 2008

Archiviato in: Silverlight, XAML

Lo Storyboard è un tassello fondamentale dell'architettura di Silverlight, l'uso che comunemente siamo abituati a farne è inerente alla definizione di un'animazione, ma può essere agevolmente usato come timer al posto del classico setinterval.

Creiamo una nuova scena inserendo al centro un TextBlock, impostiamo la proprietà Text a 5.

<Canvas xmlns="http://schemas.microsoft.com/client/2007 " 
                                   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
                                   Width="560" Height="560" 
                                   Background="#FFFF0000" 
                                   x:Name="Page"> 
 <TextBlock    Canvas.Left="221" 
         Canvas.Top="135" 
         TextWrapping="Wrap" 
         Foreground="#FFFFFFFF" 
         FontSize="140" 
             FontWeight="Bold" 
        x:Name="MyCountdownTextBlock" 
        Text="5"> 
</TextBlock> 
</Canvas>

Proseguiamo aggiungendo tra le risorse del Canvas uno Storyboard, creiamo un event handler per l'evento Completed di quest'ultimo e uno per l'evento Loaded del TextBlox.

L'evento Completed è sollevato quando lo Storyboard e tutte le animazioni figlie sono ormai concluse e inattive.
Da tenere a ben presente che impostando RepeatBehavior su Forever l'evento Completed non verrà mai sollevato.

<Canvas.Resources> 
    <Storyboard x:Name="CountdownStoryboard" Duration="00:00:01" Completed="StoryBoardStep" /> 
</Canvas.Resources> 
<TextBlock Loaded="StartTimer"></TextBlock>

Nella funzione StartTimer eseguiamo lo Storyboard con questo codice:

function StartTimer(sender) 
{ 
    sender.findName("CountdownStoryboard").Begin(); 
}

Mentre nella funzione StoryBoardStep eseguiamo dei semplici calcoli per realizzare un conto alla rovescia.

function StoryBoardStep(sender, eventArgs) 
{ 
    var _textBlock = sender.findName("MyCountdownTextBlock"); 
    var _number = Number(_textBlock.Text); 
     
    if(_number != NaN) 
    { 
        if(_number > 1) 
        { 
            sender.findName("CountdownStoryboard").Begin(); 
            _number --; 
            _textBlock.Text = _number.toString(); 
        } 
        else 
        { 
            _textBlock.Text = "GO!!!"; 
        } 
    }     
}

Perchè usare lo Storyboard al posto di setinterval? Perche può essere recuperato come qualsiasi altro oggetto, possiamo stopparlo, metterlo in pausa o ripeterlo tutte le volte che vogliamo come nel nostro esempio.

Nota: Questo script contiene un allegato.