Tutorial: Escribir un visualizador en C#

  • Artículo

En este tutorial se muestra cómo escribir un visualizador sencillo con C#. El visualizador que creará en este tutorial muestra el contenido de una cadena mediante un cuadro de mensaje de formularios Windows Forms. Este sencillo visualizador de cadenas no es especialmente útil, pero muestra los pasos básicos que se deben seguir para crear visualizadores más útiles para otros tipos de datos.

Nota

Los cuadros de diálogo y los comandos de menú que se ven pueden diferir de los descritos en la Ayuda, dependiendo de los valores de configuración o de edición activos.Para cambiar la configuración, vaya al menú Herramientas, y elija Importar y exportar configuraciones.Para obtener más información, vea Personalizar la configuración de desarrollo en Visual Studio.

El código del visualizador debe colocarse en un archivo DLL, el cual será leído por el depurador. Por lo tanto, el primer paso es crear un proyecto de biblioteca de clases para el archivo DLL.

Para crear un proyecto de biblioteca de clases

  1. En el menú Archivo, elija Nuevo y, después, haga clic en Nuevo proyecto.

  2. En el cuadro de diálogo Nuevo proyecto, en Tipo de proyecto, seleccione Visual C#.

  3. En el cuadro Plantillas, elija Biblioteca de clases.

  4. En el cuadro Nombre, escriba un nombre adecuado para la biblioteca de clases como, por ejemplo, MyFirstVisualizer.

  5. Haga clic en Aceptar.

Después de crear la biblioteca de clases, debe agregar una referencia a Microsoft.VisualStudio.DebuggerVisualizers.DLL, para poder utilizar las clases que allí se definen. No obstante, antes de agregar la referencia, debe cambiar los nombres de algunas clases para que sean significativos.

Para cambiar el nombre de Class1.cs y agregar Microsoft.VisualStudio.DebuggerVisualizers

  1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en Class1.cs y elija Cambiar nombre en el menú contextual.

  2. Cambie el nombre Class1.cs por un nombre significativo, como DebuggerSide.cs.

    Nota

    Visual Studio cambia automáticamente la declaración de clase en DebuggerSide.cs para que coincida con el nuevo nombre del archivo.

  3. En el Explorador de soluciones, haga clic con el botón secundario del mouse en Referencias y, a continuación, elija Agregar referencia en el menú contextual.

  4. En el cuadro de diálogo Agregar referencia, en la ficha .NET, elija Microsoft.VisualStudio.DebuggerVisualizers.DLL.

  5. Haga clic en Aceptar.

  6. En DebuggerSide.cs, agregue la instrucción siguiente a las instrucciones using:

    using Microsoft.VisualStudio.DebuggerVisualizers;

Ahora, ya está listo para crear el código del depurador. Éste es el código que se ejecuta dentro del depurador para mostrar la información que desea visualizar. En primer lugar hay que cambiar la declaración del objeto DebuggerSide para que herede de la clase base DialogDebuggerVisualizer.

Para heredar de DialogDebuggerVisualizer

  1. En DebuggerSide.cs, vaya a la línea siguiente del código:

    public class DebuggerSide

  2. Cambie el código por:

    public class DebuggerSide : DialogDebuggerVisualizer

DialogDebuggerVisualizer tiene un método abstracto (Show) que debe reemplazar.

Para reemplazar el método DialogDebuggerVisualizer.Show

  • En public class DebuggerSide, agregue el método siguiente:

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

El método Show contiene el código que verdaderamente crea el cuadro de diálogo del visualizador, u otra interfaz de usuario, y muestra la información que se ha pasado del depurador al visualizador. Es necesario agregar el código que crea el cuadro de diálogo y muestra la información. En este tutorial, se realizará este paso mediante un cuadro de mensaje de formularios Windows Forms. En primer lugar debe agregar una referencia y una instrucción using para System.Windows.Forms.

Para agregar System.Windows.Forms

  1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en Referencias y, a continuación, elija Agregar referencia en el menú contextual.

  2. En el cuadro de diálogo Agregar referencia, en la ficha .NET, elija System.Windows.Forms.DLL.

  3. Haga clic en Aceptar.

  4. En DebuggerSide.cs, agregue la instrucción siguiente a las instrucciones using:

    using System.Windows.Forms;

Ahora, agregará código para crear y mostrar la interfaz de usuario para el visualizador. Debido que éste es su primer visualizador, mantendremos la interfaz de usuario sencilla y utilizaremos un cuadro de mensaje.

  1. En el método Show, agregue la siguiente línea de código:

    MessageBox.Show(objectProvider.GetObject().ToString());

    En este código de ejemplo no se incluye el control de errores. Debe incluir el control de errores en un visualizador real o en cualquier otro tipo de aplicación.

  2. En el menú Compilar, elija Compilar MyFirstVisualizer. El proyecto debería compilarse correctamente. Corrija cualquier error de compilación antes de continuar.

Ése es el fin del código del depurador. Sin embargo, hay un paso más que realizar; el atributo que indica al lado depurado qué colección de clases incluye el visualizador.

