Browse DevX
Sign up for e-mail newsletters from DevX


Designing Complex Interfaces in VB : Page 2

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

Building a Multiple Document Application
The MultipleDocs sample application has an interface consisting of two forms, one for editing text and another one for viewing images. These are, respectively, a parent MDI form and two child forms, one covered completely by a TextBox control (see Figure 1) and another covered completely by a PictureBox control (see Figure 2).

Figure 1. The TextBox Control: The TextBox control belongs to a child form that fills the parent form.
Figure 2. The PictureBox Control: The scrolling PictureBox is implemented as a child form that contains a PictureBox control with its AutoSize property set to True.

Both forms are MDI child forms without a border (BorderStyle = 0), but—unlike a normal MDI application—users can display only one form at a time. In addition, both forms cover the entire parent form. This scheme provides you with a form that looks like a single window but provides instant scroll capability. If you run the project, and resize the window, you'll see scrollbars appear whenever the window can't display the entire text or the entire image.

To make this happen, you must ensure that when the user resizes the parent form the child form gets resized as well. On MDIForm1, for example, you want to make the TextBox control fill all the available area on the parent control. To that do so, you execute a few statements that resize the child form and the TextBox control on it from within the parent form's Resize event handler, as shown here:

Public Sub MDIForm_Resize() If MDIForm1.ActiveForm Is Nothing Then Exit Sub End If If MDIForm1.ActiveForm Is MDIChildForm1 Then MDIChildForm1.Width = MDIForm1.ScaleWidth MDIChildForm1.Height = MDIForm1.ScaleHeight MDIChildForm1.Text1.Width = MDIForm1.ScaleWidth MDIChildForm1.Text1.Height = _ MDIForm1.ScaleHeight End If End Sub

If there's no active child form at the time, the first If structure in the Resize event handler takes no action. The remainder of the code resizes the child form to the parent form's ScaleWidth and ScaleHeight, and then resizes the text box to cover the entire client area.

The second child form contains a PictureBox control whose AutoSize property is set to True, so that the control is sized according to the size of the image displayed on it. To make the entire control visible, you must also make sure that the child form containing the PictureBox control is sized to the dimensions of the control. This takes place from within the second child form's Load event handler:

Private Sub Form_Load() MDIChildForm2.Width = _ MDIChildForm2.Picture1.ScaleWidth MDIChildForm2.Height = _ MDIChildForm2.Picture1.ScaleHeight End Sub

You must execute the same statements from within any procedure that loads an image on the PictureBox control (if you implement an Open command, for example). Notice that you don't have to resize the PictureBox control to the parent form's size. The PictureBox controls dimensions are determined by the image. The main MDI form attaches the appropriate scrollbars to the child form automatically. If the image is smaller than child form, part of the main form's client area will be empty.

Finally, you need a few statements to display the appropriate child form when the user selects one of the commands of the Window menu. While each child form has its own menu, the Window menu belongs to the parent form, and the following statements need not be duplicated on all child forms.

Private Sub mnuWindow1_Click() MDIChildForm2.Hide MDIChildForm1.Show MDIChildForm1.Top = 0 MDIChildForm1.Left = 0 End Sub Private Sub mnuWindow2_Click() MDIChildForm1.Hide MDIChildForm2.Show MDIChildForm2.Top = 0 MDIChildForm2.Left = 0 End Sub

When the application starts, it displays only the parent form, which contains a menu bar with a single Window submenu (this is not implemented as a WindowList menu, because the MultipleDocs application is not a true MDI application). The Window menu contains commands that display the child forms of the application. Select one of the commands and the corresponding child form fills the parent form's area. Because the child form has no visible border, users don't perceive it as an MDI child form. The interface has the look and feel of an SDI application with added functionality that can't be implemented easily without MDI forms.

Thanks for your registration, follow us on our social networks to keep up-to-date