tutorial: Crear una ventana de herramientas (Part 2 of 4)

Artículo
05/18/2015

las ventanas de herramientas son comunes en el entorno de desarrollo integrado de Visual Studio (IDE). Algunos ejemplos de las ventanas de herramientas incluidas en Visual Studio son Explorador de soluciones, Lista de tareas, Lista de errores, y la ventana de Resultados . Todas las ventanas de herramientas tienen algunas características en común, por ejemplo, puede acoplar todo en el IDE de la misma manera. El acoplamiento confiable permite a los usuarios administrar sus tareas y información eficazmente.

En este tutorial se enseña cómo crear una ventana de herramientas en el IDE de Visual Studio mediante los pasos siguientes:

cree una ventana de herramientas.
inserte un control en la ventana de herramientas.
agregue una barra de herramientas a una ventana de herramientas.
agregue los comandos a la barra de herramientas.
implemente los comandos.
establezca la posición predeterminada para la ventana de herramientas.

este tutorial es parte de una serie que enseñe a cómo extender Visual Studio IDE. Para obtener más información, vea Tutoriales para personalizar Visual Studio mediante VSPackages.

Requisitos previos

Para completar este tutorial, debe instalar Visual Studio 2010 SDK.

Nota

Para obtener más información sobre el SDK de Visual Studio, vea Información general de Visual Studio que extiende.Para averiguar cómo descargar el SDK de Visual Studio, vea Centro para desarrolladores de extensibilidad de Visual Studio en el sitio web de MSDN.

Ubicaciones de la plantilla de proyecto paquete de Visual Studio

La plantilla de proyecto paquete de Visual Studio está disponible en tres ubicaciones en el cuadro de diálogo de Nuevo proyecto :

En extensibilidad de Visual Basic. El idioma predeterminado del proyecto es Visual Basic.
En extensibilidad de C#. El lenguaje predeterminado del proyecto es C#.
En La otra extensibilidad de los tipos de proyecto. El lenguaje predeterminado del proyecto es C++.

cree una ventana de herramientas

para crear una ventana de herramientas

Cree un Paquete denominado FirstToolWin. También puede crear un directorio para la solución. Haga clic en Aceptar.
En la página del asistente, haga clic en Siguiente.
En la página de Seleccione un lenguaje de programación , haga clic Visual c# o haga clic Genera un nuevo archivo de clave para firmar el ensambladode Visual Basic , y haga clic en Siguiente.
Dedique un momento para examinar la página de información básica de VSPackage . El valor del cuadro de nombre de la compañía se utiliza como espacio de nombres para todas las clases del proyecto. El cuadro de nombre de VSPackage proporciona un nombre para el paquete compilado final y el cuadro de versión de VSPackage proporciona información de versión. edición mínima de Visual Studio especifica que las ediciones de Visual Studio el paquete deben ejecutar en. El contenido del cuadro de información detallada aparecerán en la página de propiedades del paquete finalizado. El botón de Icono de cambio permite seleccionar un icono para representar el paquete.

Para este tutorial, simplemente acepte los valores predeterminados haciendo clic en Siguiente.
En la página de Opciones de selección de VSPackage , Comando de menú seleccione y ventana de herramientas, y haga clic en Siguiente.

Nota

La opción de comando de menú se requiere en el tutorial siguiente, tutorial: Extender la ventana de herramientas (Part 3 of 4), que compila en este proyecto.
en la página de Opciones de comando de menú , en el cuadro de nombre de comando , Windows Mediaescrito. En el cuadro de Identificador de comando , cmdidWindowsMediaescriba, y haga clic en Siguiente.
en la página de opciones de la ventana de herramientas , en el cuadro de Nombre de la ventana , El Reproductor de Windows Mediaescrito. En el campo de Identificador de comando , escriba un identificador válido, por ejemplo, cmdidWindowsMediaWin, y haga clic en Siguiente.
En la página de Opciones del proyecto de prueba , Proyecto de prueba de integración claro y Proyecto de prueba unitaria, y haga clic en Finalizar.
En Explorador de soluciones, haga doble clic en MyControl.xaml.
Haga clic con el botón secundario en el botón de El hagame clic! , y haga clic en Eliminar.

Inserte un Control en la ventana de herramientas

A continuación, agregue el control del Reproductor de Windows Media a Cuadro de herramientas y lo agrega a la ventana de herramientas.

para insertar un control en la ventana de herramientas

