Edited by Nina Miller
Figure 1 - Visio Control in a Windows Form
Introduction
One of the most powerful drawing tools on the market is Microsoft Visio for Office. However, if you want to create add-ins or applications for this tool, the documentation for controlling the API is scarce and hard to follow. Searching the Net for samples on using Visio inside of the ActiveX control can be daunting. It's even hard finding samples on how to do basic tasks, like drawing a shape inside the control. As a result, I decided to write my own sample that will help you get started drawing shapes in a Windows form using the Visio ActiveX Component. The sample will show you how to add the control to your toolbox, add a stencil, and connect two shapes together from the stencil.
***Note: If you are wondering: "How can I use the ActiveX control without Visio installed?", you can't. You need to have Visio installed on your machine in order to use the ActiveX control which means you need to own Visio. (I know this seems obvious to many reading this article, but I often get this question for other office products such as Microsoft Word and Microsoft Excel.) The ActiveX control does not stand alone, it talks directly to Visio through In-Place editing.
Installing in the Toolbox
To install the Visio ActiveX control into the tool box, simply right click on the Toolbox and pick ("Choose Items"). Then go to the COM tab as shown in figure 2 and select the Visio Active X Control, then click OK.
Figure 2 - Choosing the Visio COM componnet
This will install the Visio Component into your .NET Toolbox as shown in Figure 3:
Figure 3 - Visio Component inside the .NET Toolbox
Now you can simply drag the Visio control onto the Windows form as seen in figure 1. We are now ready to program Visio in .NET.
Code
Like other office automation objects, Visio consists of an Application, Documents, and Windows. The document contains the shape data, and the window lets you trap window events and do view operations such as copy and paste. We will be working with two documents in Visio: (1) the stencil and (2) the page document. The stencil contains the shapes we want to draw to the page document. The Visio ActiveX control already provides us with an active document through the first page. However, the stencil document needs to be opened. We can use the OpenEx method in order to open an existing stencil. In this example, we open the Basic Shapes stencil. We then display the number of shapes in this stencil in our tool strip status bar.
The first shape we want to create in our page document is the triangle shape. All shapes are accessed through the Masters collection inside the stencil document. We use the Drop method to drop the triangle shape into the Visio Page. In the drop method we can specify where we want the shape to appear on the page. Coordinates in Visio start in the bottom left hand corner and are measured in inches. In this example, we drop a triangle on the lower left hand corner of the page at x=1.5", y=1.5". Next we drop a square in the upper right hand corner using the same Drop method at x=10", y=7.5". (Note that the control is shown in landscape.)
Listing 1 - Drawing Shapes through Automation in the Visio Control
public void DrawSampleShapeConnection()
{
// get the current draw page
Visio.Page currentPage = axDrawingControl1.Document.Pages[1];
// Load the stencil we want
Visio.Document currentStencil = axDrawingControl1.Document.Application.Documents.OpenEx("Basic_U.vss", (short)Visio.VisOpenSaveArgs.visOpenDocked);
// show the stencil window
Visio.Window stencilWindow = currentPage.Document.OpenStencilWindow();
// this gives a count of all the stencils on the status bar
int countStencils = currentStencil.Masters.Count;
toolStripStatusLabel1.Text = string.Format("Number of Stencils in {0} = {1}", currentStencil.Title, countStencils);
statusStrip1.Refresh();
// create a triangle shape from the stencil master collection
Visio.Shape shape1 = currentPage.Drop(currentStencil.Masters["Triangle"], 1.50, 1.50);
// create a square shape from the stencil master collection
Visio.Shape shape2 = currentPage.Drop(currentStencil.Masters["Square"], 10, 7.50);
// create a dynamic connector from the stencil master collection
Visio.Shape connector = currentPage.Drop(currentStencil.Masters["Dynamic connector"], 4.50, 4.50);
// currentPage.Layout();
// connect the shapes together through the dynamic connector
ConnectShapes(shape1, shape2, connector);
} |
Connecting Shapes
Finally, we want to connect the two shapes together. This is accomplished through a property in Visio Shape objects called Cells. Cells are properties inside a shape used for a particular purpose to manipulate the shape or query the shape. The closest analogy to the concept of a Cell is that of a Cell in an Excel SpreadSheet. The Cell is accessed from three levels: a section, then a row, and finally, a cell which represents a property inside a Visio Shape. The get_cellSRC method of a Visio Shape allows you to access a Visio Connector Cell using these three parameters. In this specific example we use: (1) the VisSectionIndices.visSectionObject enum (2) the VisRowIndices.visRowXFormOut enum, and (3) the VisCellIndices.visXFormPinX enum to access cell connectors of our triangle and square shapes. There appears to be some rhyme or reason to the naming of the row and the cell enumeration. Rows start with visRow<property group>. Cells start with vis<property group><sub property>.
The way to connect two shapes together in Visio is to drop the connector shape on the diagram and then use the Cells to "glue" the shapes to the connector. The GlueTo method of a Cell will glue the connector Cell of one shape to another shape's connector Cell.
Listing 2 -
private static void ConnectShapes(Visio.Shape shape1, Visio.Shape shape2, Visio.Shape connector)
{
// get the cell from the source side of the connector
Cell beginXCell = connector.get_CellsSRC(
(short)VisSectionIndices.visSectionObject,
(short)VisRowIndices.visRowXForm1D,
(short)VisCellIndices.vis1DBeginX);
// glue the source side of the connector to the first shape
beginXCell.GlueTo(shape1.get_CellsSRC(
(short)VisSectionIndices.visSectionObject,
(short)VisRowIndices.visRowXFormOut,
(short)VisCellIndices.visXFormPinX));
// get the cell from the destination side of the connector
Cell endXCell = connector.get_CellsSRC(
(short)VisSectionIndices.visSectionObject,
(short)VisRowIndices.visRowXForm1D,
(short)VisCellIndices.vis1DEndX);
// glue the destination side of the connector to the second shape
endXCell.GlueTo(shape2.get_CellsSRC(
(short)VisSectionIndices.visSectionObject,
(short)VisRowIndices.visRowXFormOut,
(short)VisCellIndices.visXFormPinX));
} |
The three sets of a parameters can be used in other ways to manipulate a shape. If we want to add an arrow to our connector, we can access three magic parameters to retrieve the cell that changes the arrow as shown in listing 3. Here we assign the FormulaU property in order to specify the shape of the arrow. You can experiment with other numbers to see what other arrows are produced. For example, while "5" produces a filled in arrow, "7" produces an arrow consisting of two lines.
Listing 3 - Adding an arrow to the connector
// add an arrow to the connector on its end point
Cell arrowCell = connector.get_CellsSRC((short)VisSectionIndices.visSectionObject, (short)VisRowIndices.visRowLine, (short)VisCellIndices.visLineEndArrow);
arrowCell.FormulaU = "5"; |
Likewise, we would arrive at the same result by getting the cell directly from the set of cells in the connector shape itself. We just need to know the name of the property index string containing the end arrow:
// add an arrow to the connector on its end point
connector.get_Cells("EndArrow").Formula = "=5"; |
Conclusion
Visio is a great drawing tool for creating everything from landscapes to CAD diagrams. Automating Visio can be accomplished with .NET through the COM Wrapper around the Visio ActiveX Control. Controlling Visio is a bit tricky, because you need to be aware of the properties that exist with Shapes and how to use them. As you become familiar with shapes and their properties, you can make Visio behave the way you wish within the boundaries of the Visio object model. Anyway, enjoy experimenting with the Visio Automation engine. Perhaps with the power of .NET and Visio you can create your own powerful product to draw in some customers for your own business.
John WrightPosted Jul 30, 2022, 1:19 AM
Can this code run in VS 2017?
rick radcliffePosted Oct 16, 2014, 12:05 PM
I have added the COM object but when I even open the provided solution I do not see the Visio objects defined and there are many compiler errors. How do I get the objects to be defined ... do need a "using" statement?
Gabriel GabrielPosted Apr 4, 2012, 8:55 AM
I'm doing a project which basically creates UML diagrams. Basically I provide some relations for user like "Binary Association", so I need to get some information that user enters in "UML Association Properties" dialog (when user double clicks on Binary Association) such as "Multiplicity", but I don't know how can I have access to these data. I would really appreciate if you help me on this, because there is no documentation regarding this issue for Visio SDK.
nahlaPosted Feb 26, 2012, 4:41 PM
hello,, i saw this article and i found it very useful. my problem is how to interact with shapes in the visio control on run time, i made 2 visio control on c# form with one source file, i wanna do the following, if i select one shape from one visio control, it will be selected in the other visio control !!! plz help me :(
Bala MunugotiPosted May 31, 2011, 2:39 AM
Hi, How can we hide or close more shapes option in the shapes window Now am using visio 2010 programing if you have any idea, Please let me know.. Regards Balu
Former memberPosted Apr 13, 2011, 3:36 AM
This is really a wonderfull post, I am sure you are going to like this product as well. You can Manipulate MS Visio Files on ASP.NET Web & Windows Applications. Here your are: http://www.aspose.com/categories/.net-components/aspose.diagram-for-.net/default.aspx
joseph muellerPosted Feb 15, 2011, 10:32 AM
Is it possible to do that with WPF? And if, how do I do that? If I choose the Microsoft Office Visio 14 Drawing Com Component it doesn´t appear in the toolbox. Any idea, how I can use the Visio functionality in a program with WPF? Thanks a lot!
Peder SkanningPosted Sep 9, 2010, 8:36 AM
Hi! I can open an existing Visio document from a Web application like this: Document visioDoc = visio.Documents.Add("PathToExisting.vsd"); How do I open a new document to draw an organisation chart? Thanks Peder
TimurPosted Jul 17, 2010, 3:27 PM
Hi Mike, i would like to know, under which license such a tool could be created. could it be sold without any fees?
ThomaseditedPosted Feb 17, 2010, 4:14 PMEdited Feb 17, 2010, 4:15 PM
Hey I need to fins out how to compare a shape to its master shape does any one know how to that?
pds smseditedPosted Dec 19, 2009, 6:10 AMEdited Dec 19, 2009, 6:13 AM
Hi Mike Gold, I successfully created flowchart dynamically for my application as per the requirement with help of your nice article.an i integrated with this windows application as dll to web application in c#.But when i am sending request at very first time its working fine.when i sending second request from the web it throws the Com exception.. Attempted to make calls on more than one thread in single threaded mode. (Exception from HRESULT: 0x80010102 (RPC_E_ATTEMPTED_MULTITHREAD)) in the line this.Load += new System.EventHandler(this.Form1_Load); ((System.ComponentModel.ISupportInitialize)(this.axDrawingControl1)).EndInit(); in form.designer.cs while excuting public Form1() { InitializeComponent(); } ..am really fed up with this error to solve ..please kindly help me regarding this error.it will be grateful for you..thank you..
Feng ZhangPosted Sep 25, 2009, 6:34 AM
Hi, Mike Gold, Is it possible to use .Net controls to edit the shape's data in visio add-in, like using PropertyGrip to edit a customer shape data? In my case, I got a complicated customer data structure, which can not be easily defined by using visio's shape data, since visio's shape data only surpport simple data type, like string, number, boolean, variableList, fixedList, Duration. I need a more flexible UI to edit the customer data, so I am just wondering if it is possible to use PropertyGrid in visio add-in to edit my customer data. Thanks!
Fernando MontesPosted Feb 8, 2009, 10:25 PM
hello, i have a question... i try to draw a class diagram, y use te uml stencils, i can draw the class and the connectors, but i cant set de properties from the clases and connectors from uml, only general properties...like the name... how you did this form? can i modify the form, the form from the example is the default? thanks a lot...!
RobertPosted Dec 14, 2007, 10:45 AM
Hi, is it possible to use visio shapes in ASP.NET? Pretty much the same as this tutorial (titled: Drawing Visio Shapes in the Visio ActiveX Control using C# and .NET). however using web forms instead of windows forms. any ideas?
george hamiltonPosted Dec 3, 2007, 5:05 PM
can you tell me how to apply a data graphic to a shape using .NET? is this done using an activex control?
Mukesh WadhwaPosted Nov 29, 2007, 3:29 AM
I have a list of shapes & connectors in visio page in c#. what is code for how to select/highlight connector in C# of visio 2003. plz reply at [email protected] Thanks & Regards Mukesh
Abhishek NarulaPosted Sep 8, 2007, 12:01 PM
Just what I was looking for. Thanks a heap.
Jacob BahulaPosted Jul 11, 2007, 8:55 AM
how to deploy this application on computer that does have visio