I have simple WinForms GUI that I want to use with TabPages. The problem I’m having is resizing and working with multiple sizes of screens. What settings do I change for each TextBox, GroupBox to make it fit the screen nicely without making it feel to the user like it’s badly designed?
Usually I would use Dock Fill but it doesn’t work with more then 1 GroupBox. Then I checked/played with Anchor trying to make it bind to Top, Left, Right, Bottom for everything but that makes a big mess (textboxes overlapping other label, texboxes etc.). I tried to choose some here, some here but whenever I try resize unexpected things happen. How would I go from here? My system is 24″ and resolution 1920x1080p, but my users often have a range from 1024×768 to 1920×1080.
Right now I’m using Devexpress controls but the question applies to both Devexpress and builtin controls.
First, set the form size in the designer to a bit less than the minimum expected resolution – say 900×650 or so. Then you can design a form that will work at all resolutions even if it doesn’t get resized.
Next, work out which controls should stay a fixed size, and which should stretch/grow as the form us made bigger. Firstly, some fields won’t benefit from being enlarged (e.g if you have a text box that always contains a percentage of up to 3 digits, it is pointless or even counter-productive to allow it to grow big enough to show 9 digits. Secondly, some fields fill the entire width of the form, so they naturally will work better if they grow with it.
Now, set the anchoring. In general, anchor the edge of a control to the nearest edge of the form. If you set only one anchor, the control will not stretch, and the anchored edge will start the same distance from that side of the form.
If you want a control to stretch, anchor opposing sides (eg left and right). This will keep those edges the same distance from the form’s edges, so the control will stretch to fit.
You will see that if one control is anchored in place, and the control next to it is set to stretch, there is a good chance that they’ll end up overlapping, so you must treat all controls across the form as a related group.
For more control, place groups of controls into a container control like a panel or group box. Then their anchoring relates to their parent group, and the group can be anchored to the form.
To see the effects, just resize the form in the designer and see where everything goes – then undo and fix any anchoring that didn’t work. You’ll soon get a feel for how the layout works, and how to design forms to work well with resizing.