Implementing Scrolling Forms

One of the shortcomings of regular Visual Basic Forms is that they can’t be scrolled. If you resize a fairly long Form to make room on your Desktop, you’ll see only part of the Form (its upper-left comer is always shown). Ideally, a pair of scroll bars should be attached. to the Form automatically to help the user scroll it and bring the desired. area of the Form in view. The problem is even worse when a large Form, which can fit on a 1024 x 768 (or larger) monitor, is displayed on a monitor with lower resolution. The user may have to move the Form with the mouse beyond the right or left edge of the screen to see the other end of it.

To overcome this limitation, you can create MDl Forms that look and feel like regular Forms. Scroll bars are attached automatically to an MD Form when the child Forms no longer fit in the designated. area. To display a long Form, design it as usual, set its MDI Child property to True, and place it within an MDl Form. When the user resizes the main window of the application to a smaller size, the corresponding scroll bar(s) will be attached. automatically, allowing any portion of the Form to come into view.

Scrolling Forms can be built in two ways, and we’ll demonstrate them both with examples, The simplest scrolling Form is an MDl Form with a large child Form. The MDI Form can be set to any size initially, and the user can resize it at will. Whenever the MDI is smaller than its child Form, the user can bring any part of the child Form into view with the help of the two scroll bars. The MDl window can be made as large as the monitor’s resolution allows. If you don’t want this to happen, insert the appropriate code in the Form’s Resize event to restrict the size of the window.

The second method is to design several smaller child Forms and place them next to each other (from within the MDl Form’s Load event). The tiled windows should have no title bars, so that the user can’t change their placement on the container Form. This method is very useful when the child Forms are identical and you don’t know in advance how many of them may be needed at runtime.It shows an MDl Form with several sections. Normally, each section would be a smaller Form, displayed as needed. With the MOl approach, you can place them next to each other on a child Form and create a long Form. The user just the length of this Form and bring the desired. section into view with the help of the MDl Form’s scroll bars.

VB6 at Work: The Scroll Image Project

The first scrolling Form I’ll demonstrate is a Form with a large image that can be scrolled in all four directions. Visual Basic’s lmageBox and PictureBox controls don’t provide any scroll bars when the image exceeds the dimensions of the controls, and in many cases, this is a serious problem in designing Forms with images. The best approach to this problem is to design a custom ActiveX control that does exactly what the PictureBox control does and also provides a pair of scroll bar that are activated whenever the image’s dimensions exceed those of the control. The MDl approach works well enough and many applications don’t really call for a custom control.

It shows a Form with an image and the appropriate scroll bars attached to it. From a user’s point of view, it looks just like a Form with scroll bars. In fact, this is an MDl Form with a child Form. The child Form is as large as the image it contains and it has neither a title bar nor a control box. The child Form is aligned to the top left comer of the MDl Form and it can’t be moved by the user because it doesn’t have a title bar.

The Form shown belongs to the Scrllmg project, which you’ll find in this chapter’s folder on the CD. To implement the scrolling Form, follow these steps:

1. Start a new project.
2. Rename the Form to ImageForm and set its MDl Child property to True.
3. Set the child Perm’s Caption property to a blank string and its ControlBox property to False. Also set its BorderStyle property to 1 (Fixed Single). ‘.
4. Add an MDl Form to the project with the Project :> Add MDl Form command. Set the MDl Form’s Name property to ScrollImageForm.
5. To display an image on the child Form, assign the image file’s name to the Picture property of the ImageForm Form. You must also set the same Form’s PaletteMode property to 1 (UseZOrdei’), so that the image’S colors will be properly displayed even on palette systems (systems that can display 256 colors only).
6. The last step is to add the code for resizing the child Form ‘to fit the size of the image it contains. This code must be inserted in the child Form’s Load , event:

Notice that the dimensions of the image are returned by the Width and Height properties of the Picture object in HiMetric units, and they must be converted to twips. This conversion is carried out by the SealeX and SealeY methods of the Form. If you have set the child Form’s SealeMode property to another value (pixels, for.. instance), you must change the second argument of the method accordingly.

