Getting Started

Simplify Coding With Visualizers

Take advantage of visualizers in Visual Studio 2005 to make yourself more productive; also learn how to create your own custom visualizers.

• By Vikram Srivatsa
• 08/01/2005

Once upon a time, IDEs and programming languages were measured by what they enabled you to do.

This remains the case, but languages today are also measured by how quickly they enable you to do it. The Visual Studio IDE and the languages it supports are as much about accelerating developer productivity as about what they let you do. Visual Studio's Rapid Application Development (RAD) features have long featured IntelliSense, as well as the ability to step through code and various debugger windows that aid a developer in debugging. The next version, Visual Studio 2005, officially due out in November, incorporates a couple important new features: debugger visualizers and enhanced DataTips.

Taking advantage of these new features will enable you to create your applications more quickly and easily. This article will take a careful look at Visual Studio 2005 DataTips, explaining how you can take advantage of them to get a richer development experience. You'll also learn how to take advantage of VS 2005's extensibility model to create custom visualizers of your own.

DataTips and visualizers comprise two of several significant new RAD features in the next version of Visual Studio. Other features include code snippets, refactoring, and edit-and-continue for Visual Basic and C#. One important caveat: This article relies on Visual Studio 2005 beta 2, and the features discussed in this article remain subject to change in the final release version.

The new features build on a recent trend in developer tools, where the focus has been shifting toward improving developer productivity. Today's IDE features are as important to drawing developers to a particular development environment as the programming languages themselves, a trend Visual Basic kicked off on the Windows side. Visual Basic attained its great popularity mainly due to the ease of creating applications, enabled principally by its IDE.

For example, it wasn't too long ago that many VB6 developers believed edit-and-continue was the language's best feature. Technically, that's a misnomer; edit-and-continue was an IDE feature enabled by the debugger, not a feature of the programming language itself. Of course, that's also a distinction without a difference in practical terms, and it exposes a fundamental truth about the shift in the mindset of the developer. Today's developers identify with the total developer experience provided by the IDE along with the programming language; the two are now interwoven so tightly it is hard to tell where Visual Basic or C# ends and the Visual Studio IDE begins.

The main emphasis in this article is on debugger visualizers and enhanced DataTips. A DataTip is a tooltip that pops up as soon as you move your mouse over a variable in debug mode. The idea is to provide immediate feedback regarding the state of a variable. DataTips have been part of the Visual Studio environment since early versions of the Visual Studio IDE, but previous DataTips displayed only the value stored within a variable.

DataTips Simplify Debugging
VS 2005's enhanced DataTip provides an "expansion widget" that lets you expand the DataTip shown to see various values even of a complex variable such as an XmlDocument (see Figure 1).

Observe the expanded widget for the DataTip closely, and notice that it has a magnifying glass icon. This magnifying glass denotes that there is a debugger visualizer associated with that particular property. A debugger visualizer provides a customized view or visualization of the data during debugging. The Visual Studio 2005 IDE provides several built-in debugger visualizers. As with other aspects of the .NET Framework, you can extend the visualizers and write your own custom debugger visualizers, adding them directly to the IDE.

VS 2005 ships with several debugger visualizers to get you started. Clicking on the magnifying glass displayed over the expanded widget for a DataTip brings up the debugger visualizers associated with a given type. For example, you might bring up the three types of visualizers for the XmlDocument type: text, XML, and HTML. A text visualizer provides visualization for textual data; an XML visualizer displays XML data in a view similar to how IE displays formatted XML data; and the HTML visualizer lets you view HTML-formatted data. One of the most significant visualizers that ships with VS 2005 is the DataSet Visualizer (see Figure 2). This tool gives you a grid-like view of the data stored within a dataset.

Now that you have some idea of what visualizers are and how they work, the next step is to use the .NET Framework classes to write your own custom debugger visualizer. You find the .NET Framework classes that help you create custom debugger visualizers in this namespace: Microsoft.VisualStudio.DebuggerVisualizers.

Creating a custom visualizer requires taking advantage of the DialogDebuggerVisualizer class and a pair of interfaces, IDialogVisualizerService and IVisualizerObjectProvider. The DialogDebuggerVisualizer class acts as the base class for the custom debugger visualizer. The IDialogVisualizerService provides the methods a visualizer can use to display a form, control, or dialog, while the IVisualizerObjectProvider gives you methods for retrieving the object for which you are creating the visualization.

