Ning Zhang Blog

Introduction

XAML est une invention majeure de WPF, et Xmal "programmation" est une partie importante de WPF / Silverlight développement. Même si XAML est XML et peut être l'auteur de la main, il est surtout conçu pour les outils, outils de création de si bons sont plus importants pour XAML que dans d'autres langues comme C # ou HTML. Mélanger jusqu'à ce que XAML est Visual Studio est en C #. Il ya beaucoup de bons tutoriaux et des documents pour Blend, comme Jesse Liberty Expression Blend pour les développeurs . Ce message ressemble plus à "savoir Blend en 15 minutes", visant à donner un aperçu rapide et tutoriel de Blend pour les développeurs qui sont la plupart du temps de création XAML dans Visual Studio ou le Bloc-notes, et ils seront peut-être intéressé et de savoir comment commencer à utiliser Mélanger.

Gestion de projet

Mélanger les doublons de nombreuses fonctionnalités de Visual Studio et a très bonne intégration avec elle. Il est très fréquent (voire recommandé, devrais-je dire) d'avoir un ouvert WPF / Silverlight projet à la fois dans Blend et Visual Studio, en utilisant Blend pour XAML de création et de Visual Studio pour C # de codage (ou la langue que vous préférez), et en utilisant soit ou les deux pour la gestion de projet.

Projet de gérer dans le mélange est très semblable à celle de Visual Studio, via le menu, le projet de panneau et des résultats:

• Menu: Fichier, Edition, de projet et menus d'aide sont très semblables à ceux de Visual Studio. Grâce à ces menus, vous pouvez créer / ouvrir WPF / Silverlight projets, ajouter des articles / etc références, et même générer et exécuter la solution, tout comme dans Visual Studio.
  
• Panneau du projet: il est très similaire à l'Explorateur de solutions de Visual Studio. Vous pouvez faire un clic droit sur n'importe quel fichier .xaml / .cs dans le panneau de projet et sélectionnez "Modifier dans Visual Studio", et le projet et le fichier sélectionné sera ouvert dans Visual Studio pour l'édition.
  
• Résultat Groupe: l'onglet Sortie et onglet Erreur sont similaires à la fenêtre de sortie et la fenêtre Liste d'erreurs dans Visual Studio.

UI Authoring

UI de création se fait surtout au moyen de trois panneaux:

Panneau Objets et chronologie

