Skip to main content Skip to footer

Create Advanced Shapes with the Spread.NET 13 WinForms Enhanced Shape Engine

Spread.NET 13 WinForms introduces a new Enhanced Shape Engine which supports many new enhanced features to easily create interactive dashboards, flow diagrams, cell callouts, logos, and more.

These new features include:

  • Many New Supported Shapes
  • Excel Shape Themes and Style
  • Excel Shape Style Settings and Effects
  • Connecting Shapes
  • Grouping Shapes
  • Import and Export of Enhanced Shapes To/From XLSX
  • Copy and Paste Support for Enhanced Shapes To/From Excel

Enabling Enhanced Shape Engine

To use this new feature, you must explicitly enable it using the new Features property using the Property Grid (same as the new Slicers feature). First use the drop-down to select the Spread properties, then scroll to Behavior - Features, expand it, and change EnhancedShapeEngine to True:

Enabling Enhanced Shape Engine Figure 1 - Enabling Enhanced Shape Engine

You can also set the RichClipboard property to True to enable enhanced copy/paste between Excel and Spread:

Enabling Rich Clipboard Figure 2 - Enabling Rich Clipboard

After setting EnhancesShapeEngine to True, you can find the Shapes tool in the ribbon bar Insert tab:

Figure 3 Shapes Tool in Ribbon Insert Tab Figure 3 - Shapes Tool in Ribbon Insert Tab

Many New Supported Shapes

Open the drop-down to see the available shapes (there are 153):

Enhanced Shapes by Category Figure 4 - Enhanced Shapes by Category

The shapes are divided into categories for convenience. The Lines group includes arrows that can be used to connect shapes together to create flow chart diagrams. The Rectangles group includes a variety of rectangles. Basic Shapes includes a variety of polygons and miscellaneous other shapes. Block Arrows includes a variety of arrows useful for creating flow diagrams. Equation Shapes includes some mathematical symbols useful for creating equations. Flowchart includes many shapes useful for creating flow chart diagrams. Stars and Banners includes a variety of stars, splats and banner ribbons, and Callouts includes more useful shapes for creating callouts for specific objects in the worksheet.

Creating a Shape

To create a shape in the Spread Designer, click on the shape to create in the shapes drop-down, and a new instance of that shape is created at the active cell in the active worksheet.

Note: This works different from Excel – in Excel, you select the shape to create, then the cursor changes to indicate that the worksheet is now in "shape draw mode" and ready for you to draw the shape rectangle in the worksheet using the mouse to indicate the location and size of the new shape. In Spread, you must first select the shape to create, then find the new shape selected at the active cell in the active worksheet and move/size it as needed.

Shape Grab Handles

After creating the shape, it will show as selected and you will see grab handles around the shape that can be used for sizing and editing the shape:

Shape Grab Handles Figure 5 - Shape Grab Handles

You can use the white handles to resize and relocate the shape in the worksheet:

Figure 6 Shape Resizing Figure 6 - Shape Resizing

You can use the rotate handle to rotate the shape:

Shape Rotating Figure 7 - Shape Rotating

You can use the yellow handles to edit the shape – for this example, you can change the size of the missing pie piece:

Shape Editing Figure 8 - Shape Editing

Enhanced Shape Themes and Styles

When a shape or a set of shapes is selected, the shape Format tab becomes visible in the ribbon bar and you can find the Shape Styles and apply a new built-in style to the shape:

hape Styles in Ribbon Bar Shape Format Tab Figure 9 - Shape Styles in Ribbon Bar Shape Format Tab

Click the drop-down to see all available shape styles:

Built-in Themes and Preset Shape Styles Figure 10 - Built-in Themes and Preset Shape Styles

All of the themes and preset shape styles of Excel are supported.

Enhanced Shape Style Settings and Effects

You can customize the shape style using the controls for Fill, Outline and Effects. The Fill is painted inside the shape. The Outline is painted around the edges of the shape (like an outer border). The Effects include Shadow, Reflection, Glow, and Soft Edges and are painted inside and around the shape, depending on the effect.

The Fill drop-down shows options for changing the shape fill, including various solid theme and standard colors, and no fill, with options at the bottom for custom color, picture, and gradient:

Ribbon Shape Format Figure 11 - Ribbon Shape Format Fill

The Gradient effects add shading to make the shape appear as if lit from various directions:

Ribbon Shape Format Fill Figure 12 - Ribbon Shape Format Fill Gradients

The Outline drop-down shows options for setting the color (similar to Fill), and also Weight, Dashes, and Arrows (which only applies to connector shapes).

Figure 13 - Ribbon Shape Format Outline

The Weight setting is specified in points like in Excel:

Ribbon Shape Format Outline

Figure 14 - Ribbon Shape Format Outline Weight

The dashes setting specifies the dash pattern for the outline border:

Ribbon Shape Format Outline Dashes Figure 15 - Ribbon Shape Format Outline Dashes

Finally, the Arrows setting applies only to line- and arrow-type connector shapes and specifies the type of arrow end caps on the object:

Ribbon Shape Format Outline Figure 16 - Ribbon Shape Format Outline Arrows

The Effects drop-down shows the options for Shadow, Reflection, Glow, and Soft Edges:

Ribbon Shape Format Figure 17 - Ribbon Shape Format Effects

Shadow effects provide a variety of lighting and drop-shadow options:

Ribbon Shape Format Effects Figure 18 - Ribbon Shape Format Effects Shadow

