We help IT Professionals succeed at work.

Fixed positions vs relative positions under WinForms

Ahmet Ekrem SABAN
on
Hello!

I am working on my first C# project that uses Windows Forms. I have already designed and partially implemented a number of screen masks with Microsoft Visual Studio 2010 by placing the elements of the toolbox, giving the variables proper names, etc. etc.

Now, I want that the whole design is a little bit more flexible. Instead of a fix position of a group box at the fixed location of 1052, 34, say, I want the positioning to be proportional of the window size.

There is a trivial and tedious way to go through all screen masks, especially through the MVS2010-generated method InitializeComponent(), and change all the positionings and sizes to the appropriate percentage of the screen width and height.

Well, this can be done, but I am asking for a more easy and probably automatic way of changing a design from "fixed" to "flexible". Do you know an easy way to switch from one way to another?

Thank you for your help!
Comment
Watch Question

Amro OsamaDevelopment, GIS Consultant - Haram Presidency
BRONZE EXPERT

Commented:
first of all Welcome to the world of Development.

if i understood you correctly, you need to play with the Anchor property of the controls you wish to be  flexible positioned.

the default is always Left, Top
Examples:
-if you set it to Left, Top, Right; this means that the control will expand from its right side along with its container(maybe the form direcly or the panel/groupbox) when the container is resized.

-if you set it to Left, Top, Right, Bottom; the control will always resize along the resizing of its container.

hope that this is what you have meant.
good luck
Armand GSenior Developer
BRONZE EXPERT

Commented:
All controls have Anchor properties, which are useful to automatically align them when the form is resized. Try experimenting with the Windows Forms Designer (select a control, go to its properties and set, for example, Anchor to Left, Top, Right, Bottom). This property will let you do what you needed.

Also, try using the Dock property if Anchor doesn't give you what you need.

See this also: http://www.devx.com/dotnet/Article/6964/1954

Amro OsamaDevelopment, GIS Consultant - Haram Presidency
BRONZE EXPERT

Commented:
remember, Anchor is a multi-valued property
so a selection that includes both left and right, this means that the control will resize Horizontally when its parent resizes.
and the same applies when the selection contains both Top and Bottom, the control will resize Vertically when its parent/container resizes.

another thing is, when turning off all directions, this mean that the control will maintain its position from all sides, ie if the control is in the middle, and you resize the parent, the control will still remain in the middle.
Armand GSenior Developer
BRONZE EXPERT

Commented:
Credit first goes to OHDev2004 :)
AndyAinscowFreelance programmer / Consultant
SILVER EXPERT

Commented:
>>Instead of a fix position of a group box at the fixed location of 1052, 34, say, I want the positioning to be proportional of the window size.


To do that the 'anchor' property is of no use to you.  That will either lock the position or just drag the control - eg. if the control is anchored to the right and you widen the form by 200 pixels then the control is moved 200 pixels to the right.

To do it proportionally then you will need to handle each control individually.
Ahmet Ekrem SABANSenior IT consultant

Author

Commented:
AndyAinscow, you are right by criticising the comments above. I know about the Anchor property, but I have a little complex screen mask with a header part, then a group box on the left & the right, and a so-called ButtonMenu at the bottom. This is the class BaseForm : Form. The remaining part at the middle is for use by all other forms that are derived from the base form.

So, anchoring the left group box with Left will pull it also to the top - I tried it. And the location itself is only half of the problem. I need also appropriate sizes when the window is enlarged on a 1440×900 or 1950×? screen. :-)
BRONZE EXPERT

Commented:
Hi,

You can you Table Layout,panels, and nesting of table layout and also set its dock property (may be fill).



regards
Dani
Ahmet Ekrem SABANSenior IT consultant

Author

Commented:
How can I table layout, panels? Is that possible in the MVS2010 designer?

GUI design template
BRONZE EXPERT

Commented:
First table layout with one column with 3 rows
then row contains an other table layout with one row and 3 columns
some thing like that.
and also if you want to add more than one UI control in one table cell then you have to add panel in that cell and then add controls in it otherwise only one control can be added in one cell.


Regards
Dani


Ahmet Ekrem SABANSenior IT consultant

Author

Commented:
Actually, Anchor would help , if I could anchor not only to the four directions but also to other objects. For instance, the left group box could anchor to left and to the header group box. But that seems to be impossible.
Amro OsamaDevelopment, GIS Consultant - Haram Presidency
BRONZE EXPERT

Commented:
I understand what the interface looks like now,
but Im stil im still confused about what exactly is needed.

sould you provide 2 screenshots, compared how things would look like?
one a normal one, and the 2nd how it should look like when resized.
thanks
Amro OsamaDevelopment, GIS Consultant - Haram Presidency
BRONZE EXPERT

Commented:
correct me if i'm wrong:
you want the same screen you provided above, but when maximized for example to behave like:
- header will resize Horizontally only
-Left Groupbox would resize vertically
-right Groupbox would resize vertically
-Bottom Groupbox would resize vertically
-Center Groupbox will expand horizontally and vertically.

just correct the wrong parts and we can go step by step from this one.
Ahmet Ekrem SABANSenior IT consultant

Author

Commented:
Sorry for the unclear description of me!

The above picture suffices to understand with following information:

I want that the proportions remain the same. For instance, if let the application run, a normal (not maximized) window appers with the appropriate information. The structure is such that there is a header part, the left and right panel, and a button menu at the bottom. If one measures the relative distance of all these parts and their sizes in percent of width and height of the Form, (s)he would see exactly what I want when the form is fullscreen. With other words, if the width of the left and right panels are 10% of the Form width each, and the height is 60% of the form height, this should not change.

But in pixels, I would have to recalculate the locations and sizes of each item and resize it. That's, however, what I want to avoid with some simple trick, which is actually my question...
Development, GIS Consultant - Haram Presidency
BRONZE EXPERT
Commented:
Ok, had to test this to get it right, it seems like you are using graphics and you need to maintain aspect ratio.

Header > Dock Top
Left      > Dock Left
Right    > Dock Right
Bottom > Dock Bottom
Contents > Dock Middle/Center

now the other trick that ensures aspect ration:
in the base form:

protected override void OnResize(EventArgs e)
        {
            GrpHeader.Height = GrpFooter.Height = (int)(this.Height * 0.2);
            GrpLeft.Height = GrpRight.Height = (int)(this.Width * 0.2);
            
            base.OnResize(e);
        }

Open in new window

Amro OsamaDevelopment, GIS Consultant - Haram Presidency
BRONZE EXPERT

Commented:
you can change the 0.2  to affect the aspect ratio you should have
if the header and footer are different, just set each one alone, of course you know that.
Ahmet Ekrem SABANSenior IT consultant

Author

Commented:
Congratulations, sir! You got it! :-D

The only wrong part in your example code is the fourth line, where "*.Height" should be "*.Width".
Amro OsamaDevelopment, GIS Consultant - Haram Presidency
BRONZE EXPERT

Commented:
Oops, can't get rid of Copy/Paste behaviour :)

glad i could help :)