What I have:
I have a panel (the white space), and two DataGridViews represented by the green and blue squares. The panel is anchored to take up most of the center of my screen, and grows/shrinks with the window size.
What I need:
I would like the green square to always stay with it's right border in the middle of the screen and take up the left half of the screen. Equally, I'd like the blue square to stay with its left border in the middle and to take up the right half of the screen.
Basically, I just want it to always look like this image regardless.
Do I need to do this programmaticly? I can't seem to find a combination of anchoring or docking that makes this happen, and adding more panels as containers yields the same issue in the end.
Not sure if this is what you want:
Creating a SplitContainer on the screen.
Anchor = Top, Bottom, Left, Right
IsSplitterFixed = True (Trick)
Creating another two datagridviews, each a side inside the SplitterContainer
Dock = Fill
I generally use a TableLayoutPanel to accomplish this. It is very easy to use (a simple introduction can be found here).
You create to cells in the first row and set it to 50% width each. In each cell you put one DataGrid and you set their Dock'ing to Fill.
I tried the solution with the TableLayoutPanel, which works ok.
But layouting inside the TableLayoutPanel is a bit unhandy and restricted if you want to use different positioning.
I found another solution which does it with a little of programming effort:
For the left item define anchoring to left
For the right item define no left/right anchoring
This leads into the left item remaining at its location when resizing the form and the right to move staying about the middle location.
The I added an OnSizeChanged handler to the form, which implements these lines:
int widthForItem = Item2.Left - Item1.Left; // you can subtract a distance here
Item1.Width = widthForEachItem;
Item2.Width = widthForEachItem
Related
Mock-up
I am creating a WinForms application which is supposed to have three main vertical panels. The middle one (B) is narrow and centered. It is not to change in width, only in height as the form is resized, and it is always to stay in the horizontal center. The left (A) and right (C) panels are to resize to fill the rest of the available space.
I have tried the various docking and resizing options. But I haven't yet found the combination that will allow the left and right panels to fill the spaces on either side of the middle panel (which is to remain the same width.)
I'm still hoping that there is something that I'm missing, otherwise I will have to go the route of manual calculating the sizes and locations of the panels on the resizing event.
Even if I manually get B to remain in the center, I don't know of a way to get left and right to resize automatically without either covering or going behind the center panel.
Add the TableLayoutPanel to your Form and set its Dock property to Fill. Now edit the Rows/Columns. Remove the second row so there is only one row. Setup the Columns so they look like this:
Change the Absolute value of 50 to whatever width you want the middle to be.
The two Percent values can be anything, as long as they are the same number.
Now add the three Panels to each column and set the Dock property of each Panel to Fill.
Done.
Here's the result in action:
I have a WinForm form that has two DataGridView controls paced on it such that they are stacked, one above the other against the right hand side of the form.
I would like a way of setting them so that when I expand the form, they expand height-wise with it, as well as width-wise. I managed width-wise by anchoring them to the left and right sides and anchoring the top one to the top and the bottom one to the bottom. However, from here I'm not sure how to get them to use up the space in the middle that appears when the form maximizes...Maybe an image will make my meaning clearer:
Normal Size:
Maxmized; I'd like the grids to expand to take up the full height of the form between the two of them as the red arrows show:
If this question is blindingly obvious I apologise and can only say I didn't really know how to phrase it properly and so found searching for it on Google unhelpful!
You have two options:
TableLayoutPanel or
SplitContainer
The former lets you create a table of many columns and/or rows with various sizing options from absolute and percent to autosize. This is very powerful for layout; but in other respects TLPs are somewhat restricted as the 'cells' are only virtual..
A SplitContainer offers only two panes but lets you treat each with all the things you can do to a container: add one or more controls, anchor or dock them, give each pane a BackColor and make use of its event model.
So if you need just two controls of equal size that adapt to the form size like you showed in the question, a SplitContainer is maybe the better option.
Set the splitter to fixed and make it smaller, anchor the SplitContainer to all sides and drop the DGVs into their panes and Dock them to Fill.
You could also make the splitter moveable to allow the user to resize the panes; if you do that do make the splitter width larger..
Also make sure that the FixedPanel is set to None so that height changes are shared.
Hint: If you want a few more panes to share the space you can nest several SplitContainers.. But for larger numbers do consider switching to TLP!
Here is the picture to show the left panel is docked to left while the main panel is docked to Fill, but the left panel is overlapping the main panel
Any one know how to solve this problem?
You need to make sure there are on same level, play a little bit with:
Right Click on the control -> Send to Back or Bring to Front
options.
To give a bit more explanation:
If one of your panel is Dock to Left and the other to Bottom, but those are not on same level (Left panel is above Bottom one) Left panel will never force Bottom panel to move, as Bottom panel can use whole space, as on it's level there is nothing docked to Left it that makes sense.
Situation change if those two panels are on same level, then they respect each others docking.
In your scenario, you want to push your left hand side panel to back, so it is on same level with Main panel, and then act same way with the Bottom one, as needed.
I hope that helps.
The order in which the panels are created is causing this.
You can change this order with the document outline.
Set one panel higher in the list than the other, play with it until you get the desired result. Than close this window. In my case I also have to restart visual studio now since this view somehow makes visual studio very slow.
I have done the same thing but for me the two panels are not overlapping.
Let me tell you the steps I followed.
I took one panel from toolbox. Then made a copy of same panel by click and drag. I then changed their color two red and yellow respectively to differentiate between them. Then for red panel i set dock to left and for yellow panel I set dock to fill. Below is the screenshot for the same.
First case
Second Case
Third Case
Suppose that I have the following form in Designer:
I want to give users the ability to stretch this form as they want and all controls should be located like in the picture, no matter how user changed the size of this form, so they should take the same amount of space and stick to the same controls and borders.
How can I do it in WinForms? I know that there are such things like Docks etc, but I didn't find the correct way to use them in this situation.
You want the Anchor property in this case, not Dock. Anchoring means that a control will always keep the same distance to certain sides (top, left, right, and/or bottom) even if it means that the size must be changed; docking OTOH does not care about margins, it just fills up all available space on one or all sides.
Here's what you might want to do:
Anchor the two image buttons to the top and right.
Anchor the OK button to the right and bottom (I guess).
Anchor the large ListBox to all sides.
Just To Add some notes on good answer of stakx
For Controls Like ListBox that have a limit to their height, setting anchor is not enough and you should set IntegralHeight of them to false.
I reccomend to set MinimumSize of Form to prevent a user from sizing a window to an undesirable size.In your case Set it to a minimum acceptable size to prevent ugly small form with an unusable ListBox.
I don't know how to ask so this is the example:
So my question is how to avoid two buttons overlapping each other ? How do i need to anchor them or to make the location dinamic ?
In the example both buttons are anchored left,top,right. I need them to auto-size when i maximize.
Put them in a panel docked left and right. Dock them both to fill but dock the right button first.
Well, if you want them to each have equal sizes, try putting them into a table, so that each column of the table is 50% width. Then set the table to be anchored left, right, and top.
Using the Anchor property of the controls the way you did it should work and is the simplest way to achieve the desired effect. Just make sure you first size and position both buttons the way you want them in the designer (so that they just look right in the designer) and then set the anchor of both buttons to left and right and top. They will then resize and reposition themselfes proportionally when you resize the form.
Alternatively you can put the two buttons on a TableLayoutPanel with two columns or on a regular Panel and use the Dock property, dock one button to the left and one button to the right.