Feature

Digg This!

Page 2 of 4   « previous page   next page »

The fourth page, as seen in Figure 4, asks you to choose the default integration points your package will have in the Visual Studio IDE. Choosing Menu Command gives you a menu item on the Tools menu, Tool Window gives you a fully functional tool window and a menu item to invoke it, and Custom Editor creates an editor for new file types.

We are building a new tool window, so choose Tool Window and press Next.

Page five asks you for two pieces of information on your new tool window. For Window name, enter "Tasklist Sample." You will also need to give it a new Command ID. This is a unique identifier used to invoke the tool window. Here, you can enter "cmdidTasklistSample."

We're all done in the Wizard, so go ahead and press Finish. It will take a little while for the Wizard to generate your entire Solution, which will consist of two projects and 15 files.

First Launch
Once the VSIP Package Wizard has finished go ahead and start the project (Debug:Start or F5). A new instance of Visual Studio (the Experimental version referred to earlier) will now load. Go to the View menu, and choose Other Windows. You'll find a new menu item has been added here, named "Tasklist Sample." Choose it and your tool window will appear on screen (see Figure 5).

Your tool window doesn't do much on its own yet, but it does pick up all of the standard behaviors you would expect. Dragging it around will show Visual Studio's tool window docking targets, for example.

Solution Contents
Let's take a look at what is in your Tasklist's Solution. It can be hard at first to figure out what does what in your Solution considering how many files the Package Wizard creates.

Solution: Tasklist Sample

• Project: Tasklist Sample
  - Guids.cs - Contains a list of all GUIDs you generate.
  - Key.snk - The key file for signing your assembly.
  - My Tool Window.cs - Subclass of ToolWindowPane. Provides your Tool Window.
  - MyControl.cs - Contains the UI for your Tool Window.
  - PkgCmdID.cs - Contains a list of all Command IDs you generate.
  - ResourcesId.cs - Contains a list of Resource IDs you generate.
  - VsPkg.cs - This is your Package for Visual Studio. This is the heart of your code.
  
• Project: Tasklist SampleUI
  - Guids.h - Native equivalent of Guids.cs.
  - PkgCmdID.h - Native equivalent of PkgCmdID.cs.
  - Resource.h - Native equivalent of ResourcesId.cs.
  - Images_24bit.bmp - Provides 24-bit images (true color, with one color used to specify transparency) for use as your tool window icon, and other purposes.
  - Images_32bit.bmp - Provides 32-bit images (true color, with an 8-bit alpha channel) for use in your menu item and in the tool bar we'll add to your tool window.
  - Package.ico - Branding for use in the Help.About dialog.
  - PkgCmd.ctc - Your CommandTable Compiler file. This specifies all of the commands you'll use, and where they appear. We'll go over this soon.
  - Tasklist SampleUI.rc - Native resource file used for specifying your package's icon, output from the CTC compiler, bitmaps, and so forth.

In order to route commands between your managed Package and Visual Studio itself, you have to provide native lists of GUIDs, Command IDs, and Resource IDs, which is why we have nearly identical files in our two projects.

Renaming Files
Next, we'll rename some files to make them more descriptive:

• VsPkg.cs can be changed to TasklistPackage.cs.
• My Tool Window.cs can be changed to TasklistToolwindow.cs.
• MyControl.cs can be changed to ToolwindowClientArea.cs.

This way, it will be a little clearer what each file in your Solution does. The results of this can be seen in Figure 6.

Customizing the Tool Window UI
Go ahead and open up Toolwin-dowClientArea.cs. We're going to add some Task List-like functionality in, as well as some new features.

First off, go ahead and delete the button marked "Click Me!" Now, drag a TableLayoutPanel onto the UserControl.

Set the properties shown in Table 1 on the TableLayoutPanel. Drag a TextBox onto the top row of tablePanel. Set the properties shown in Table 2 on the TextBox.

Drag a ListView onto the bottom row of tablePanel. Set the properties shown in Table 3 on the ListView. Add an item to the ListView so we have a task present in the list. At this point, your tool window's UI should resemble Figure 7.

Quick Task Entry
One of my favorite parts of Outlook's task entry UI is that you can quickly enter new tasks by typing in a name and pressing Enter on your keyboard. With the integrated text box in the tool window, we can easily accomplish the same behavior. Add an Event Handler to txtNewTask for the KeyDown Event, as shown in Listing 1.

Let's see how this works at runtime. Run the project and open your tool window. Add some text to the Textbox and press Enter. Your task will be added to your new task list, as is shown in Figures 8 and 9.

Adding a Toolbar
Next, we'll integrate a standard Visual Studio Toolbar into our tool window. If you look around at our tool windows you'll see that quite a few of them use Toolbars (Solution Explorer, Document Outline, Class View, Proper-ties, and so forth). There are a few commands that would be handy to have on a toolbar, such as an Add Task button.

There are several steps involved in creating a Visual Studio toolbar, but it's not difficult. The basic process works like this: your tool window has an exposed Toolbar property that accepts a CommandID object. The CommandID object uniquely represents your Toolbar through a Guid/int pair. The Guid identifies your Package's set of commands, and the int identifies a specific command that can bind to a menu item or a toolbar button.

Page 2 of 4   « previous page   next page »