Ajout d’un menu contextuel dans une fenêtre d’outil - Visual Studio (Windows)

Article
12/15/2023

Cette procédure pas à pas place un menu contextuel dans une fenêtre d’outil. Un menu contextuel est un menu qui s’affiche lorsqu’un utilisateur clique avec le bouton droit sur un bouton, une zone de texte ou un arrière-plan de fenêtre. Les commandes d’un menu contextuel se comportent de la même façon que les commandes d’autres menus ou barres d’outils. Pour prendre en charge un menu contextuel, spécifiez-le dans le fichier .vsct et affichez-le en réponse au clic droit de la souris.

Une fenêtre d’outil se compose d’un contrôle utilisateur WPF dans une classe de fenêtre d’outil personnalisée qui hérite de ToolWindowPane.

Cette procédure pas à pas montre comment créer un menu contextuel en tant que menu Visual Studio, en déclarant des éléments de menu dans le fichier .vsct , puis en utilisant Managed Package Framework pour les implémenter dans la classe qui définit la fenêtre outil. Cette approche facilite l’accès aux commandes Visual Studio, aux éléments d’interface utilisateur et au modèle objet Automation.

Sinon, si votre menu contextuel n’accède pas aux fonctionnalités de Visual Studio, vous pouvez utiliser la ContextMenu propriété d’un élément XAML dans le contrôle utilisateur. Pour plus d’informations, consultez ContextMenu.

Créez un projet VSIX nommé TWShortcutMenu et ajoutez un modèle de fenêtre d’outil nommé ShortcutMenu à celui-ci. Pour plus d’informations sur la création d’une fenêtre d’outil, consultez Créer une extension avec une fenêtre d’outil.

Un menu contextuel tel que celui affiché dans cette procédure pas à pas permet à l’utilisateur de sélectionner dans une liste de couleurs utilisées pour remplir l’arrière-plan de la fenêtre outil.

Dans ShortcutMenuPackage.vsct, recherchez dans l’élément GuidSymbol nommé guidShortcutMenuPackageCmdSet et déclarez le menu contextuel, le groupe de menus contextuels et les options de menu. L’élément GuidSymbol doit maintenant ressembler à ceci :

<GuidSymbol name="guidShortcutMenuPackageCmdSet" value="{00000000-0000-0000-0000-0000}"> // your GUID here
    <IDSymbol name="ShortcutMenuCommandId" value="0x0100" />
    <IDSymbol name="ColorMenu" value="0x1000"/>
    <IDSymbol name="ColorGroup" value="0x1100"/>
    <IDSymbol name="cmdidRed" value="0x102"/>
    <IDSymbol name="cmdidYellow" value="0x103"/>
    <IDSymbol name="cmdidBlue" value="0x104"/>
</GuidSymbol>

Juste avant l’élément Buttons, créez un élément Menus, puis définissez le menu contextuel dans celui-ci.

<Menus>
  <Menu guid="guidShortcutMenuPackageCmdSet" id="ColorMenu" type="Context">
    <Strings>
      <ButtonText>Color change</ButtonText>
      <CommandName>ColorChange</CommandName>
    </Strings>
  </Menu>
</Menus>

Un menu contextuel n’a pas de parent, car il ne fait pas partie d’un menu ou d’une barre d’outils.

Créez un élément Groups avec un élément Group qui contient les éléments de menu contextuel et associez le groupe au menu contextuel.

<Groups>
    <Group guid="guidShortcutMenuPackageCmdSet" id="ColorGroup">
        <Parent guid="guidShortcutMenuPackageCmdSet" id="ColorMenu"/>
    </Group>
</Groups>

Dans l’élément Buttons, définissez les commandes individuelles qui apparaîtront dans le menu contextuel. L’élément Buttons doit ressembler à ceci :

