ComponentOne Ribbon for WinForms
C1Ribbon (Classic) Quick Start / Step 2 of 7: Add Ribbon Items to the Ribbon
In This Topic
    Step 2 of 7: Add Ribbon Items to the Ribbon
    In This Topic

    In this step, you'll add a ribbon tab with a group and add some Ribbon items to the group, then modify their properties using the smart designer.

    Switch to Design view and follow these steps:

    1. Add a ribbon tab with a group to the Ribbon:
      1. Hover mouse on the ribbonApplicationMenu to enable the floating toolbar.
      2. Click the Actions button. A list of actions is revealed.
      3. Select Add Tab from the list of actions.

      A ribbon tab with a group is added to the Ribbon.
    2. Add a toolbar to the Ribbon group:
      1. Click the pre-added group ribbonGroup1 to activate the item and enable the group's floating toolbar.
      2. Click the Actions button. A list of actions is revealed.
      3. Select Add ToolBar from the list of actions.

      A toolbar with a button is added to the group.
    3. Add a toggle button and modify its properties:
      1. Click the toolbar to activate the item and to enable the floating toolbar.
      2. From the floating toolbar, click the Actions button and select Add ToggleButton.
        A toggle button is added to the toolbar next to the existing button.
      3. From the ToggleButton1 floating toolbar, click the Change Image button. The Change Image dialog box appears.

        Change Image dialog box
      4. From the Small Image (16x16) drop-down list, select Bold.
      5. From the ToggleButton1 floating toolbar, click the Text Settings button. The Text Settings dialog box appears.
      6. In the Text Settings dialog box, set the following properties:
    4. Delete the first Ribbon button included with the toolbar:
      When you add a Ribbon toolbar item there's a Ribbon button included in the container. Complete the following steps to remove the first Ribbon button (since this toolbar will contain three Ribbon toggle buttons):
      1. Select the Ribbon button to active the item and enable the item's floating toolbar.
      2. Click the Actions button and select Delete to remove the button from the toolbar.

      You should now have one toggle button in the toolbar.
    5. Add a second toggle button and modify its properties:
      Click the toolbar to activate the item and to enable the floating toolbar, then complete the following steps:
      1. From the floating toolbar, click the Actions button and select Add ToggleButton.
        The second toggle button is added to the toolbar.
      2. Use the toggle button's floating toolbar to modify the properties for the ToggleButton2. Click ToggleButton2 to activate the floating toolbar and complete the following tasks:
        • Set the Image property to a 16x16 Italic preset image.
        • Delete the default "ToggleButton" Text.
        • Set the RibbonItem.ToolTip property to "Italic".
    6. Add a third toggle button and modify its properties:
      Click the toolbar to activate the item to enable the floating toolbar, then complete the following steps:
      1. From the floating toolbar, click the Actions button and select Add ToggleButton.
        The third toggle button is added to the toolbar.
      2. Use the toggle button's floating toolbar to modify the properties for the ToggleButton3. Click ToggleButton3 to activate the floating toolbar and complete the following tasks:
        • Set the Image property to a 16x16 Underline preset image.
        • Delete the default "ToggleButton" Text.
        • Set the RibbonItem.ToolTip property to "Underline".

    The Ribbon group should now look like the following:


    Appearance of ribbon group

    In this step you successfully added Ribbon items to the group and modified their properties. In the next step you will change the Ribbon tab and group names and add event handlers to the three toggle buttons in RibbonGroup1.