ComponentOne Menus and Toolbars for WinForms
RadialMenu Overview / RadialMenu Tutorial / RadialMenu Tutorial Step 1 of 3: Adding the First Menu and Submenu Items
In This Topic
    RadialMenu Tutorial Step 1 of 3: Adding the First Menu and Submenu Items
    In This Topic

    The C1RadialMenu component can be added to forms using the form's designer or programatically. The Show method will need to be called when using either method, design-time or programmatically, to make C1RadialMenu appear when running the application.

    To add RadialMenuItems to C1Radial, complete the following:

    1. Create a new windows forms project.
    2. Add the C1RadialMenu component from the toolbox onto the form.
    3. Add the following code to call the C1Radial.ShowMenu method to make the C1RadialMenu when you run your application:
      C#
      Copy Code
      c1RadialMenu1.ShowMenu(this, new Point(350, 350));
      
      Visual Basic
      Copy Code
      c1RadialMenu1.ShowMenu(Me, New Point(350, 350))
      
    1. Right-click the C1RadialMenu component and select Properties.
    2. Click on the ellipsis button next to the Items property. The RadialMenuItemBase Collection Editor appears.
    3. Click on the Add dropdown button and select RadialMenuItem. Repeat this 5 more times so there are 6 RadialMenuItems.

    RadialMenuItemBase Collection Editor

    1. Select radialMenuItem1 and set the Text property to Locations, ToolTip to International and local C1 sites, and Name to rmiLocale.
    2. Select the ellipsis button next to the Image property. The Select Resource dialog box appears.
    3. Click on the Import button to locate the image files you wish to add to the Project resource file.
    4. In the Project resource file: dropdown listbox select your image for example, flag_generic, and click OK.
    5. Select rmiLocale and click on the ellipsis button next to the Items property. The RadialMenuItemBase Collection Editor appears.
    6. Click on the Add dropdown button and RadialMenuItem. Repeat this 6 times. These menu items will be submenu items for radialMenuItem1.
    7. Select radialMenuItem7 and set its ToolTip to USA and International and its Name to rmiUS.
    8. Select the ellipsis button next to the Image property. The Select Resource dialog box appears.
    9. In the Project resource file: dropdown listbox select your image, flag_usa, for example, and click OK.
    10. Select RadialMenuItem1 and set its ToolTip property to Disabled item and Enabled property to False.
    11. Select the third menu item, radialMenuItem8, and set its ToolTip property to China, Name to rmiChina, and UserData to locale.
    12. Select the ellipsis button next to the Image property. The Select Resource dialog box appears.
    13. In the Project resource file: dropdown listbox select your image, flag_china, for example, and click OK.
    14. Select radialMenuItem9 and set its ToolTip property to Japan, Name property to rmiJapan, and UserData property to locale.
    15. Select the ellipsis button next to the Image property. The Select Resource dialog box appears.
    16. In the Project resource file: dropdown listbox select your image, flag_japan, for example, and click OK.
    17. Select radialMenuItem10 and set its ToolTip property to India, Name property to rmiIndia, and UserData to locale.
    18. Select the ellipsis button next to the Image property. The Select Resource dialog box appears.
    19. In the Project resource file: dropdown listbox select your image, flag_india, for example, and click OK.
    20. Select radialMenuItem11 and set its ToolTip property to South Korea, Name property to rmiSouthKorea, and UserData property to locale.
    21. Select the ellipsis button next to the Image property. The Select Resource dialog box appears.
    22. In the Project resource file: dropdown listbox select your image, flag_south_korea, for example, and click OK.
    23. Select radialMenuItem12 and set its ToolTip property to Disabled item and Enabled property to False.
    24. Click OK to save and close the RadialMenuItemBase Collection Editor.
    25. Run your project and observe the following:

     Radial menu

    Click or tap on the arrow and another Radial menu will appear with sub RadialMenuItems for the Locations RadialMenuItem.

    Radial menu items

    You can navigate back to the previous Locations RadialMenuItem by clicking the central back button arrow.

    See Also