Share
Dans ce tutoriel, je vais vous montrer comment créer une application d'horloge à la mode pour Windows Phone 7. Expression Blend sera utilisé pour la conception de cette application, car il s'agit d'un outil très puissant pour la création rapide d'animations convaincantes..
Pour suivre le didacticiel, vous devez télécharger et installer le SDK Windows Phone 7. Une fois l'installation terminée, vous obtenez Visual Studio Express pour Windows Phone 7, Expression Blend pour Windows Phone 7 et Windows Phone Emulator..
La première étape consiste à télécharger et installer le SDK Windows Phone 7.5..
Avant de commencer, voici l’image finale de ce que nous allons construire.
L'application elle-même est une application d'horloge très simple qui affiche l'heure et la date. Nous utiliserons l'animation pour importer les éléments au démarrage de l'application. Le gros du travail consistera à assembler les éléments de l'écran, à les aligner correctement et à créer l'animation de démarrage. Nous allons également ajouter un peu de code pour mettre à jour la date et l'heure périodiquement.
Tout d'abord, vous devrez créer un projet dans Expression Blend. Pour cela, vous devez sélectionner Fichier> Nouveau projet dans Expression Blend, puis sélectionner le modèle de projet d’application Windows Phone..
Donnez un nom à votre projet. j'utiliserai MinimalClock pour mon projet.
Une fois le projet créé, sélectionnez Projet> Exécuter le projet pour exécuter votre projet. Vous remarquerez que le projet est compilé, puis que Blend lance l'émulateur Windows Phone 7. Tôt ou tard, vous verrez votre application s'exécuter dans l'émulateur. Appuyez sur le bouton d'accueil de l'émulateur pour quitter votre application. Cela arrêtera la session de débogage et vous amènera à l'écran d'accueil de votre émulateur. Une fois que vous avez terminé votre recherche dans l'émulateur, revenez à Expression Blend..
Nous allons maintenant créer l'interface utilisateur de l'application MinimalClock. Une fois le projet créé, vous verrez ceci dans votre mélange Expression:
Premièrement, nous devons supprimer tous les contrôles créés par le modèle de projet pour nous. dans le Objets et chronologie, clic droit sur le TitlePanel et choisir Effacer supprimer le contrôle.
Nous devons également modifier le type de disposition en Canvas au lieu de Grid afin de pouvoir déplacer librement nos contrôles. Pour ce faire, cliquez avec le bouton droit sur le ContentPanel et sélectionnez Toile dans Changer le type de mise en page menu.
Une fois terminé, votre Objets et chronologie devrait ressembler à ceci.
Et votre page d'application devrait être vide comme ceci:
alt = "page d'application vide"Nous avons maintenant la page d’application vide et nous sommes prêts à commencer à y ajouter des contrôles..
Dans le menu de la barre d’outils, sélectionnez le Outil texte et TextBlock. Tracez un rectangle sur la page de votre application, quelle que soit sa taille. Nous allons fixer la taille plus tard.
Ce sera le TextBlock que nous utiliserons pour afficher l'heure, alors nous devrons le renommer en TimeHour. Nous devrons également changer cela pour qu'il soit légèrement plus grand.
Sur le côté droit, recherchez la fenêtre des propriétés. Assurez-vous que le TextBlock que vous venez de créer est sélectionné et modifiez son nom en Heure et frapper Entrer.
Ensuite, vous devrez changer le contenu de la Heure contrôle, alors accédez à la propriété Text et modifiez sa valeur à 12. Puis appuyez sur Entrer. Un moyen plus rapide de rechercher une propriété dans l'onglet Propriétés consiste à utiliser la zone de recherche et à commencer à saisir le nom de la propriété. Veillez à vider le champ de recherche lorsque vous avez fini de modifier votre propriété, car toutes les autres propriétés resteront masquées par votre recherche..
Ensuite, nous allons créer un style pour notre contrôle TimeHour. Les styles sont un ensemble de propriétés visuelles pouvant être appliquées à un type de contrôle donné. Nous économiserons beaucoup de travail avec les styles. Cela peut être fait en faisant un clic droit sur le contrôle lui-même dans le menu déroulant. Objets et chronologie palette et accédez à la Modifier le style menu et sélectionnez Créer vide
Ensuite, nous devons donner le nom du style: TimeTextStyle, puis assurez-vous de sélectionner Ce document où le style sera défini.
Après avoir créé le style, nous nous retrouverons dans l'éditeur de style. Vous le reconnaîtrez en regardant dans la fenêtre de l'éditeur
Dans le volet des propriétés, modifiez les éléments suivants. Faire une recherche pour Police de caractère dans le Recherche de propriété champ, mais n'oubliez pas de l'effacer plus tard pour afficher les autres propriétés.
Vous devrez également changer le la taille et Largeur à Auto dans notre style, en cliquant sur la petite flèche croisée juste à côté du champ de taille.
Maintenant que nous avons fini d’éditer notre style, nous pouvons quitter le mode d’édition en cliquant sur l’étiquette TimeHours en haut de notre surface de conception..
Maintenant, nous avons besoin d’un autre bloc de texte pour afficher les minutes de l’heure actuelle et d’un autre pour indiquer les points entre elles. Pour cela, sélectionnez le TimeHours sur le Objets et chronologie et appuyez sur Ctrl-C pour copier et appuyez deux fois sur Ctrl-V pour créer deux copies. Vous finirez avec cela dans votre Objets et chronologie panneau.
Vous devrez effectuer les modifications suivantes:
Maintenant, nous avons tous les blocs de texte dont nous avons besoin pour afficher l'heure. Tout ce dont nous avons besoin est de les aligner et de les placer un peu plus loin les uns des autres.
Tout d’abord, vous devrez sélectionner les trois contrôles dans la liste. Objets et chronologie palette et faites un clic droit dessus, sélectionnez Aligner et Centres verticaux.
Vous aurez besoin de mettre un petit peu d'espacement entre les éléments de temps. Pour déplacer les éléments avec précision, vous pouvez utiliser les touches fléchées. Si vous utilisez les touches fléchées, le contrôle se déplacera d'un pixel dans les directions indiquées et si vous utilisez la flèche avec la touche majuscule, le contrôle sera déplacé de 10 pixels..
Sélectionnez le bloc de texte TimeHours dans la palette Ojects and Timeline et déplacez-le de 5 pixels. Sélectionnez le bloc de texte TimeMinutes et appuyez cinq fois sur la flèche droite pour le déplacer de 5 pixels à droite. Une fois que vous avez terminé, vous allez vous retrouver avec une chose pareille..
Enfin, nous aurons besoin de combiner les éléments en un seul contrôle pour faciliter la manipulation ultérieure..
Pour ce faire, vous devrez tout sélectionner TimeHours, TimeDots et TimeMinutes sur le Objets et chronologie palette. Faites un clic droit sur les éléments sélectionnés et choisissez Groupe en et Toile.
Double-cliquez sur le nouveau créé [Toile] élément et le renommer en TimeText. Maintenant, votre structure d'objet devrait ressembler à ceci.
Enfin, nous allons ajouter deux barres. Une verticale et une horizontale pour rendre l'interface utilisateur un peu plus intéressante. Nous allons également ajouter le nom de l'application.
Tout d'abord, assurez-vous que ContentPanel est sélectionné sur le Objets et chronologie palette, puis sélectionnez la Rectangle sur la barre d'outils ou utilisez son shortcode M. Dessinez un rectangle horizontal juste au-dessus du contrôle TimeText. Ensuite, vous devrez modifier les propriétés de ce rectangle. Assurez-vous que votre rectangle est sélectionné et sur le Propriétés palette changer les éléments suivants:
Maintenant, nous allons changer la propriété de remplissage du HorizontalSpearator à l'un des styles intégrés appelés PhoneAccentBrush. Ceci réutilisera la couleur d'accentuation du thème actuellement sélectionné. Avec cette modification, l'application réutilisera la couleur primaire du thème actuel..
Afin de changer le remplissage, sélectionnez HorizontalSeparator et localisez le dernier onglet de l'éditeur de couleur appelé Ressources de brosse. Puis sélectionnez le PhoneAccentBrush de la liste.
En outre, nous devons définir le Accident vasculaire cérébral propriété de HorizontalSeparator à Pas de pinceau. Vous pouvez le faire en sélectionnant Accident vasculaire cérébral propriété juste sous la Brosse propriété, puis sélectionnez le premier onglet de l'éditeur de couleur.
Nous avons besoin d'une deuxième barre appelée barre horizontale. Pour cela, sélectionnez à nouveau le Rectangle outil ou coup M pour le sélectionner. Tracez un rectangle juste en dessous de la TimeText contrôler et définir les propriétés suivantes.
Ces séparateurs iront au-delà des limites de l’écran, mais ceci est prévu. Vous devrez positionner les séparateurs autour de la partie Time de la manière suivante:
Nous devons maintenant ajouter le titre de l'application. Sélectionnez le TextBlock outil de la Outils palette ou appuyez sur T. Dessine un TextBlock juste au dessus du HorizontalSeparator et changer les propriétés suivantes.
Voici à quoi cela devrait ressembler maintenant:
Pour créer les secondes, vous devez ajouter un nouveau TextBlock à la page de l'application. Sélectionnez l'outil TextBlock dans la palette Outils ou appuyez sur la touche T..
Dessinez un TextBlock juste en dessous de l'heure et définissez les propriétés suivantes:
Ensuite, nous définirons un style pour cet élément et nous réutiliserons ensuite ce style pour formater les étiquettes de jour..
Pour créer un nouveau style, sélectionnez le SecondsLabel sur la surface de conception, faites un clic droit dessus et dans le Modifier le style menu, choisissez Créer vide.
Donner SmallTextStyle comme nom de style et cliquez sur le bouton OK pour créer le style.
Ensuite, vous vous retrouverez dans l'éditeur de style. Changer la propriété suivante:
Définissez également les marges supérieure et inférieure sur 2 pixels..
Vous pouvez quitter le mode d’édition de style en cliquant sur l’Étiquette Seconds en haut à gauche de la surface de conception..
Dessiner une seconde TextBlock au dessous de SecondsLabel et changez les propriétés comme ceci:
Avec tous les changements, la page d'application du téléphone devrait ressembler à ceci:
Nous sommes maintenant prêts à créer la pièce qui affichera la date actuelle. Pour cela, sélectionnez à nouveau le TextBlock outil ou appuyez sur la T clé pour y accéder rapidement.
Dessinez un TextBlock juste au-dessus du contrôle HorizontalSeparator et modifiez ses propriétés comme suit:
Voici à quoi ressemble la page de l'application après l'ajout de DateText.
Enfin, nous allons créer le contrôle chargé d’afficher les jours. Nous aurons besoin de sept TextBlock pour afficher chaque jour de la semaine. Vous devrez ajouter le m un par un. Sélectionnez le TextBlock outil de la palette d'outils ou appuyez sur la touche T clé et placez tous les TextBlocks sur le côté droit du VerticalSeparator.
Lundi
Mardi
Mercredi
Jeudi
Vendredi
samedi
dimanche
Pour chaque bloc de texte du jour, changez le style en cliquant avec le bouton droit de la souris sur les commandes, l'une après l'autre, sélectionnez l'option correspondante. Modifier le style menu puis choisissez le Appliquer une ressource. Sélectionnez le style SmallTextStyle que nous avons défini plus tôt.
alt = "Sélection de SmallTextStyle" title = "Sélection de SmallTextStyle" /> Après cela, nous devons organiser les blocs de texte comme indiqué dans la capture d'écran ci-dessous..
Si les jours ne sont pas correctement alignés, sélectionnez-les tous dans le menu déroulant. Objets et chronologie palette, clic droit et sélectionnez Bords gauche de Aligner menu.
Ensuite, nous devons combiner les jours dans un nouveau conteneur afin de pouvoir les manipuler plus facilement ultérieurement. Avec tous les jours sélectionnés, faites un clic droit dessus et sélectionnez StackPanel du Groupe en menu.
Double-cliquez sur le newlz créé [StackPanel] élément et changer son nom en Jours de la semaine.
Nous avons une dernière étape pour terminer la phase de conception de l'interface utilisateur et pour obtenir l'aspect prévu de notre application. Nous devons faire légèrement pivoter toute notre interface utilisateur.
Pour cela, sélectionnez le ContentPanel dans le Objets et chronologie palette puis aller à la Propriétés et changer et dans le Transformer groupe de propriétés, modifiez le Angle de rotation à -30 degrés.
Après avoir regardé l'écran pivoté, nous remarquons que les éléments de l'écran sont légèrement décalés. Ils doivent être repositionnés afin de mieux paraître lors de la rotation.
Nous devons changer la position du DateText et le ApplicationTitle. Vous devrez modifier les propriétés suivantes:
Vous pouvez également sélectionner le contrôle que vous souhaitez repositionner et utiliser les touches de direction pour déplacer légèrement les contrôles pixel par pixel et utiliser la touche Maj avec les touches de direction pour les déplacer de 10 pixels à la fois..
Maintenant que tous les contrôles sont en place, l'interface utilisateur est terminée et les animations peuvent être ajoutées.
### Onglet Device
Dans la capture d'écran initiale, vous pouvez voir que les lignes de séparation sont en rouge, mais dans la capture d'écran elles sont en bleu. Cela se produit car la couleur d'accent de l'appareil est différente. Vous pouvez changer le thème de l'appareil en cliquant sur le bouton Dispositif onglet juste à côté du Projet languette. Vous pourrez ici modifier l'orientation de l'appareil, appliquer une couleur d'accent différente et voir à quoi ressemble l'application si le thème sombre ou clair est sélectionné. Je vous encourage à jouer un peu avec les réglages.
Ensuite, nous allons créer l'animation initiale qui sera lue lors du lancement de l'application. L'animation déplacera les contrôles TimeText, WeekDays, TimeSeconds, DateText vers leur emplacement initial..
Les animations dans Expression Blend sont basées sur la création d'images clés, puis sur la modification de certaines propriétés dans cette image clé. Cela indiquera au sous-système d'animation que la propriété doit être animée et que la valeur doit être telle que spécifiée dans l'image clé. Par exemple, si vous créez une image clé en 1 seconde pour le TimeText, puis modifiez l'emplacement et l'opacité du contrôle, ces propriétés seront animées..
Tout d’abord, vous devez créer un nouveau story-board dans le Objets et chronologie palette en appuyant sur la + bouton.
Fournir le nom Animation initiale pour votre nouveau storyboard et cliquez D'accord pour le créer.
Maintenant que le storyboard est créé, vous verrez quelque chose comme ceci dans la palette Objets et chronologie. Sur la gauche, vous verrez que notre story-board appelé InitialAnimation est sélectionné et que le petit voyant rouge indique que l'enregistrement est activé. Cela signifie que si nous modifions les propriétés d'un contrôle, il fera partie du storyboard au lieu de changer l'interface utilisateur..
Sur le côté gauche de la palette, vous pouvez voir la partie de la timeline. Ici, vous pouvez avancer ou reculer dans le temps et ajouter des images clés. Ensuite, nous animerons le TimeText et sa propriété Opacity. Nous allons animer la propriété Opacity de 0 à 100% en 1 seconde. Pour ce faire, sélectionnez TimeText dans la palette Objets et chronologie et assurez-vous que la tête de lecture est à 0 seconde, puis cliquez sur le bouton. Enregistrer une image clé bouton.
Le résultat sera qu'une nouvelle image clé est ajoutée pour Timetext à 0 seconde. Vous remarquerez également qu’un petit point rouge est ajouté à TimeText, cela signifie que InitialAnimation change ce contrôle..
Maintenant, vous devrez aller à la Propriétés palette et changer le Opacité de TimeText être 0 pour cent.
Ensuite, vous devrez déplacer la tête de lecture sur 1 seconde et cliquer sur l’image clé de l’enregistrement..
Là encore, allez au Propriétés palette et changer le Opacité de TimeText à 100 pour cent.
L'animation est maintenant prête et vous pouvez l'observer en cliquant sur le bouton Lecture:
Vous pouvez vous déplacer dans les images clés si vous souhaitez modifier l'animation..
Sélectionnez le 0 seconde image clé de TimeText. Changer temporairement le Opacité propriété à 95 pour cent, de sorte que vous pouvez voir ce que vous faites. Ensuite, plusieurs fois, appuyez sur le Maj et flèche gauche combinaison de touches. Avec cela, vous allez sortir TimeText de l'écran. Ce sera la position de départ de notre mouvement. Ne pas oublier de changer le Opacité propriété à 0 pour cent.
Sélectionnez les 1 secondes image clé de TimeText alors vous devrez faire ce qui suit. Frapper une fois le flèche droite touche de votre clavier - en déplaçant le contrôle de 1 pixel vers la droite - puis en appuyant une fois sur la touche fléchée gauche - en déplaçant le contrôle de 1 pixel vers la gauche. Avec ce changement, nous allons essentiellement enregistrer la position actuelle de notre contrôle TimeText et demander au storyboard de le déplacer à cet emplacement, quelle que soit la position initiale..
Essayez de jouer l'animation. Si tout a fonctionné, alors vous devriez voir le TimeText se déplacer à l'écran et apparaître progressivement en même temps.
Une dernière chose à faire pour améliorer l’animation est de configurer l’accélération de l’animation. Cela rendra l'animation plus naturelle. Pour cela, sélectionnez le 1s image clé de notre animation. Puis changez le Fonction d'accélération propriété à Retour InOut sur le Propriété palette.
Rejouez l'animation pour montrer comment l'animation se comporte maintenant. Si vous le souhaitez, modifiez l’assouplissement pour voir le comportement de chaque fonction..
Ensuite, nous allons animer TimeSeconds, le contrôle utilisé pour afficher la partie secondes de l'heure actuelle. Pour cela, sélectionnez TimeSeconds et ajoutez des images clés à la timeline à 0 seconde et à 1 seconde. Ensuite, procédez comme suit:
Sélectionnez la deuxième image clé de TimeSeconds
Enfin, nous devrons animer les contrôles chargés d’afficher la date et les jours actuels dans l’application. Ces animations seront simples, elles animeront l'opacité de ces contrôles de 0 à 100%..
. Changer l'opacité à 100 pour cent.
Sélectionnez le contrôle DateText dans le Objets et chronologie palette et ajouter une image clé à 0 secondes.
. Une dernière chose à faire est de quitter le mode d’animation et de changer l’opacité en 0 pour tous les contrôles que nous animons dans le menu déroulant. Animation initiale story board. Fermez le storyboard dans le Objets et chronologie palette en cliquant sur le X bouton à côté du nom du story board.
Sélectionnez ensuite chacun des contrôles animés et définissez leurs propriétés d'opacité sur 0%.
Maintenant que l'animation est terminée, il suffit d'ajouter un peu de code pour effectuer la mise à jour de l'écran. Le contenu de notre écran est donc mis à jour toutes les secondes et pour démarrer notre animation initiale lorsque l'écran de l'application est chargé.
Maintenant, l'application est presque terminée. Tout ce que nous avons à faire est d’ajouter un peu de code pour actualiser l’écran toutes les demi-secondes et lire notre animation initiale..
Afin de mettre à jour l'écran périodiquement, un DispatchTimer doit être créé à la fin du chargement de la page. Pour cela, il faut créer un gestionnaire d’événements pour l’événement chargé de la page..
Tout d'abord, sélectionnez la page de l'application à partir du Objets et chronologie palette.
Puis sur le Propriétés palette sélectionner le Événements languette.
Dans la liste des événements, sélectionnez le Chargé événement et double-cliquez pour créer le gestionnaire d'événements. Une nouvelle fenêtre avec le code derrière pour notre page d'application.
Tout d’abord, le temporisateur d’expédition doit être défini dans le fichier de classe (MainPage.xaml.cs). Une instruction "using" doit être ajoutée juste après la dernière instruction using en haut du fichier de classe..
Accentsconagua
using System.Windows.Threading; Ajoutez ensuite la ligne suivante juste
