Adición de un menú contextual en una ventana de herramientas - Visual Studio (Windows)

Article
12/15/2023

En este tutorial se coloca un menú contextual en una ventana de herramientas. Un menú contextual es un menú que aparece cuando un usuario hace clic con el botón derecho en un botón, un cuadro de texto o un fondo de ventana. Los comandos de un menú contextual se comportan igual que los comandos de otros menús o barras de herramientas. Para admitir un menú contextual, especifíquelo en el archivo .vsct y mostrarlo en respuesta al clic derecho del mouse.

Una ventana de herramientas consta de un control de usuario de WPF en una clase de ventana de herramientas personalizada que hereda de ToolWindowPane.

En este tutorial se muestra cómo crear un menú contextual como un menú de Visual Studio, declarando elementos de menú en el archivo .vsct y, a continuación, usando managed Package Framework para implementarlos en la clase que define la ventana de herramientas. Este enfoque facilita el acceso a los comandos de Visual Studio, los elementos de la interfaz de usuario y el modelo de objetos de Automation.

Como alternativa, si el menú contextual no tiene acceso a la funcionalidad de Visual Studio, puedes usar la ContextMenu propiedad de un elemento XAML en el control de usuario. Para obtener más información, vea ContextMenu.

Cree un proyecto VSIX denominado TWShortcutMenu y agregue una plantilla de ventana de herramientas denominada ShortcutMenu . Para obtener más información sobre cómo crear una ventana de herramientas, consulte Creación de una extensión con una ventana de herramientas.

Un menú contextual, como el que se muestra en este tutorial, permite al usuario seleccionar entre una lista de colores que se usan para rellenar el fondo de la ventana de herramientas.

En ShortcutMenuPackage.vsct, busque en el elemento GuidSymbol denominado guidShortcutMenuPackageCmdSet y declare el menú contextual, el grupo de menús contextuales y las opciones de menú. El elemento GuidSymbol debería tener este aspecto:

<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>

Justo antes del elemento Buttons, cree un elemento Menus y, a continuación, defina el menú contextual en él.

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

Un menú contextual no tiene un elemento primario porque no forma parte de un menú o barra de herramientas.

Cree un elemento Groups con un elemento Group que contenga los elementos de menú contextual y asocie el grupo al menú contextual.

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

En el elemento Buttons, defina los comandos individuales que aparecerán en el menú contextual. El elemento Buttons debe tener este aspecto:

<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>

En ShortcutMenuCommand.cs, agregue las definiciones para el GUID del conjunto de comandos, el menú contextual y los elementos de menú.
```
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;
```
Estos son los mismos identificadores de comando que se definen en la sección Símbolos del archivo ShortcutMenuPackage.vsct . El grupo de contexto no se incluye aquí porque solo es necesario en el archivo .vsct .

En esta sección se implementa el menú contextual y sus comandos.

En ShortcutMenu.cs, la ventana de herramientas puede obtener el servicio de comandos de menú, pero el control que contiene no puede. Los pasos siguientes muestran cómo hacer que el servicio de comandos de menú esté disponible para el control de usuario.

En ShortcutMenu.cs, agregue las siguientes directivas using:

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

Invalide el método Initialize() de la ventana de herramientas para obtener el servicio de comandos de menú y agregue el control y pase el servicio de comandos de menú al constructor:

protected override void Initialize()
{
    var commandService = (OleMenuCommandService)GetService(typeof(IMenuCommandService));
    Content = new ShortcutMenuControl(commandService);
}

En el constructor de la ventana de herramientas ShortcutMenu, quite la línea que agrega el control. El constructor debería tener ahora este aspecto:
```
public ShortcutMenu() : base(null)
{
    this.Caption = "ShortcutMenu";
    this.BitmapResourceID = 301;
    this.BitmapIndex = 1;
}
```

En ShortcutMenuControl.xaml.cs, agregue un campo privado para el servicio de comandos de menú y cambie el constructor de control para que tome el servicio de comandos de menú. A continuación, use el servicio de comandos de menú para agregar los comandos del menú contextual. El constructor ShortcutMenuControl debería tener ahora un aspecto similar al código siguiente. El controlador de comandos se definirá más adelante.

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));
    }
}

En ShortcutMenuControl.xaml, agregue un MouseRightButtonDown evento al elemento de nivel UserControl superior. El archivo XAML ahora debería tener este aspecto:

<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>

En ShortcutMenuControl.xaml.cs, agregue un código auxiliar para el controlador de eventos.

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

Agregue las siguientes directivas using al mismo archivo:

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

Implemente el evento de la MyToolWindowMouseRightButtonDown manera siguiente.

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);
    }
}

Esto crea un CommandID objeto para el menú contextual, identifica la ubicación del clic del mouse y abre el menú contextual en esa ubicación mediante el ShowContextMenu método .

Implemente el controlador de comandos.

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;
    }
}

En este caso, solo un método controla los eventos de todos los elementos de menú identificando CommandID y estableciendo el color de fondo en consecuencia. Si los elementos de menú contenían comandos no relacionados, habría creado un controlador de eventos independiente para cada comando.

Prueba de las características de la ventana de herramientas

Compile la solución y comience la depuración. Aparece la instancia experimental.
En la instancia experimental, haga clic en Ver u otras ventanas y, a continuación, haga clic en ShortcutMenu. Si lo hace, debería mostrar la ventana de herramientas.
Haga clic con el botón derecho en el cuerpo de la ventana de herramientas. Se debe mostrar un menú contextual que tenga una lista de colores.
Haga clic en un color en el menú contextual. El color de fondo de la ventana de herramientas debe cambiarse al color seleccionado.

Comparteix a través de

Agregar un menú contextual en una ventana de herramientas

Crear el paquete de menú contextual de la ventana de herramientas

Especificar el menú contextual

Implementación del menú contextual

Prueba de las características de la ventana de herramientas

Recursos addicionals

Comparteix a través de

Agregar un menú contextual en una ventana de herramientas

Crear el paquete de menú contextual de la ventana de herramientas

Especificar el menú contextual

Implementación del menú contextual

Prueba de las características de la ventana de herramientas

Contenido relacionado

Recursos addicionals