Tämä on 11. opetusohjelma osana Windows Phone tutorial -sarjaa. Tässä tehtävässä luodaan kuvakäsikirjoitus Expression Blend -näytössä animoimaan tekstiä banneriin aina, kun painiketta painetaan.
1. Avaa aktiivinen työtila animaatiotyötilaan. Vuonna Ikkuna valikko, osoita työtilat ja valitse animaatio. Huomaa, että tämä järjestää ikkunat uudelleen, jotta käytettävissä oleva tila voidaan maksimoida aikajanan muokkaamiseksi.
2. Poistu tarvittaessa painikkeen hallintatyypin muokkausalueelta. Voit tehdä tämän napsauttamalla Soveltamisala -painiketta FancyButton (painikemalli) elementti Objektit ja aikajana paneeli näyttää sivun elementtipuun.
3. Nyt Objektit ja aikajana paneeli, napsauta Uusi luoda kuvakäsikirjoitusta. Tämä on painike, joka on merkitty + -merkillä ja joka sijaitsee paneelin oikeassa yläkulmassa.
4. Vuonna Luo Storyboard Resource dialogi, aseta Nimi että AnimateBanner ja klikkaa kunnossa.
5. Voit luoda animaation keskeiset kehykset napsauttamalla BannerTextBlock elementti elementtipuussa Objektit ja aikajana valitaksesi sen.
6. Napsauta ja vedä aikajanan toistopaikan nykyistä sijaintia siirtymään 1 toinen.
7. Siirry seuraavaksi ominaisuudet paneeli, laajenna Muuttaa luokka ja valitse asteikko muuttaa. X omaisuuden arvo on -1. Tämä muunnos peilaa elementin sen vaaka-akselilla.
9. Muuta nyt aikajanan toistopäätä siirtymäksi 2 sekuntia.
10. Siirry kohtaan ominaisuudet paneeli, laajenna Muuttaa luokka ja valitse asteikko muuttaa. Muuta arvoa X omaisuus takaisin 1 palauttaa elementin alkuperäiseen tilaansa. Huomaa, että toinen avainkehys ilmestyi tarinan aikakauslehdessä tämän muutoksen takia.
11. Jos haluat testata animaatiota suunnittelijalla, sinun on lisättävä teksti banneriin. Napsauta ensin punaista ympyrää vasemmalla puolella AnimateBanner kuvakäsikirjoituksen nimi paneelin vasemmassa yläkulmassa, jos haluat poistaa tilapäisesti tallennuksen käytöstä - et halua lisätä tekstiä osaksi animaatiota.
12. Napsauta hiiren kakkospainikkeella BannerTextBlock elementtiä suunnittelijan pinnalla ja valitse Muokkaa tekstiä. Syötä sopiva teksti banneriin ja paina TULLA SISÄÄN.
13. Voit testata animaatiota painamalla -näppäintä pelata painiketta aikajanan yläpuolella. Huomaa, kuinka banneriin tehty teksti pyörii vaakasuunnassa keskimmäisen akselinsa ympäri ja kuinka liike on yhtenäinen koko animaatiosyklin ajan.
14. Valitse ensimmäinen avainkehys napsauttamalla aikajanan harmaata ympyräkuvaketta. Huomaa, että kun valitset kehyksen, suunnittelija-näkymä päivittyy näyttämään UI-elementtien tilan sellaisina kuin ne näkyvät kyseisessä kehyksessä, tässä tapauksessa banneriteksti näkyy peilikuvana. Nyt ominaisuudet paneeli, alla keventäminen luokka, varmista, että EasingFunction on valittu, laajenna avattava luettelo näyttääksesi luettelon käytettävissä olevista toiminnoista ja valitse sitten Cubic Out toimia. Tämä erityisesti keventämistoiminto saa siirtymän pienentämään nopeuttaan, kun se lähestyy avainkehystä.
15. Toista edellisen vaiheen toimenpide, kun haluat määrittää toisen avaimen kehyksen helpotustoiminnon. Tällä kertaa valitse Cubic InOut jotta siirtyminen alkaa hitaasti, vähitellen kiihdyttää ja vähentää lopulta nopeuttaan, kun se lähestyy päättymiskehystä.
16. Voit testata leikkaustoimintojen vaikutusta animaatioon painamalla -näppäintä pelata aikataulun yläpuolella. Huomaa, kuinka banneri alkaa kiertää suurella nopeudella, ja sitten se hidastuu, kun teksti peilataan, se nostaa nopeuden uudelleen ja hiljenee jälleen kerran takaisin alkuperäiseen asentoonsa.
17. Nyt, kun käyttöliittymän rakenne on valmis, seuraava vaihe on kopioida päivitetty XAML takaisin päähankkeeseen.
- Ensinnäkin Expression Blendissa napsauta XAML-välilehteä ikkunan oikeassa reunassa tai ikkunassa näkymä valikko
- Osoittaa Aktiivinen asiakirjanäkymä ja valitse XAML ViewTämä vie sinut XAML-näkymään MainPage.xaml asiakirja.
- Seuraavaksi valitse ja kopioi juuren lapset UserControl elementti leikepöydälle. Tämä sisältää UserControl.Resources osa ja ruudukko nimetty elementtiLayoutRoot mutta ei UserControl elementti itse.
18. Avaa nyt Visual Studio MainPage.xaml asiakirjan XAML-näkymässä ja korvaa juuren koko lapsisisällön navigointi: PhoneApplicationPage elementti tekstin kanssa leikepöydälle varmistaen, että juuriosa itsessään pysyy ennallaan.
19. Viimeisenä vaiheena MainPage.xaml etsi tiedosto UserControl.Resources aloita ja lopeta tagit ja korvaa ne navigointi: PhoneApplicationPage.Resources tunnisteita.
20. Paina CTRL + S tallentaa MainPage.xaml tiedosto.
21. Tähän mennessä olet luonut animaatiotartikkeleita banneritekstille, mutta se on yksinkertaisesti käytettävissä käyttämättömänä resurssina projektissa.Animaation pelaamista varten sinun on käynnistettävä kuvakäsikirjoitus vastauksena tapahtumaan, tässä tapauksessa aina, kun Napsauta Minua painiketta painetaan. Avaa Klikkaus tämän painikkeen tapahtumakäsittelijä:
- Siirry Design näkymä MainPage.xaml tiedosto
- Avaa koodin takana oleva tiedosto kaksoisnapsauttamalla suunnittelupinnan painiketta
- Aseta kohdistin tapahtumakäsittelijälle
22. Voit päivittää tapahtumakäsittelijän animaation toistamiseen lisäämällä seuraavan koodinpätkän lihavoituun tilaan välittömästi ennen päättymispistettä.
private void ClickMeButton_Click(object sender, RoutedEventArgs e) { BannerTextBlock.Text = MessageTextBox.Text; MessageTextBox.Text = String.Empty; this.AnimateBanner.Begin(); }
