Ning Zhang blog

Présentation

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 peuvent être créés manuellement, il est surtout conçu pour les outils, les outils d'authoring si bon sont plus importants pour XAML que d'autres langages comme C # ou HTML. Mélange de XAML est ce que 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 post est plus comme «Apprenez Incorporer 15 Minutes", visant à donner un aperçu rapide et tutoriel de Blend pour les développeurs qui sont souvent de création XAML dans Visual Studio ou le Bloc-notes, et donc ils seront intéressés et savoir comment débuter dans l'utilisation de Blend.

Gestion de projet

Mélange des doublons de nombreuses fonctionnalités de Visual Studio et a très bonne intégration avec elle. Il est très fréquent (voire même recommandé, devrais-je dire) d'avoir une ouverture WPF / Silverlight projet dans les deux Blend et Visual Studio, en utilisant Mélange 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 Blend est très similaire à celle de Visual Studio, via le menu, le projet de panneau et résultats:

• Menu: Fichier, Edition, projets 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 Panel: 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

IU de création se fait principalement via trois panneaux:

Panneau Objets et chronologie

Le panneau des 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 en faisant glisser des éléments le long de l'arbre. L'élément sélectionné est en surbrillance dans le panneau des objets, et dans les deux le point de vue conception et XAML Vue du panneau de 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 (LayoutRoot au screenshot ci-dessus) est le conteneur par défaut actuel.

Documents de la commission

Le panneau des documents est une fenêtre à onglets, avec un onglet pour chaque fichier ouvert XAML. Il a une vue design et une vue XAML pour chaque fichier.

• Vous pouvez utiliser les onglets en haut de la fenêtre de documents pour basculer entre les documents ouverts ou des documents à proximité (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 vue fractionnée 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'arborescence logique de l'élément sélectionné. C'est une autre façon de naviguer dans l'arborescence logique, outre le panneau d'objets, et de basculer entre les modes de création comme nous le verrons bientôt.
• Vous pouvez zoomer la vue de conception en
  • sélectionnez l'icône de zoom de la boîte à outils, puis cliquez ou cliquez alt sur le plan de travail;
  • utilisez la liste déroulante ci-dessous 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:
  
• La vue XAML permet directement de création XAML. Il n'a pas d'IntelliSense, mais vous pouvez utiliser la vue de conception et de l'onglet erreur dans le panneau des résultats ci-dessous pour corriger les erreurs pendant que vous tapez.

Panneau Propriétés

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

• Dans les propriétés de vue:
  
  • propriétés de l'élément sélectionné sont regroupées en catégories, comme mise en page, Propriétés communes;
  • propriétés ont habituellement info-bulle utile, comme info-bulle dans la propriété Content capture d'écran ci-dessus;
  • propriétés ont habituellement éditeur en ligne / étendue / dialogue (s) pour aider l'utilisateur choisir une valeur, comme la valeur de la propriété HorizontalAlignment de capture d'écran ci-dessus peut être réglé en cliquant sur l'un des quatre boutons, au lieu de taper des valeurs comme "Centre" en XAML vue directement;
  • si vous donnez un bien immobilier d'une valeur (donc il ne prend plus la valeur par défaut), la petite place à sa droite va devenir blanc, comme les propriétés d'alignement dans capture d'écran ci-dessus;
  • vous pouvez cliquer sur la flèche du bas (qui a "Afficher les propriétés avancées" info-bulle) 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 zone Rechercher dans le haut du panneau de 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 oeuvre prototype du gestionnaire d'événements dans le fichier code-behind:

  

Animations Authoring

Pour créer une animation, cliquez sur le signe plus dans panneau Objets et chronologie, l'option "Créer des ressources Storyboard" dialogue apparaîtra, demandant le nom du storyboard de nouvelles:

Mélange entre alors dans le mode d'enregistrement chronologique. Créons une animation qui permettra de doubler la taille du bouton. Les principales étapes de 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 bouton;
2. modifier les propriétés des éléments d'interface au KeyTime, comme décrit dans la section interface de création ci-dessus;
3. Répétez les étapes 1 et 2 pour chaque image clé;

Comme nous pouvons voir ci-dessous capture d'écran:

• dans le panneau Objets et chronologie:
  • le nom de l'échéancier en cours 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 la double flèche vers la gauche des nœuds dans le panneau des objets (bouton, RenderTransform, Échelle, scaleX, scaleY en dessous de capture d'écran) et les points blancs le long de la chronologie dans les changements de propriété montrent panneau Montage pour des objets à l'KeyTime;
  • nous pouvons utiliser les commandes de lecture dans le haut du panneau Montage, ou faites glisser le calendrier jaune, pour lancer l'animation;
• dans le plan de travail du Groupe de documents:
  • la bordure rouge, bouton d'enregistrement rouge, et le label rouge «enregistrement Timeline est sur" indiquent tous Blend est en mode d'enregistrement chronologique;
  • vous pouvez cliquer sur le bouton d'enregistrement rouge pour arrêter le mode d'enregistrement et revenir à l'interface utilisateur en mode de création;
• Dans le Panneau Propriétés:
  • valeur des propriétés de la cible: comme ScaleTransform.ScaleX est fixé à 2;

