I like to build software. I like it largely because I can build tools that extend the feature-sets of my favorite applications. I find that integrating my way of working into these applications makes my work-life a bit easier and provides a sense of satisfaction of having mastered a small corner of my domain.
Because I am a developer and work with Visual Studio® every day, I have long been interested in building Visual Studio extensions. It's in my nature to not be satisfied with the base feature set of a product. Given this nature, I spend some time with each release of Visual Studio to see what's new with Visual Studio extensibility. My perception in the past was that extending Visual Studio wasn't for the faint of heart. Whether my thoughts are true or not, I have shied away from investing much time in the topic—until now.
I recently became aware of tool known as the Visual Studio Package Builder (VSPackage Builder). After working with the tool for a few days, I believe the time has come to extend Visual Studio for my personal purposes as well as for my business.
VSPackage Builder does a great job of simplifying the work it takes to build the structure you require for a Visual Studio extension. You use VSPackage Builder to design the tool windows, toolbars, etc., and VSPackage Builder handles the plumbing that connects your extension to Visual Studio. The bottom line: VSPackage Builder allows you to quit hand-editing VSCT files and focus on writing code for your extension.
VSPackage Builder Overview
The VSPackage Builder is a Visual Studio project template that you can use to rapidly develop Visual Studio 2010 extensions. VSPackage Builder is itself a Visual Studio extension. Once installed, the VSPackage Builder project template is available as an installed template (see Figure 1). This release only supports C#, so don't go looking for this template in the Visual Basic node.
|Figure 1. The VSPackage Builder template available in the New Project dialog box.|
VSPackage Builder provides you with a design surface (see Figure 2) that is the location for adding your extensions graphical elements like tool windows, menus, buttons, etc. If you have any experience using Visio or drawing flow charts by hand then you will be able to quickly become proficient enough to build a simple extension
|Figure 2. The VSPackage Builder designer|
As you draw your extension's objects, VSPackage Builder works behind the scenes, generating the code required to support your objects. Looking at Figure 2, you can see the completed sample project containing two tool windows named MyTasksWPF and MyTasksDetail. Each tool window has a button connected to it that will display the tool window within Visual Studio. The buttons reside within a Menu Group shape configured to display in the Visual Studio Tools menu. In addition, MyTasksWPF, contains a toolbar named MyTasksToolbar(which itself contains a toolbar group and a toolbar button).
The best part is the functionality that displays the MyTasksWPF tool window was created without the need to write a single line of code. Simply connecting the ViewMyTasks to MyTasksWPFdid it for me. Basically, I can use VSPackage Builder to design the GUI shell for extension and then write the code to respond to events with Visual Studio and/or my extension.
|What You Need To Build with VSPackage Builder|
|Before you can start working with VSPackage Builder you need:
I keep an overly extensive list of my ToDo items that I review daily. I'll never get to everything on the list but it does keep me focused and alleviates my fear of forgetting something. When I test new tools, I gravitate toward building something that will help me track and capture my ToDos.
I decided to use VSPackage Builder to build a tool window that displays tasks from an Access database and allows me to create new ones and edit existing ones. I wanted to add a button to the Visual Studio menu to display a window that lists my task data and includes a toolbar with a button that populates the grid.
Creating the My Tasks Extension
Building this extension will take maybe 15 minutes. This is a simple extension, but it goes a long way in demonstrating how VSPackage Builder simplifies extension building. You can complete the following steps to build the extension or if you prefer, you can download the sample source code and just follow along.
- Open Visual Studio 2010 and create a new project. In the New Project dialog box, choose the VSPackage Builder template located under Visual C# > Extensibility node (see Figure 1).
- Name the solution MyTasks and click OK to create the project. Once the project opens, the MyTasks.vspackage designer will display (see Figure 3). There are two "swim lanes" available to build the extension's UI: Command UI and Toolwindows
Figure 3. The two swim lanes of the MyTasks extension
- Command UI: this is the lane for building the extension's menu structure and linking the items to each other as well as to tool windows.
- Toolwindows: this the lane for defining tool windows
- Display the Toolbox to view the available controls. Find the Quick Starts section and drag the Add Command object into the Command UI lane. This action creates two objects (see Figure 4), an External Groupobject that represents the menu group where the linked button will reside. The second object is the button itself.
Figure 4. The objects created by the Add Command Quick Start object
- Select the Tools Menu shape and change its Location property to Tools Menu [Command Line]. This value will place the button at the top of the Visual Studio Tools menu.
- Select the Button1 object and change its name to ViewMyTasks. Change its Menu Text property to View My Tasks. Change its Icon to the Table icon. At this point, we have button that will display on the Tools menu but it doesn't do anything so let's keep going.
- Drag a ToolWindow (WPF) object into the Toolwindows lane and name it MyTasksWPF.
- Select the Launch object and connect ViewMyTasks button to the MyTasksWPF window. Instead of drawing the arrow on the designer, you need to select the two objects you want to connect. After selecting them, your designer should now resemble the one shown in Figure 5. By drawing this connection, Visual Studio automatically writes the code to display the tool window. You don't need to do anything else to display the window.
Figure 5. The MyTasks window connected to the ViewMyTasks button.
- When you added the MyTasksWPF window the designer, Visual Studio added the MyTasksWPFControl.xaml and MyTasksWPFControl.xaml.cs files to your solution. In the Solution Explorer, find the MyTasksWPFControl.xaml file and open its designer. If you need to, collapse the GeneratedCode folder to allow for easier navigation in the project (doing so will make it easier see the files you need to edit). By default, the control contains a single button with a label that reads "Click Me!". This button doesn't fit our needs so delete it.
- For this step, you can use a database of your own or download the sample TasksDB available with this article's source code. Either way, let's create a data source. From the Visual Studio menu, click Data > Add New Data Source. In the Data Source Configuration Wizard, select Database and click Next. Choose DataSet and click Next.
- Click New Connection. In the Add Connection dialog box, change the Data source to Microsoft Access Database File (OLE DB). Next, Browse to the location of your TasksDB Access file and click OK. Click Nexttwo times.
The source code that accompanies this articlecontains a copy of the TasksDB access database. I recommend downloading the sample source code and using its TasksDB database. Just download it and unzip it—then browse to the location of the TasksDB folder in your file system.
- In the Choose Your Database Objects section, expand the Tables node and check the Tasks table. Click Finish.
- Display the Data Sources window and drag the Tasks table onto the MyTasksWPFControl designer. The control should now resemble Figure 6, containing a DataGrid WPF control. Resize the DataGrid WPF control so that it fills the MYTasksWPFControldesign canvas.
Figure 6. The MyTasksWPFControl with its data grid control.
- Now we are ready to test the extension. Press CTRL+F5 to open an experimental instance of Visual Studio 2010. From the Tools menu, click the View My Tasks button to display the MyTask tool window (see Figure 7).
|Figure 7. The MyTasks tool window shown in Visual Studio 2010.|
Looks pretty good doesn't it? Especially given the effort required to make it happen. This is a good start but we're not done. For starters, it didn't automatically populate with data. We need to make a few changes and this is where VSPackage Builder really shines. Next we will add an additional tool window and make changes to the tool bar. Without VSPackage Builder, this would be treacherous.
|Author's Note: There are a lot of great technical details regarding how VSPackage Builder works its magic. If you want to dig into these details, I recommend that you read the ReadMe file that accompanies the VSPackage Builder extension. This document does a good job of describing its internals.|