Basics / Menu Structure

<< Tutorials main page

MenuItem
A Menu control is made up of a hierarchy of menu items represented by the MenuItem objects. The MenuItem object represents an individual item that is displayed within a menu group in a Menu, so in order for a MenuItem to be displayed, you must add it to the menu group. Each menu item has a read-only Depth property that specifies the level at which the menu item is displayed in the Menu control. Menu items at level 0 of a hierarchy are stored in the rootmenu represented by the Menu.RootMenu property and do not have a parent menu item.
A MenuItem may or may not have a submenu. Menu items that have a parent menu item are stored in the parent's submenu. To create submenus, you can add MenuItem objects to the Items collection of the nested menu group (can be accessed via RootMenu.Items and SubMenu.Items collections).
The Shortcut property can be used to define a keyboard combination that can be pressed to select the menu item.
The Separator property can be to used to represnt a menu separator, which is usually realized as a horizontal line. It is used to create logical groups of menu items. Separator menu items cannot be disabled, cannot have icons, and do not have a label.
The look of each menu item of your menu can be cardinally changed by creating a specific template and assotiating it with a particular menu item via the TemplateID property. You can customize the general appearance of a MenuItem using the corresponding state looks properties: DefaultLook, HoverLook, ExpandedLook, SelectedLook, DisabledLook and SeparatorLook.

MenuGroup
The MenuGroup object represents a group of menu items. It can represent a collection of top-level items accessed through the Menu.RootMenu property or the collection of items with the same parent item accessed through the MenuItem.SubMenu property. The menu group's orientation can be either horizontal or vertical. Use the Items property to get the MenuItemCollection object that contains all the menu items in the collection. You can customize the general appearance of a MenuGroup and its nested items through the DefaultLook property. The MenuGroup exposes some other properties: OffsetX, OffsetY, Direction, etc.

Example:

ComponentUs Menu

Hide code

<cu:Menu ID="Menu1" runat="server">
    <RootMenu Orientation="Horizontal">
        <cu:MenuItem Text="File">
            <SubMenu OffsetX="0px" OffsetY="1px">
                <cu:MenuItem Shortcut="Ctrl+N" Text="New"></cu:MenuItem>
                <cu:MenuItem Shortcut="Ctrl+O" Text="Open"></cu:MenuItem>
                <cu:MenuItem Separator="True" Text="[separator]"></cu:MenuItem>
                <cu:MenuItem Shortcut="Ctrl+Shift+W" Text="Close"></cu:MenuItem>
            </SubMenu>
        </cu:MenuItem>
        <cu:MenuItem Text="Edit">
            <SubMenu OffsetX="0px" OffsetY="1px">
                <cu:MenuItem Shortcut="Ctrl+Z" Text="Undo"></cu:MenuItem>
                <cu:MenuItem Shortcut="Ctrl+Y" Text="Redo"></cu:MenuItem>
            </SubMenu>
        </cu:MenuItem>
        <cu:MenuItem Text="View">
            <SubMenu OffsetX="0px" OffsetY="1px">
                <cu:MenuItem Shortcut="Ctrl+R" Text="Refresh"></cu:MenuItem>
                <cu:MenuItem Text="Toolbars">
                    <SubMenu>
                        <cu:MenuItem Text="Navigation Bar"></cu:MenuItem>
                        <cu:MenuItem Shortcut="F9" Text="Personal Bar"></cu:MenuItem>
                    </SubMenu>
                </cu:MenuItem>
                <cu:MenuItem Text="Stop"></cu:MenuItem>
            </SubMenu>
        </cu:MenuItem>
        <cu:MenuItem Text="Options"></cu:MenuItem>
        <cu:MenuItem Text="Tools"></cu:MenuItem>
    </RootMenu>
</cu:Menu>


<< Tutorials main page