views:

240

answers:

3

How should I develop a form that can resize nicely?

While that sounds like a simple question the problem I'm struggling with is the fact I'm reproducing an existing application I made in Swing several years back. Its built around a single form that hides/reveals panels as you select different options.

Its around 600 x 700 pixels wide say but its a fixed size window.

Is this good practice? The GUI works fine this way but if you look at other applications you can resize them easily. Granted some applications look stupid full size but should the option be there?

The main screen consists of about five buttons, when maximized this looks ridicilous, but at the same time if the form is resizable the moment you start resizing the form it becomes stupid.

I'm aware of layout managers and so forth so no need to tell me to check these out, my main problem is the fact I can produce an excellent fixed width application but that's about it.

Any advice/links for this?

+4  A: 

Personally, I think fixed size forms are a horrible User Experience.

I always try to build mine so that they can be gracefully resized (even if they do look a little odd).

If you're using .NET for your WinForms development, you can easily use a table layout and then anchor your controls so that they resize politely.

Justin Niessner
+3  A: 

A fixed size gui is generally a bad idea because most forms have a user interface element that can sensibly be resized.

First consider a form that only contains two buttons. (A silly form, yeah, but for the sake of discussion we'll assume that it's the right thing for the job) When sized initially in the right way (appropriately for localization, e.g.), there's no good reason to make the form resizable. If you enlarged or mazimized the form, you'd only make the area to click the button bigger, but you'd be clicking a smaller area than the button to resize it, so there's no reason. In this case, it doesn't make sense for the form to be resizable because there's no user-benefit for adding the extra control.

Now consider a form that contains a listview. There are clear usability benefits to making this form resizable in both dimensions. The listview may contain more items than can be shown in a smaller area, both horizontally and vertically, so it makes sense that this form be fully resizable to allow the user to display as much or as little of the data as they want.

Every form control implicitly has certain degrees of freedom either by constraint or by convention. Conventionally, buttons don't resize, so they have no degrees of freedom (even though they can resize). Listviews and listboxes have two degrees of freedom, horizontal to display more data per row and vertical to display more rows. Single line textboxes have one degree of freedom, horizontal. Because they're single line, they don't expand vertically, but they do expand horizontally.

These degrees of freedom help you determine the layout of your form. Form elements that have degrees of freedom should resize in the appropriate direction when the form is resized. I prefer to design my forms with only one control that has two degrees of freedom in an area where areas are typically separated via splitters. I prefer to avoid the explicit table layout panel unless there's a very specific need for it because it's easy to make a form overly complex when there's a table layout to work with. The anchors in WinForms provide an extremely powerful and flexible abstraction for control layout, however, so I strongly encourage their usage.

Greg D
A: 

Aside from the layout panels (my favorite is the table layout), become familiar with the Anchor, Dock (more for the table layout), and MinimumSize properties. They do a lot of work for you when it comes to resizing forms.

Most of your forms will look goofy maximized but my general rules were these:

  1. Buttons stay the same size regardless of form size (no Top and Bottom anchor; no Left and Right anchor).
  2. Buttons stay in the same place with respect to a border (Anchor combinations: {Left, Top}, {Left, Bottom}, {Right, Top}, {Right, Bottom})
  3. Only the right-most textbox grows when resizing (Anchor = Left and Right).
  4. Single multiline textboxes rule the form (Anchor = Left, Right, Top, Bottom)
  5. With multiple multiline textboxes, the lowest one rules the form.
  6. MinimumSize is less that 640x480 whenever possible; 800x600 max.
  7. The default size is the MinimumSize -- let the users make it bigger if they need to.
Austin Salonen