RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Build an AJAX-Enabled CMS with Visual WebGUI: Adding Menu Components (II)  : Page 2

If full-featured CMSs don't meet your company's needs, find out how to build your own.

When a menu item is selected, MenuItemSelected event is fired and the controller is notified, and it gets the reference to the menu item through WTMenuEventArgs parameter. The controller loads the corresponding module, which is linked back to the menu item through LinkedModule property. If user starts another module (by selecting another menu item) and leave some modules open, they became inactive. If later user selects again the menu entry for a module already loaded, the controller just activate the corresponding module.

When user closes a module, it must be detached from the corresponding menu item. This is accomplished through method DetachModule. It receives the reference to module to be detached, finds the associated menu item and un-link them. DetachModule scans the nodes collection of the tree menu recursively, to find associated menu item.

public bool DetachModule(IWTModule module){
  return DetachModule(Nodes, module);

private bool DetachModule(TreeNodeCollection nodes, IWTModule module){
  bool nodeFound = false;
  // for each menu item on current level
  foreach (TreeNode tn in nodes){
    WTTreeMenuItem menuItem = tn as WTTreeMenuItem;
    if (menuItem != null) {
      // if we found the linked module, detach it 
      // and select parent menu item as active menu 
      if (menuItem.LinkedModule == module) {
        menuItem.LinkedModule = null;
        SelectedNode = tn.Parent;
        nodeFound = true;
      // if not found but currect menu item has sub-menus
      // search in sub-menus
      else if (tn.HasNodes) {
        nodeFound = DetachModule(tn.Nodes, module);
        if (nodeFound)
  return nodeFound;
The actual functionality as menu is accomplished by intercepting NodeMouseClick event of TreeView, handled by MenuItemMouseClick method. When node click is detected, the menus react depending on ExpandMode property, then fire MenuItemClick event.

private void MenuItemMouseClick(object sender, TreeNodeMouseClickEventArgs e){
  if (m_expandMode == WTTreeExpandMode.MenuMode){
  IWTMenuItem menuItem = e.Node as IWTMenuItem;

If ExpandMode is MenuMode, only current menu branch should be expanded, and this all other tree branches must be collapsed.

private void ExpandBranch(TreeNode currentNode){
  if (currentNode.HasNodes)

Because the menu is actually a Treeview, you can customize it. In Figures 2, 3, and 4 you can see WTTreeMenu look based on various settings:
    * Figure 2: Menu with ExpandMode = TreeMode and show Plus/Minus signs (for nodes with sub-items

    * Figure 3: Menu with ExpandMode = MenuMode and show Plus/Minus signs (for nodes with sub-items

    * Figure 4: Menu with ExpandMode = TreeMode and hide Plus/Minus signs.

Figure 2: Menu with ExpandMode = TreeMode and show Plus/Minus signs (for nodes with sub-items

Figure 3: Menu with ExpandMode = MenuMode and show Plus/Minus signs (for nodes with sub-items

Figure 4: Menu with ExpandMode = TreeMode and hide Plus/Minus signs.

The WTTreeMenuItem class is derived from TreeNode. Its code contains just the properties defined by the interface IWTMenuItem. Figure 5 shows the sample application included in the download file, using WTTreeMenu.

Figure 5: Sample application using WTTreeMenu component.

WTIconPanelMenu Menu Component

The IconPanel component allows you to develop interfaces that feature Windows Control-Panel like behavior. It displays a list of icons arranged from left to righ and top to bottom. It partly ressembles the functionality of ListView control in LargeIcons mode, but with the advantage that the icons are not limited to 32 x 32 pixels, but can be at any size.

Using the IconPanel and IconPanelItem controls I implemented WTIconPanelMenu. At a certain moment, the menu shows the items on a certain level, and a first item, Back which allow to return to upper level.

In Figure 6, the right panel is shown a WTIconPanelMenu, created from the menu definition for Security tree menu. If users click in the right panel on Security icon, the IconPanel menu will show next menu level, as in Figure 7. Using the Back button, the user can return to the upper level.

Figure 6: Sample application using WTIconPanelMenu in right panel. By clicking on Security icon, the WTIconPanelMenu will show the submenu.

Figure 7: Sample application using WTIconPanelMenu in right panel, shown submenu ofSecurity menu item. By clicking on Back icon, the WTIconPanelMenu will reload the meni items on the first level.

Bogdan Zamfir has a Master's degree in Computer Science and has been working as an independent consultant and software developer since 1993. He develops both web and desktop applications, using various languages and platforms including C#, VB.NET, Visual FoxPro, Microsoft Access, Visual Basic, and C/C++. Visit his web site for more information.
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date