Creating Custom Visualizers

ASP.NET 2.0 introduces the concept of Visualizers. Visualizers help us to view the data in a more meaningful way. Visual Studio.NET 2005 is equipped with some build in visualizers which includes DataSet Visualizer, DataTable Visualizer and Text Visualizer. In this article I will demonstrate how to create a custom image visualizer.

Introduction:

ASP.NET 2.0 introduces the concept of Visualizers. Visualizers help us to view the data in a more meaningful way. Visual Studio.NET 2005 is equipped with some build in visualizers which includes DataSet Visualizer, DataTable Visualizer and Text Visualizer. In this article I will demonstrate how to create a custom image visualizer.

What is a Visualizer?

A Visualizer is a new feature added in Visual Studio.NET 2005 which, helps the developers to view their data in a better way while they are in debugging mode. There are few visualizer build in which allows you to view the contents of the DataSet and DataTable.

In order to visualize an element simply, run the application in debugging mode and populate the DataSet. When the DataSet is populated simply hover over the DataSet and you will see an option for DataSet Visualizer.

In the above image you can view the DataSet Visualizer which displays the contents from the Categories table in the Northwind database.

Creating Custom Visualizer:

Creating a custom visualizer is pretty straightforward. In this article I will demonstrate how you can create an Image Visualizer which will help you to visualize the images.

Add a class library project to your application and then add a “Debugger Visualizer” using the “Add New Item” option. Also, add a “Windows Form” to your project. Add a PictureBox control on the windows form which will be used to display the image. In the windows form you can expose the PictureBox using the public property. Check out the code below:

public PictureBox PictureBoxView
        {
            get { return this.pictureBox1; }
            set { this.pictureBox1 = value; }
        }

The “Debugger Visualizer” file will contain two methods namely “Show” and “TestShowVisualizer”.

Let’s check out the Show method.

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

            using (TestForm displayForm = new TestForm())
            {
                Image data = (Image)objectProvider.GetObject();

                displayForm.PictureBoxView.Image = data;
                displayForm.PictureBoxView.Height = data.Height;
                displayForm.PictureBoxView.Width = data.Width;

                displayForm.ClientSize = new Size(displayForm.PictureBoxView.Width, displayForm.PictureBoxView.Height);

                windowService.ShowDialog(displayForm);
            }
        }

The important line in the Show method is Image data = (Image)objectProvider.GetObject(); which gets the object and converts it to an Image type.

Finally, you will need to add the DebuggerVisualizer attribute on the namespace to mark it as a visualizer.

[assembly: System.Diagnostics.DebuggerVisualizer(
       typeof(MyVisualizer.ImageVisualizer),
       Target=typeof(Image), Description="Image Visualizer")]
namespace MyVisualizer

Using the Image Visualizer:

Testing out the custom visualizer is also pretty simple. You can use the TestShowVisualizer method to test your visualizer. Check out the following code:

protected void Page_Load(object sender, EventArgs e)
    {
       System.Drawing.Image image = System.Drawing.Image.FromFile(@"C:\Documents and Settings\Azam\Desktop\Pics\tn_DSCN05211.jpg");

       MyVisualizer.ImageVisualizer.TestShowVisualizer(image);
    }

If you run this application the visualizer will popup and it will display the image. Check out the effect below:

The image visualizer displays the image in the PictureBox control contained in the windows form.

Deploying the Visualizer:

If you intend to use the visualizer just for yourself then you can copy the .dll to the C:\Documents and Settings\[UserName]\My Documents\Visual Studio 2005\Visualizers folder. If you want the visualizer to be available to anyone who uses your computer then you can copy the .dll to C:\Program Files\Microsoft Visual Studio 8\Common7\Packages\Debugger\Visualizers\ directory.

References:

1) ASP.NET 2.0 MVP Hacks

I hope you liked the article, happy coding!