Chelsea DevereauxWhat You Will Need
- Visual Studio - This example using VS2022
- .NET 6+ WinForms Application
- NuGet Package: GrapeCity.Spread.WinForms
Controls Referenced
Tutorial Concept
Allow users to create Flowchart in your C# .NET Spreadsheet Application using a .NET spreadsheet WinForms component.
Flowcharts simplify complex processes using shapes and symbols, making them easier to understand across various industries. They are invaluable in finance for simplifying financial processes, in manufacturing for visualizing workflows, and for corporate executives to streamline decision-making.
Maintaining flowcharts can be challenging, but with a .NET spreadsheet component like Spread.NET for WinForms, developers can integrate a familiar ribbon toolbar, allowing users to create and customize flowcharts easily within a .NET spreadsheet interface. This includes adding shapes, connecting, grouping, and saving the created flowchart to a Microsoft Excel XLSX file.
Steps to Enable Flowchart Creation in .NET WinForms Spreadsheet Apps:
- Create a .NET/C# Spreadsheet WinForms Application with a Ribbon Bar Control
- Enable the Enhanced Shape Engine
- Add Shapes to the .NET Spreadsheet
- Add Text Labels to the Flowchart Shapes
- Connect the .NET Flowchart Shapes
- Customize the Shapes with the .NET Ribbon Bar Control
- Group the .NET Flowchart Shapes
- Save the .NET Flowchart to Excel (.xlsx)
Create a .NET/C# Spreadsheet WinForms Application with a Ribbon Bar Control
To get started, we need to create a .NET WinForms application, then add the .NET spreadsheet component, Spread.NET WinForms, and the WinForms Ribbon Bar control. Go to our Getting Starting with a .NET Spreadsheet Ribbon Bar Control blog for in-depth steps on creating this application.
After following the above-linked getting started blog steps, the WinForms spreadsheet app will look like this:
Enable the Enhanced Shape Engine
When the Spread instance's EhancedShapeEngine property is set to True, the Ribbon Control allows users to interact seamlessly with all Excel-compatible shapes, notes, and comments.
Developers can easily enable this property in Visual Studio using the Project Properties window by selecting the Spread instance (fpSpread1) first, expanding Features, and then changing EnhancedShapeEngineto True.
Add Shapes to the .NET Spreadsheet
During the .NET app's runtime, end-users can add enhanced Excel-like shapes to the .NET spreadsheet to create the flowchart. Spread.NET includes commonly used flowchart shapes, as highlighted below.
For this blog's example, add five Flowchart: Alternative Process shapes for the processes and two Flowchart: Connector shapes to the beginning and end of the flowchart. Once you add these shapes, the spreadsheet should look like this:
Add Text Labels to the Flowchart Shapes
To add text to the flowchart shapes, double-click the shape and type the desired title text. For this demo, we’ll use: FR Y14A, Update Global Drivers, Adjustments, Business Line Input, and Adjustment Review. Press Enter to format text onto new lines for readability.
Next, let's apply some formatting to the text within the shapes. Save time by applying the same text style to multiple shapes at once. To select multiple shapes, hold Shift and click on each shape. In this example, we will adjust the size, alignment, and font color of both the shapes and text using the Home tab.
Connect the .NET Flowchart Shapes
Let's organize the order of the flowchart shapes and add the process connectors. Use the Elbow Arrow and Line Arrow shapes as connectors. The shapes' connection points appear when drawing. Connect the shapes immediately or hover over the connector's grab handle, then click and drag the endpoint to the first shape's border. Anchor the connector to a green point.
Customize the Shapes with the .NET Ribbon Bar Control
Spread allows users to apply styled themes and custom styling to shapes using the Shape Format tab.
For this example, we have applied themed styles to the shapes and changed the color of the connectors.
Group the .NET Flowchart Shapes
Grouping flowchart shapes keeps related elements together and prevents accidental changes. Group shapes using Spread’s Ribbon Toolbar control or the spreadsheet's context menu.
- Using Toolbar: Hold Shift, select shapes, go to the Shape Format tab, and click Group Objects.
- Using Context Menu: Hold Shift, select shapes, right-click, and choose Group.
Grouping can be used to add text to connector lines. Users can add a shape, remove its background and outline color, add the text, and group it with the associated connector.
Save the C# .NET Flowchart to Excel (.xlsx)
End-users can export the created .NET flowchart to an Excel (XLSX) file or import existing Excel flowcharts using the .NET Ribbon toolbar's File tab.
And just like that, you have created a .NET 6.0+ WinForms App where end-users can easily create, design, and save their flowcharts easily and quickly, all using a familiar spreadsheet UI.
Learn More About C# .NET Spreadsheet Components
This article only scratches the surface of the full capabilities of Spread.NET, the .NET spreadsheet component. Review the documentation to see some of the many available features, and download our demo explorer to see the features in action and interact with the sample code. Integrating a spreadsheet component into your applications allows you to customize your user's experience and provide them with familiar spreadsheet functionality without referring them to an external program. To learn more about Spread.NET and the new features added in the latest release, check out our releases page.
