Share via

Basic Shapes Development

  • Article

This content is no longer actively maintained. It is provided as is, for anyone who may still be using these technologies, with no warranties or claims of accuracy with regard to the most recent product version or service release.

 

Microsoft Corporation

October 2000

Applies to:

Summary: This article is an introduction to creating your own Microsoft Visio shapes. It explores creating Visio SmartShapes symbols, and explains the basics of ShapeSheet functionality. (13 printed pages)

Contents

Introduction Cloning Existing Shapes Drawing Shapes from Scratch Navigation Tips Adding Connection Points Text Fundamentals ShapeSheet

Introduction

This article is not meant to be a complete guide to Microsoft® Visio® SmartShapes®, and only serves to highlight its most interesting features.

The Microsoft Visio application offers the solution developer easy access to sophisticated graphics functionality with its drawing tools and shapes. Using SmartShapes technology, you can develop shapes that behave like the objects they represent in the real world.

The step-by-step instructions in this article demonstrate the following shape development techniques:

  • Basic shape creation and drawing mechanics
  • Adding connection points
  • Custom text formatting
  • Attaching data to shapes with custom properties
  • Right-mouse actions and events
  • Control handles
  • Trapping events in the Microsoft Visio ShapeSheet®

Cloning Existing Shapes

You can save time by finding a shape that is close to the one you need and modifying it, rather than building a shape from scratch. To reuse the shape, it must be saved as a master on a stencil.

The following steps show how to clone an existing shape, create a new stencil, and complete the master.

To clone an existing shape

  1. Open a blank drawing.
  2. On the File menu, click Stencils, and select Basic Flowchart Shapes from the Flowchart folder.
  3. Drop a Process shape on your drawing and make a modification (like fill color).
  4. On the File menu, click Stencils, and then click New Stencil to create a blank stencil.
  5. Drag the shape onto the blank stencil to create a master.
  6. On the File menu, click Save As to save the stencil, making sure to select .vss as the file type.

To complete the master shape

  1. After creating the master shape on the stencil, select Master Shape, and then right-click so the menu is open.
  2. Specify a name using the Master Properties option so the shape will inherit the name when dropped. The icon can also be edited to create a more meaningful symbol on the stencil.

Read-only Stencils

If you try dropping the shape on the original Basic Flowchart Shapes stencil, you will get the following error message: "This stencil is open read-only. Would you like to edit the stencil, so that the operation can be completed? Yes No."

By default, stencils are opened as read-only. You can add your shape to the existing stencil by clicking Yes on the above error message.

The following steps show how to modify an existing stencil, work from a copy of the stencil, and update the directory cache after saving a new stencil.

To modify an existing stencil

  1. From the File menu, click Stencils, and then click Open Stencil.

  2. Select the stencil you want to modify, and click Original in the Open dialog box to make changes to the original stencil, or:

  3. Click Copy in the Open dialog box if you want to work from a copy. On the File menu, click Save As to save the stencil, making sure to select .vss as the file type.

    Tip

       

    You can also start with a New Stencil if you don't need any of the shapes on an existing stencil.

To update the directory cache

If you are saving a new stencil in a directory already in File Paths but the stencil doesn't appear on the Stencil menu, you can trigger Visio to update the directory cache.

  1. On the Tools menu, click Options, and then click File Paths.
  2. Make an edit in the Stencils field (type a character at the end of the path then backspace over it).
  3. When you click OK, the edit will trigger the update. The stencil will now be available from the Stencils menu, without having to close Visio.

Shape Copyrights

Any shape created by cloning a Visio shape is going to retain the Visio copyright, which is visible when you choose Special from the Format menu for the selected shape. If you are going to distribute a master with this copyright to another user, they must have a license to use a stencil that contains the original master.

If you wish to distribute a shape free of copyright restrictions, you must create the shape from scratch. This also gives you the option of applying your own copyright to it, which can be done before or after you turn the shape into a master. Select the shape and choose Special from the Format menu to enter the copyright information.

Warning

   

The copyright is a write-once field. Make a copy of the shape before making the entry, in case of a typing error.

Using Clip Art or Bitmap Images

A clip art image can be turned into a shape, or combined with another shape, to give it more visual character. Bitmap images and scanned photos can also be used. The following steps show how to make a shape from a clip art image, change its components, rotate and crop it, and add text to the image.