This is all the code needed by the application. If you load another image on the child Form, you must call the child Form’s Load event handler to resize the Form accordingly. The project’s MDI Form has a single menu command, the Load Image command, which does exactly that. The menu is added to the child Form so that it’s attached to the MDI Form when a child Form is loaded. The Load Image command is implemented with the following code:

The first seven lines set up the Windows Common Dialogs control and the last two lines load the image on the child Form and call the Form’s Load event handler, which resizes the child Form according to the new image’s dimensions.

VB6 at Work: The Long Form Project

The same approach will work with a really long or wide Form. Design it as a child Form in the Visual Basic IDE, then display it on an MDI Form. Designing an exceptionally large Form in the IDE is not difficult because scroll bars are attached automatically to the Form design window at design time. Give it a try now to see how easy it is to implement large scrolling Forms with the MDI approach. Remember to remove the child Form’s title bar so users can’t move it, and set its border to a fixed style so users can’t resize it.

Earlier, It showed a long Form we used. It’s the main Form of the PaintPic application, implemented as a child Form on an MDI Form. The revised project can be run ~n a monitor of any resolution. To make the Paint- Pic Form scroll, follow these steps:

1. Start a new project and remove its Forml component. Right-click the FormI entry in the Project Window and from the shortcut menu, select Remove Forml.
2. Add the PaintPic Form. Open the Project menu, select Add Form and in the Add Form dialog box, locate the PaintPic Form (you’ll find it in the LongForm folder in this chapter’s folder on the CD) ..
3. Change the PaintPic Form’s Borderstyle property to 1 (Fixed Single), the Caption property to an empty string and the Controlbox property to False.

Now run the application to see how the PaintPic Form can fit in a smaller window. If you want to save the project, use the Save PaintPic.frm As command in the File men,,! to save the revised Form to another folder. If you simply save the project’s components, you’ll break the PaintPic project.

VB6 at Work: The Scroll Form Project

The next example demonstrates how to build a scrolling Form with different zones, which would normally correspond to different regular Forms. It shows a Form with several sections placed next to each other. At nearly 1,000 pixels wide, it’s too big for the window. It also shows the separate child Forms that make up the long Form at design rime.

To design this Form, you must create three child Forms that correspond to the three sections of the MDI Form (shown in Figure 10.16 above). In doing so, make sure that they:

• Are all Child Forms (property MDIChild is Set to True)
• Don’t have it TItleBar (property Caption is set to “” and property Control- Box is set to False)
• All have the same height, so that they can be displayed next to each other and give the impression of a continuous long Form ‘
• Have their BorderStyle property set to 0 (None). If you want to display the borders between the sections of the Form, set the BorderStyle property of the child Forms to 1 (Fixed Single).

The placement of the child Forms on the MDI Form is critical to this approach. The child Forms can’t be arranged on the MDI Form at design time, To display the three child Forms next to each other, insert the following code in the MDI Form’s lnitialize event:

MDI ScrollForm is the name of the MDl Form and the three child Forms are called ContainedForml, ContainedForm2 and ContainedForm3. The first one is placed against the top left comer of the MDl Form, the second child Form is placed flush against the right edge of the first child Form, and so on. The MDl ScrollForm’s Height property is set to the height of the child Forms plus the height of the Form’s title bat and horizontal scroll bar. If you want to prevent the user from changing the Form’s height, insert a line that sets its height in the Resize event.

‘The ListBox controls are populated from within the corresponding Form’s Load event. which is fired for child Forms as well. There’s no code behind the menu ~ of the MDI Form. I designed the menu structure for the MDl Form to demonstrate how you can make an MDI application mimic a regular Form, with the added .benefit of allowing its contents.. to be scrolled.

As I mentioned at the beginning of this chapter/MDI Forms aren’t very common in user interface-design, but they are unique. With some creative programming , you can put technique to good use. Applications that open multiple documents are prime candidates for implementing with MDI. The technique of implementing scrolling Forms with MDl Forms masquerading as regular Forms· is Useful and practical trick for designing Forms that can be viewed on monitors with lower resolutions.

Scroll to Top