Ovo je 11. udžbenik kao dio serije Windows Phone tutorial. U ovom zadatku izradit ćete ploču scenarija u izrazu Blend da biste animirali tekst u banneru svaki put kad pritisnete gumb.
1. Otvorite aktivni radni prostor u radnom području animacije. U Prozor pokažite na izbornik Radni prostori i odaberite Animacija, Imajte na umu da ovo preraspodjeljuje prozore kako bi se povećala dostupna količina prostora za uređivanje vremenske trake.
2. Ako je potrebno, izađite iz područja za uređivanje predloška za kontrolu gumba. Da biste to učinili, kliknite gumb Obujam gumb pored FancyButton (predložak gumba) element u sustavu Predmeti i vremenska linija ploča za prikaz stabla elemenata stranice.
3. Sada, u Predmeti i vremenska linija panel, kliknite Novi stvoriti ploču scenarija. Ovo je gumb označen znakom + i nalazi se u gornjem desnom kutu ploče.
4. U Stvorite resurse za Storyboard dijalog, postavite Ime do AnimateBanner i kliknite u redu.
5. Da biste stvorili ključne okvire u animaciji, kliknite BannerTextBlock element u elementu stabla Predmeti i vremenska linija kako biste je odabrali.
6. Sada kliknite i povucite trenutačnu poziciju za reprodukciju na vremenskoj skali na offset 1 drugi.
7. Zatim se prebacite na Nekretnine proširite Transformirati i odaberite ljestvica transformirati. x vrijednost imovine jest -1, Ova transformacija odražava element duž svoje horizontalne osi.
9. Sada promijenite glavu za reprodukciju na vremenskoj skali na offset 2 sekundi.
10. Prijeđite na Nekretnine proširite Transformirati i odaberite ljestvica transformirati. Promjena vrijednosti x imovinu natrag na 1 za vraćanje elementa u prvobitno stanje. Imajte na umu da se drugi ključni okvir pojavio na vremenskoj ploči scenarija zbog ove promjene.
11. Za testiranje animacije u dizajneru, morate dodati neki tekst u natpis. Prvo kliknite crveni krug s lijeve strane gumba AnimateBanner ime scenarija u gornjem lijevom kutu ploče kako biste privremeno isključili snimanje - ne želite da dodani tekst postane dio animacije.
12. Sada kliknite desnom tipkom miša BannerTextBlock element na dizajnu površine i odaberite Uređivanje teksta, Unesite prikladan tekst za banner i pritisnite UNESI.
13. Za testiranje animacije pritisnite igra iznad vremenske trake. Primijetite kako se tekst na banneru zakreće vodoravno oko njegove središnje osi i kako je kretanje ujednačeno tijekom animacijskog ciklusa.
14. Odaberite prvi okvir ključa klikom na ikonu sive kružnice na vremenskoj traci. Napominjemo da kada odaberete okvir, prikaz dizajna ažurira se kako bi se prikazao stanje elemenata korisničkog sučelja kako se pojavljuju u tom okviru, u tom slučaju tekst bannera pojavljuje se zrcaljeno. Sada, u Nekretnine panel, ispod Olakšanje kategorija, osigurajte to EasingFunction je odabrano, proširite padajući popis kako biste prikazali popis dostupnih funkcija, a zatim odaberite Cubic Out funkcija. Ova posebna funkcija ublažavanja uzrokuje prijelaz da smanji brzinu približavanja ključnom okviru.
15. Ponovite postupak u prethodnom koraku kako biste konfigurirali funkciju ublažavanja za drugi okvir ključa. Ovaj put izaberite Cubic InOut funkcija da prijelaz počne polagano, postupno ubrzava i konačno smanjuje brzinu približavajući se završnom okviru.
16. Da biste testirali učinak funkcija olakšavanja na animaciji, pritisnite igra iznad vremenske trake. Zabilježite kako banner počinje rotaciju na visokoj stopi, a zatim se usporava dok se tekst pojavljuje zrcaljeno, zatim ponovno pokupi brzinu i konačno se usporava da se vrati u prvobitni položaj.
17. Sada kada je dizajn korisničkog sučelja završen, sljedeći je korak kopiranje ažuriranog XAML natrag u glavni projekt.
- Prvo, u izrazu mješavina kliknite karticu XAML na desnoj strani prozora ili u Pogled izbornik
- Ukazati na Prikaz aktivnog dokumenta i odaberite XAML ViewTo vas dovodi do XAML prikaza MainPage.xaml dokument.
- Zatim odaberite i kopirajte djecu korijena UserControl element u međuspremnik. To uključuje i UserControl.Resources odjeljak i rešetka element nazvanLayoutRoot ali ne i UserControl sam element.
18. Sada, u Visual Studio, otvorite MainPage.xaml dokument u XAML prikazu i zamijenite cijeli sadržaj djeteta korijena navigacija: PhoneApplicationPage element s tekstom u međuspremniku osiguravajući da sam korijenni element ostaje nepromijenjen.
19. Kao posljednji korak, u MainPage.xaml pronađite datoteku UserControl.Resources započeti i završi oznake i zamijeni ih navigacija: PhoneApplicationPage.Resources oznake.
20. Pritisnite CTRL + S za spremanje MainPage.xaml datoteka.
21. Do sada ste stvorili animacijsku ploču scenarija za tekst bannera, ali jednostavno postoji kao neiskorišteni resurs u projektu.Da biste igrali animaciju, trebate pokrenuti ploču scenarija kao odgovor na događaj, u ovom slučaju, kadgod Kliknite mi pritisnutom tipku. Otvaranje Klik rukovatelj događaj za ovaj gumb:
- Idite na Dizajn pogled na MainPage.xaml datoteka
- Dvaput kliknite gumb na dizajnu površine da biste otvorili datoteku iza koda
- Postavite pokazivač na rukovatelj događaja
22. Da biste ažurirali upravitelj događaja za reprodukciju animacije, umetnite sljedeći isječak koda u "podebljani" prostor neposredno prije završnog zagrada.
private void ClickMeButton_Click(object sender, RoutedEventArgs e) { BannerTextBlock.Text = MessageTextBox.Text; MessageTextBox.Text = String.Empty; this.AnimateBanner.Begin(); }
