Design and Use of Moveable and Resizable Graphics, Part 2 : Page 5

Windows are moveable and resizable; graphics and controls inside applications are not. The second part of this article explains how to design complex moveable and resizable graphical objects and use moveable and resizable elements in your Windows Forms applications.

by Sergey Andreyev

Jul 14, 2008

Page 5 of 6

WEBINAR:

On-Demand

Full Text Search: The Key to Better Natural Language Queries for NoSQL in Node.js

Form Customization
At first, including controls in the same mechanism that you use to turn graphical objects into moveable and resizable ones doesn't seem so significant: you already had moveable and resizable graphics, now you have controls with the same features. Implementing these features gives users much wider flexibility. You can see an excellent example of using these features in their pure form in Form_MovablePlots.cs, which I discussed above (see the section "Y(x) Plots and More"). If you take a complicated form with a lot of different controls and graphical objects and then make the main parts of this form moveable and resizable, you'll see that quantity is really turning into quality. Implementing this technique for all form objects gives users an unparalleled level of dialog customization. It's also very interesting that moveable/resizable graphics turned out to be of exceptional value for forms that consist of only (or mainly) a large number of different controls.
There is a huge demand for customization of forms for users' purposes. There are tons of papers about the ideas in this area, but mostly there are two major directions for organizing this customization:

By using standard anchoring/docking features of all forms.

Via a context menu or by using several additional controls to allow users to set one of the predefined views of the form.

The first direction is called dynamic layout, something Microsoft has put huge effort into for developing dynamic layout tools for programmers and there are interesting results in this direction. The second direction has various names; the most popular term recently is adaptive interface. The links between the two mentioned types of transformations and the two widely used terms are fairly tentative: dynamic layout is a subset of adaptive interface, but the two mentioned ways of transforming forms use completely different techniques.
Implementing moveable and resizable objects shows a new way to transform forms, but there's no epic battle of "Dynamic layout vs. Moveable graphics"; these two things are orthogonal. Dynamic layout is a programmer's tool to help make forms look good under changing conditions. Under dynamic layout, all transformations are predetermined; they are only as good as the programmer. Moveable/resizable graphics on the other hand, although implemented by the programmer, become a user tool. Each user can determine what he or she wants to see. The beginning of this article discussed the Skyscrapers object (see Figure 1); to illustrate the new ideas as they relate to form customization, here's a look at the way users can fine-tune this object.

Figure 6. Fine-Tuning Skyscrapers: The default view of a tuning form for the Skyscrapers object.

Figure 7. Customized Tuning Form: By rearranging the various parts of the default tuning form, uses can easily access the portions they need without obscuring underlying images.

The Skyscrapers' tuning form (see Figure 6) makes changing any parameter easy. However, if a user has already set most parameters and wants only to change colors, when there are a significant number of different colors, the user will have to enlarge this form—thus covering a significant part of the screen. At the same time the user needs to use only 15-20 percent of the form's area (the "Colors" band in the middle part of the original form), so using screen space in this standard way is very inefficient. However, a user willing to spend 2-3 seconds moving and resizing the parts of this form can design an absolutely different view (see Figure 7).
I want to emphasize that:

The two figures both show the same form.

The second view is not a programmer-predefined variant.

There is no list of predefined variants for this form: there is one default view (shown in Figure 6), which users can restore at any time by clicking the button in the top-left corner. But there is also an easy way (press-move-resize) to change the whole form to whatever the user needs.
You don't need anything beyond the methods already described to implement this capability. You use the same three mouse events and the Mover object that deals with the mixture of graphical objects and controls. The designer needs only to decide what level of flexibility to organize. In this case, I decided that it would be better to keep several controls together in this form, so I put them all under the control of one moveable, non-resizable frame, without putting any other restrictions on users' choices.

There are different ways to customize a form and the variety of applications is huge. There is no silver bullet, but using moveable/resizable graphics and applying this technique to controls and groups of controls may be extremely helpful in a lot of applications—especially for the most complicated forms.