To make a shape from clip art

  1. On the Insert menu, click Clip Art; the Microsoft Clip Gallery dialog box appears. Select the clip you want, and then click Insert clip.

    Note

       

    This is only available if you have Microsoft Office installed, and if you have installed Microsoft Office clip art.

    – or –

    On the Insert menu, click Picture, and then select a graphic image to insert in your drawing. Depending on the format of the graphic file you're importing, you may see a dialog box that contains options for setting Color Translation.

  2. Size the image by dragging its corner handles to maintain aspect ratio.

  3. Move the clip art shape to a stencil to create a master shape.

To change a shape's components and add text

  1. If you are using a Windows metafile (.wmf), you can ungroup it. This turns it into a Visio shape so you can then change its components or add text. This is also the only way to rotate it.

    Note

       

    Bitmap files (.dib, .bmp, .pcx files, and so on) will remain bitmaps in the drawing.

  2. To turn it back into a metafile, select it, then click Copy and select Paste Special as a metafile.

To crop and pan within the image border

  1. On the toolbar, click the Rotation tool, and select the Crop tool from the drop-down menu.

  2. Drag the object's selection handles to crop, or drag inside the border to pan the object.

    Note

       

    Within the ShapeSheet, panning changes the ImgOffsetX and ImgOffsetY cells in the Image Info section, reflecting the distance the object is offset horizontally from the origin of its border.

To add text to an inserted piece of clip art

  1. Select the Text tool, drag out a rectangle to hold the text and type some placeholder text.
  2. With the Pointer tool, select the clip art and the text, right-click, click Shape, and then click Group to group the two together.

Drawing Shapes from Scratch

To represent custom objects that are particular to your business, or if you wish to apply your own copyrights, you will want to build shapes from the ground up.

Drawing Tools

  • Click the arrow next to the Line tool on the toolbar to select the Line, Arc, Freeform, or Pencil tools. Click the arrow next to the Rectangle tool to select the Rectangle or Ellipse tool.
  • To draw straight-sided shapes, click-and-drag with the Line tool to create a continuous outline, with the end point connecting to the start point. The shape will take on an opaque fill if it is successfully closed.
  • The closing vertex will connect best if snap-to-grid is turned on. From the Tools menu, select Snap & Glue, and then check Grid in the Snap to dialog box to activate this feature. Free form, or shapes drawn without snap, can be a bit tricky to connect.
  • Using the Shift key will constrain the Line tool to draw horizontal, vertical and 45 degree lines; the Rectangle tool to draw a square; the Arc tool to draw a quarter-circle; and the Ellipse tool to draw a circle. The Freeform tool creates spline curves.
  • The Pencil tool can draw lines and arcs, in addition to the separate Line and Arc tools. As you begin to draw with the Pencil tool, Visio calculates the path the mouse is traveling and draws a line if the path is straight, or an arc if the path curves. You can also use the Pencil tool to edit shapes after they are drawn by selecting and dragging an endpoint, control point, or a vertex, and then making your changes.

Can’t close your shape?

Select the vertex on one open end of the shape with the Pencil tool (it turns magenta), then drag and drop it onto the vertex on the other open end of the shape. In order to be able to select a vertex, you will need to select the shape and then choose the Pencil or Line tool. The closed shape then turns opaque.

Figure 1 illustrates both an open and closed shape, with the vertex on the open end turned magenta.

Figure 1. Closing a shape

Shape Arrays

The following steps show how to create a repeated series of shapes with equal spacing. This also works with a group of shapes.

To create a repeated series of lines or shapes with equal spacing

  1. Drop a shape onto your drawing.
  2. Click the shape, press CTRL+drag to create the first copy, and place it in the desired position.
  3. Now press F4 to create repeated copies of the shape with the same offset value.

Figure 2 illustrates a repeated series of shapes with equal spacing.

Figure 2. Repeated shapes

Assembling a Shape from Parts: Boolean Operations

You can group shapes together using the Group command, which is good if you just need to move them as one unit or disassemble them later.

However, if you want to create a shape with cutout areas and a region you can format and fill, you need to build the shape out of other shapes using the Boolean set operations (Union, Combine, Fragment, Intersect, Subtract). Using whole shapes as a starting point can also be much more efficient than trying to sketch something with many lines and arcs. To find these commands, click Shape on the toolbar, and then click Operations.

The following steps show how to create three new shapes, combine them, fill them with color, and create a new symbol.