En Cuadro de herramientas, expanda la sección de Todos los controles WPF y busca elemento multimedia.
Para agregar el reproductor multimedia a la ventana de herramientas, arrastre el control de elemento multimedia de Cuadro de herramientas al formulario de MyControl.
En el diseñador, seleccione el control de elemento multimedia y luego examine las propiedades disponibles en la ventana de Propiedades . Algunas propiedades son estándar en todos los controles de formularios Windows Forms. Sin embargo, otros proporciona el control, por ejemplo, código fuente, que se utiliza para cargar un archivo en tiempo de ejecución.
En el menú Archivo, haga clic en Guardar todo.

Agregue una barra de herramientas de la ventana de herramientas

Agregar una barra de herramientas de la siguiente manera, se garantiza que los degradados y colores son coherentes con el resto del IDE.

Para agregar una barra de herramientas de la ventana de herramientas

En Explorador de soluciones, abra FirstToolWin.vsct. El archivo de .vsct define los elementos (GUI) de la interfaz gráfica de usuario en la ventana de herramientas utilizando XML.
En la sección de <Symbols> , busque el nodo de <GuidSymbol> cuyo atributo de name es guidFirstToolWinCmdSet. Agregue los elementos siguientes de <IDSymbol> a la lista de elementos de <IDSymbol> en este nodo para definir una barra de herramientas y un grupo de la barra de herramientas.
```
<IDSymbol name="ToolbarID" value="0x1000" />
<IDSymbol name="ToolbarGroupID" value="0x1001" />
```
Justo encima de la sección de <Groups> , cree una sección de <Menus>similar a:
```
<Menus>
  <Menu guid="guidFirstToolWinCmdSet" id="ToolbarID"
        priority="0x0000" type="ToolWindowToolbar">
    <Parent guid="guidFirstToolWinCmdSet" id="ToolbarID" />
    <Strings>
      <ButtonText>Tool Window Toolbar</ButtonText>
      <CommandName>Tool Window Toolbar</CommandName>
    </Strings>
  </Menu>
</Menus>
```
Todos los contenedores de los comandos se definen como tipos diferentes de menús. El atributo de type , éste se establece para que aparezca como una barra de herramientas en una ventana de herramientas. Los valores de guidy deid constituyen el identificador completo de la barra de herramientas. Normalmente, <Parent> de un menú hace referencia al grupo contenedor. Sin embargo, una barra de herramientas está definido como su propio elemento primario. Por consiguiente, el mismo identificador se utiliza para los elementos de <Menu>y de<Parent> . El atributo de priority simplemente es “0 ".
Las barras de herramientas se parecen a menús en gran medida. Por ejemplo, al igual que un menú puede tener grupos de comandos, las barras de herramientas también pueden tener grupos. (En menús, las líneas horizontales separan grupos de comando. En las barras de herramientas, los divisores visuales no separan grupos).

Agregue un nuevo elemento de <Group> a la sección de <Groups> para definir el grupo que se declaran en la sección de <Symbols> .
```
<Group guid="guidFirstToolWinCmdSet" id="ToolbarGroupID" priority="0x0000">
  <Parent guid="guidFirstToolWinCmdSet" id="ToolbarID"/>
</Group>
```
Estableciendo el guid y el id. el guid y el id. principal de la barra de herramientas, coloca el grupo en la barra de herramientas.
Guarde el archivo.

agregue los comandos a la barra de herramientas

A continuación, agregue comandos a la barra de herramientas. Se mostrarán los comandos como botones y controles.

para agregar comandos a la barra de herramientas

En FirstToolWin.vsct, en la sección de <Symbols> , declare tres comandos justo después de la barra de herramientas y la barra de herramientas agrupan declaraciones.
```
<IDSymbol name="cmdidWindowsMediaOpen" value="0x132" />
<IDSymbol name="cmdidWindowsMediaFilename" value="0x133" />
<IDSymbol name="cmdidWindowsMediaFilenameGetList" value="0x134" />
```
Observe que se declaran los comandos cmdidWindowsMedia y cmdidWindowsMediaWin ya.
En la sección de <Buttons> , un elemento de <Button> ya está presente y contiene una definición para los comandos de cmdidWindowsMedia y de cmdidWindowsMediaWin. Agregue otro elemento de <Button> para definir el comando de cmdidWindowsMediaOpen.
```
  <Button guid="guidFirstToolWinCmdSet"
        id="cmdidWindowsMediaOpen" priority="0x0101"
        type="Button">
  <Parent guid="guidFirstToolWinCmdSet"
          id="ToolbarGroupID"/>
  <Icon guid="guidImages" id="bmpPic1" />
  <Strings>
    <CommandName>cmdidWindowsMediaOpen</CommandName>
    <ButtonText>Load File</ButtonText>
  </Strings>
</Button>
```
Observe que la prioridad del segundo botón es 0x0101. El cuadro combinado que se agrega en el paso siguiente tiene prioridad 0x0100. Por consiguiente, el cuadro combinado aparecerá en la primera posición y el botón aparecerá en la segunda posición.

