Dette er den 11. opplæringen som en del av Windows Phone-opplæringsserien. I denne oppgaven vil du opprette et storyboard i Expression Blend for å animere teksten i banneret når du trykker på knappen.
1. Åpne det aktive arbeidsområdet til animasjons arbeidsområdet. I Vindu meny, pek på arbeidsområder og velg animasjon. Legg merke til at dette omarrangerer vinduene for å maksimere ledig plass til å redigere tidslinjen.
2. Gå ut av redigeringsområdet til knappens kontrollmal. For å gjøre dette, klikk på Scope Up knappen ved siden av FancyButton (Button Template) element i Objekter og tidslinje panel for å vise elementet på siden.
3. Nå, i Objekter og tidslinje panel, klikk Ny å lage et storyboard. Dette er knappen merket med et + tegn og ligger øverst til høyre på panelet.
4. I Lag Storyboard Resource dialog, sett inn Navn til AnimateBanner og klikk OK.
5. For å lage nøkkelrammer i animasjonen, klikk på BannerTextBlock element i elementet treet av Objekter og tidslinje panelet for å velge det.
6. Klikk nå og dra den nåværende posisjonen til tidslinjens spillhode til et kompensasjon av 1 sekund.
7. Bytt deretter til Eiendommer panel, utvide Forvandle kategori, og velg Scale forvandle. X eiendomsverdi er til -1. Denne transformasjonen speiler elementet langs sin horisontale akse.
9. Endre tidslinjespillhodet til en kompensasjon av 2 sekunder.
10. Bytt til Eiendommer panel, utvide Forvandle kategori, og velg Scale forvandle. Endre verdien av X eiendom tilbake til 1 for å gjenopprette elementet til sin opprinnelige tilstand. Legg merke til at en annen nøkkelramme dukket opp i historien om tidslinjen på grunn av denne endringen.
11. For å teste animasjon i designeren må du legge til litt tekst i banneret. Først klikker du den røde sirkelen til venstre for AnimateBanner storyboard navn i øverste venstre hjørne av panelet for å slå av midlertidig opptak - du vil ikke at den lagt teksten skal bli en del av animasjonen.
12. Høyreklikk på BannerTextBlock element på designerflaten og velg Rediger tekst. Skriv inn en passende tekst for banneret og trykk TAST INN.
13. For å teste animasjonen, trykk på Spille knappen over tidslinjen. Legg merke til hvordan teksten i banneret roterer horisontalt om sin midtre akse og hvordan bevegelsen er jevn gjennom hele animasjonssyklusen.
14. Velg den første nøkkelrammen ved å klikke inne i den grå sirkelikonet på tidslinjen. Legg merke til at når du velger en ramme, oppdaterer designvisningene for å vise tilstanden til brukergrensesnittelementene som de vises i rammen. I dette tilfellet vises bannerteksten som speilvendt. Nå, i Eiendommer panel, under lettelser kategori, sørg for at EasingFunction er valgt, utvider rullegardinlisten for å vise en liste over tilgjengelige funksjoner, og velg deretter Kubisk ut funksjon. Denne spesielle lettelse-funksjonen forårsaker overgangen for å redusere dens hastighet når den nærmer seg nøkkelrammen.
15. Gjenta prosedyren i forrige trinn for å konfigurere lette funksjonen for den andre nøkkelrammen. Denne gangen velger du Cubic InOut funksjon for å gjøre overgangen startet med en lav hastighet, gradvis akselerere, og til slutt redusere hastigheten når den nærmer seg sluttrammen.
16. For å teste effekten av lettelsefunksjonene på animasjonen, trykk Spille over tidslinjen. Noter hvordan banneren starter rotasjonen med høy hastighet, deretter bremser ned som teksten vises speilet, den henter deretter fart igjen og til slutt bremser igjen en gang for å gå tilbake til sin opprinnelige posisjon.
17.Nå at utformingen av brukergrensesnittet er fullført, er neste trinn å kopiere den oppdaterte XAML tilbake til hovedprosjektet.
- Først, i Expression Blend, klikker du XAML-fanen på høyre kant av vinduet eller i Utsikt Meny
- Pek på Aktiv dokumentvisning og velg XAML ViewDette får deg til XAML-visningen av MainPage.xaml dokument.
- Deretter velger og kopierer du rotens barn UserControl element til utklippstavlen. Dette inkluderer UserControl.Resources delen og Nett element som heterLayoutRoot men ikke den UserControl selve elementet.
18. Nå, i Visual Studio, åpne MainPage.xaml dokument i XAML-visning og erstatt hele barnets innhold av roten navigasjon: PhoneApplicationPage element med teksten i utklippstavlen, slik at rotelementet selv forblir uendret.
19. Som et siste skritt, i MainPage.xaml fil, finn UserControl.Resources start og slutt tagger og erstatt dem med navigasjon: PhoneApplicationPage.Resources tags.
20. Trykk på CTRL + S å lagre MainPage.xaml fil.
21. Så langt har du laget et animasjons storyboard for bannerteksten, men det eksisterer bare som en ubrukt ressurs i prosjektet.For å spille animasjonen, må du utløse storyboardet som svar på en hendelse, i dette tilfellet når Klikk på meg knappen er trykket. Å åpne Klikk hendelsehandler for denne knappen:
- Gå til Design utsikt over MainPage.xaml fil
- Dobbeltklikk på knappen på designerflaten for å åpne kode-bak-filen
- Plasser markøren på hendelseshandleren
22. Hvis du vil oppdatere hendelseshåndtereren for å spille animasjonen, setter du inn følgende kodestykke i den "dristige" plassen umiddelbart før sluttbommen.
private void ClickMeButton_Click(object sender, RoutedEventArgs e) { BannerTextBlock.Text = MessageTextBox.Text; MessageTextBox.Text = String.Empty; this.AnimateBanner.Begin(); }