Reflection effects provide various degrees of reflection effect to make it appear like the shape is reflecting off the worksheet:

Ribbon Shape Format Effects Figure 19 - Ribbon Shape Format Effects Reflection

Glow effects include a variety of built-in gradient borders with custom color option at the bottom:

Ribbon Shape Format Effects Figure 20 - Ribbon Shape Format Effects Glow

Soft Edges effects include a variety of built-in options for making the shape border into a semi-transparent gradient that appears to fade into the worksheet:

Ribbon Shape Format Effects Figure 21 - Ribbon Shape Format Effects Soft Edges

Connecting Shapes

You can connect shapes together with lines and arrows to create flow charts, process diagrams, or other content. To connect two shapes together with an arrow, first you must create the shapes to be joined and the arrow or line shape to join them, then move the mouse cursor over the first endpoint of the arrow – you should see the mouse cursor change when the mouse hovers over the grab handle:

Connecting Shapes

Figure 22 - Connect Shapes Using Arrow Step 1: hover over first arrow end point

Then you can click-and-drag the end point to the border of the first shape that you want to connect – the available connection points for the shape will show as gray grab handles; click-and-drag to the side where you want to connect the arrow end point:

Connect Shapes Using Arrow Figure 23 - Connect Shapes Using Arrow Step 2: click and drag end point to first shape connection point

When you release the mouse and drop the end point on the connection point, it will show green to indicate that the line is now connected to the shape:

Connect Shapes Using Arrow Figure 24 - Connect Shapes Using Arrow Step 3: drop first arrow end point to connect with shape connection point

Then you can move the mouse to the other end point of the arrow:

Connect Shapes Using Arrow Figure 25 - Connect Shapes Using Arrow Step 4: hover over the other arrow end point

Then you can click-and-drag the other end point of the arrow to the border of the second shape that you want to connect:

Connect Shapes Using Arrow Figure 26 - Connect Shapes Using Arrow Step 5: click and drag other end point to second shape connection point

When you drop the end point on the second shape's connection point, it now shows green to indicate that the arrow end point is now connected to the shape. Moving either shape will automatically move the arrow end point:

Figures 27-28 Connected Arrows Follow Connected Shapes

Grouping Shapes

A Group Shape is a set of two or more shapes (or Slicers or Pictures) which are grouped together and treated as a single object for moving, rotating, and sizing. To create a Group Shape, you must first arrange the shapes that you want to group together – after the group is created, the relative positions of the grouped shapes will be fixed with respect to one another – then select those shapes and use the Group tool in the ribbon bar:

Figure 29 - Grouping selected shapes using the Group tool

After using the Group tool to group the selected shapes together, the shapes appear in a single Group Shape:

Figure 30 - New Group Shape created using the Group tool

Now the Group Shape can be moved, sized, and rotated as a single shape:

Figure 31 - Group Shape rotated

Grouping shapes together enables the creation of company logos, or really any sort of graphical design by combining the various shapes with flips and rotations. You can group together the shapes for flowcharts, process flow diagrams, or other sets of related shapes.

When a shape in the Group Shape is selected, and the Group Shape was not previously selected, then that Group Shape becomes selected. To select the individual shape withing the Group Shape, you can click the shape again, and the shape will become selected and show the selection frame and grab handles:

Figure 32 - Selecting a shape inside the Group Shape

You can remove the selected shape from the Group Shape using the Ungroup tool:

Figure 33 - Remove the selected shape from the Group Shape using the Ungroup tool

Using Shape Effects and Text Effects

You can overlap shapes to create elaborate designs, then merge them into a Group Shape, and use various fonts and styles with text effects to create logos or dashboard controls that respond to user clicks with custom actions using the IShape.Action event – here is an example of a logo based on the above design:

Using Shape Effects and Text Effects

Figure 34 - Example logo (note: I am not a designer so this is not a very good example )

Another (rather terrible I'm afraid) example of a design to represent a process workflow:

Hypothetical process workflow Figure 35 Hypothetical process workflow

And a much better example of a process workflow using connector arrows, pictures, and Group Shapes:

rocess workflow example

Figure 36 - Process workflow example

There are endless possibilities for creating rich interactive interfaces for the user with shapes – this example shows an interactive car insurance claim form, enabling the user to click the damaged parts in the diagram:

Car insurance claim form example

Figure 36 - Car insurance claim form example

The above example is included in the new Spread.NET 13 WinForms Control Explorer demo samples, which are included in the installer (for both C# and VB).

Import and Export Excel Documents

When Features.EnhancedShapeEngine is enabled, then importing Microsoft Excel Workbook documents will also import all Shapes, Connection Lines and Arrows, Pictures, Group Shapes, and Slicers, including Themes, Styles, Effects, and Text Effects.

Copy and Paste Shapes Between Worksheets in Spread and Excel

When Features.RichClipboard is enabled along with Features.EnhancedShapeEngine, then Shapes, Connection Lines and Arrows, Pictures, Group Shapes, and Slicers, including Themes, Styles, Effects, and Text Effects, can be copied and pasted between worksheets in Spread.NET 13 WinForms and Microsoft Excel.
You can copy and paste multiple selected Shapes, Group Shapes, and/or Slicers at once.

Read more about how to [create advanced shapes with the Spread.NET 13 WinForms Enhanced Shape Engine]

Download Now!<%/if%>

Sean Lawyer

Sean Lawyer

Product Manager
comments powered by Disqus