Usare lo Storyboard come timer

di Marco Leoncini, in Silverlight 1.0,

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.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Nessuna risorsa collegata

I più letti di oggi