Hõbevalge nagu Silverlight :)

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.

Nime saab muuta atribuutide paneelis:

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

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:

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.

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

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

Üks asi, mida ma pidevalt dokumentatsioonist järgi vaatan on animatsioonide programne loomine, no ma ei tea, igakord on mingi näpukas sees.

Seega siin on kood lihtsa animatsiooni loomiseks:

private void Rectangle_MouseEnter(object sender, MouseEventArgs e) {

Rectangle animatedRect = sender as Rectangle;
            

Storyboard storyboard = new Storyboard();

DoubleAnimation widthAnimation = new DoubleAnimation();

DoubleAnimation heightAnimation = new DoubleAnimation();

// kaua animeerime

Duration duration = new Duration(TimeSpan.FromSeconds(1));

storyboard.Duration = duration;

widthAnimation.Duration = duration;

heightAnimation.Duration = duration;

// keda me animeerime

Storyboard.SetTarget(widthAnimation, animatedRect);

Storyboard.SetTarget(heightAnimation, animatedRect);

// kelle mida me animeerime

Storyboard.SetTargetProperty(widthAnimation, new PropertyPath("(Width)"));

Storyboard.SetTargetProperty(heightAnimation, new PropertyPath("(Height)"));

// kuidas animeerime

widthAnimation.To = animatedRect.ActualWidth * 2;

heightAnimation.To = animatedRect.ActualHeight * 2;

// animatsioonid ressursside sekka
storyboard.Children.Add(widthAnimation);

storyboard.Children.Add(heightAnimation);
LayoutRoot.Resources.Add("unique_id", storyboard);

// saagu valgus
storyboard.Begin();

}

Sama asi dokumentatsioonis