Le panneau d'objets rend la structure arborescente logique très claire. Il est facile de naviguer dans l'arborescence logique en développer / rétracter / sélection d'un élément dans l'arbre, ou de restructurer l'arbre par glisser-déposer des éléments le long de l'arbre. L'élément sélectionné est mis en surbrillance dans le panneau des objets, et dans les deux le point de vue conception et la vue XAML du panneau documents; le panneau de propriétés affiche les propriétés et événements de l'élément sélectionné. Le noeud interne avec bordure jaune (la capture d'écran ci-dessus LayoutRoot) est le conteneur par défaut actuel.

Documents de la commission

Le panneau de documents est une fenêtre à onglets, avec un onglet pour chaque fichier ouvert xaml. Il a une vue de conception et d'une vue XAML pour chaque fichier.

• Vous pouvez utiliser les onglets en haut de la fenêtre des documents pour basculer entre les documents ouverts ou des documents proches (un seul onglet capture d'écran ci-dessus, car une seule page.xaml fichier est ouvert.).
• Vous pouvez basculer entre le mode Création, XAML, ou la vue de Split du document sélectionné. Vous pouvez également définir l'affichage du document par défaut dans Outils -> Options -> Documents:
  
• Il s'agit d'un contrôle de navigation au haut de la vue de conception (aussi appelé plan de travail) pour montrer le chemin de l'arbre logique de l'élément sélectionné. C'est une autre façon de naviguer dans l'arborescence logique d'ailleurs le panneau des objets, et de basculer entre les modes de création comme nous le verrons bientôt.
• Vous pouvez zoomer la vue de conception par
  • sélectionnez l'icône de zoom de la boîte à outils, puis cliquez sur ou cliquez sur alt sur la planche graphique;
  • utiliser la liste déroulante ci-dessous un zoom à droite le plan de travail:
  • utiliser les éléments du menu Affichage ou leurs touches de raccourci:
• La vue de conception est un concepteur WYSIWYG, où vous pouvez glisser et déposer un élément de la boîte à outils ou à la bibliothèque d'actifs le long de la bordure gauche de la fenêtre Blend:
  
• Le point de vue XAML permet directe XAML de création. Il n'a pas IntelliSense, mais vous pouvez utiliser la vue de conception et de l'onglet erreur dans le panneau Résultats ci-dessous pour corriger les erreurs pendant que vous tapez.

Panneau Propriétés

Panneau Propriétés dispose de deux vues: propriétés et événements, indiqués par deux boutons dans le coin supérieur droit du panneau.

• Compte tenu des propriétés:
  
  • propriétés de l'élément sélectionné sont regroupées en catégories, comme la mise en page, des propriétés communes;
  • propriétés ont généralement info-bulle utile, comme info-bulle propriété Content de capture d'écran ci-dessus;
  • propriétés ont généralement éditeur en ligne / étendue / boîte de dialogue (s) pour aider les utilisateur de sélectionner une valeur, comme la valeur de propriété HorizontalAlignment la capture d'écran ci-dessus peut être réglé en cliquant sur l'un des quatre boutons, au lieu de taper des valeurs telles que «le Centre» en XAML regarder directement;
  • si vous donnez un bien immobilier d'une valeur (de sorte qu'il ne prend plus la valeur par défaut), la petite place à sa droite devient blanc, comme les propriétés d'alignement dans capture d'écran ci-dessus;
  • vous pouvez cliquer sur la flèche vers le bas (qui a "Afficher les propriétés avancées" tooltip) dans la plupart des catégories pour voir plus de propriétés de cette catégorie;
  • vous pouvez trouver une propriété rapidement en tapant une partie de son nom dans la boîte de recherche située en haut du panneau des propriétés:
    
• Compte tenu des événements:
  
  • vous pouvez taper le nom du gestionnaire d'événements pour un événement, et le mélange va ouvrir le projet dans Visual Studio, avec une mise en œuvre prototype du gestionnaire d'événements dans le fichier code-behind:

  

Animation Authoring

Pour créer une animation, cliquez sur le signe plus dans le panneau Objets et chronologie, l'option "Créer des ressources Storyboard" de dialogue apparaîtra, vous demandant le nom de la table de montage séquentiel:

Blend passe en mode enregistrement de chronologie. Nous allons créer une animation qui permettra de doubler la taille du bouton. Les principales étapes de la création d'une animation:

1. créer une image-clé, d'abord en faisant glisser le calendrier jaune à un KeyTime, puis en cliquant sur le "Enregistrer l'image clé" plus vert sur le bouton;
2. modifier les propriétés d'éléments de l'interface à KeyTime, tels que décrits dans la section interface Authoring ci-dessus;
3. répétez les étapes 1 et 2 pour chaque image-clé;

Comme on peut le voir ci-dessous capture d'écran:

• dans le panneau Objets et chronologie:
  • le nom de la timeline d'édition: Storyboard1;
  • l'image-clé en cours d'édition: KeyTime est de 1 seconde, indiquée par le calendrier jaune;
  • les icônes de flèche double à gauche des nœuds dans le panneau des objets (bouton, RenderTransform, Échelle, scaleX, scaleY ci-dessous capture d'écran) et les points blancs le long de la ligne de temps dans les changements de propriété panneau Montage spectacle pour les objets à l'KeyTime;
  • nous pouvons utiliser les commandes de lecture dans la partie supérieure du panneau Montage, ou faites glisser le calendrier jaune, pour lancer l'animation;
• Plan de travail du Groupe dans les documents:
  • la bordure rouge, bouton d'enregistrement rouge, et le label rouge «enregistrement chronologique est le" tout indique Blend est en mode enregistrement de chronologie;
  • vous pouvez cliquer sur le bouton d'enregistrement rouge pour arrêter le mode d'enregistrement et de revenir à l'interface utilisateur en mode de création;
• Dans le Panneau de propriétés:
  • la valeur des propriétés cibles: comme ScaleTransform.ScaleX est fixé à 2;

Blend utilise XXXAnimationUsingKeyFrames et génère une image clé pour chaque objet / propriété / trio clé. Nous pouvons affiner les propriétés d'une image clé elle-même d'abord le sélectionner dans le panneau Objets, puis en définissant ses propriétés dans le panneau de propriétés, comme ci-dessous capture d'écran:

• KeyTime est "00:00:01"
• objet cible est le bouton, chemin cible est à peu près RenderTransform.ScaleTransform.ScaleX
• La valeur est "2"
• KeySpline est "0.5,0.1,0.5,0.9"

nous pouvons aussi affiner les propriétés de la table de montage séquentiel de la même manière, comme ci-dessous capture d'écran:

• Storyboard1 est choisi
• Autoreverse propriétés sont modifiées et RepeatBehavior

C'est le code XAML généré Blend pour l'animation simple ci-dessus:

  AutoReverse ="True" RepeatBehavior ="Forever" x:Name ="Storyboard1" > <Storyboard AutoReverse = "True" RepeatBehavior = "Forever" x: Name = "Storyboard1">
    
        
     > </ DoubleAnimationUsingKeyFrames>
    
         KeyTime ="00:00:01" Value ="2" /> <KeyTime SplineDoubleKeyFrame = "00:00:01" value = "2" />
     > </ DoubleAnimationUsingKeyFrames>
 > </ Storyboard> 

Il est clair qu'il est beaucoup plus facile à des animations d'auteur dans le mélange au lieu d'écrire XAML manuellement.

Authoring Template

La beauté et la puissance de WPF / Silverlight est la capacité de re-modèle d'un contrôle. Il est assez facile à faire que dans le mélange: sélectionner un élément de menu à partir des "Pièces contrôle d'édition (Modèle) -> Modifier le modèle" menu contextuel, soit à partir de panneau Objets et chronologie, ou à partir du fil d'Ariane dans plan de travail:

"Modifier une copie ..." élément de menu est aussi un moyen facile pour obtenir le modèle par défaut d'un contrôle. En dessous de capture d'écran, on peut voir:

• par défaut des composants de modèle dans le panneau Objets et chronologie
• groupes d'états visuels, des états visuels et des transitions dans le Panneau de l'interaction
• propriétés des composants de modèle dans panneau Propriétés. Le carré orange à droite de propriété Background indique qu'il est lié modèle.

Percer dans la poursuite: sélectionnez l'état handicapé visuel, et nous pouvons voir que le plan de travail visuelle handicapés dans est généré par le story-board de transition d'état visuel qui anime la propriété Opacity de l'DisabledVisualElement de 0% à 55% en 0 secondes:

S'il vous plaît noter que près du sommet de l'objet et le panneau Timeline, il montre Etat aux handicapés au lieu d'un story-board, ce qui indique Blend est en mode enregistrement de l'état.

Maintenant, nous allons faire quelques changements dans le modèle par défaut en changeant l'état de transition de focus visuel pour incliner le bouton quand il est porté:

• sélectionnez l'état Focused visuelle dans le Panneau de l'interaction, cliquez sur la flèche icône plus sur sa droite, sélectionnez l'une des trois options (ces options sont pour les transitions d'état visuels de et vers cet état, et entre deux états particuliers dans le groupe état visuel);
• Blend est en mode d'état de l'enregistrement visuel: ciblée est l'état visuel sélectionné;
• ajouter un biais nouvelle transformation de la grille supérieure tel que discuté dans la section Création Animations. Notez que le bouton de plan de travail est désormais biaisé. Le plan de travail WYSIWYG de création d'animation rend facile et intuitive.
• supprimer le composant de modèle dans le panneau Objets FocusVisualElement puisque nous n'avons pas besoin non plus. Remarquez la bulle d'aide à la Blend haut indiquant automatiquement supprimés de la transition de l'état visuel qui montre la FocusVisualElement ainsi.

Le mélange généré XAML pour modèle personnalisé ci-dessus est de 102 lignes, 6179 caractères! Imaginez la difficulté de création que par la main!

Une fois que nous avons un modèle, nous pouvons l'appliquer à des éléments d'interface de type de cible du style (ou son sous-type):

Authoring de style

En utilisant le style est généralement meilleure que la définition des propriétés sur les objets directement, car les styles peuvent être réutilisés, sont faciles à entretenir, et d'aider une présentation séparée du contenu (les éléments d'interface utilisateur). Création de style est similaire à authoring modèle mentionné ci-dessus, sauf qu'il est beaucoup plus simple. Vous devez utiliser l'objet -> menu Modifier le style pour entrer dans le mode de création de style. Il n'y a pas de menu contextuel pour elle, ce qui rend création style moins détectable.

