Usare lo Storyboard come timer
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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
