How do I add a tool in Visual Studio?

Skip to main content

This browser is no longer supported.

Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.

• Article
• 04/30/2022
• 6 minutes to read

In this article

Applies to:

Visual Studio Visual Studio for Mac Visual Studio Code

In this walkthrough you learn how to create a tool window and integrate it into Visual Studio in the following ways:

• Add a control to the tool window.

• Add a toolbar to a tool window.

• Add a command to the toolbar.

• Implement the commands.

• Set the default position for the tool window.

Prerequisites

The Visual Studio SDK is included as an optional feature in Visual Studio setup. For more information, see Install the Visual Studio SDK.

1. Create a project named FirstToolWin using the VSIX template, and add a custom tool window item template named FirstToolWindow.

1. Remove the default control. Open FirstToolWindowControl.xaml and delete the Click Me! button.

2. In the Toolbox, expand the All WPF Controls section and drag the Media Element control to the FirstToolWindowControl form. Select the control, and in the Properties window, name this element mediaElement1.

By adding a toolbar in the following manner, you guarantee that its gradients and colors are consistent with the rest of the IDE.

1. In Solution Explorer, open FirstToolWindowPackage.vsct. The .vsct file defines the graphical user interface (GUI) elements in your tool window by using XML.

2. In the section, find the node whose name attribute is guidFirstToolWindowPackageCmdSet. Add the following two elements to the list of elements in this node to define a toolbar and a toolbar group.

3. Just above the section, create a section that resembles this:

   
       
           
           
               Tool Window Toolbar
               Tool Window Toolbar
           
       
   
   

   There are several different kinds of menu. This menu is a toolbar in a tool window, defined by its type attribute. The guid and id settings make up the fully qualified ID of the toolbar. Typically, the of a menu is the containing group. However, a toolbar is defined as its own parent. Therefore, the same identifier is used for the

   and elements. The priority attribute is just '0'.

4. Toolbars resemble menus in many ways. For example, just as a menu may have groups of commands, toolbars may also have groups. (On menus, the command groups are separated by horizontal lines. On toolbars, the groups are not separated by visual dividers.)

   Add a section that contains a element. This defines the group whose ID you declared in the section. Add the section just after the section.

   By setting the parent GUID and ID to the GUID and ID of the toolbar, you add the group to the toolbar.

Add a command to the toolbar, which is displayed as a button.

1. In the section, declare the following IDSymbol elements just after the toolbar and toolbar group declarations.

2. Add a Button element inside the section. This element will appear on the toolbar in the tool window, with a Search (magnifying glass) icon.

   
       
       
       
           cmdidWindowsMediaOpen
           Load File
       
   
   

3. Open FirstToolWindowCommand.cs and add the following lines in the class just after the existing fields.

   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;
   

   Doing this makes your commands available in code.

From the event handlers for the toolbar controls, your code must be able to access the Media Player control, which is a child of the FirstToolWindowControl class.

In Solution Explorer, right-click FirstToolWindowControl.xaml, click View Code, and add the following code to the FirstToolWindowControl class.

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

Add a toolbar and a menu command that invokes the Open File dialog and plays the selected media file.

1. Open FirstToolWindow.cs and add the following using directives:

   using System.ComponentModel.Design;
   using System.Windows.Forms;
   using Microsoft.VisualStudio.Shell.Interop;
   

2. Inside the FirstToolWindow class, add a public reference to the FirstToolWindowControl control.

   public FirstToolWindowControl control;
   

3. At the end of the constructor, set this control variable to the newly-created control.

   control = new FirstToolWindowControl();
   base.Content = control;
   

4. Instantiate the toolbar inside the constructor.

   this.ToolBar = new CommandID(new Guid(FirstToolWindowCommand.guidFirstToolWindowPackageCmdSet),
       FirstToolWindowCommand.ToolbarID);
   this.ToolBarLocation = (int)VSTWT_LOCATION.VSTWT_TOP;
   

5. At this point, the FirstToolWindow constructor should look like this:

   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. Add the menu command to the toolbar. In the FirstToolWindowCommand.cs class, add the following using directive:

   using System.Windows.Forms;
   

7. In the FirstToolWindowCommand class, add the following code at the end of the ShowToolWindow() method. The ButtonHandler command will be implemented in the next section.

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

To implement a menu command in the tool window

1. In the FirstToolWindowCommand class, add a ButtonHandler method that invokes the Open File dialog. When a file has been selected, it plays the media file.

2. In the FirstToolWindowCommand class, add a private reference to the FirstToolWindow window that gets created in the FindToolWindow() method.

   private FirstToolWindow window;
   

3. Change the ShowToolWindow() method to set the window you defined above (so that the ButtonHandler command handler can access the window control. Here is the complete ShowToolWindow() method.

   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. Add the ButtonHandler method. It creates an OpenFileDialog for the user to specify the media file to play, and then plays the selected file.

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

Next, specify a default location in the IDE for the tool window. Configuration information for the tool window is in the FirstToolWindowPackage.cs file.

1. In FirstToolWindowPackage.cs, find the ProvideToolWindowAttribute attribute on the FirstToolWindowPackage class, which passes the FirstToolWindow type to the constructor. To specify a default position, you must add more parameters to the constructor following example.

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

   The first named parameter is Style and its value is Tabbed, which means that the window will be a tab in an existing window. The docking position is specified by the Window parameter, n this case, the GUID of the Solution Explorer.

   Note

   For more information about the types of windows in the IDE, see vsWindowType.

1. Press F5 to open a new instance of the Visual Studio experimental build.

2. On the View menu, point to Other Windows and then click First Tool Window.

   The media player tool window should open in the same position as Solution Explorer. If it still appears in the same position as before, reset the window layout (Window / Reset Window Layout).

3. Click the button (it has the Search icon) in the tool window. Select a supported sound or video file, for example, C:\windows\media\chimes.wav, then press Open.

   You should hear the chime sound.

See also

• Commands, menus, and toolbars

---

Additional resources

Additional resources

In this article