Sélectionnez Créer vide ... élément de menu, et la boîte de dialogue Créer une ressource de style apparaît, vous permettent de spécifier le nom et l'emplacement de la ressource nouveau style:

Puis Blend passe en mode de création de style:

• les panneau Objets et chronologie affiche élément Style souligné la place de l'arbre interface logique;
• le fil d'Ariane sur le dessus de la planche graphique indique également que nous sommes le style de création LayoutRoot avec une icône de la palette;
• ajoutons quelque chose du style par la mise en arrière-plan via l'éditeur de pinceaux, remarquez le plan de travail reflète le changement immédiat;
• le point de vue XAML du panneau documents montre la simple XAML généré pour la création de style;

Une fois que nous avons une ressource de style, l'application, il est facile: il suffit de sélectionner l'objet et l'objet l'utilisation -> Style Edition -> Appliquer menu des ressources.

Gestion des ressources

Storyboard, styles et les modèles d'auteurs ci-dessus sont toutes les ressources. Nous pouvons utiliser le panneau de ressources pour gérer les ressources:

• nous pouvons voir toutes les ressources à la fois dans app.xaml (ressources mondiales) et le courant fichier XAML page.xaml qui est en cours d'édition (ressources locales).
  • Je ne sais pas pourquoi Storyboard1 créé dans la section Création d'animation ne se présente pas. Mélanger bug ou une erreur d'utilisateur?
