Editor Tutorial 3: How to Build a Multi-view Editor

Switch View

Collapse All

Visual Studio SDK

Updated: November 2007

A multi-view editor is an editor that includes both code and design views. In this tutorial, you will create a multi-view editor inside of Visual Studio to edit Scalable Vector Graphics (SVG) files. The editor will include a code view to edit the XML text and a design view in which the SVG image is rendered. The next tutorial, Editor Tutorial 4: How to Build Toolbox Controls for Specific Editors and Designers will add drag-and-drop editing functionality to the design surface.

Svg is an open standard developed under the W3C (World Wide Web Consortium) Process. This is an XML-based graphics language that describes images with vector shapes, text, and embedded raster graphics. SVG files are compact and provide high-quality graphics on the Web, in print, and on resource-limited handheld devices. In addition, SVG supports scripting and animation, so is ideal for interactive, data-driven, personalized graphics.

This tutorial does not use any of the custom editors created by the Visual Studio Integration Package Wizard. Instead, the editor will be created by adding custom code.

This tutorial demonstrates how to accomplish the following tasks:

Create an editor from scratch.
Add the components for a multi-view editor.
Use an assembly to render an SVG image.

The trail does rely on an assembly that contains SVG rendering code. This assembly takes the complications out of adding SVG rendering to the project in this trail.

This tutorial is part of a series that teaches how to create custom editors and designers for the Visual Studio integrated development environment (IDE). For more information, see Editor Tutorials.

R Requirements

This tutorial has these requirements:

Visual Studio 2008
Visual Studio 2008 SDK

Preparing the Project

To Prepare the SVGEditor project

Download the SVGSupport assembly and the two sample graphic files, Butterfly.svg and Heart.svg to your computer from <Visual Studio 2008 SDK Installation Path>\VisualStudioIntegration\Samples\IDE\CSharp\Example.SvgViewer\Samples
Use the Visual Studio Integration Package Wizard to create a new project named SVGEditor. Set the programming language to C# and accept all defaults. Do not check any of the VSPackage options.
For more information, see How to: Create VSPackages (C# and Visual Basic) or review the previous tutorials in this series.
From the Solution Explorer, right click on the References folder, select Add reference from the popup menu, find EnvDTE in the list and click Ok.
Add a reference to SVGSupport

Creating the Editor

The SVG Editor consists of three main components, an editor factory, a viewer, and a panel. Blah, blah, say more when I understand what the thing does.

The SvgEditorFactory class is an editor factory class implementing IVsEditorFactory interface, which will bring up SvgViewer when an *.svg file is selected.

Create the SVGEditorFactory class

From the Solution Explorer, open Guid.cs.
From the Tools menu, select Create Guid, select the Registry Format radio button and click Copy.

<T1N3-7.gif>

Inside the GuidList class, declare a String and paste the newly-created Guid as its value, as shown.
Declare a Guid whose value is the new string, as follows.
This Guid will be used by the SvgEditorFactory class.
Save and close Guid.cs
Create a new class by right-clicking on the SVGEditor project in Solution Explorer, and selecting Add, then Class.
Name the class SvgEditorFactory.
Add the following namespace declarations
Apply the Guid you created to the class and make it inherit from IVsEditorFactory, as shown.
Right click on IVsEditorFactory and select implement Interface, then in the sub-menu, select Implement Interface.
Visual Studio creates stubs for the four methods required by the interface.
Implement these stub methods and add other members to the class as shown.

The SvgViewer class is the main viewer that integrates with Visual Studio, hosting the SvgPanel control.

Create a class named SvgViewer. Copy the following source code into it.

The designer portion of the add-in draws to a Panel. A class named SvgPanel is derived from Panel and can be found in the SvgPanel.cs file.

Create a class named SvgPanel and copy the following code into it. (Remember to change all references to SVGEditorPrj if you changed the namespace.)

Integrating the Package

The package requires a class to manage the Xml view attributes. This class will be associated with the SvgEditorFactor by a Guid. Please refer to the VsPckg.cs code later in this trail to see it.

The ProvideXmlViewAttribute is derived from Microsoft.VisualStudio.Shell.RegistrationAttribute, and is used to write the necessary registry entries for this package. The entire class code is shown below. You must create this class and then copy the following code into it. (If your namespace is different than Company.SVGEditor, be sure to make a change in this code.)

Edit SvgEditorPackage.cs

Add the following namespace reference:

Apply the following attributes to the SVGEditorPackage class by placing them within the SvgEditor namespace, just above the class definition.

Add a private variable to the class to hold the SVGEditorFactory instance.

Inside the Package Members region, add the following lines to the end of the Initialize() method.

Next Steps

The next trail builds on this project. It adds a custom tool window and allows you to drag squares and circles into the design window. This adds the object to the SVG image and renders the new image.