<Buttons>
    <Button guid="guidShortcutMenuPackageCmdSet" id="ShortcutMenuCommandId" priority="0x0100" type="Button">
        <Parent guid="guidSHLMainMenu" id="IDG_VS_WNDO_OTRWNDWS1"/>
        <Icon guid="guidImages" id="bmpPic1" />
        <Strings>
            <ButtonText>ShortcutMenu</ButtonText>
        </Strings>
    </Button>

    <Button guid="guidShortcutMenuPackageCmdSet" id="cmdidRed" priority="1" type="Button">
        <Parent guid="guidShortcutMenuPackageCmdSet" id="ColorGroup" />
        <Strings>
            <ButtonText>Red</ButtonText>
        </Strings>
    </Button>

    <Button guid="guidShortcutMenuPackageCmdSet" id="cmdidYellow" priority="3" type="Button">
        <Parent guid="guidShortcutMenuPackageCmdSet" id="ColorGroup" />
        <Strings>
            <ButtonText>Yellow</ButtonText>
        </Strings>
    </Button>

    <Button guid="guidShortcutMenuPackageCmdSet" id="cmdidBlue" priority="5" type="Button">
        <Parent guid="guidShortcutMenuPackageCmdSet" id="ColorGroup" />
        <Strings>
            <ButtonText>Blue</ButtonText>
        </Strings>
    </Button>
</Buttons>

Dans ShortcutMenuCommand.cs, ajoutez les définitions du GUID du jeu de commandes, du menu contextuel et des éléments de menu.
```
public const string guidShortcutMenuPackageCmdSet = "00000000-0000-0000-0000-00000000"; // your GUID will differ
public const int ColorMenu = 0x1000;
public const int cmdidRed = 0x102;
public const int cmdidYellow = 0x103;
public const int cmdidBlue = 0x104;
```
Il s’agit des MÊMES ID de commande que ceux définis dans la section Symboles du fichier ShortcutMenuPackage.vsct . Le groupe de contexte n’est pas inclus ici, car il est requis uniquement dans le fichier .vsct .

Cette section implémente le menu contextuel et ses commandes.

Dans ShortcutMenu.cs, la fenêtre outil peut obtenir le service de commande de menu, mais le contrôle qu’il contient ne peut pas. Les étapes suivantes montrent comment rendre le service de commande de menu disponible pour le contrôle utilisateur.

Dans ShortcutMenu.cs, ajoutez les directives using suivantes :

using Microsoft.VisualStudio.Shell;
using System.ComponentModel.Design;

Remplacez la méthode Initialize() de la fenêtre d’outil pour obtenir le service de commande de menu et ajouter le contrôle, en passant le service de commande de menu au constructeur :
```
protected override void Initialize()
{
    var commandService = (OleMenuCommandService)GetService(typeof(IMenuCommandService));
    Content = new ShortcutMenuControl(commandService);
}
```
Dans le constructeur de la fenêtre de l’outil ShortcutMenu, supprimez la ligne qui ajoute le contrôle. Le constructeur doit maintenant ressembler à ceci :
```
public ShortcutMenu() : base(null)
{
    this.Caption = "ShortcutMenu";
    this.BitmapResourceID = 301;
    this.BitmapIndex = 1;
}
```

Dans ShortcutMenuControl.xaml.cs, ajoutez un champ privé pour le service de commandes de menu et modifiez le constructeur de contrôle pour prendre le service de commande de menu. Utilisez ensuite le service de commandes de menu pour ajouter les commandes du menu contextuel. Le constructeur ShortcutMenuControl doit maintenant ressembler au code suivant. Le gestionnaire de commandes sera défini ultérieurement.

public ShortcutMenuControl(OleMenuCommandService service)
{
    this.InitializeComponent();
    commandService = service;

    if (null !=commandService)
    {
        // Create an alias for the command set guid.
        Guid guid = new Guid(ShortcutMenuCommand.guidShortcutMenuPackageCmdSet);

        // Create the command IDs.
        var red = new CommandID(guid, ShortcutMenuCommand.cmdidRed);
        var yellow = new CommandID(guid, ShortcutMenuCommand.cmdidYellow);
        var blue = new CommandID(guid, ShortcutMenuCommand.cmdidBlue);

        // Add a command for each command ID.
        commandService.AddCommand(new MenuCommand(ChangeColor, red));
        commandService.AddCommand(new MenuCommand(ChangeColor, yellow));
        commandService.AddCommand(new MenuCommand(ChangeColor, blue));
    }
}