Para agregar el código que está siendo depurado

  1. Agregue el código de atributo siguiente a DebuggerSide.cs, después de las instrucciones using, pero antes de namespace MyFirstVisualizer:

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

  2. En el menú Compilar, elija Compilar MyFirstVisualizer. El proyecto debería compilarse correctamente. Corrija cualquier error de compilación antes de continuar.

En este momento, el primer visualizador está terminado. Si ha seguido los pasos correctamente, debería poder compilar el visualizador e instalarlo en Visual Studio. Sin embargo, antes de instalar un visualizador en Visual Studio, debería probarlo para asegurarse de que se ejecuta correctamente. A continuación creará un instrumento de prueba para ejecutar el visualizador sin instalarlo en Visual Studio.

Para agregar un método de prueba para mostrar el visualizador

  1. Agregue el método siguiente a la clase public DebuggerSide:

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

  2. En el menú Compilar, elija Compilar MyFirstVisualizer. El proyecto debería compilarse correctamente. Corrija cualquier error de compilación antes de continuar.

Luego, debe crear un proyecto ejecutable para llamar al archivo DLL del visualizador. Por simplicidad, utilizaremos un proyecto de aplicación de consola.

Para agregar un proyecto de aplicación de consola a la solución

  1. En el menú Archivo, elija Agregar y, después, haga clic en Nuevo proyecto.

  2. En el cuadro de diálogo Agregar nuevo proyecto, en el cuadro Plantillas, elija Aplicación de consola.

  3. En el cuadro Nombre, escriba un nombre significativo para la aplicación de consola, como MyTestConsole.

  4. Haga clic en Aceptar.

Ahora, debe agregar las referencias necesarias para que MyTestConsole pueda llamar a MyFirstVisualizer.

Para agregar las referencias necesarias a MyTestConsole

  1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en MyTestConsole y elija Agregar referencia en el menú contextual.

  2. En el cuadro de diálogo Agregar referencia, en la ficha .NET, elija Microsoft.VisualStudio.DebuggerVisualizers.DLL.

  3. Haga clic en Aceptar.

  4. Haga clic con el botón secundario en MyTestConsole y elija nuevamente Agregar referencia.

  5. En el cuadro de diálogo Agregar referencia, haga clic en la ficha Proyectos y, a continuación, haga clic en MyFirstVisualizer.

  6. Haga clic en Aceptar.

A continuación, agregará el código para finalizar el instrumento de prueba.

Para agregar el código a MyTestConsole

  1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en Program.cs y elija Cambiar nombre en el menú contextual.

  2. Cambie el nombre Program.cs por un nombre más significativo, como TestConsole.cs.

    Nota   Visual Studio cambia automáticamente la declaración de clase de TestConsole.cs para que coincida con el nuevo nombre del archivo.

  3. En TestConsole.cs, agregue el siguiente código a las instrucciones using:

    using MyFirstVisualizer;

  4. En el método Main, agregue el código siguiente:

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

Ahora, está listo para probar el primer visualizador.

Para probar el visualizador

  1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en MyTestConsole y, en el menú contextual, elija Establecer como proyecto de inicio.

  2. En el menú Depurar, elija Iniciar.

    Se iniciará la aplicación de consola y aparecerá el visualizador, que mostrará la cadena "Hello, World".

Enhorabuena. Acaba de compilar y probar el primer visualizador.

Si desea utilizar el visualizador en Visual Studio, en lugar de simplemente llamarlo desde el instrumento de prueba, tendrá que instalarlo. Para obtener más información, vea Cómo: Instalar un visualizador.

Utilizar la plantilla de elementos del visualizador

Hasta ahora, en este tutorial se ha mostrado cómo crear manualmente un visualizador. Esto se realizó como un ejercicio de aprendizaje. Ahora que sabe cómo funciona un visualizador sencillo, existe una manera más fácil de crear uno: mediante la plantilla de elementos del visualizador.

En primer lugar, debe crear un nuevo proyecto de biblioteca de clases.

Para crear una nueva biblioteca de clases

  1. En el menú Archivo, elija Agregar y, después, haga clic en Nuevo proyecto.

  2. En el cuadro de diálogo Agregar nuevo proyecto, en Tipo de proyecto, seleccione Visual C#.

  3. En el cuadro Plantillas, elija Biblioteca de clases.

  4. En el cuadro Nombre, escriba un nombre adecuado para la biblioteca de clases como, por ejemplo, MySecondVisualizer.

  5. Haga clic en Aceptar.

A continuación, puede agregarle un elemento del visualizador:

Para agregar un elemento del visualizador

  1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en MySecondVisualizer.

  2. En el menú contextual, elija Agregar y, a continuación, haga clic en Nuevo elemento.

  3. En el cuadro de diálogo Agregar nuevo elemento, en Plantillas, Plantillas instaladas de Visual Studio, seleccione Visualizador del depurador.

  4. En el cuadro Nombre, escriba un nombre adecuado, como SecondVisualizer.cs.

  5. Haga clic en Agregar.

Eso es todo lo que tiene que hacer. Examine el archivo SecondVisualizer.cs y observe el código que la plantilla ha agregado por usted. Continúe y experimente con el código. Ahora que conoce los fundamentos, ya puede crear visualizadores más complejos y útiles.

Vea también

Tareas

Cómo: Instalar un visualizador

Conceptos

Arquitectura de un visualizador

Otros recursos

Visualizadores