Para proporcionar un lugar para que el usuario escriba texto, agregue un cuadro combinado. Agregar un cuadro combinado es como agregar un botón, salvo que se define el cuadro combinado en una sección de <Combos> .

Cree una sección de <Combos> , justo después de la etiqueta de </Buttons> , que tiene una entrada para definir el cuadro combinado.

<Combos>
  <Combo guid="guidFirstToolWinCmdSet"
         id="cmdidWindowsMediaFilename"
         priority="0x0100" type="DynamicCombo"
         idCommandList="cmdidWindowsMediaFilenameGetList"
         defaultWidth="130">
    <Parent guid="guidFirstToolWinCmdSet"
            id="ToolbarGroupID" />
    <CommandFlag>IconAndText</CommandFlag>
    <CommandFlag>CommandWellOnly</CommandFlag>
    <CommandFlag>StretchHorizontally</CommandFlag>
    <Strings>
      <CommandName>Filename</CommandName>
      <ButtonText>Enter a Filename</ButtonText>
    </Strings>
  </Combo>
</Combos>

Guarde y cierre FirstToolWin.vsct.

En Explorador de soluciones, en la carpeta de proyecto, PkgCmdID.cs abierto o PkgCmdID.vb y después agregue las líneas siguientes en la clase justo después de los miembros existentes.

Public Const cmdidWindowsMediaOpen As Integer = &H132
Public Const cmdidWindowsMediaFilename As Integer = &H133
Public Const cmdidWindowsMediaFilenameGetList As Integer = &H134
Public Const ToolbarID As Integer = &H1000

public const int cmdidWindowsMediaOpen = 0x132;
public const int cmdidWindowsMediaFilename = 0x133;
public const int cmdidWindowsMediaFilenameGetList = 0x134;
public const int ToolbarID = 0x1000;

Esto hace que los comandos disponibles en código.

Guarde y cierre el archivo.

implemente los comandos

ahora escriba el código que implementa los comandos.

para implementar los comandos

En Explorador de soluciones, abra MyToolWindow.cs o MyToolWindow.vb, que contienen la clase para la propia ventana de herramientas.

Agregue el código siguiente justo después de la existencia instrucciones using.
```
Imports System.ComponentModel.Design
```
```
using System.ComponentModel.Design;
```
Esta línea le permite utilizar la clase de CommandID sin necesidad de calificarlo.

