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:
Figure 1 - Enabling Enhanced Shape Engine
You can also set the RichClipboard property to True to enable enhanced copy/paste between Excel and Spread:
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
Many New Supported Shapes
Open the drop-down to see the available shapes (there are 153):
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:
Figure 5 - Shape Grab Handles
You can use the white handles to resize and relocate the shape in the worksheet:
Figure 6 - Shape Resizing
You can use the rotate handle to rotate the shape:
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:
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:
Figure 9 - Shape Styles in Ribbon Bar Shape Format Tab
Click the drop-down to see all available 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:
Figure 11 - Ribbon Shape Format Fill
The Gradient effects add shading to make the shape appear as if lit from various directions:
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:
Figure 14 - Ribbon Shape Format Outline Weight
The dashes setting specifies the dash pattern for the outline border:
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:
Figure 16 - Ribbon Shape Format Outline Arrows
The Effects drop-down shows the options for Shadow, Reflection, Glow, and Soft Edges:
Figure 17 - Ribbon Shape Format Effects
Shadow effects provide a variety of lighting and drop-shadow options:
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:
Figure 19 - Ribbon Shape Format Effects Reflection
Glow effects include a variety of built-in gradient borders with custom color option at the bottom:
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:
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:
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:
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:
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:
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:
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:
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:
Figure 35 Hypothetical process workflow
And a much better example of a process workflow using connector arrows, pictures, and Group Shapes:
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:
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.