To create the International NO symbol

  1. On the Tools menu, click Snap & Glue, check Grid in the Snap to dialog box, and then click OK to facilitate precise placement.
  2. Use the Shift+Ellipse tool to create the circles. Stack two circles on top of each other (the inner one smaller).
  3. Select both circles to create the outer ring. From the Shape menu, click Operations, and then Combine. Note that the grid now shows through the middle because it's no longer a solid filled circle.
  4. Draw the bar with the Rectangle tool, making the height of the bar match the thickness of the ring and the width of the bar just a little bigger than the inside diameter of the ring. Drag the bar over the ring and center it vertically and horizontally.
  5. Now select the rectangle with the Rotation tool, and use the Rotation tool to rotate it -45 degrees (as shown in the status bar).
  6. Select both shapes and choose red for the Fill color. From the Shape menu, click Operations, and then Union to create the final shape.

Figure 3 illustrates the creation of an International NO symbol.

Figure 3. International NO symbol

Quick Zoom. To target the specific shape you want to zoom in on, hold down CTRL+Shift and the mouse turns into a magnifying glass. You can then drag a rectangle around the shapes you want to zoom into—or just point at the area and left-click to zoom in, or right-click to zoom out.

Panning. To slide the page around within the drawing window, hold down CTRL+Shift, right-click, and then drag the page.

Adding Connection Points

By default, a newly drawn shape will have no connection points. You will have to add connection points if you want to provide specific points for the user to glue the connector endpoints. When you glue something to a shape's vertex, Visio creates a connection point. You can also create connection points at other locations on a shape—or even outside a shape's boundaries.

The following steps show how to add, move, and delete a new connection.

To add a new connection point to a shape

  1. Select the shape.

  2. On the toolbar, click the arrow next to the Connector tool, and select the Connection Point tool from the drop-down menu.

  3. Hold down the CTRL key and click where you want to add the connection point. You can click on, inside, or outside the shape's perimeter. Visio adds a connection point to that location to show the new connection point.

  4. Position the mouse pointer over the connection point (the pointer is a four-headed arrow), and then click. The connection point turns magenta when it is selected. It can then be deleted or moved.

    Warning

       

    Connection points can be turned off on the View menu if Connection Points has been deactivated. Check this option to make sure they are on before trying to work with them. Connection points appear as small blue x's on shapes.

Connections and Glue

The behavior that allows part of a shape to stay connected to another shape is called glue. When you drag the Connector tool between connection points on shapes, Visio glues a connector solidly to the connection points. This is called static glue, which is point-to-point glue. No matter how the shape moves, the connection is always between the same two points.

When you hold down the CRTL key and drag the Connector tool from one shape to another, Visio glues a connector to the shapes using dynamic glue. Now, when you move the shape, the connector slides around to select the most logical connection point between the two shapes. You can think of dynamic glue as shape-to-shape glue—it connects two shapes between the shortest routes, thus simplifying a drawing.

Whether shapes use static or dynamic glue depends upon the method you use to connect them and the type of connector you use. With connectors that glue both statically and dynamically, you can switch between static and dynamic glue. The following steps show how to define static or dynamic glue.

To define static or dynamic glue for a connector

  1. Select the shape, and from the Window menu, select Show ShapeSheet.
  2. If the Glue Info section is not displayed, select Sections from the View menu. In the Sections dialog box, check Glue Info, and then click OK.
  3. In the Glue Info section, enter 0 in the GlueType cell to specify static glue, or enter 3 to specify dynamic glue.

Inward and Outward Connection Points

When you design a shape, you indicate locations where it can glue or be glued by adding connection points to the shape. A connection point's type influences whether other shapes can be glued to it or whether the shape that has the connection point can be glued to other shapes.

  • Other shapes can be glued to an inward connection point. Inward connection points behave like connection points in versions of Visio products earlier than Visio 2000. An inward connection point attracts endpoints of 1-D shapes and outward or inward/outward connection points of other shapes.

  • A shape with an outward connection point can be glued to another shape. An outward connection point is attracted to inward and inward/outward connection points of other shapes.

  • An inward/outward connection point behaves like an inward connection point when you glue the endpoint of a 1-D shape or a shape with an outward connection point to it. It behaves like an outward connection point when you glue it to another shape. Inward/outward connection points are useful for shapes that might be glued together in any order.

    Note

       

    The Visio 2000 application imports connection points created in earlier versions of Visio products as inward connection points with no preferred direction. Any scratch formulas in the A, B, C, and D cells of such rows are imported without changing.

Specifying What Can Be Glued

You can also specify the parts of a shape to which another shape can be glued on a page in the Snap & Glue dialog box.

  • From the Tools menu, select Snap & Glue, and then check any additional Glue To options that are appropriate for your drawing or template. Options include Shape geometry, Guides, Shape handles, Shape vertices, and Connection points.

Text Fundamentals

Every shape has text associated with it. The text itself can be modified, and so can the text block containing the text.

