In this screencast, I talk through the process of creating a simple custom debug visualizer to view a System.Drawing.Image image.
Essentially, the visualizer is a class library that references the Microsoft.VisualStudio.DebuggerVisualizers and System.Windows.Forms assemblies. The project has a class, ImageVisualizer, that inherits the .NET framework DialogDebuggerVisualizer class, and overrides its Show method:
class ImageVisualizer : DialogDebuggerVisualizer
{
protected override void Show(IDialogVisualizerService windowService, IVisualizerObjectProvider objectProvider)
{
Image image = (Image)objectProvider.GetObject();
ImageForm form = new ImageForm { DebugImage = image };
windowService.ShowDialog(form);
}
}
This converts the variable that’s being debugged to an Image type using the objectProvider parameter’s GetObject method call. This is then assigned to the dialog’s DebugImage property, and the dialog is shown using the windowService parameter’s ShowDialog method.
The actual dialog is very simple indeed, comprising of just a PictureBox to show the image, and a close button to, well, close the dialog.
public Image DebugImage
{
set
{
this.pictureBoxImage.Image = value;
this.pictureBoxImage.SizeMode = PictureBoxSizeMode.Zoom;
}
get
{
return this.pictureBoxImage.Image;
}
}
The dialog class’ DebugImage property simply assigns the picture box’s Image property and zooms. I kept things simple for the screencast, but there’s no reason why the dialog couldn’t be extended to show other image properties such as image location, image type, and dimensions.
To use the visualizer, simply build the project and copy the dll to the Visualizers directory, which on my machine is:
C:Program Files (x86)Microsoft Visual Studio 10.0Common7PackagesDebuggerVisualizers
This particular path relates specifically to my machine, since I’m running 64 bit windows, and Visual Studio 10. Once the dll has been copied, it can be used on the next debug session. In the screencast, I use a simple console program example that loads an image from file. Clicking on the magnifying glass opens up the visualizer’s dialog, and the image can be seen.