Dans ShortcutMenuControl.xaml, ajoutez un MouseRightButtonDown événement à l’élément de niveau UserControl supérieur. Le fichier XAML doit maintenant ressembler à ceci :

<UserControl x:Class="TWShortcutMenu.ShortcutMenuControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        Background="{DynamicResource VsBrush.Window}"
        Foreground="{DynamicResource VsBrush.WindowText}"
        mc:Ignorable="d"
        d:DesignHeight="300" d:DesignWidth="300"
        Name="MyToolWindow"
        MouseRightButtonDown="MyToolWindow_MouseRightButtonDown">
    <Grid>
        <StackPanel Orientation="Vertical">
            <TextBlock Margin="10" HorizontalAlignment="Center">ShortcutMenu</TextBlock>
        </StackPanel>
    </Grid>
</UserControl>

Dans ShortcutMenuControl.xaml.cs, ajoutez un stub pour le gestionnaire d’événements.

private void MyToolWindow_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
. . .
}

Ajoutez les directives using suivantes au même fichier :

using Microsoft.VisualStudio.Shell;
using System.ComponentModel.Design;
using System;
using System.Windows.Input;
using System.Windows.Media;

Implémentez l’événement MyToolWindowMouseRightButtonDown comme suit.

private void MyToolWindow_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
    if (null != commandService)
    {
        CommandID menuID = new CommandID(
            new Guid(ShortcutMenuCommand.guidShortcutMenuPackageCmdSet),
            ShortcutMenuCommand.ColorMenu);
        Point p = this.PointToScreen(e.GetPosition(this));
        commandService.ShowContextMenu(menuID, (int)p.X, (int)p.Y);
    }
}

Cela crée un CommandID objet pour le menu contextuel, identifie l’emplacement du clic de souris et ouvre le menu contextuel dans cet emplacement à l’aide de la ShowContextMenu méthode.

Implémentez le gestionnaire de commandes.

private void ChangeColor(object sender, EventArgs e)
{
    var mc = sender as MenuCommand;

    switch (mc.CommandID.ID)
    {
        case ShortcutMenuCommand.cmdidRed:
            MyToolWindow.Background = Brushes.Red;
            break;
        case ShortcutMenuCommand.cmdidYellow:
            MyToolWindow.Background = Brushes.Yellow;
            break;
        case ShortcutMenuCommand.cmdidBlue:
            MyToolWindow.Background = Brushes.Blue;
            break;
    }
}

Dans ce cas, une seule méthode gère les événements pour tous les éléments de menu en identifiant et CommandID en définissant la couleur d’arrière-plan en conséquence. Si les éléments de menu contenaient des commandes non liées, vous avez créé un gestionnaire d’événements distinct pour chaque commande.

Tester les fonctionnalités de la fenêtre outil

Générez le projet et commencez le débogage. L’instance expérimentale s’affiche.
Dans l’instance expérimentale, cliquez sur Affichage / Autres Fenêtres, puis sur ShortcutMenu. Cette opération doit afficher la fenêtre de votre outil.
Cliquez avec le bouton droit dans le corps de la fenêtre outil. Un menu contextuel contenant une liste de couleurs doit être affiché.
Cliquez sur une couleur dans le menu contextuel. La couleur d’arrière-plan de la fenêtre outil doit être remplacée par la couleur sélectionnée.

Ajouter un menu contextuel dans une fenêtre d’outil

Créer le package de menu contextuel de la fenêtre outil

Spécification du menu contextuel

Implémentation du menu contextuel

Tester les fonctionnalités de la fenêtre outil

Ressources supplémentaires

Ajouter un menu contextuel dans une fenêtre d’outil

Créer le package de menu contextuel de la fenêtre outil

Spécification du menu contextuel

Implémentation du menu contextuel

Tester les fonctionnalités de la fenêtre outil

Contenu connexe

Ressources supplémentaires