Text Tool

You add, edit, or format the text in the shape by selecting the shape and activating the Text tool. You can also activate the Text tool and then select the shape. The shape’s text will then be ready to edit, and the Text Formatting toolbar will be activated and you can choose the typical text formatting options, such as font size, style, and color.

Text Block Tool

You can use the Text Block tool to change the location and orientation of the text block rectangle relative to the shape.

  • From the toolbar, click the arrow next to the Text tool, and select the Text Block tool from the drop-down menu.

  • If you select a shape and then choose the Text Block tool, you will discover that the Text Formatting toolbar is not active, the text block rectangle is highlighted, and the text block rectangle has special interaction handles—corner ones that allow rotation and edge ones for resizing.

  • You can drag the text block rectangle to move it relative to the shape by pressing the left mouse button down when you have the cursor over one of the edges (but away from the sizing handles).

  • The text is laid out relative to the rectangular text block, which by default matches the selection rectangle of the shape. The justification of the text within the text block is governed by settings in the Format menu, Text menu, and Text Block dialog box.

    To justify text vertically

    • On the Format menu, click Text, and then click Text Block.
    • The default is Middle, which causes text lengthier than the shape height to spill out the top and bottom. Choosing Top forces the text to stay even with the top of the shape and just spill out the bottom, which might give a cleaner appearance. Choosing Bottom aligns the bottom line of text with the bottom margin.

    To justify text horizontally

    • On the Format menu, click Text, and then click Paragraph.
    • You can now select Left, Center, Right, Justified, or Force Justified. If you want the text to overlap the width of the shape, use the Text Block tool to make the width of the text block wider than the shape.

ShapeSheet

Each shape stores its properties in a ShapeSheet. The shape and its ShapeSheet are two different views of the same information. Every change that you make to the shape on the drawing page is reflected in the property cells of the ShapeSheet. Conversely, any entry you make in the ShapeSheet will immediately change the shape on the drawing page.

You can display a ShapeSheet window in any of the following ways:

  • Select the shape, and click Show ShapeSheet from the Window menu. This will open and activate a separate window that allows you to view and edit the ShapeSheet. To see ShapeSheet and the shape at the same time, click Tile from the Window menu.

  • From the Tools menu, click Options, select the Advanced tab, and check the Run in Developer Mode box. For each shape you select, right-click and select Show ShapeSheet.

  • From the View menu, click Toolbars, and select Developer. After selecting a shape, you can click the Show ShapeSheet button on the Developer toolbar.

    Tip

       

    The menu bar changes based on whether you have selected the drawing page or the ShapeSheet.

    Figure 4 illustrates the ShapeSheet for a rectangular shape.

    Figure 4. ShapeSheet window

  • There are multiple sections to organize the shape properties, and the easiest way to review them is from the View menu, click Sections, click All, and then click OK. Then click the title bar of sections to open or collapse them.

  • The Shape Transform section contains the shape's dimensions, angle, and center of rotation, while Geometry lists the coordinates of the vertices for the lines and arcs that make up an object's geometry. If the object has more than one path, it has a Geometry section for each path.

  • Protection specifies what parts of the shape to lock so the user can't change it. Changing 0 to 1 means the lock is on. When you type 1 in the LockWidth cell, the control handles for the shape turn into little padlocks and the shape cannot be changed.

  • Shape appearance attributes are stored in the formatting sections.

Properties Can Use Formulas

The ShapeSheet layout resembles a Microsoft Excel spreadsheet. When you select a cell to make an entry, a Formula bar appears under the toolbar. The cells also accept formulas, using syntax similar to Excel, and starting with an equal sign (=). Formulas can also reference other cells in the ShapeSheet, using the cell name to the left of its value, like Height, Width, and Angle. The ability to calculate a new value for a property based on the change in another property is what gives SmartShape such a high IQ.

The following steps show how to change the color of a shape by using a ShapeSheet formula.

To change the color of a shape in the ShapeSheet

  1. Close any open ShapeSheets, and then draw a rectangle shape.
  2. Select the shape. From the Window menu, click Show ShapeSheet, and then click Tile on the same menu.
  3. Click the title bar of the ShapeSheet. From the View menu, click Sections, click All, and then click OK.
  4. Click the title bars of all open sections so they collapse.
  5. On the Fill Format section, click the FillForeground cell, type in 4, press Enter, and note the rectangle changes to blue. Try some other numbers as well.
  6. Type the formula =IF(Width>Height,4,6) into the cell, and then change the size of the rectangle so the color changes from blue to pink, depending on its width and height ratio.

