Browse DevX
Sign up for e-mail newsletters from DevX


Designing Complex Interfaces in VB : Page 4

Enhance your SDI interfaces using MDI techniques to build scrolling forms with menus that merge automatically depending on which form is visible.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

A Tree Menu
One problem with this type of interface is that the menu on the parent form changes according to the active child form. In addition, users must select an item from the Windows menu to reach a different component of the application.

To solve these problems, the MDIMenu project presents a more functional interface that gives users the ability to reach any part of the application via a TreeView control in a "menu frame" that remains visible at all times. The menu contains the commands that fire basic operations. The menu hierarchically displays each child form's commands as well (see Figure 4). The hierarchical menu on the left is visible at all times, offering instant access to the application's basic operations. These operations are grouped under major headings. Users can show or hide groups of commands at will. You can easily hide certain operations from users with limited privileges by skipping selected nodes on the TreeView control that contains the menu items.

Selecting an item in the menu displays the appropriate child form in the remaining screen area. This child form is centered on its parent form. However, it doesn't exhibit the usual characteristics of an MDI interface; the placement and size of the child form are fixed so it can't be minimized of maximized, as discussed in the Static Child Forms section of this solution.

Figure 4. Two Menu Levels: The menu in the left pane is for navigating through the application's forms. Each form has its own menu, which is displayed on the parent forms menu bar as usual.

The interface in Figure 4 shows the MDIMenu project, which consists of an MDI parent form containing two child forms: one (the menu) docked at the left edge of the form and another one that takes up the remaining space of the parent form. Docking a child form on an MDI form is not difficult, but it does take a few lines of code. You must make sure that users can't move the child form around using the menu. To accomplish that , strip the child form of its title bar and control box by setting its BorderStyle property to 0 (None).

Visual Studio .NET's Form Designer provides mechanisms for anchoring and docking elements on a form. The menu itself is a TreeView control that fills its parent form. The nodes of the control reflect the hierarchical structure of the menu, and hold the text of the commands that show the various forms in the application. Code in the MDI forms Load event handler populates the TreeView control when the application starts.

If a user resizes the main form, you must also resize both the child form with the menu and any active child form so that their height is equal to the new height of the MDI parent form's height. The following statements set the height of the form with the menu so that it fills vertically the parent form. In addition, they resize the active child form so that it fills the available area on the parent form. You must place the statements in the parent form's Resize event, which is fired every time the user resizes the parent form.

Private Sub MDIForm_Resize() MenuForm.Top = 0 MenuForm.Left = 0 MenuForm.Width = 250 * Screen.TwipsPerPixelX MenuForm.Height = MDIForm1.ScaleHeight MenuForm.TreeView1.Height = MDIForm1.ScaleHeight 'RESIZE THE ACTIVE CHILD FORM SO THAT IT FILLS 'THE ENTIRE PARENT FORM TO THE RIGHT OF THE MENU FORM If Not MDIForm1.ActiveForm Is Nothing And _ Not MDIForm1.ActiveForm Is MenuForm Then ' DO NOT RESIZE CHILD FORM ' WITH MENU WHEN NO OTHER CHILD FORM ' IS ACTIVE AT THE TIME ' DO NOT RESIZE CHILD FORMS WHEN ' PARENT FORM IS MINIMIZED ' TO AVOID A RUN-TIME ERROR ! If Not MDIForm1.WindowState = vbMinimized Then MDIForm1.ActiveForm.Width = _ MDIForm1.ScaleWidth - _ MenuForm.ScaleWidth - _ 2 * Screen.TwipsPerPixelX MDIForm1.ActiveForm.Height = _ MDIForm1.ScaleHeight - _ 2 * Screen.TwipsPerPixelY End If End If End Sub

In this sample application, the child forms are simply different instances of a single form but with different background colors. In a real application each command on the you would design a different child form for each of the commands of the hierarchical menu. I've also added a few statements to print the name of the selected command on a Label control on the appropriate form to show that every child form contains its own code to interact with the user.

As you have seen, MDI interfaces are not limited to applications that open multiple documents of the same type. You can use MDI techniques to enhance your SDI interfaces, especially if they're made up of a large number of forms.

Evangelos Petroutsos is a long time VB developer. When he's not writing code, he writes programming books and articles. His most recent title is Mastering Visual Basic .NET, published by Sybex. Reach him by e-mail at pevangelos@yahoo.com.
Thanks for your registration, follow us on our social networks to keep up-to-date