Trükkimise efekt tekstikastile

ENETA foorumis paluti abi järgmise ülesande lahendamiseks:

Kuidas lisada tekstile Silverlight rakenduses selline efekt, et kogu tekst ei ilmu mitte kohe ekraanile, vaid tähthaaval nagu trükimasinal trükkides.

 

See on tegelikult jummala lihtne. Ainus eeldus, mis ma teen on see, et MainPage.xaml failis eksisteerib TextBlock, mille nimi on myTextBlock.

XAML

Selle lisamiseks tuleb avada MainPage.xaml, teha topeltklõps TextBlock nupu peal ning siis see töölaual õige koha peale lohistada.

image thumb Trükkimise efekt tekstikastile

Nime saab muuta atribuutide paneelis:

image thumb1 Trükkimise efekt tekstikastile

Lõpuks peab objektide puu välja nägema selline.

image thumb2 Trükkimise efekt tekstikastile

Kood

Siis järgmisena avame faili MainPage.xaml.cs.

Kõigepealt on meil vaja muutujat (myText), mis teab koguteksti, mis meil ekraanile vaja trükkida:

image thumb3 Trükkimise efekt tekstikastile

Järgmisena on meil vaja timerit, mis otsustab kui kiiresti iga järgmine täht ekraanile jõudma peaks. Siinkohal kasutame meie timerina animatsiooni (Storyboard t) objekti.

image thumb4 Trükkimise efekt tekstikastile Eelmisel pildil loome kõigepealt animatsiooni t, seame tema kestvuseks 0.2 sekundit. Lisame sündmuse, et iga kord, kui animatsioon läbi saab (iga 0.2 sekundi järel), kutsutakse välja meetod nimega animationCompleted (nime võib ise valida). Ja lõpuks paneme animatsiooni/timeri käima – t.Begin().

Teksti trükkimine

 

image thumb5 Trükkimise efekt tekstikastile 

Kuigi pildil on päris kenasti kommenteeritud, mis toimub selgitan lisaks loogikat. Kõigepealt me kontrollime, kas meil on veel tähti, mis on ekraanile trükkimata (myText.Length > 0). Kui on siis me kõigepealt eemaldame ekraanil nähtavast tekstikastist “_”, mille ma lisasin selleks, et oleks mõnusasti näha, et trükkimine on käimas. Järgmisena ma võtan myText teksti kõige esimese tähe ning lisan selle ekraanile koos uue alamkriipsuga ja siis alustan uuesti meie timerit ning kõik algab algusest.

Kogu MainPage.xaml.cs faili sisu on näha siin: http://dl.dropbox.com/u/3219952/ENETA/Typer/Typer/MainPage.xaml.cs

Loodan, et oli abi.

Have fun :)


1 kommentaar:

  1. Kahjuks see kood mul ei tööta, kuna viskab animationCompleted meetodis veateate Object reference not set to an instance ehk väidab, et objekt Storyboard pole initsialiseeritud

Võta sõna