Adding a Ribbon to Spread for Winforms

The Windows Forms Spread control brings powerful grid tools and features to desktop applications that users can run on their computer. In the Spread Designer, it is easy to create and format spreadsheets, but it might also be useful for the user to perform these actions at runtime. This tutorial provides step-by-step instructions for adding an open-source Ribbon toolbar to a Windows Forms application with Spread. The toolbar being used in this tutorial is an open-source ribbon for Windows Forms applications called the “Office Ribbon Project” and can be found here: Other ribbons can be used, but this is a simple example to show how to connect a ribbon to a Spread control in a Windows Forms application. For a tutorial on adding a ribbon to another Spread project, such as SpreadASP, see here: Download the source code for this tutorial: SpreadWin Ribbon Code

Set Up the Project

Start by creating a Windows Forms application and add a Spread component to it. Find instructions here: Set up the project by adding the ribbon control to your application. For steps on how to add the control to the toolbox in Visual Studio, follow the instructions in Part 2 of this tutorial: Once the ribbon has been added to the application, it should show as an empty ribbon in the design window like the screen shot below: The Windows Forms application with Spread and an empty ribbon on it. The Windows Forms application with Spread and an empty ribbon on it. You can follow the steps in the code project tutorial linked above for adding tabs, panels, and buttons in the ribbon. Once the buttons have been added, the application will look something like the screen shot below: The finished design of the Windows Forms application. The finished design of the Windows Forms application. In this tutorial, the “Orb Style” property of the Ribbon control was set to “Office_2013”, but it can be changed depending on the preference.

Connecting the Buttons to the Spread Control

The event handlers for clicking on each button can be created by Visual Studio via the Code Project tutorial in Step 11 of Part 2. Simply click on the “events” property of each button and add a function for the “click” event. There should be a “Click” function for each button that you have added a handler for. The code for connecting the Ribbon Control to the Spread control will go into these functions. As a simple example, this is the code for the “Insert Row” button:

private void insertRowButton_Click(object sender, EventArgs e)  
    fpSpread1.ActiveSheet.AddRows(fpSpread1.ActiveSheet.ActiveRowIndex, 1);  

When the user clicks on this button, a row will be inserted at the position of the active row in the spreadsheet.

Change Styling of Ribbon

The color scheme of this particular ribbon can be customized, and instructions on how to do so can be found in the code project tutorial: In this tutorial, a pre-made skin was used. To change the skin, create a new function in the Main form’s source code called “ChangeTheme”:

private void ChangeTheme()  
    Theme.ColorTable = new RibbonProfesionalRendererColorTablePurple();  

Then, call that function from the form’s main function:

public SpreadRibbonForm()  

The changes aren’t reflected at design time, but can be seen at runtime: Completed design of Windows Forms application with styling. Completed design of Windows Forms application with styling. Once the code for each button has been written, the ribbon will be connected to the Spread control and the user can interact with both.


GrapeCity Developer Tools
comments powered by Disqus