Mélange utilise XXXAnimationUsingKeyFrames et génère une image clé pour chaque objet / propriété / trio d'images clés. Nous pouvons affiner les propriétés d'une image clé elle-même en la sélectionnant dans le panneau Objets, puis définir 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 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 également affiner les propriétés du storyboard de la même manière, comme ci-dessous capture d'écran:

• Storyboard1 est sélectionné
• Propriétés AutoReverse et RepeatBehavior sont modifiés

C'est le mélange de code XAML généré pour simple animation 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 dans Blend auteur au lieu d'écrire XAML manuellement.

Authoring Template

La beauté et la puissance de WPF / Silverlight est la capacité de ré-modèle un contrôle. Il est assez facile à faire que dans Blend: sélectionnez un élément de menu du "Edit Control Parts (Template) -> Modifier le modèle" du menu contextuel, soit à partir de panneau Objets et chronologie, ou de la chapelure dans le plan de travail:

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

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

Percer dans les autres: sélectionnez l'état handicapées visuelles, et nous pouvons voir que le visuel désactivé dans plan de travail est généré par le storyboard de transition d'état visuel qui anime la propriété Opacité du DisabledVisualElement de 0% à 55% en 0 seconde:

S'il vous plaît noter que près du sommet de l'objet et le panneau Timeline, il montre Etat réduite au lieu d'un storyboard, mélange d'indication est en mode d'enregistrement d'Etat.

Maintenant, nous allons faire quelques changements au modèle par défaut en changeant la transition de l'état de focus visuel de fausser le bouton quand il est concentré:

• 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 des transitions d'état visuel et de cet état, et entre les deux Etats en particulier dans le groupe de l'état visuel);
• Blend est en mode enregistrement visuel Etat: concentré est l'état visuel sélectionné;
• ajouter un nouvel transformer pour biaiser 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é. La planche graphique WYSIWYG de création animation rend facile et intuitive.
• supprimer le composant de modèle dans le panneau Objets FocusVisualElement puisque nous n'avons pas besoin de plus du tout. Remarquez la bulle au dessus Mélange indiquant automatiquement supprimés de la transition de l'état visuel qui montre les 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 de l'interface utilisateur de type cible du style (ou son sous-type):

Authoring de style

Utiliser 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). Authoring style est similaire à authoring modèle discuté ci-dessus, sauf qu'il est beaucoup plus simple. Vous devez utiliser l'objet -> menu Modifier le style d'entrer dans le mode de création de style. Il n'ya pas de menu contextuel pour elle, ce qui rend d'authoring style moins détectable.

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

Puis Mélange entre en mode de création de style:

• le panneau Objets et chronologie affiche élément Style souligné la place de l'arbre de l'interface utilisateur logique;
• le fil d'Ariane sur le dessus du plan de travail 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 pinceau, un avis du plan de travail reflète le changement immédiat;
• la vue XAML du panneau de documents montre la simple XAML généré pour la création de style;

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

Gestion des ressources

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

• nous pouvons voir toutes les ressources dans les deux app.xaml (ressources mondiales) et actuel fichier XAML page.xaml qui est édité (ressources locales).
  • Ne sais pas pourquoi Storyboard1 créé dans la section Création d'animation ne s'affiche pas. Mélange bug ou une erreur d'utilisateur?
• nous pouvons éditer une ressource via son 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 visibilité), comme se déplaçant entre App.xaml et page.xaml, ou [UserControl] et le bouton.

Conclusion

Pour rappel, mélange rend l'interface utilisateur simple et intuitive de création:

• Boîte à outils (et d'une bibliothèque d'actifs) et plan de travail permet d'authoring WYSIWYG UI;
• panneau d'objets permet d'organiser tous les éléments d'interface utilisateur dans l'arborescence logique;
• panneau de propriétés simplifie le réglage de propriété avec les éditeurs;

Bâtiment au sommet de la création de l'interface utilisateur intuitive, simplifie Mélange de création d'animation en introduisant le mode d'enregistrement chronologique:

• Mélange utilise toujours XXXAnimationUsingKeyFrames, donc un storyboard est toujours une collection d'images clés;
• Mélange génère des images clés indirectement en laissant l'utilisateur de définir les propriétés à l'élément d'interface keyTimes via son interface intuitive de création d'AC;
• Mélange génère toujours les quatre se transforme comme ci-dessous, pour rendre son uniforme de génération des images clés pour transformer:

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

Au sommet de son interface utilisateur et la création d'animation, mélange simplifie création de modèle en introduisant le mode de création de modèle et le mode d'enregistrement d'Etat. Un modèle se compose de pièces de modèle et les états visuels. Composants de modèle sont juste une arborescence logique d'éléments de l'interface utilisateur, et les transitions d'état visuels sont des storyboards.

Authoring style est encore plus simple: un style est juste une collection de setters propriété. Mélange de style introduit le mode de création de distinguer entre les prestations ordinaires d'authoring et la création de style.

Alors Blend est un outil d'authoring grand XAML. Ce n'est pas seulement pour les concepteurs, mais peut aussi donner aux développeurs d'accroître la productivité grands. Espérons que ce message vous donne un bon aperçu de Blend et vous lancer dans l'exploration Blend, avec enthousiasme ). Merci!