See on 11. õppetükk Windows Phone tutoriali seeria osana. Selles ülesandes loote Expression Blend'is graafikaplaadi, et aktiveerida bänneri teksti iga nupu vajutamisel.
1. Avage aktiivse tööruumi animatsioon tööruumi. Aastal Aken menüü, suunake Töökohad ja vali Animatsioon. Pange tähele, et see muudab aknad ümber, et maksimeerida ajaskaala muutmiseks kasutatavat ruumi.
2. Vajadusel väljuge nupu juhtmalli redigeerimisalalt. Selleks klõpsake nupul Ulatus nuppu kõrval FancyButton (nupu mall) elemendi sees Objektid ja ajajoon paneeli, et kuvada lehe elemendipuu.
3. Nüüd, aastal Objektid ja ajajoon paneel, klõpsake Uus luua storyboard. See on nupp, mis on märgitud + märkiga ja asub paneeli paremas ülanurgas.
4. In Looge kujutlusvõimalusi dialoogis, määrake Nimi et AnimateBanner ja klõpsake Okei.
5. Animeeritud võtmeraamide loomiseks klõpsake nuppu BannerTextBlock element elemendi puu Objektid ja ajajoon paneeli selle valimiseks.
6. Nüüd klikkige ja lohistage ajaskaala esitusnuppu praeguse positsiooni vahele 1 teine
7. Seejärel lülitage sisse Omadused paneeli laiendage Muundama kategooria ja valige see Skaala muuda. X vara väärtus on -1. See teisend peegeldab elementi piki selle horisontaaltelge.
9. Nüüd muutke ajaskaala esituspea asendisse 2 sekundit.
10. Lülitage sisse Omadused paneeli laiendage Muundama kategooria ja valige see Skaala muuda. Muuda väärtust X vara tagasi 1 et taastada element algsesse olekusse. Pange tähele, et selle muudatuse tõttu ilmnes ajaloolises plaanis teine võtmeraam.
11. Disaineri animatsiooni katsetamiseks peate lisama bännerile mõne teksti. Kõigepealt klõpsake vasakus servas punast ringi AnimateBanner paneeli ülemises vasakus nurgas paneeli nimi, et vältida ajutiselt salvestamist - te ei soovi, et lisatud tekst muutuks animatsiooni osaks.
12. Nüüd paremklõpsake seda BannerTextBlock element projekteerija pinnal ja valige Muuda teksti. Sisestage bännerile sobiv tekst ja vajutage SISENEMA.
13. Animatsiooni testimiseks vajutage nuppu Mängi nuppu ajaskaala kohal. Pange tähele, kuidas reklaami tekst pöörleb horisontaalselt selle keskteljel ja kuidas liikumine on kogu animatsioonitsükli jooksul ühtlane.
14. Valige esimene võtmeraam, klõpsates ajaskaali hallil ringi ikoonil. Pange tähele, et kui valite raami, värskendatakse disainerivaade, et näidata kasutajaliidese elementide olekut, kui need kuvatakse selles raamis, sel juhul kuvatakse bänneri tekst peegelpildis. Nüüd, aastal Omadused paneeli all Kergendamine kategooria tagama, et EasingFunction on valitud, laiendage rippmenüüd olemasolevate funktsioonide loendi kuvamiseks ja seejärel valige Cubic Out funktsioon. See konkreetne leevendamisfunktsioon põhjustab ülemineku kiiruse vähendamist, kui see läheneb võtmekaadrile.
15. Korrake eelmise etapi protseduuri, et konfigureerida teise klahvireasi hõlbustusfunktsiooni. Seekord valida Kuubiline InOut funktsioon, et muuta üleminek alguse aeglase kiirusega, järk-järgult kiirendada ja lõpuks vähendada kiirust, kui see jõuab lõppsuunas.
16. Animatsiooni funktsiooni leevendamise efekti testimiseks vajutage klahvi Mängi Ajakoha kohal. Märkige, kuidas bänner alustab oma pöörlemist suurel määral, seejärel aeglustab see, kui tekst paistab, peegeldub see siis taas kiirus ja lõpuks aeglustub uuesti, et naasta algsele positsioonile.
17. Nüüd, kui kasutajaliidese disain on lõpule viidud, on järgmine samm värskendatud XAMLi kopeerimine põhiprojekti juurde.
- Esmalt klõpsake väljundsuhtes XAML-i vahekaarti akna paremas servas või aknas Vaade menüü
- Pöörake tähelepanu Aktiivne dokumendivaade ja vali XAML vaadeSee viib teid XAML-i vaatele MainPage.xaml dokument.
- Seejärel valige ja kopeeri juurte lapsed UserControl lõikepuhvrisse. See hõlmab ka UserControl.Resources jaotis ja Võrk element nimegaLayoutRoot kuid mitte UserControl element ise.
18. Nüüd avage Visual Studio'i MainPage.xaml dokumenteerige XAML-i vaates ja asendage juuriku kogu lapse sisu navigation: PhoneApplicationPage lõikepuhvris olev tekst, tagades, et juurte element jääb muutumatuks.
19. Viimase sammuna on MainPage.xaml fail, leidke UserControl.Resources sildi algus ja lõpp ning need asendada navigation: PhoneApplicationPage.Resources sildid.
20. Vajutage CTRL + S salvestada MainPage.xaml faili
21. Seni olete loonud bännerteksti jaoks animatsioonarakendust, kuid see on lihtsalt projekti kasutamata ressurss.Animafunktsiooni esitamiseks peate käivitama storyboardi vastusena üritusele, antud juhul igal juhul Klõpsake nuppu Me nuppu vajutades. Avada Klõpsake selle nupu sündmuse käitleja:
- Mine Disain vaade MainPage.xaml faili
- Korda tausta faili avamiseks topeltklõpsake disainerpinna nuppu
- Asetage kursor sündmuse käitlejale
22. Animatsiooni mängimiseks sündmuse käitleja värskendamiseks sisestage järgmine koodilõik "tühjaks" tühikule vahetult enne lõpuhoidiku külge.
private void ClickMeButton_Click(object sender, RoutedEventArgs e) { BannerTextBlock.Text = MessageTextBox.Text; MessageTextBox.Text = String.Empty; this.AnimateBanner.Begin(); }
