I have a form with buttons, groupboxes etc. that looks like this:
The problem is that this form doesnt fit on some smaller resolutions. How can I make this form so that all its components would resize? I tried anchors and autosize preperties but I could only get it to work for picturebox.
What anchor and autosize settings did you use?
Long story short, use the anchor and dock properties.
See an example and explanation HERE.
I made a test example (for visuals), and you can see the anchor properties I used for an example group box that has a picture box below it. It scales left and right and up, but not downward (which would cover the picture box). You can then use similar border properties and settings to set the positions of the buttons and elements within the group box. See the group box properties image:
Group Box Properties Image
Related
I am designing a form with WinForms, a partial screenshot of which is shown below:
The two buttons on the bottom are in a tableLayoutPanel, each one in its own cell. The "Add new baseline" button is anchored to the bottom and left, the "Delete Selected Baseline" button is anchored to the bottom and right. This partially does what I need it to do. That is, when the form is compressed horizontally, the buttons are also compressed, so that one doesn't overlap the other, for example.
They also need to stay in their exact positions as shown in the screenshot, when the form is resized vertically. At the moment, they are moving below and beyond the bottom edge of the form, or upwards and over the other button and the listView above. By the way, the listView is anchored to all sides.
I have tried several combinations of anchors for the tableLayoutPanel, and could not achieve the desired behaviour.
Has a program written in a notebook with a resolution of 1600x900, all the elements are placed normally, and the same program on a monitor with 1920x1080 scale from 125% windows are placed incorrectly. How on WinForms c# consider it and how to redraw?
You need to consider using the anchor and Dock properties this is how you position your controls on the form and control their positions in various scales
you can find here very useful article about using
anchoring and docking
By making use of anchors and docks then you should be able to create a WinForm which scales to any size monitor.
It would be helpful if you could edit your question and include the designer code so we can see what's happening.
In order to make the form resize as you want, You can use table layout panels to set your layout and then you can use the anchor property of the controls to set, where they should move when the form is resized.
The anchor property simply anchors the control to a location, for example if you anchor a text box to may be left, then on resize it will be at left. Or if you anchor it to say both left and right, if will expand in both directions. Just explore them and it should work fine for you.
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.
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.
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);
}
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.
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.
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.
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.
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.
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.
I have this:
Each list is its own WrapPanel and they are all on another WrapPanel which is in a ScrollViewer. If I don't set the height myself for the main WrapPanel it assumes I want the WrapPanel as high as it can go giving me only one column whereas I want as many columns as needed to fill the window.
If I set the Width and Height of the WrapPanel that holds everything to fixed numbers, but I want it to change when the user resizes the window.
In your example screen shot and description I see a tab control whose anchor is set to Top, Left, Bottom, and Right. The tab page with AutoScroll set to true. Within the tab page I see a FlowLayoutPanel. The FlowLayoutPanel has its AutoSize property set to true. I also see a set of other panels/user controls each of which contains a title and a series of check boxes.
You can`t achieve this with standard controls. You can try to create your own custom WrapPanel implementation. But, actually, looking at original WrapPanel sources I think this will be quite tricky. You see, what you want, is basically to measure how many columns can fit in the current window, while every element in column can be of any size. The way I see that algorithm, it will require N*N iterations to get the final result. So you may have problems with performance.
How might I design a UI in C#/WinForms which happens to contain several different control types such that only the ListView control gets resized if the user resizes the window?
There are two primary ways to make a control automatically resize based on size changes of the parent container (a Form in your case):
Set the Dock property of the control to DockStyle.Fill.
Set the Anchor property to "Top, Bottom, Left, Right"
Use the Dock property with Dock.Fill
The advantage of this method is that it takes the entire control and tells it to always fill the entire client area of the parent container (in your case, the Form client area). That's useful if you want to do something like fill a Form with a ListControl or TreeView or something like that. But it's not as useful if you want to scale a single control while using other controls (as you indicate is your need). In that case, you would need to set the Dock property on those other controls to DockStyle.Top or DockStyle.Bottom to have them float above or below your main resizing control.
That's a hassle and it also limits the layout options of the other controls. You can mitigate that problem by docking two Panel controls, one at the top and another at the bottom of the Form. Those panels will remain in fixed positions while the middle area (with your DockStyle.Fill control) scales with the parent Form. You can then put any controls in any layout configuration in those "header" and "footer" panels.
This kind of composite form-building using docked panels is incredibly powerful. Quite frankly, it was game changing in .NET when they introduced this with .NET 1.0 WinForms.
Use the Anchor property with "Top, Bottom, Left, Right"
If all you want to do is have a single control on a form scale, while others stay "stuck" to the edges, use the Anchor property. For the controls that you want to stay at the top, set the Anchor property to "Top, Left" (the default). For controls that you want to stay at the bottom, set the Anchor property to "Bottom, Left". For controls that you want to grow in width with the form/dialog (such as a single-line textbox control), set the Anchor property to "Left, Right" (and set Top or Bottom depending whether you want it move as the top or the bottom of the dialog changes.
And if you want a control to resize in all directions with a Form, set the Anchor property to "Top, Left, Bottom, Right". Very useful for "main control" type of things, such as a dominant listbox, tree control, or multi-line textbox.
For what you need, don't mess with the AutoSize or AutoSizeMode... those properties control how a control changes size based on its own contents, not how it resizes based on its container's behavior. Think of AutoSize/AutoSize mode as inward looking, while Anchor/Dock are outward looking. You get some very bizarre behavior if you use both sizing methods at the same time. Generally not useful.
Dock the ListView to all four sides of the form, and the other controls to 2 or less.
There is a property on controls called "Anchor" (in "Layout" category) if you set this to "Top, Bottom, Left, Right" it will maintain margins between control and its parent container causing it to resize as container changes size.
But if only one of anchors along one axis is enabled (e.g. "left", but not "right") it will move the control instead, again, preserving locked margins between the control and its container.
In short : exactly what James said, except it is "Anchor" not "Dock" property. Dock is similar but not exactly the same.
IF you put the ListView in one panel of a SplitContainer and put the remaining controls in the other panel you can restrict the growth of the second panel by setting the min and maxsize.
If your ListView is docked Full then it'll take all the increase when the form is resized.
What if we have multiple controls in the form?
For example: If a form is used to generate some result in a grid with respect to the data entered in couple of text-boxes or combo-boxes, etc.;
And we want them to resize/realign accordingly and not overlap each other (as it happens when using the dock-fill), especially with the grid-view or similar control in context.