Il s'agit du 11ème tutoriel faisant partie de la série de tutoriels de Windows Phone. Dans cette tâche, vous allez créer un storyboard dans Expression Blend pour animer le texte de la bannière chaque fois que le bouton est enfoncé.
1. Ouvrez l'espace de travail actif dans l'espace de travail d'animation. dans le La fenêtre menu, pointez sur Espaces de travail et sélectionnez Animation. Notez que cela réorganise les fenêtres afin de maximiser l'espace disponible pour éditer la timeline.
2. Si nécessaire, quittez la zone d'édition du modèle de contrôle de bouton. Pour ce faire, cliquez sur le bouton Portée vers le haut bouton à côté du FancyButton (modèle de bouton) élément dans le Objets et chronologie panneau pour afficher l’arbre des éléments de la page.
3. Maintenant, dans le Objets et chronologie panneau, cliquez sur Nouveau créer un storyboard. Il s’agit du bouton portant le signe + et situé dans le coin supérieur droit du panneau.
4. Dans le Créer une ressource de storyboard dialogue, définissez le prénom à AnimateBanner et cliquez D'accord.
5. Pour créer les images clés dans l'animation, cliquez sur le bouton BannerTextBlock élément dans l'arborescence des éléments du Objets et chronologie panneau pour le sélectionner.
6. Maintenant, cliquez et faites glisser la position actuelle de la tête de lecture de la timeline sur un décalage de 1 seconde.
7. Ensuite, passez à la Propriétés panneau, développez le Transformer catégorie et sélectionnez le Échelle transformer. X la valeur de la propriété est de -1. Cette transformation reflète l'élément sur son axe horizontal.
9. Maintenant, modifiez la tête de lecture de la timeline sur un décalage de 2 secondes.
10. Basculez vers le Propriétés panneau, développez le Transformer catégorie et sélectionnez le Échelle transformer. Changer la valeur de la X propriété retour à 1 pour restaurer l'élément à son état d'origine. Notez qu'une deuxième image clé est apparue dans le scénario du storyboard à cause de ce changement.
11. Pour tester l'animation dans le concepteur, vous devez ajouter du texte à la bannière. Tout d’abord, cliquez sur le cercle rouge à gauche de la AnimateBanner nom du storyboard dans le coin supérieur gauche du panneau pour désactiver temporairement l'enregistrement; vous ne souhaitez pas que le texte ajouté fasse partie de l'animation.
12. Maintenant, faites un clic droit sur le BannerTextBlock élément sur la surface du concepteur et sélectionnez Éditer le texte. Entrez un texte approprié pour la bannière et appuyez sur ENTRER.
13. Pour tester l'animation, appuyez sur le bouton Jouer bouton au-dessus de la timeline. Notez que le texte dans la bannière pivote horizontalement autour de son axe central et que le mouvement est uniforme tout au long du cycle d'animation.
14. Sélectionnez la première image clé en cliquant à l'intérieur de l'icône de cercle gris dans la chronologie. Notez que lorsque vous sélectionnez un cadre, la vue Concepteur se met à jour pour afficher l'état des éléments de l'interface utilisateur tels qu'ils apparaissent dans ce cadre. Dans ce cas, le texte de la bannière apparaît en miroir. Maintenant, dans le Propriétés panneau, sous la Assouplissement catégorie, assurez-vous que EasingFunction est sélectionné, développez la liste déroulante pour afficher une liste des fonctions disponibles, puis choisissez le Cubic Out une fonction. Cette fonction particulière d’assouplissement amène la transition à réduire son taux à mesure qu’elle approche de la clé.
15. Répétez la procédure à l'étape précédente pour configurer la fonction d'accélération pour la deuxième image clé. Cette fois choisir le Cubic InOut pour que la transition commence à un rythme lent, qu’elle s’accélère progressivement et qu’elle diminue enfin à mesure qu’elle approche de la fin de la période.
16. Pour tester l’effet des fonctions d’accélération sur l’animation, appuyez sur Jouer Notez au début de la rotation de la bannière que la bannière commence à tourner à grande vitesse, puis ralentit à mesure que le texte apparaît en miroir, puis reprend de la vitesse et enfin, ralentit à nouveau pour revenir à sa position initiale.
17.Une fois la conception de l'interface utilisateur terminée, l'étape suivante consiste à recopier le XAML mis à jour dans le projet principal.
- Tout d’abord, dans Expression Blend, cliquez sur l’onglet XAML situé sur le bord droit de la fenêtre ou dans la fenêtre correspondante. Vue menu
- Pointer vers Vue active du document et sélectionnez XAML VoirCela vous amène à la vue XAML de la MainPage.xaml document.
- Ensuite, sélectionnez et copiez les enfants de la racine UserControl élément du presse-papier. Cela inclut le UserControl.Resources section et la la grille élément nomméLayoutRoot mais pas le UserControl élément lui-même.
18. Dans Visual Studio, ouvrez le MainPage.xaml document en vue XAML et remplace tout le contenu enfant de la racine navigation: PhoneApplicationPage élément avec le texte dans le presse-papiers en veillant à ce que l’élément racine reste lui-même inchangé.
19. Enfin, dans la MainPage.xaml fichier, localisez le UserControl.Resources balises de début et de fin et les remplacer par navigation: PhoneApplicationPage.Resources Mots clés.
20. Appuyez sur CTRL + S pour sauver le MainPage.xaml fichier.
21. Jusqu'à présent, vous avez créé un storyboard d'animation pour le texte de la bannière, mais il existe simplement en tant que ressource non utilisée dans le projet.Pour lire l'animation, vous devez activer le storyboard en réponse à un événement, dans ce cas, chaque fois que le Cliquez moi bouton est enfoncé. Pour ouvrir le Cliquez sur gestionnaire d'événement pour ce bouton:
- Aller au Conception vue de la MainPage.xaml fichier
- Double-cliquez sur le bouton de la surface de conception pour ouvrir le fichier code-behind.
- Positionnez le curseur sur le gestionnaire d'événements
22. Pour mettre à jour le gestionnaire d'événements afin de lire l'animation, insérez l'extrait de code suivant dans l'espace «gras» immédiatement avant l'accolade de fin.
private void ClickMeButton_Click(object sender, RoutedEventArgs e) { BannerTextBlock.Text = MessageTextBox.Text; MessageTextBox.Text = String.Empty; this.AnimateBanner.Begin(); }
