Partager via

Importer du code XAML exporté depuis Expression Design

  • Article

Vous pouvez enregistrer vos conceptions graphiques Microsoft Expression Design en tant que fichier XAML utilisable dans Blend for Visual Studio. Cette fonctionnalité permet d’utiliser les conceptions graphiques dans des animations, de les convertir en éléments d’interface utilisateur comme des images d’arrière-plan, etc.

Conseil

Pour plus d'informations sur l'exportation d'illustration depuis Expression Design, consultez « exporter des fichiers XAML » dans le Guide utilisateur Expression Design.

Notes

Cette rubrique référence Blend et Expression Design.

Pour exporter des conceptions graphiques à partir d’Expression Design

  1. Ouvrez un fichier ClipArt dans Expression Design (vous pouvez ouvrir des Exemples d'Expression Design à partir du menu ? (Aide)).

  2. Si vous souhaitez exporter des sections, sélectionnez l'outil Section dans le panneau Outils, dessinez un rectangle autour de la zone des éléments graphiques que vous voulez exporter puis, sous Modifier la section dans le panneau Propriétés, définissez les propriétés de la section (telles que le Nom). Pour plus d'informations sur les sections, voir « Créer et exporter des sections » dans le Guide de l'utilisateur Expression Design.

  3. Dans le menu Fichier, cliquez sur Exporter. La boîte de dialogue Exporter apparaît.

  4. Sous Éléments à exporter, effectuez l’une des opérations suivantes :

    • Document entier   Exporte toutes les conceptions graphiques du document.

    • Objets sélectionnés   Exporte uniquement les éléments sélectionnés sur la planche graphique.

    • Sections   Exporte uniquement les sections que vous avez créées. Vous pouvez éventuellement modifier les propriétés de chaque section qui s’affiche.

  5. En regard de Format, sélectionnez l’une des options suivantes :

    • Canevas Silverlight XAML   Sélectionnez cette option si vous exportez le document entier ou les objets sélectionnés comme un document unique canevas XAML Silverlight.

    • PNG, JPEGou Canevas Silverlight XAML, si vous exportez des sections, sélectionnez une des options suivantes pour chaque section. Définissez la propriété Format pour plusieurs sections à l'aide de la touche Maj enfoncée pour sélectionner plusieurs sections avant que vous définissiez la propriété Format.

      Sélectionnez ensuite le conteneur Canevas Silverlight XAML de la liste en regard de Nom de conteneur, puis tapez un nom pour votre document canevas XAML Silverlight dans la zone de texte Nom de conteneur. Si vous ne sélectionnez pas un conteneur, chaque section est exportée dans un fichier séparé selon sa propriété Format.

    • Dictionnaire de ressources WPF XAML   Sélectionnez cette option si vous exportez le document entier ou des objets sélectionnés. Définissez ensuite la propriété Grouper par pour exporter une ressource par couche (Couches), une ressource par objet de niveau supérieur (Objets), ou une ressource pour le document entier ou les objets sélectionnés (Document). Par exemple, si chaque calque dans votre document représente un bouton dans un futur projet Blend, sélectionnez Couches.

    • Pinceau de dessin WPF XAML   Si vous exportez des sections, sélectionnez cette option pour chaque section. Définissez la propriété Format pour plusieurs sections à l'aide de la touche Maj enfoncée pour sélectionner plusieurs sections avant que vous définissiez la propriété Format.

      Notes

      Créez une ressource pinceau de dessin pour chaque section dans Expression Design.Par exemple, vous pouvez exporter un secteur au format PNG, et réexportez le fichier PNG dans un conteneur de dictionnaire de ressources XAML WPF.Le fichier PNG est exporté dans un sous-dossier dans le même répertoire que le fichier de dictionnaire de ressources exporté, et le fichier PNG est référencé comme ressource pinceau image et non comme une ressource pinceau de dessin.Utilisez des ressources pinceau image pour peindre des objets dans un projet Blend comme des ressources pinceau de dessin.

      Sélectionnez ensuite le conteneur Dictionnaire de ressources WPF XAML de la liste en regard de Nom de conteneur, puis tapez un nom pour votre dictionnaire de ressources dans la zone de texte Nom de conteneur. Si vous ne sélectionnez pas un conteneur, chaque section est exportée comme ressource pinceau dans son propre dictionnaire de ressources individuel.

    • Canevas WPF XAML   Sélectionnez cette option si vous exportez le document entier ou les objets sélectionnés comme un document unique canevas XAML WPF.

    • PNG, JPEG, GIF, TIFF, BMPou Canevas WPF XAML, si vous exportez des sections, sélectionnez une des options suivantes pour chaque section. Définissez la propriété Format pour plusieurs sections à l'aide de la touche Maj enfoncée pour sélectionner plusieurs sections avant que vous définissiez la propriété Format.

      Sélectionnez ensuite le conteneur Canevas WPF XAML de la liste en regard de Nom de conteneur, puis tapez un nom pour votre document canevas XAML Silverlight dans la zone de texte Nom de conteneur. Si vous ne sélectionnez pas un conteneur, chaque section est exportée dans un fichier séparé selon sa propriété Format.

  6. Définissez les autres propriétés que vous préférez, par exemple rendre les objets texte modifiables après les avoir importés dans Blend. Pour plus d'informations sur les propriétés de cette boîte de dialogue, voir la rubrique « XAML » dans le Guide de l'utilisateur de Microsoft Expression Design.

  7. En bas de la boîte de dialogue, en regard du champ Emplacement, tapez le chemin d’accès du dossier dans lequel vous voulez exporter le fichier. Définissez également les options suivantes :

    • Si vous décidez d’exporter le document entier ou des objets sélectionnés, entrez également un nom pour votre fichier.

    • Si vous décidez d’exporter des Sections, vous pouvez éventuellement sélectionner un panneau de disposition qui contiendra tous les objets.

  8. Cliquez sur Exporter tout pour exporter votre fichier (ou vos fichiers).

Pour importer les conceptions graphiques dans Blend

  1. Dans un projet ouvert dans Blend, cliquez sur Ajouter un élément existant dans le menu Projet.

  2. Dans la boîte de dialogue Ajouter un élément existant, accédez aux fichiers XAML exportés, sélectionnez-les, puis cliquez sur Ouvrir.

    Notes

    Seul un canevas Silverlight XAML exporté peut être importé dans un projet Silverlight.

    Le fichier est ajouté dans le panneau Projets. Si vous avez exporté une conception graphique en tant que Pinceau de dessin WPF XAML, celle-ci apparaît également dans le panneau Ressources.

  3. Effectuez l’une des opérations suivantes pour ajouter les composants importés à la planche graphique :

    • Si vous avez sélectionné l'option Canevas Silverlight XAML, vous pouvez faire des ajouts dans le document ou copier et coller des objets dans un autre document XAML.

    • Si vous avez sélectionné l’option Pinceau de dessin WPF XAML, appliquez les ressources aux propriétés de pinceau des objets de votre projet. Par exemple, vous pouvez faire glisser une ressource DrawingBrush sur un objet TextBlock et la définir en tant que propriété Background.

      JJ170726.496874e2-379b-428a-a9bb-7264dc496036(fr-fr,VS.120).png

      Pour plus d’informations sur la procédure à suivre pour appliquer des ressources, voir Appliquer ou supprimer une ressource dans Blend.

      Conseil

      Veillez à ce que les noms des ressources pinceau de dessin importées diffèrent de ceux des ressources de votre projet Blend.Vous pouvez renommer des objets de ressources dans le panneau Ressources en cliquant avec le bouton droit sur le nom, puis en sélectionnant Renommer.

    • Si vous avez sélectionné l'option Canevas WPF XAML, vous pouvez faire des ajouts dans le document, utiliser le document comme page de démarrage pour votre application (voir Définir un document de démarrage pour un projet dans Blend), ou bien copier et coller des objets dans un autre document XAML. Vous pouvez également ouvrir ce fichier en mode Création dans Blend, cliquer avec le bouton droit sur un ou plusieurs objets, puis créer un contrôle de bouton (voir Créer un contrôle utilisateur à partir d'objets existants) ou un contrôle utilisateur (voir ).