Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Creating a Ribbon

{Warning}

Before You Begin

Developers already familiar with WinToolbarsManager’s™ object model will discover that the Ribbon isn’t all that different. WinToolbarsManager has a collection of Tools inside a collection of Toolbars . The Ribbon adds just one level to that structure. The Ribbon has a collection of Tools, inside a collection of Groups , inside a collection of Tabs . This extra level of functionality gives you the detailed organization that your applications require.

What You Will Accomplish

This walkthrough will guide you through the steps to create a Ribbon at design time. Creating a Ribbon will involve creating a RibbonTab , a RibbonGroup inside that tab, and some tools inside that group.

Follow these Steps

  1. Add the WinToolbarsManager to the form.

    1. Find the UltraToolbarsManager component in the toolbox and double-click it. A dialog box will display.

    2. Click OK. The ultraToolbarsManager1 component is added to the component tray.

form design

  1. Add a tab to the Ribbon.

    1. Click Show Ribbon at the top of the form. When you do this, the form’s appearance will change to emulate the Office 2007 look and feel. The Ribbon also displays.

    2. Click the Add Tab button. A new tab is created with the name ribbon1. You can also see the New Group button now.

ultratoolbarsmanager at design time

  1. Add a group to a Ribbon tab.

Click New Group. A new group is created with the name ribbonGroup1. You can keep clicking the New Group button for as many groups as you need.

ultratoolbarsmanager at design time with ribbon group showing

To perform this task at run time, see Add a Group to a Ribbon Tab.

  1. Add some tools to the Ribbon group.

    1. Click Insert New Tool. A popup menu displays with the options of Insert New Tool…​ or Insert Existing Tool…​ Right now, only Insert New Tool is active since there are no tools existing in the Tools collection.

    2. Click Insert New Tool…​ from the popup menu. The New Tool dialog box displays.

new tool dialog box

  1. Click Add three times to add three ButtonTools to the Ribbon group.

  2. Click Close to close the New Tool dialog box.

tools added to a ribbon group

To perform this task as run time, see Add a Tool to a Ribbon Group.

  1. Modify the names of the tab, group, and tools.

    1. While the ultraToolbarsManager1 component is selected, find the Ribbon object in the properties window and expand it.

    2. Find the Tabs collection and click the ellipsis (…​) to the right of the properties window. The RibbonTab Collection Editor dialog box displays.

    3. Change the Caption property to 'My Tab.'

    4. Find the Groups collection and click the ellipsis (…​) at the right side of the properties window. The RibbonGroup Collection Editor dialog box displays.

    5. Change the Caption property to 'My Group.'

    6. Click OK to exit the RibbonGroup Collection Editor dialog box.

    7. Click OK to exit the RibbonTab Collection Editor dialog box.

    8. Right-click ButtonTool1 and change it’s Name to 'My Button 1.' Do the same for ButtonTool2 and ButtonTool3 naming them 'My Button 2' and 'My Button 3' respectively.

named the ribbon tab and ribbon group

  1. Run the application.

When you run the application, you will see something very similar to what you saw at design time. The Ribbon designer is very simple to work with. It even allows you to convert an existing toolbar into a Ribbon with ease.

creating a ribbon