Définition d'une image d'arrière-plan dans un schémaSetting a Background Image on a Diagram

Dans le Kit de développement logiciel (SDK) de visualisation et de modélisation de Visual StudioVisual Studio, vous pouvez définir l'image d'arrière-plan d'un concepteur généré à l'aide de code personnalisé.In Visual StudioVisual Studio Visualization and Modeling SDK, you can set the background image for a generated designer by using custom code.

Définition de l'image d'arrière-planSetting the background image

Pour définir une image d'arrière-plan pour un concepteur généréTo set a background image for a generated designer

  1. Copiez le fichier image que vous souhaitez utiliser comme arrière-plan du diagramme dans le répertoire Dsl\Resources du projet actif.Copy the image file that you want to use as the diagram's background into the Dsl\Resources directory for the current project.

  2. Dans l’Explorateur de solutions, cliquez sur le dossier Dsl\Resources, pointez sur ajouter, puis cliquez sur élément existant.In Solution Explorer, right-click the Dsl\Resources folder, point to Add, and then click Existing Item.

  3. Dans le ajouter un élément existant boîte de dialogue, accédez au dossier Dsl\Resources.In the Add Existing Item dialog box, browse to the Dsl\Resources folder.

  4. Dans le types de fichiers , cliquez sur fichiers Image.In the Files of type list, click Image Files.

  5. Cliquez sur le fichier image que vous avez copié dans le répertoire, puis cliquez sur ajouter.Click the image file that you copied to the directory, and then click Add.

  6. Dsl d’avec le bouton droit, puis cliquez sur propriétés pour ouvrir les propriétés du projet Dsl.Right-click Dsl, and click Properties to open the properties of the Dsl project.

  7. Sur le ressources , cliquez sur ce projet ne contient pas un fichier de ressources par défaut. Cliquez ici pour en créer un.On the Resources tab, click This project does not contain a default resources file. Click here to create one.

  8. Ajoutez le fichier image au fichier de ressources en faisant glisser l’image à partir de l’Explorateur de solutions dans la fenêtre de ressources.Add the image file to the resource file by dragging the picture from Solution Explorer into the resources window.

  9. Ouvrez le menu fichier, puis cliquez sur l'option d'enregistrement des propriétés du projet.Open the File menu, and click the option to save the project properties.

  10. Vérifiez que le fichier Dsl\Properties\Resources.resx existe et que le fichier Resources.Designer.cs se trouve en dessous.Verify that the file Dsl\Properties\Resources.resx exists and has the file Resources.Designer.cs under it.

  11. Si Resources.Designer.cs est manquant, cliquez sur le fichier Resources.resx dans l’Explorateur de solutions.If Resources.Designer.cs is missing, click the file Resources.resx in Solution Explorer.

  12. Dans le propriétés , configurez la Custom Tool propriété ResXFileCodeGenerator.In the Properties window, set the Custom Tool property to ResXFileCodeGenerator.

  13. Dans l’Explorateur de solutions, cliquez sur le projet Dsl, pointez sur ajouter, puis cliquez sur nouveau dossier.In Solution Explorer, right-click the Dsl project, point to Add, and click New Folder.

  14. Nommez le dossier personnalisé.Name the folder Custom.

  15. Cliquez sur le dossier personnalisé, pointez sur ajouter, puis cliquez sur un nouvel élément.Right-click the Custom folder, point to Add, and click New Item.

  16. Dans le ajouter un nouvel élément boîte de dialogue le modèles , cliquez sur fichier de Code.In the Add New Item dialog box, in the Templates list, click Code File.

  17. Dans le nom , tapez BackgroundImage.cs, puis cliquez sur ajouter.In the Name box, type BackgroundImage.cs, and click Add.

  18. Copiez le code suivant dans le fichier BackgroundImage.cs, en ajustant l'espace de noms, le nom de la classe de diagramme et le nom de la ressource de fichier image.Copy the following code to the BackgroundImage.cs file, adjusting namespace, diagram class name, and image file resource name.

    Remplacez « MyDiagramClass » par le nom de la classe de diagramme partielle définie dans Dsl\GeneratedCode\Diagrams.cs.Replace "MyDiagramClass" with the name of the diagram partial class that is defined in Dsl\GeneratedCode\Diagrams.cs. Vous pouvez aussi récupérer l'espace de noms correct à partir du fichier Dsl\GeneratedCode\Diagrams.cs.You can also retrieve the correct namespace from the file Dsl\GeneratedCode\Diagrams.cs.

    using System;  
    using Microsoft.VisualStudio.Modeling.Diagrams;  
    
    // Fix the namespace:  
    namespace Fabrikam.MyLanguage  
    {  
      // Fix the Diagram Class name - get it from GeneratedCode\Diagram.cs  
    
      public partial class Language29Diagram  
      {  
        protected override void InitializeInstanceResources()  
        {  
          // Fix the Resources namespace and the Image resource name:  
          ImageField backgroundField = new ImageField("background",  
              Fabrikam.MyLanguage.Properties.Resources.MyPicture);  
    
          backgroundField.DefaultFocusable = false;  
          backgroundField.DefaultSelectable = false;  
          backgroundField.DefaultVisibility = true;  
          backgroundField.DefaultUnscaled = false;  
    
          shapeFields.Add(backgroundField);  
    
          backgroundField.AnchoringBehavior  
            .SetTopAnchor(AnchoringBehavior.Edge.Top, 0.01);  
          backgroundField.AnchoringBehavior  
            .SetLeftAnchor(AnchoringBehavior.Edge.Left, 0.01);  
          backgroundField.AnchoringBehavior  
            .SetRightAnchor(AnchoringBehavior.Edge.Right, 0.01);  
          backgroundField.AnchoringBehavior  
            .SetBottomAnchor(AnchoringBehavior.Edge.Bottom, 0.01);  
    
          base.InitializeInstanceResources();  
        }  
      }  
    }  
    

    Pour plus d’informations sur la personnalisation du modèle avec le code de programme, consultez navigation et la mise à jour d’un modèle de Code de programme.For more information about customizing the model with program code, see Navigating and Updating a Model in Program Code.

Voir aussiSee Also

Définition des formes et connecteurs Defining Shapes and Connectors
Personnalisation des champs de texte et Image Customizing Text and Image Fields
Navigation et la mise à jour d’un modèle de Code de programme Navigating and Updating a Model in Program Code
Écriture de code pour personnaliser un langage spécifique à un domaineWriting Code to Customise a Domain-Specific Language

---

Dans Visual Studio 2017, le SDK de Transformation de modèle de texte et le SDK de modélisation de Visual Studio sont installés automatiquement lorsque vous installez des fonctionnalités spécifiques de Visual Studio.In Visual Studio 2017, the Text Template Transformation SDK and the Visual Studio Modeling SDK are installed automatically when you install specific features of Visual Studio. Pour plus d’informations, consultez ce billet de blog.For more details, see this blog post.