To learn more about ShapeSheets, click Developer Reference on the Help menu, select the Contents tab, and then click Basics for ShapeSheetDevelopers.

Custom Properties

In addition to the data stored in the ShapeSheet describing the attributes of a given shape, you can add your own custom properties to store information associated with the shape's purpose. For example, in studying your bid process, you might want to store the cost and duration of each step in the process, along with the associated shape.

Data associated with shapes is the first step in building a solution that uses Visio as its graphical component. Numerical and inventory reports can be generated based on shape data directly from Visio, or as the result of integration with a database.

A Custom Property field is used to associate data with a Visio shape. The following steps show how to create a Custom Property field that stores cost and duration data.

To store data with a shape that represents a bid process step

  1. Draw a rectangle and show its ShapeSheet.
  2. Click the ShapeSheet, and on the Insert menu, click Section, check Custom Properties, and then click OK.
  3. Click the row heading that says Prop.Row_1 and change it to Cost.
  4. Insert another row and name it Duration.
  5. Make the following entries:
    Label Prompt Type Value Ask
    Cost Cost, USD 2 250 True
    Duration Duration, days 2 3 True
  6. Drag the shape to a stencil, and then drop the shape back on the drawing. Ask=True means that Visio will prompt for the value whenever the shape is dropped into a drawing, or a duplicate is created.

You can insert as many custom property rows as needed. There is also a Custom Properties Editor wizard, but be sure to save the stencil containing the master before using the Editor. On the Tools menu, choose Macros, and then click Custom Properties Editor.

Tip

   

You can also add custom properties by just selecting the shape, right clicking on it, and selecting Custom Properties from the Shape menu. Visio will prompt you if you want to add custom properties.

Right-Mouse Actions

The Actions section of the ShapeSheet adds functions that appear on the shape's shortcut (right-mouse or right-click) menu. To add your own functions, you may need to insert an Actions section if one does not already exist.

The following steps show how to add an Actions section and a shortcut menu item to a ShapeSheet.

To add a shortcut menu item to display custom properties

  1. Show the ShapeSheet for the bid process step shape.

  2. Click the ShapeSheet. From the Insert menu, click Section, and then Actions.

  3. Make the following entries:

    Action Menu
    DOCMD (1312) %Show Custom Properties

  4. Right-click the shape. The shortcut menu should now have the option Show Custom Properties that displays the properties dialog. The % sign specifies that the prompt should appear at the bottom of the menu.

    Note

       

    The Visio type library (and visconst.bas) declare the constants for DOCMD (Visio command IDs). They have the prefix visCmd. They are also available in the visUICmds class in the Visio type library. You can view the type library by opening up the VBA editor, and selecting View, Object Browser, and Visio library. You can also associate a macro or add-on with a shape by entering a formula that uses the RUNADDON function.

Connecting Text Fields to Formulas

You can insert a field showing shape geometry information or custom formulas within the shape’s text. To create a custom formula, you work with the same functions and syntax used for creating ShapeSheet formulas.

The following steps show how to add a Width: field to a shape.

To add a field to show shape information

  1. Double-click a shape to open the shape’s text for editing (or click the text with the Text tool), and then click where you want to insert the field.

  2. Type Width:, and then on the Insert menu, select Field.

  3. In the Category section, select Geometry.

  4. In the Field section select Width, and click OK.

    Figure 5 shows the Field screen.

    Figure 5. Adding a field to show information

Multiple Text Blocks

It can be useful to maintain distinct text blocks within a shape. For instance, you may wish to let the user enter text, but also have a separate block that shows geometry information, which is protected and can't be overwritten. Separating text blocks also allows you to apply a different text style to each text block.

You can add additional text blocks to a shape by using the Text Box tool, which can be selected by clicking the Text tool on the Format menu.

The following steps show how to add another locked text box to a shape.

To add another text box to the shape with a different format

  1. Create a shape and double-click to activate text edit.

  2. Type User adds text here.

  3. With the Text Box tool, make the default text block smaller.

  4. Add a second text box above or below the first box. Choose the Text tool and type Default text.

  5. Format the two text blocks with different text styles.

  6. Select the second text block. From the Window menu, click Show ShapeSheet, and set the Protection field LockTextEdit to 1 so it can't be overtyped. The protected text block could also contain a field or calculated formula.

  7. Select both the original shape and the second text block. Then from the Shape menu, select Grouping, and click Group to group them together.

    Note

       

    In Visio 2000, text is input into the group shape itself. The group text is the first to get typed into when selected and typing started.