Questo è l'undicesimo tutorial come parte della serie di tutorial di Windows Phone. In questa attività, creerai uno storyboard in Expression Blend per animare il testo nel banner ogni volta che viene premuto il pulsante.
1. Aprire lo spazio di lavoro attivo nell'area di lavoro di animazione. Nel Finestra menu, scegliere Aree di lavoro e selezionare Animazione. Si noti che questo riorganizza le finestre al fine di massimizzare lo spazio disponibile per modificare la timeline.
2. Se necessario, uscire dall'area di modifica del modello di controllo dei pulsanti. Per fare ciò, fare clic su Scope Up pulsante accanto al FancyButton (modello di pulsanti) elemento nel Oggetti e cronologia pannello per visualizzare l'albero degli elementi della pagina.
3. Ora, nel Oggetti e cronologia pannello, fare clic Nuovo per creare uno storyboard. Questo è il pulsante etichettato con un segno + e situato nell'angolo in alto a destra del pannello.
4. Nel Crea risorsa Storyboard dialogo, impostare il Nome a AnimateBanner e fare clic ok.
5. Per creare i fotogrammi chiave nell'animazione, fare clic su BannerTextBlock elemento nell'albero degli elementi del Oggetti e cronologia pannello per selezionarlo.
6. Ora, fare clic e trascinare la posizione corrente dell'headhead della timeline su un offset di 1 secondo.
7. Quindi, passare a Proprietà pannello, espandere il Trasformare categoria e selezionare il Scala trasformare. X il valore della proprietà è -1. Questa trasformazione rispecchia l'elemento lungo il suo asse orizzontale.
9. Ora, modifica l'indicatore di riproduzione della timeline su un offset di 2 secondi.
10. Passare a Proprietà pannello, espandere il Trasformare categoria e selezionare il Scala trasformare. Cambia il valore del X proprietà torna a 1 per ripristinare l'elemento al suo stato originale. Si noti che un secondo fotogramma chiave è apparso nella timeline dello storyboard a causa di questo cambiamento.
11. Per testare l'animazione nel designer, è necessario aggiungere del testo al banner. Innanzitutto, fai clic sul cerchio rosso a sinistra di AnimateBanner nome dello storyboard nell'angolo in alto a sinistra del pannello per disattivare temporaneamente la registrazione: non si desidera che il testo aggiunto diventi parte dell'animazione.
12. Ora, fare clic con il tasto destro del mouse su BannerTextBlock elemento sulla superficie del designer e selezionare Modifica il testo. Inserisci un testo adatto per il banner e premi ACCEDERE.
13. Per verificare l'animazione, premere il tasto Giocare pulsante sopra la timeline. Nota come il testo nel banner ruota orizzontalmente attorno al suo asse centrale e come il movimento è uniforme durante il ciclo di animazione.
14. Seleziona il primo fotogramma chiave facendo clic sull'icona del cerchio grigio nella timeline. Si noti che quando si seleziona un frame, la view designer si aggiorna per mostrare lo stato degli elementi dell'interfaccia utente così come appaiono in quel frame, in questo caso il testo del banner appare speculare. Ora, nel Proprietà pannello, sotto il Facilitare categoria, assicurati che EasingFunction è selezionato, espandere l'elenco a discesa per visualizzare un elenco di funzioni disponibili, quindi selezionare Cubico funzione. Questa particolare funzione di andamento fa sì che la transizione riduca la sua velocità mentre si avvicina al fotogramma chiave.
15. Ripetere la procedura nel passaggio precedente per configurare la funzione di andamento per il secondo fotogramma chiave. Questa volta scegli il InOut cubico funzione per far iniziare la transizione ad una velocità lenta, accelerare gradualmente e infine ridurre la sua velocità mentre si avvicina al fotogramma finale.
16. Per verificare l'effetto delle funzioni di andamento sull'animazione, premere Giocare sopra la timeline. Notate come il banner inizia la rotazione ad alta velocità, quindi rallenta quando il testo appare speculare, quindi riprende velocità e infine rallenta ancora una volta per tornare alla sua posizione originale.
17. Ora che il design dell'interfaccia utente è completo, il passo successivo è copiare nuovamente XAML aggiornato nel progetto principale.
- Innanzitutto, in Expression Blend, fai clic sulla scheda XAML sul lato destro della finestra o in vista menu
- Indicare Vista documento attivo e selezionare Vista XAMLQuesto ti porta alla vista XAML del MainPage.xaml documento.
- Quindi, seleziona e copia i figli della radice UserControl elemento negli appunti. Questo include il UserControl.Resources sezione e il Griglia elemento chiamatoLayoutRoot ma non il UserControl elemento stesso.
18. Ora, in Visual Studio, apri il MainPage.xaml documento in vista XAML e sostituisce l'intero contenuto figlio della radice Navigazione: PhoneApplicationPage elemento con il testo negli Appunti garantendo che l'elemento radice stesso rimanga invariato.
19. Come ultimo passo, nel MainPage.xaml file, individuare il UserControl.Resources iniziare e terminare i tag e sostituirli con navigazione: PhoneApplicationPage.Resources tag.
20. Premere CTRL + S per salvare il MainPage.xaml file.
21. Finora, hai creato uno storyboard di animazione per il testo del banner, ma semplicemente esiste come risorsa inutilizzata nel progetto.Per riprodurre l'animazione, è necessario attivare lo storyboard in risposta a un evento, in questo caso, ogni volta che il Cliccami pulsante viene premuto. Per aprire il Clic gestore di eventi per questo pulsante:
- Vai al Design vista del MainPage.xaml file
- Fare doppio clic sul pulsante sulla superficie del designer per aprire il file code-behind
- Posiziona il cursore sul gestore eventi
22. Per aggiornare il gestore eventi per riprodurre l'animazione, inserire il seguente frammento di codice nello spazio "grassetto" immediatamente prima della parentesi finale.
private void ClickMeButton_Click(object sender, RoutedEventArgs e) { BannerTextBlock.Text = MessageTextBox.Text; MessageTextBox.Text = String.Empty; this.AnimateBanner.Begin(); }