The application you want to debug and the debugger exist on two separate running processes. The data lives in the application, and you need to make this available on the debugger side before you can interpret the data and provide visualization for it. This means you must transport the data between the application you are debugging and the debugger. The VisualizerObjectSource class performs all the serialization required for the data to be passed between the debugger and the application you want to debug. The data is then converted to a stream and serialized. This object is accessible to the debugger through the IVisualizerObjectProvider interface.

The next step is to build a debugger visualizer to provide visualization for the DirectoryInfo object of the .NET Framework. The debugger visualizer displays the contents of the directory based on the path assigned to the DirectoryInfo object. Unfortunately, VS 2005 doesn't provide any default debugger visualizers for this object during debugging.

Create Your Own Visualizer
Fire up the VS 2005 IDE and begin by starting a new type class library project and adding a reference to System.Windows.Forms.dll. Next, choose Add, then New Item from the Solution Explorer. Select the debugger visualizer template from the dialog this brings up. Name your class DirectoryVisualizer.cs.

The Visual Studio IDE performs some background operations at this stage, adding a class called DirectoryVisualizer that derives from DialogDebuggerVisualizer to the project. At the same time, the IDE adds a reference to the Microsoft.VisualStudio.DebuggerVisualizers.dll automatically. The IDE also autogenerates an override for the class' Show method and adds a method signature that you can use for testing.

The next step is to develop a UI for your visualizer. Add a new Windows Form to the project and call it DirectoryViewer.cs, then design a UI for the analyzer (see Figure 3). Now add an ImageList control and associate two images with it—one to represent a file and the other to represent a folder. The ListView control exposes a SmallImageList property; use this to associate the ListView control with the ImageList control.

You need to overload the constructor for the form so it accepts a parameter of type DirectoryInfo. This corresponds to the DirectoryInfo object that you pass from the debugged application to the debugger. You populate the various labels in the form's DirectoryViewer_Load event, retrieve the directories as an array, and populate them into the ListView control (see Listing 1).

That completes the UI portion of the project. Next, you need to tackle the DirectoryVisualizer.cs class you have added to the project already. Navigate to the overridden Show method within this class and write code to retrieve the object from the running application to the debugger process. Do this by calling the GetObject method on the IVisualizerObjectProvider (see Listing 2). You use the other parameter, windowService, to display the UI you created to render the visualizer. The Form object is created within the using clause, so that the resources are cleaned up once the visualizer is closed.

Next, navigate to the AssemblyInfo.cs file, which is located in the solution's Properties folder, and add this attribute:

assembly: DebuggerVisualizer( 
   typeof(
   DirectoryListing.DirectoryVisualizer), 
   Target = typeof( 
   System.IO.DirectoryInfo), Description 
   = "DirectoryVisualizer")

The DebuggerVisualizer attribute specifies the name for the DebuggerVisualizer, and the Target property associates the visualizer with the particular type—DirectoryInfo class, in this example. Build the solution to generate the DLL for the debugger visualizer.

Test and Deploy
That's it for creating the custom debugger visualizer. Testing it is as simple as adding another project of type Windows Application to the solution and calling the TestShowVisualizer method declared in the DirectoryVisualizer.cs class. You need to create a DirectoryInfo object to be able to pass this method for testing. You need to deploy the debugger visualizer once it's tested.

Deploying the debugger visualizer is a trivial task. You have two options in this case: You can make it available to all users, or you can make it available to a single, specific user. If you want to make it available to everyone, deploy the visualizer to this folder: <Visual Studio Install Directory>\common7\Packages\Debugger\Visualizers. If you want to make it available to a specific user, deploy it here: My Documents\Visual Studio 2005\Visualizers.

You're now ready to use your custom debugger visualizer. Viewing it requires that you create a new Windows application, instantiate a DirectoryInfo object, and set a breakpoint so you can debug the code.

When you hover your mouse over an instance of the DirectoryInfo, the DataTip appears, along with the magnifying glass icon. Click on the magnifying glass to use the debugger visualizer.

As with the default visualizers, clicking on the magnifying glass causes the IDE to display the type associated with the visualizer—DirectoryVisualizer, in this case. Clicking on the DirectoryVisualizer activates the visualizer, and you're off to the races. At this point, you're free to add any additional features you want or introduce new custom visualizers. In any case, you're sure to save development and effort using this new feature. Clicking on Exit lets you quit from the visualizer.

• Get Code Download