Docking and Anchoring on a Windows Form application

Question

I'm developing an app for Windows Mobile 5.0 and above, with C# and .NET Compact Framework 2.0 SP2.

I have a WinForm with two panels inside (upperPanel and bottomPanel). I want that upperPanel always fill 2/3 of form's height, and bottomPanel fills 1/3 of form's height. Both panels will fill completly form's width.

I've used this:

upperPanel.Dock = Fill;
bottomPanel.Dock = Bottom;

But upperPanel fills the form completly.

How can I do this? I want, more o less, the same gui on differents form factors and on landscape or protrait mode.

Thank you.

Iodic

Answer 1

What you need to do is to put the bottom panel on first and set its Dock property to Bottom. Then set the panel's height to be 1/3 of the form's height. Finally, add a second panel and set its Dock property to Fill. The key here is that you want to add the control that will fill the remaining area to be added last. Alternatively, you can play around with the Bring to Front and Send to Back commands in Visual Studio to get the designer to cooperate.

You may also need to hook the OnSizeChanged event for the form and re-set the height of the bottom panel to account for layout changes. It's been a little while since I did compact framework programming, so I'm not sure.

Acriflavine

"The key here is that you want to add the control that will fill the remaining area to be added last" <-- that works perfectly for me. Thanks! – Prospect

As you say, rather than adding last you can undock, bring to front, then re-dock... nice! – Piefer

Answer 2

Set both panels to "not anchored". That is: Remove Dock-Value and clear the Anchor property. Then, move the controls so they are sized the way you'd like them to be sized.

After that, upon resizing the form, they should resize relatively.

EDIT
Oops, just tried it and sure it doesn't work. I mixed this up with a solution that automatically keeps controls centered within the window...

Well, I'd guess you then have to create a handler for the form's Resize event and manually align the controls after the form has been resized.

Jael

While I can see that my first reply was clearly not helpful, the edit gives a valid hint to a solution. So to all those downvoting: please give a reason in the comments. – Jael

Your answer it's a goog answer, but I was looking for a solution without doing Resize programmatically. – Iodic

Answer 3

Go to Tools, Other Windows, Document Outline. Find the two panels, and swap the order of them. The control that has DockStyle.Fill has to come first for it to be docked correctly. (or last.. never sure which one it is, but it is one of them :p)

This won't solve the always 1/3 and 2/3 issue though... cause the bottom panel will have a fixed height (unless I am mistaken). I think maybe the TableLayoutPanel supports this though...

Update: As noted in the comments, that panel doesn't exist in the compact framework. So, I suppose the easiest solution to this problem would then try to use the docking, but update the height of the bottom panel whenever the size of the form changes.

Elenore

It's a shame, but there is no TableLayoutPanel in the Compact Framework. – Jael

BTW you are correct about the bottom panel having a fixed height. – Jael

Ah, ok. Well, I've never used the Compact Framework, just regular WinForms. – Elenore

Answer 4

Right click on the upperPanel and select Bring To Front. However, I don't think this will give you the result you want. When you resize, the bottom panel will remain the same height, while the upper panel will stretch to fill the form.

Using your docking settings, with this code might do the trick:

    protected override void OnSizeChanged(EventArgs e)
    {
        base.OnSizeChanged(e);

        this.bottomPanel.Height = Convert.ToInt32((double)this.Height / 3.0);
    }

Liquorish

The result that I want it's on my solution. Try it before downvote. – Iodic

Answer 5

If you want this to work perfectly you'll need to add some code to the Resize event of the Form which then specifically works out the relative sizes and places the controls in the correct place after a resize.

If you're not worried about losing precision and the forms aren't going to move much you can avoid this by using some relatively smart anchoring. Essentially you're going to have to select a "grower" (the part of the form that gets bigger, the bigger the form gets). In this scenario I would probably anchor the top part to Top | Left | Right and the bottom part to Top | Left | Right | Bottom. This would mean that the lower part of the form will get bigger if the form is expanded. In most cases this is acceptable. If it isn't use the Resize event and some code.

Perloff

Answer 6

The easiest way to do this is to nest panels. Just set up panels for top bottom and fill. Then use panels within those panels to do the same. The only issues I've had therein are datagrid resizing, which is always a pain anyway. in that case, you have to use some code to resize the datagrid control on the form resize event.

Brietta

Answer 7

I would like to add a point to @jasonh answer.

For the panel that occupies 2/3 of the form, you will have to set the AutoScroll property of the panel to true.

This will enable the panel to display scroll when the control size exceed the visibility to the user and also ensure the visibility of the smaller panel which is 1/3 of the forms height.

Hurwit

Answer 8

You can get the required design by using nested panels along with few setting with Anchoring and Docking Properties.Follow the following steps: 1) Add the Form and put a Panel1 on it. Set its Dock Property as 'Fill' and ResizeMode as 'Grow&Shrink'. 2) Add Second panel2 and set its Dock Property to 'Bottom', Set the Height and set the Anchor property to 'Top,Left'. 3)Add Third panel and set its Dock Property to 'None', Set the Height and set the Anchor property to 'Top,Bottom,Left,Right'.

Save and Compile. Now all the panels Would maintain their relative Positioning With resizing.

Forsta