Ajouter des icônes aux commandes de menu

Les commandes peuvent apparaître dans les menus et les barres d’outils. Dans les barres d’outils, il est courant qu’une commande s’affiche uniquement avec une icône (pour économiser de l’espace) tandis que dans les menus, une commande apparaît généralement avec une icône et du texte.

Les icônes sont de 16 pixels de large de 16 pixels et peuvent être soit une profondeur de couleur de 8 bits (256 couleurs) ou une profondeur de couleur 32 bits (couleur vraie). Les icônes de couleur 32 bits sont préférées. Les icônes sont généralement organisées dans une seule ligne horizontale dans une seule bitmap, bien que plusieurs bitmaps soient autorisées. Cette bitmap est déclarée dans le fichier .vsct ainsi que les icônes individuelles disponibles dans la bitmap. Pour plus d’informations, consultez la référence de l’élément Bitmaps.

Ajouter une icône à une commande

La procédure suivante suppose que vous disposez d’un projet VSPackage existant avec une commande de menu. Pour savoir comment procéder, consultez Créer une extension avec une commande de menu.

  1. Créez une bitmap avec une profondeur de couleur de 32 bits. Une icône est toujours de 16 x 16, de sorte que cette bitmap doit être de 16 pixels de haut et un multiple de 16 pixels de large.

    Chaque icône est placée sur la bitmap en regard de l’autre dans une seule ligne. Utilisez le canal alpha pour indiquer des emplacements de transparence dans chaque icône.

    Si vous utilisez une profondeur de couleur 8 bits, utilisez magenta, RGB(255,0,255)comme transparence. Toutefois, les icônes de couleur 32 bits sont préférées.

  2. Copiez le fichier d’icône dans le répertoire Ressources de votre projet VSPackage. Dans le Explorateur de solutions, ajoutez l’icône au projet. (Sélectionner Ressources, puis, dans le menu contextuel, cliquez sur Ajouter, puis Élément existant, puis sélectionnez votre fichier d’icône.)

  3. Ouvrez le fichier .vsct dans l’éditeur.

  4. Ajoutez un GuidSymbol élément portant le nom de testIcon. Créez un GUID (Outils>Créer un GUID, puis sélectionnez Format du Registre, puis cliquez sur Copier) et collez-le dans l’attribut.value Le résultat devrait ressembler à ceci :

    <!-- Create your own GUID -->
    <GuidSymbol name="testIcon" value="{00000000-0000-0000-0000-0000}">
    
  5. Ajoutez une <IDSymbol> pour l’icône. L’attribut name est l’ID de l’icône et indique value sa position sur la bande, le cas échéant. S’il n’y a qu’une seule icône, ajoutez 1. Le résultat devrait ressembler à ceci :

    <!-- Create your own GUID -->
    <GuidSymbol name="testIcon" value="{00000000-0000-0000-0000-0000}">
        <IDSymbol name="testIcon1" value="1" />
    </GuidSymbol>
    
  6. Créez une <Bitmap> section dans <Commands> la <Bitmaps> section du fichier .vsct pour représenter la bitmap contenant les icônes.

    • Définissez la guid valeur sur le nom de l’élément <GuidSymbol> que vous avez créé à l’étape précédente.

    • Définissez la href valeur sur le chemin d’accès relatif du fichier bitmap (dans ce cas , Resources\<icon file name>).

    • Définissez la usedList valeur sur l’IDSymbol que vous avez créé précédemment. Cet attribut spécifie une liste délimitée par des virgules des icônes à utiliser dans vsPackage. Les icônes qui ne figurent pas dans la liste sont exclues de la compilation de formulaires.

      Le bloc Bitmap doit ressembler à ceci :

      <Bitmap guid="testIcon" href="Resources\<icon file name>" usedList="testIcon1"/>
      
  7. Dans l’élément existant <Button> , définissez l’élément Icon sur les valeurs GUIDSymbol et IDSymbol que vous avez créées précédemment. Voici un exemple d’élément Button avec ces valeurs :

    <Button guid="guidAddIconCmdSet" id="cmdidMyCommand" priority="0x0100" type="Button">
        <Parent guid="guidAddIconCmdSet" id="MyMenuGroup" />
        <Icon guid="testIcon" id="testIcon1" />
        <Strings>
            <ButtonText>My Command name</ButtonText>
        </Strings>
    </Button>
    
  8. Testez votre icône. Générez le projet et commencez le débogage. Dans l’instance expérimentale, recherchez la commande. Il doit afficher l’icône que vous avez ajoutée.