Walkthrough: Writing a Visualizer in C#

Article
02/04/2013

This topic applies to:

Edition	Visual Basic	C#	F#	C++	Web Developer
Express
Pro, Premium, and Ultimate

This walkthrough shows how to write a simple visualizer by using C#. The visualizer you will create in this walkthrough displays the contents of a string using a Windows forms message box. This simple string visualizer is not especially useful in itself, but it shows the basic steps that you must follow to create more useful visualizers for other data types.

Note

The dialog boxes and menu commands you see might differ from those described in Help, depending on your active settings or edition. To change your settings, go to the Tools menu and choose Import and Export Settings. For more information, see Working with Settings.

Visualizer code must be placed in a DLL, which will be read by the debugger. Therefore, the first step is to create a Class Library project for the DLL.

To create a class library project

On the File menu, choose New and then click New Project.
In the New Project dialog box, under Project Types, select Visual C#.
In the Templates box, choose Class Library.
In the Name box, type an appropriate name for the class library, such as MyFirstVisualizer.
Click OK.

After you have created the class library, you must add a reference to Microsoft.VisualStudio.DebuggerVisualizers.DLL so that you can use the classes defined there. Before you add the reference, however, you must rename some classes so that they have meaningful names.

To rename Class1.cs and add Microsoft.VisualStudio.DebuggerVisualizers

In Solution Explorer, right-click Class1.cs and choose Rename on the shortcut menu.
Change the name from Class1.cs to something meaningful, such as DebuggerSide.cs.

Note

Visual Studio automatically changes the class declaration in DebuggerSide.cs to match the new file name.
In Solution Explorer, right-click References and choose Add Reference on the shortcut menu.
In the Add Reference dialog box, on the .NET tab, choose Microsoft.VisualStudio.DebuggerVisualizers.DLL.
Click OK.
In DebuggerSide.cs, add the following statement to the using statements:
```
using Microsoft.VisualStudio.DebuggerVisualizers;
```

Now you are ready to create the debugger-side code. This is the code that runs within the debugger to display the information that you want to visualize. First, you have to change the declaration of the DebuggerSide object so that inherits from the base class DialogDebuggerVisualizer.

To inherit from DialogDebuggerVisualizer

In DebuggerSide.cs, go to the following line of code:
```
public class DebuggerSide
```

Change the code to:

public class DebuggerSide : DialogDebuggerVisualizer

DialogDebuggerVisualizer has one abstract method (Show) that you must override.

To override the DialogDebuggerVisualizer.Show method

In public class DebuggerSide, add the following method:

override protected void Show(IDialogVisualizerService windowService, IVisualizerObjectProvider objectProvider)
{
}

The Show method contains the code that actually creates the visualizer dialog box or other user interface and displays the information that has been passed to the visualizer from the debugger. You must add the code that creates the dialog box and displays the information. In this walkthrough, you will do this using a Windows forms message box. First, you must add a reference and using statement for System.Windows.Forms.

To add System.Windows.Forms

In Solution Explorer, right-click References and choose Add Reference on the shortcut menu.
In the Add Reference dialog box, on the .NET tab, choose System.Windows.Forms.DLL.
Click OK.
In DebuggerSide.cs, add the following statement to the using statements:
```
using System.Windows.Forms;
```

Now, you will add some code to create and show the user interface for your visualizer. Because this is your first visualizer, we will keep the user interface simple and use a Message Box.

To show the Visualizer Output in a dialog box

In the Show method, add the following line of code:
```
MessageBox.Show(objectProvider.GetObject().ToString());
```
This example code does not include error handling. You should include error handling in a real visualizer or any other kind of application.
On the Build menu, choose Build MyFirstVisualizer. The project should build successfully. Correct any build errors before continuing.

That is the end of the debugger side code. There is one more step, however; the attribute that tells the debuggee side which collection of classes comprises the visualizer.

To add the debuggee-side code

Add the following attribute code to DebuggerSide.cs, after the using statements but before namespace MyFirstVisualizer:

[assembly:System.Diagnostics.DebuggerVisualizer(
typeof(MyFirstVisualizer.DebuggerSide),
typeof(VisualizerObjectSource),
Target  = typeof(System.String),
Description  = "My First Visualizer")]

On the Build menu, choose Build MyFirstVisualizer. The project should build successfully. Correct any build errors before continuing.

At this point, your first visualizer is finished. If you have followed the steps correctly, you can build the visualizer and install it into Visual Studio. Before you install a visualizer into Visual Studio, however, you should test it to make sure that it runs correctly. You will now create a test harness to run the visualizer without installing it into Visual Studio.

To add a Test Method to show the visualizer

Add the following method to class public DebuggerSide:

public static void TestShowVisualizer(object objectToVisualize)
{
   VisualizerDevelopmentHost visualizerHost = new VisualizerDevelopmentHost(objectToVisualize, typeof(DebuggerSide));
   visualizerHost.ShowVisualizer();
}

On the Build menu, choose Build MyFirstVisualizer. The project should build successfully. Correct any build errors before continuing.

Next, you must create an executable project to call your visualizer DLL. For simplicity, we will use a Console Application project.

To add a console application project to the solution

On the File menu, choose Add and then click New Project.
In the Add New Project dialog box, in the Templates box, choose Console Application.
In the Name box, type a meaningful name for the console application, such as MyTestConsole.
Click OK.

Now, you must add the necessary references so MyTestConsole can call MyFirstVisualizer.

To add necessary references to MyTestConsole

In Solution Explorer, right-click MyTestConsole and choose Add Reference on the shortcut menu.
In the Add Reference dialog box, .NET tab, choose Microsoft.VisualStudio.DebuggerVisualizers.DLL.
Click OK.
Right-click MyTestConsole and choose Add Reference again.
In the Add Reference dialog box, click the Projects tab and then click MyFirstVisualizer.
Click OK.

Now, you will add the code to finish the test harness.

To add code to MyTestConsole

In Solution Explorer, right-click Program.cs and choose Rename on the shortcut menu.
Edit the name from Program.cs to something more meaningful, such as TestConsole.cs.

Note Visual Studio automatically changes the class declaration in TestConsole.cs to match the new file name.
In TestConsole.cs, add the following code to the using statements:
```
using MyFirstVisualizer;
```

In method Main, add the following code:

String myString = "Hello, World";
DebuggerSide.TestShowVisualizer(myString);

Now, you are ready to test your first visualizer.

To test the visualizer

In Solution Explorer, right-click MyTestConsole and choose Set as Startup Project on the shortcut menu.
On the Debug menu, choose Start.

The console application starts and the Visualizer appears and displays the string, "Hello, World."

Congratulations. You have just built and tested your first visualizer.

If you want to use your visualizer in Visual Studio rather than just calling it from the test harness, you have to install it. For more information, see How to: Install a Visualizer.

Using the Visualizer Item Template

So far, this walkthrough has shown you how to create a visualizer manually. This was done as a learning exercise. Now that you know how a simple visualizer works, there is an easier way to create one: using the visualizer item template.

First, you have to create a new class library project.

To create a new class library

On the File menu, choose Add and then click New Project.
In the Add New Project dialog box, under Project Types, select Visual C#.
In the Templates box, choose Class Library.
In the Name box, type an appropriate name for the class library, such as MySecondVisualizer.
Click OK.

Now, you can add a visualizer item to it:

To add a visualizer item

In Solution Explorer, right-click MySecondVisualizer.
On the shortcut menu, choose Add and then click New Item.
In the Add New Item dialog box, under Templates, Visual Studio Installed Templates, select Debugger Visualizer.
In the Name box, type an appropriate name, such as SecondVisualizer.cs.
Click Add.

That is all there is to it. Look at the file SecondVisualizer.cs and view the code that the template added for you. Go ahead and experiment with the code. Now that you know the basics, you are on your way to creating more complex and useful visualizers of your own.

Share via