Didacticiel Windows Phone 9: Création d'un bouton personnalisé dans Expression Blend (Part-2)

Didacticiel Windows Phone 9: Création d'un bouton personnalisé dans Expression Blend (Part-2)
Didacticiel Windows Phone 9: Création d'un bouton personnalisé dans Expression Blend (Part-2)

Vidéo: Didacticiel Windows Phone 9: Création d'un bouton personnalisé dans Expression Blend (Part-2)

Vidéo: Didacticiel Windows Phone 9: Création d'un bouton personnalisé dans Expression Blend (Part-2)
Vidéo: Windows Phone 7 Development - Tutorial 7 - Using WebClient - YouTube 2024, Novembre
Anonim

Ce didacticiel est une continuation de la partie I du didacticiel Windows Phone: en copiant et collant simplement le code de Visual Studio dans un mélange d’expression, nous avons créé une réplique de l’application Silverlight dans Expression Blend. Nous allons maintenant concevoir un bouton personnalisé en procédant comme suit:

1. Confirmez que le MainPage.xaml est ouvert dans la fenêtre du concepteur et que l'espace de travail actuel est défini sur Conception. Pour afficher l'espace de travail actuel, sélectionnez Espaces de travail dans le La fenêtre menu et assurez-vous que le Conception l'option est cochée.

2. Dans la fenêtre du concepteur, cliquez avec le bouton droit de la souris sur «Cliquez moi”Bouton, pointez sur Modifier le modèle et sélectionnez Créer vide.

3. Dans le Créer une ressource ControlTemplate dialogue, définissez le prénom àFancyButton, conserve la valeur actuelle de “ Ce document dans le Définir dans option, et cliquez D'accord.

Image
Image

4. Assurez-vous que le panneau Objets et chronologie est visible. Sinon, sélectionnez La fenêtre et alors Objets et chronologie pour montrer ce panneau. Sinon, vous pouvez réinitialiser votre espace de travail.

5. Modifiez le conteneur de disposition racine actuel du modèle. dans le Objets et chronologie panneau, faites un clic droit sur l'enfant la grille élément à l'intérieur Modèle, pointer vers Changer le type de mise en page, et sélectionnez Frontière.

Image
Image

6. Avec le Frontière élément toujours sélectionné dans le Objets et chronologie panneau, passer à la Propriétés panneau et sous Apparence, définissez la valeur du Épaisseur de la frontière propriété à2 pour chacun des côtés, puis définissez la valeur de la CornerRadius propriété à15.

Image
Image

7. Ensuite, dans le Des pinceaux section, sélectionnez la Contexte propriété et choisissez la Pinceau dégradé option. Sélectionnez ensuite la butée de dégradé gauche et définissez sa valeur sur une couleur gris clair, par exemple#FFADADAD. Ensuite, sélectionnez l’arrêt approprié du dégradé et définissez sa valeur sur une couleur gris foncé, par exemple# FF0A0A0A.

Image
Image

8. Maintenant, dans le Des pinceaux section, sélectionnez la BorderBrush propriété, choisissez une Pinceau de couleur unie et choisissez une couleur gris clair, par exemple# FFC0C0C0.

Image
Image

9. L'étape suivante consiste à ajouter une légende. Tout d'abord, assurez-vous que le Frontière l'élément reste sélectionné dans la Objets et chronologie panneau.

10. Maintenant, passez à la Les atouts panneau, sélectionnez le Les contrôles catégorie et faites défiler la liste affichée à droite de la catégorie pour localiser le TextBlock contrôle. Double-cliquez ensuite sur l’élément de la liste pour insérer une instance de ce contrôle imbriquée dans le Frontière élément du modèle.

Image
Image
Image
Image

11.Maintenant, dans le Outils panneau, choisissez le Sélection outil ou presse V pour restaurer le mode de sélection.

12.Dans le Objets et chronologie panneau, sélectionnez le nouveau TextBlock élément. Puis dans le Propriétés panneau, développez le Des pinceaux catégorie et définir le Premier plan brosser à une couleur claire, par exemple#FFFFFFFF.

Image
Image

13. Maintenant, développez le Disposition catégorie et définir la valeur de la HorizontalAlignment et Alignement vertical propriétés àCentre. Ensuite, définissez la valeur du Marge propriété à10 pour les côtés gauche et droit, et à4 pour les côtés haut et bas.

Image
Image

14. lier le Texte propriété du Zone de texte contrôle dans le modèle à la Contenu propriété du bouton avec contrôle basé sur un modèle. Pour faire ça:

  • Étendre le Propriétés communes Catégorie
  • Cliquez sur Options de propriété avancées-indiqué par une icône carrée à côté de la valeur de la propriété
  • Sélectionner Liaison de modèles pour afficher une liste de propriétés dans le contrôle basé sur un modèle pouvant être lié à cette propriété
  • Choisir la Contenu propriété de cette liste Notez que la valeur de la Texte propriété change à “Cliquez moi”-La valeur actuellement définie pour le Contenu propriété du bouton - et que la propriété est maintenant affichée avec un contour jaune pour indiquer qu'elle est liée au modèle.
Image
Image

15. Appuyez sur CTRL + S pour enregistrer le fichier mis à jour.

16. Vous êtes maintenant prêt à tester le nouveau bouton personnalisé. presse F5 pour construire et exécuter l'application

Articles Similaires:

  • Installateurs hors ligne Windows Live Essentials pour TOUTES les langues Liens
  • Liste complète des raccourcis clavier Windows Live Writer
  • Modèle de style de métro Windows gratuit pour les utilisateurs de Visual Basic
  • Didacticiel Windows Phone 11: Création d'une animation pour le texte de la bannière
  • Testez le système d'exploitation Windows dans VirtualBox - Guide détaillé des captures d'écran

Conseillé: