Compartir vía


Agregar una ventana de herramientas

En este tutorial aprenderá a crear una ventana de herramientas e integrarla en Visual Studio de las siguientes maneras:

  • Agregue un control a la ventana de herramientas.

  • Agregue una barra de herramientas a una ventana de herramientas.

  • Agregue un comando a la barra de herramientas.

  • Implemente los comandos.

  • Establezca la posición predeterminada para la ventana de herramientas.

Requisitos previos

El SDK de Visual Studio se incluye como una característica opcional en la configuración de Visual Studio. Para obtener más información, consulte Instalación del SDK de Visual Studio.

Creación de una ventana de herramientas

  1. Cree un proyecto denominado FirstToolWin mediante la plantilla VSIX y agregue una plantilla de elemento de ventana de herramientas personalizada denominada FirstToolWindow.

    Nota:

    Para obtener más información sobre cómo crear una extensión con una ventana de herramientas, consulte Creación de una extensión con una ventana de herramientas.

Agregar un control a la ventana de herramientas

  1. Quite el control predeterminado. Abra FirstToolWindowControl.xaml y elimine el botón Hacer clic en mí.

  2. En el Cuadro de herramientas, expanda la sección Todos los controles WPF y arrastre el control Elemento multimedia al formulario FirstToolWindowControl . Seleccione el control y, en la ventana Propiedades , asigne a este elemento el nombre mediaElement1.

Agregar una barra de herramientas a la ventana de herramientas

Al agregar una barra de herramientas de la siguiente manera, se garantiza que sus degradados y colores sean coherentes con el resto del IDE.

  1. En Explorador de soluciones, abra FirstToolWindowPackage.vsct. El archivo .vsct define los elementos de la interfaz gráfica de usuario (GUI) en la ventana de herramientas mediante XML.

  2. En la <Symbols> sección , busque el <GuidSymbol> nodo cuyo name atributo es guidFirstToolWindowPackageCmdSet. Agregue los dos elementos <IDSymbol> siguientes a la lista de elementos de <IDSymbol> este nodo para definir una barra de herramientas y un grupo de barras de herramientas.

    <IDSymbol name="ToolbarID" value="0x1000" />
    <IDSymbol name="ToolbarGroupID" value="0x1001" />
    
  3. Justo encima de la <Buttons> sección, cree una <Menus> sección similar a la siguiente:

    <Menus>
        <Menu guid="guidFirstToolWindowPackageCmdSet" id="ToolbarID" priority="0x0000" type="ToolWindowToolbar">
            <Parent guid="guidFirstToolWindowPackageCmdSet" id="ToolbarID" />
            <Strings>
                <ButtonText>Tool Window Toolbar</ButtonText>
                <CommandName>Tool Window Toolbar</CommandName>
            </Strings>
        </Menu>
    </Menus>
    

    Hay varios tipos diferentes de menús. Este menú es una barra de herramientas de una ventana de herramientas, definida por su type atributo . La guid configuración y id componen el identificador completo de la barra de herramientas. Normalmente, el <Parent> de un menú es el grupo contenedor. Sin embargo, una barra de herramientas se define como su propio elemento primario. Por lo tanto, se usa el mismo identificador para los <Menu> elementos y <Parent> . El priority atributo es solo '0'.

  4. Las barras de herramientas se asemejan a los menús de muchas maneras. Por ejemplo, al igual que un menú puede tener grupos de comandos, las barras de herramientas también pueden tener grupos. (En los menús, los grupos de comandos están separados por líneas horizontales. En las barras de herramientas, los grupos no están separados por divisores visuales).

    Agregue una <Groups> sección que contenga un <Group> elemento . Esto define el grupo cuyo identificador declaró en la <Symbols> sección . Agregue la <Groups> sección justo después de la <Menus> sección.

    <Groups>
        <Group guid="guidFirstToolWindowPackageCmdSet" id="ToolbarGroupID" priority="0x0000">
            <Parent guid="guidFirstToolWindowPackageCmdSet" id="ToolbarID" />
        </Group>
    </Groups>
    

    Al establecer el GUID primario y el identificador en el GUID y el identificador de la barra de herramientas, agregue el grupo a la barra de herramientas.

Agregar un comando a la barra de herramientas

Agregue un comando a la barra de herramientas, que se muestra como un botón.

  1. En la <Symbols> sección , declare los siguientes elementos IDSymbol justo después de las declaraciones de la barra de herramientas y del grupo de barras de herramientas.

    <IDSymbol name="cmdidWindowsMedia" value="0x0100" />
    <IDSymbol name="cmdidWindowsMediaOpen" value="0x132" />
    
  2. Agregue un elemento Button dentro de la <Buttons> sección . Este elemento aparecerá en la barra de herramientas de la ventana de herramientas, con un icono de búsqueda (lupa).

    <Button guid="guidFirstToolWindowPackageCmdSet" id="cmdidWindowsMediaOpen" priority="0x0101" type="Button">
        <Parent guid="guidFirstToolWindowPackageCmdSet" id="ToolbarGroupID"/>
        <Icon guid="guidImages" id="bmpPicSearch" />
        <Strings>
            <CommandName>cmdidWindowsMediaOpen</CommandName>
            <ButtonText>Load File</ButtonText>
        </Strings>
    </Button>
    
  3. Abra FirstToolWindowCommand.cs y agregue las siguientes líneas en la clase justo después de los campos existentes.

    public const string guidFirstToolWindowPackageCmdSet = "00000000-0000-0000-0000-0000";  // get the GUID from the .vsct file
    public const uint cmdidWindowsMedia = 0x100;
    public const int cmdidWindowsMediaOpen = 0x132;
    public const int ToolbarID = 0x1000;
    

    Esto hace que los comandos estén disponibles en el código.

Agregar una propiedad MediaPlayer a FirstToolWindowControl

Desde los controladores de eventos de los controles de la barra de herramientas, el código debe poder acceder al control Reproductor multimedia, que es un elemento secundario de la clase FirstToolWindowControl.

En Explorador de soluciones, haga clic con el botón derecho en FirstToolWindowControl.xaml, haga clic en Ver código y agregue el código siguiente a la clase FirstToolWindowControl.

public System.Windows.Controls.MediaElement MediaPlayer
{
    get { return mediaElement1; }
}

Creación de una instancia de la ventana de herramientas y la barra de herramientas

Agregue una barra de herramientas y un comando de menú que invoque el cuadro de diálogo Abrir archivo y reproduzca el archivo multimedia seleccionado.

  1. Abra FirstToolWindow.cs y agregue las siguientes using directivas:

    using System.ComponentModel.Design;
    using System.Windows.Forms;
    using Microsoft.VisualStudio.Shell.Interop;
    
  2. Dentro de la clase FirstToolWindow, agregue una referencia pública al control FirstToolWindowControl.

    public FirstToolWindowControl control;
    
  3. Al final del constructor, establezca esta variable de control en el control recién creado.

    control = new FirstToolWindowControl();
    base.Content = control;
    
  4. Cree una instancia de la barra de herramientas dentro del constructor.

    this.ToolBar = new CommandID(new Guid(FirstToolWindowCommand.guidFirstToolWindowPackageCmdSet),
        FirstToolWindowCommand.ToolbarID);
    this.ToolBarLocation = (int)VSTWT_LOCATION.VSTWT_TOP;
    
  5. En este punto, el constructor FirstToolWindow debe tener este aspecto:

    public FirstToolWindow() : base(null)
    {
        this.Caption = "FirstToolWindow";
        this.BitmapResourceID = 301;
        this.BitmapIndex = 1;
        control = new FirstToolWindowControl();
        base.Content = control;
        this.ToolBar = new CommandID(new Guid(FirstToolWindowCommand.guidFirstToolWindowPackageCmdSet),
            FirstToolWindowCommand.ToolbarID);
            this.ToolBarLocation = (int)VSTWT_LOCATION.VSTWT_TOP;
    }
    
  6. Agregue el comando de menú a la barra de herramientas. En la clase FirstToolWindowCommand.cs, agregue la siguiente directiva using:

    using System.Windows.Forms;
    
  7. En la clase FirstToolWindowCommand, agregue el código siguiente al final del método ShowToolWindow(). El comando ButtonHandler se implementará en la sección siguiente.

    // Create the handles for the toolbar command.
    var mcs = this.ServiceProvider.GetService(typeof(IMenuCommandService)) as OleMenuCommandService;
    var toolbarbtnCmdID = new CommandID(new Guid(FirstToolWindowCommand.guidFirstToolWindowPackageCmdSet),
        FirstToolWindowCommand.cmdidWindowsMediaOpen);
    var menuItem = new MenuCommand(new EventHandler(
        ButtonHandler), toolbarbtnCmdID);
    mcs.AddCommand(menuItem);
    

Para implementar un comando de menú en la ventana de herramientas

  1. En la clase FirstToolWindowCommand, agregue un método ButtonHandler que invoque el cuadro de diálogo Abrir archivo . Cuando se ha seleccionado un archivo, reproduce el archivo multimedia.

  2. En la clase FirstToolWindowCommand, agregue una referencia privada a la ventana FirstToolWindow que se crea en el método FindToolWindow().

    private FirstToolWindow window;
    
  3. Cambie el método ShowToolWindow() para establecer la ventana que definió anteriormente (de modo que el controlador de comandos ButtonHandler pueda acceder al control de ventana. Este es el método ShowToolWindow() completo.

    private void ShowToolWindow(object sender, EventArgs e)
    {
        window = (FirstToolWindow) this.package.FindToolWindow(typeof(FirstToolWindow), 0, true);
        if ((null == window) || (null == window.Frame))
        {
            throw new NotSupportedException("Cannot create tool window");
        }
    
        IVsWindowFrame windowFrame = (IVsWindowFrame)window.Frame;
        Microsoft.VisualStudio.ErrorHandler.ThrowOnFailure(windowFrame.Show());
    
        var mcs = this.ServiceProvider.GetService(typeof(IMenuCommandService)) as OleMenuCommandService;
        var toolbarbtnCmdID = new CommandID(new Guid(FirstToolWindowCommandguidFirstToolWindowPackageCmdSet),
            FirstToolWindowCommand.cmdidWindowsMediaOpen);
        var menuItem = new MenuCommand(new EventHandler(
            ButtonHandler), toolbarbtnCmdID);
        mcs.AddCommand(menuItem);
    }
    
  4. Agregue el método ButtonHandler. Crea un OpenFileDialog para que el usuario especifique el archivo multimedia que se va a reproducir y, a continuación, reproduce el archivo seleccionado.

    private void ButtonHandler(object sender, EventArgs arguments)
    {
        OpenFileDialog openFileDialog = new OpenFileDialog();
        DialogResult result = openFileDialog.ShowDialog();
        if (result == DialogResult.OK)
        {
            window.control.MediaPlayer.Source = new System.Uri(openFileDialog.FileName);
        }
    }
    

Establecer la posición predeterminada para la ventana de herramientas

A continuación, especifique una ubicación predeterminada en el IDE para la ventana de herramientas. La información de configuración de la ventana de herramientas se encuentra en el archivo FirstToolWindowPackage.cs .

  1. En FirstToolWindowPackage.cs, busque el ProvideToolWindowAttribute atributo en la FirstToolWindowPackage clase , que pasa el tipo FirstToolWindow al constructor. Para especificar una posición predeterminada, debe agregar más parámetros al constructor siguiente ejemplo.

    [ProvideToolWindow(typeof(FirstToolWindow),
        Style = Microsoft.VisualStudio.Shell.VsDockStyle.Tabbed,
        Window = "3ae79031-e1bc-11d0-8f78-00a0c9110057")]
    

    El primer parámetro con nombre es Style y su valor es Tabbed, lo que significa que la ventana será una pestaña en una ventana existente. El parámetro especifica la Window posición de acoplamiento, n este caso, el GUID del Explorador de soluciones.

    Nota:

    Para obtener más información sobre los tipos de ventanas en el IDE, consulte vsWindowType.

Prueba de la ventana de herramientas

  1. Presione F5 para abrir una nueva instancia de la compilación experimental de Visual Studio.

  2. En el menú Ver, seleccione Otras ventanas y, a continuación, haga clic en Primera ventana de herramientas.

    La ventana de herramientas del reproductor multimedia debe abrirse en la misma posición que Explorador de soluciones. Si sigue apareciendo en la misma posición que antes, restablezca el diseño de la ventana (Ventana/Restablecer diseño de ventana).

  3. Haga clic en el botón (tiene el icono Buscar ) en la ventana de herramientas. Seleccione un archivo de sonido o vídeo compatible, por ejemplo, C:\windows\media\chimes.wav y, a continuación, presione Abrir.

    Deberías oír el sonido de la chime.