Converting a Standard Toolbar to a Ribbon

Because of their unique object models, the Ribbon and a standard toolbar are actually quite similar. Both the toolbar and Ribbon use the same tools. Adding tools to these two objects is surprisingly similar. WinToolbarsManager™ includes a Toolbars collection and a Ribbon off the main class. Each toolbar includes a Tools collection. The Ribbon includes a Groups collection, and then a Tools collection. Once you know how to add and manipulate tools on a standard toolbar, the Ribbon can be modified in the same way.

Both at design time and in the run time object model, you can add tools to the Ribbon just as you would a standard toolbar. At design time, when the WinToolbarsManager component is selected in the component tray, you will notice a button that says Show Ribbon. Clicking this button displays the Ribbon. You can then click the Add Tab button followed by the Add Group button. For more information on these buttons, see Add a Tab to the Ribbon and Add a Group to a Ribbon Tab. Once you have a group in the Ribbon, you will see the Add Tool button. Once you click this button, you will have the choice between adding a new tool or adding an existing tool. This is where the toolbar conversion process begins.

To "convert" your standard toolbar to a Ribbon, you need only add all your previously existing tools to the Ribbon. In essence, you aren’t actually converting your toolbar to a Ribbon, you are simply re-adding all the tools. Your standard toolbar and Ribbon can exist only if the Office2007UICompatibility property is set to False. You will need to do this so you can see both Ribbon and standard toolbar in order to drag tools from the standard toolbar to the Ribbon.

Follow along as we guide you through the simple process of creating a Ribbon based on a standard toolbar. You will open the IGPaint sample that ships as part of the Infragistics Professional SDK install. You will drag tools from existing toolbars onto the Ribbon. You will then tweak the appearance of these tools to give them an organized feel.

First you need to copy the IGPaint sample to your project folder so you don’t modify the original. You will find the sample in the following default installation folder:

Visual Basic project:

C# project:

Copy the Infragistics Paint CS\VB folder to your Visual Studio Projects\2005 folder. Open the solution file. The solution will load in the Solution Explorer. Right-click ImageEditor in the Solution Explorer and select View Designer. The main form of the paint program opens.

You need to create a new RibbonTab and RibbonGroup to place the existing tools inside.

You are now ready to transfer tools from the standard toolbar to the Ribbon.

In order to transfer the tools, you need to be able to see both the standard toolbars and Ribbon at the same time. In order to do this, you will need to click the Disable Office 2007 UI Compatibility button. Once you do this, the standard toolbars will reappear and the Ribbon will change to the Office 2003 look and feel, matching the standard toolbars.

Now that you can see both toolbars and Ribbon, you need to simply drag and drop tools from the toolbars into groups on the Ribbon. This walkthrough will focus on the image toolbar.

You may repeat the steps of this walkthrough for all other toolbars in the sample if you wish.

You are going to change three properties on the group you created. First you are going to change the caption of the group to Image. This reflects the purpose of the tools that you are going to transfer from the toolbar. These tools will affect various image properties. The next thing that you will change is how the buttons are displayed. We only want the image of the button to display, not the text as well. This is useful if you have several buttons and including their text would take up too much space. The third thing to change is the layout directions of the buttons. By default, buttons will be arranged from top to bottom, then left to right. Small buttons will take up three rows before going on to the next column. Large buttons will fill the entire three rows. You will want to change the layout of these buttons from vertical to horizontal. Perform these three actions by following these steps:

You may notice that the standard toolbar is divided up into sections: the grid, the magnifying glass, the flip and rotate buttons, the move buttons, etc. Each tool to the immediate right of a vertical line has their InstanceProps.IsFirstInGroup property set to true. These vertical lines show a clear indication of groups of tools. The Ribbon can also display groups of tools, but does so in a different manner. Each tool has a ButtonGroup property. If two tools are set to the same button group, they will both display as a single group.

If you repeat steps 2 through 4 for the remaining button groups (naming them 'FlipRotate', 'Move', 'Color', and 'Image' respectively), your Ribbon group will look like this:

You can repeat the steps in this walkthrough for all the other toolbars in the sample. You can create new Ribbon groups, or even a new Ribbon tab with other Ribbon groups. You can even transfer the MainMenu toolbar to the ApplicationMenu in the upper left corner of the Ribbon.

For now, let’s just see what the one group looks like that we just created. Click the Enable Office 2007 UI Compatibility button again. The standard toolbars will disappear and the look and feel of the Ribbon will resolve to Office 2007. The actual Style property of the toolbar, however, will still be set to Office2003. Change it to Office2007.

When you run the application, you will see no toolbars. You will only see one Ribbon tab with one Ribbon group. All the tools that you transferred to the group will be fully functioning as if they were originally made for the Ribbon.