• nous pouvons modifier une ressource via le menu contextuel ou modifier le bouton de ressources:
  
  
• nous pouvons également faire glisser et déposer une ressource long de l'arbre de changer son emplacement (et la visibilité), comme le déplacement entre les app.xaml et page.xaml, ou [UserControl] et le bouton.

Conclusion

Pour récapituler, Blend fait de création d'interface utilisateur simple et intuitive:

• boîte à outils (et de la bibliothèque d'actifs) et plan de travail permet WYSIWYG de création d'interface utilisateur;
• panneau d'objets permet d'organiser tous les éléments d'interface utilisateur dans l'arborescence logique;
• panneau de propriétés simplifie paramètre de la propriété avec les éditeurs;

Construire sur le dessus de la création intuitive interface utilisateur, Blend simplifie création d'animation en introduisant le mode enregistrement de chronologie:

• Blend utilise toujours XXXAnimationUsingKeyFrames, si un story-board est toujours une collection d'images-clés;
• Blend génère des images clés indirectement en laissant l'utilisateur de définir les propriétés d'éléments d'interface utilisateur à keyTimes via son interface de création intuitive interface utilisateur;
• Blend génère toujours toutes les transformations quatre comme ci-dessous, pour faire son uniforme de génération des images clés pour transformer:

    > <Button.RenderTransform>
       > <TransformGroup>
           /> <ScaleTransform />
           /> <SkewTransform />
           /> <RotateTransform />
           /> <TranslateTransform />
       > </ TransformGroup>
   > </ Button.RenderTransform> 

En plus de son interface utilisateur et la création d'animation, de création de modèle Blend simplifie en introduisant le mode de création de modèle et le mode enregistrement de l'état. Un modèle se compose de pièces de modèles et des états visuels. Des composants de modèle sont tout simplement une arborescence logique d'éléments d'interface, et les transitions d'état visuels sont storyboards.

Création de style est encore plus simple: un style est simplement une collection de setters de propriété. Blend introduit mode de création de style à la distinction entre création d'interface utilisateur régulier et de création de style.

Donc, Blend est un outil de création de grande XAML. Ce n'est pas seulement pour les concepteurs, mais peut aussi donner aux développeurs gain de productivité important. Espérons que ce message vous donne un bon aperçu du mélange et de vous aider à démarrer dans le mélange d'explorer, avec enthousiasme ). Merci!

Soyez sociable, Partager!

•