Agregue el código siguiente al constructor, justo antes de la línea que dice control = new MyControl() (C#) o Me.Content = New MyControl() (VB).

' Create the toolbar.  
Me.ToolBar = New CommandID(GuidList.guidFirstToolWinCmdSet, PkgCmdIDList.cmdidWindowsMediaWin)
Me.ToolBarLocation = CInt(VSTWT_LOCATION.VSTWT_TOP)

' Create the handlers for the toolbar commands.  
Dim mcs As OleMenuCommandService = TryCast(GetService(GetType(IMenuCommandService)), OleMenuCommandService)
If mcs IsNot Nothing Then 
    Dim toolbarbtnCmdID As CommandID = New CommandID(GuidList.guidFirstToolWinCmdSet, PkgCmdIDList.cmdidMyCommand)
    Dim menuItem As MenuCommand = New MenuCommand(New EventHandler(AddressOf ButtonHandler), toolbarbtnCmdID)
    mcs.AddCommand(menuItem)

    ' Command for the combo itself  
    Dim menuMyDynamicComboCommandID As CommandID = New CommandID(GuidList.guidFirstToolWinCmdSet, CInt(PkgCmdIDList.cmdidMyCommand))
    Dim menuMyDynamicComboCommand As OleMenuCommand = New OleMenuCommand(New EventHandler(AddressOf ComboHandler), menuMyDynamicComboCommandID)
    mcs.AddCommand(menuMyDynamicComboCommand)

    ' Command for the combo's list  
    Dim comboListCmdID As CommandID = New CommandID(GuidList.guidFirstToolWinCmdSet, PkgCmdIDList.cmdidWindowsMediaWin)
    Dim comboMenuList As OleMenuCommand = New OleMenuCommand(New EventHandler(AddressOf ComboListHandler), comboListCmdID)
    mcs.AddCommand(comboMenuList)
End If

// Create the toolbar. 
this.ToolBar = new CommandID(GuidList.guidFirstToolWinCmdSet,
    PkgCmdIDList.ToolbarID);
this.ToolBarLocation = (int)VSTWT_LOCATION.VSTWT_TOP;

// Create the handlers for the toolbar commands. 
var mcs = GetService(typeof(IMenuCommandService))
    as OleMenuCommandService;
if (null != mcs)
{
    var toolbarbtnCmdID = new CommandID(
        GuidList.guidFirstToolWinCmdSet,
        PkgCmdIDList.cmdidWindowsMediaOpen);
    var menuItem = new MenuCommand(new EventHandler(
        ButtonHandler), toolbarbtnCmdID);
    mcs.AddCommand(menuItem);

    // Command for the combo itself 
    var menuMyDynamicComboCommandID = new CommandID(
        GuidList.guidFirstToolWinCmdSet,
        (int)PkgCmdIDList.cmdidWindowsMediaFilename);
    var menuMyDynamicComboCommand = new OleMenuCommand(
        new EventHandler(ComboHandler),
        menuMyDynamicComboCommandID);
    mcs.AddCommand(menuMyDynamicComboCommand);

    // Command for the combo's list 
    var comboListCmdID = new CommandID(
        GuidList.guidFirstToolWinCmdSet,
        PkgCmdIDList.cmdidWindowsMediaFilenameGetList);
    var comboMenuList = new OleMenuCommand(
        new EventHandler(ComboListHandler), comboListCmdID);
    mcs.AddCommand(comboMenuList);
}

Este código agrega tres comandos, uno para el botón y dos para combobox. El cuadro combinado requiere dos comandos, uno para cuando el usuario crea una entrada; uno de rellenar la lista desplegable.

De controladores de eventos para los controles de barra de herramientas, el código debe poder tener acceso al control del reproductor multimedia, que es un elemento secundario de la clase de MyControl.

En Explorador de soluciones, haga clic con el botón secundario MyControl.xaml, haga clic en Ver código, y agregue el código siguiente a la clase de MyControl.
```
Public ReadOnly Property MediaPlayer() As System.Windows.Controls.MediaElement
    Get 
        Return MediaElement1
    End Get 
End Property
```
```
public System.Windows.Controls.MediaElement MediaPlayer
{
    get { return mediaElement1; }
}
```
Guarde el archivo.

Return a MyToolWindow.cs o a MyToolWindow.vb, y agregue el código siguiente al final de la clase, justo antes de las dos llaves de cierre finales (C#) o la instrucción end class (Visual Basic).

Private Sub ButtonHandler(ByVal sender As Object, ByVal arguments As EventArgs)
    If comboValue IsNot Nothing AndAlso comboValue.Trim().Length <> 0 Then
        LoadFile(comboValue)
    End If 
End Sub 

Private Sub ComboHandler(ByVal sender As Object, ByVal arguments As EventArgs)
    Dim eventArgs As OleMenuCmdEventArgs = TryCast(arguments, OleMenuCmdEventArgs)
    If eventArgs IsNot Nothing Then 
        Dim output As IntPtr = eventArgs.OutValue
        Dim input As Object = eventArgs.InValue
        If input IsNot Nothing Then
            comboValue = input.ToString()
        ElseIf output <> IntPtr.Zero Then
            Marshal.GetNativeVariantForObject(comboValue, output)
        End If 
    End If 
End Sub 

Public Sub LoadFile(ByVal comboValue As String)
    control.MediaPlayer.Source = New Uri(comboValue)
End Sub 

Private Sub ComboListHandler(ByVal sender As Object, ByVal arguments As EventArgs)
End Sub

    private void ButtonHandler(object sender,
EventArgs arguments)
    {
        if (comboValue != null && comboValue.Trim().Length != 0)
        {
            LoadFile(comboValue);
        }
    }

    private void ComboHandler(object sender, EventArgs arguments)
    {
        var eventArgs = arguments as OleMenuCmdEventArgs;
        if (eventArgs != null)
        {
            IntPtr output = eventArgs.OutValue;
            object input = eventArgs.InValue;
            if (input != null)
            {
                comboValue = input.ToString();
            }
            else if (output != IntPtr.Zero)
            {
                Marshal.GetNativeVariantForObject(comboValue,
                    output);
            }
        }
    }

    public void LoadFile(string comboValue)
    {
        control.MediaPlayer.Source = new System.Uri(comboValue);
    }

    private void ComboListHandler(object sender,
        EventArgs arguments)
    {
    }

Observe que el menuMyDynamicComboCommand y menuItem comparten el mismo controlador de eventos. Por consiguiente, la ventana de herramientas reproducir el archivo que se especifica en el cuadro combinado. En este tutorial, no proporciona el código de la función de ComboListHandler. En el tutorial siguiente, tutorial: Extender la ventana de herramientas (Part 3 of 4), agrega código que rellena la lista desplegable mediante nombres de la lista de clonación.

El controlador combinado guarda todo lo que se escriba en él en una variable miembro. Para agregar esa variable, agregue el código siguiente en la parte superior de la clase (en Visual Basic, después de la instrucción Inherits). Al mismo tiempo, agregue una variable miembro para contener el control.
```
Dim control As MyControl
Dim comboValue As String
```
```
private MyControl control;
string comboValue = "";
```
Cuando se hace clic en el botón, el botón lee el valor de esta variable local y lo carga en el reproductor multimedia.

establezca la posición predeterminada para la ventana de herramientas

A continuación, especifica una ubicación predeterminada del IDE para la ventana de herramientas. la información de configuración para la ventana de herramientas está en el archivo de FirstToolWinPackage.cs.

para establecer la posición predeterminada para la ventana de herramientas

En Explorador de soluciones, abra FirstToolWinPackage.cs o FirstToolWinPackage.vb. En este archivo, busque el atributo de ProvideToolWindowAttribute en la clase de FirstToolWinPackage . Este código se pasa por MyToolWindow escrito en el constructor. Para especificar una posición predeterminada, debe agregar más parámetros al constructor después de ejemplo.
```
<PackageRegistration(UseManagedResourcesOnly:=True), _
InstalledProductRegistration("#110", "#112", "1.0", IconResourceID:=400), _
ProvideMenuResource("Menus.ctmenu", 1), _
ProvideToolWindow(GetType(MyToolWindow), Style:=Microsoft.VisualStudio.Shell.VsDockStyle.Tabbed, Window:="3ae79031-e1bc-11d0-8f78-00a0c9110057"), _
Guid(GuidList.guidFirstToolWinPkgString)> _
Public NotInheritable Class FirstToolWinPackage
    Inherits Package
```
```
[ProvideToolWindow(typeof(MyToolWindow),
    Style = Microsoft.VisualStudio.Shell.VsDockStyle.Tabbed,
    Window = "3ae79031-e1bc-11d0-8f78-00a0c9110057")]
```
El primer parámetro con nombre es un estilo y su valor es organización por fichas, lo que significa que la ventana será una pestaña en una ventana existente. La ventana es especificada por el parámetro con nombre de la ventana; su valor es un GUID. En este caso, el GUID es el correspondiente a Explorador de soluciones.

Nota

Para obtener más información sobre los GUID para las ventanas en el IDE, vea constantes de vsWindowKind en el sitio web de MSDN.
Guarde su trabajo.

prueba de la ventana de herramientas

para probar la ventana de herramientas

Presione F5 para abrir una nueva instancia de la compilación experimental de Visual Studio.
En el menú de Ver , elija Otras ventanas y haga clic en El Reproductor de Windows Media.

La ventana de herramientas del reproductor multimedia debe abrir en la misma ventana que Explorador de soluciones.
En el cuadro combinado en la ventana de herramientas del reproductor multimedia, escriba la ruta de acceso completa y el nombre de archivo de un sonido o un archivo de vídeo compatible, por ejemplo, C:\windows\media\chimes.wav, presione Entrar, haga clic en el botón adyacente.

Nota

Tiene que escribir un nombre de archivo en el cuadro de texto porque la ventana de herramientas del reproductor multimedia no tiene un cuadro de diálogo de Abrir archivo .

Pasos adicionales

En tutorial: Extender la ventana de herramientas (Part 3 of 4), puede obtener información sobre cómo agregar varios controles a la ventana de herramientas. Agrega un botón que abre un cuadro de diálogo de Abrir archivo , que puede utilizar para seleccionar un archivo para reproducir en el reproductor multimedia. También agregará una lista desplegable de listas de clonación de modo que puede seleccionar una de ellas para reproducir.

Vea también

Tareas

tutorial: Agregar una barra de herramientas en el IDE

tutorial: agregar una barra de herramientas a una ventana de herramientas

Otros recursos

comandos, menús, y barras de herramientas

Compartir a través de