i have 3 custom controls, that i want to place in a resizable window next to each other. when the window is being resized, these controls should also resize, each taking 33% of the available width.
i tried to use a table layout, but it seems the table only grows, but never shrinks.
thanks for any help on this!
You can use a TableLayoutPanel, with 3 columns each of size "33% percent". Then you put each of your control in the panel, and set the anchor property as you wish (for example right-left if your control should resize themselves only on the horizontal plane).
Your TableLayoutPanel should also have its property Dock set to True so that he can occupy all your window and resize accordingly.
Related
I have two controls in a groupbox ("Waveforms"). I would like them to dynamically resize also by height but can't get it to work. I've used left|top|right anchor for 1st control ("Left channel") and left|bottom|right anchor for 2nd ("Right channel").
Here is a short video of problem.
How can I acomplish this?
If you want your controls to share vertical space of the GroupBox, you can use a TableLayoutPanel or a SplitContainer.
By using a TableLayoutPanel you can easily specify how the vertical space should be shared by controls. For example you can add two rows to the TableLayoutPanel and give them each 50% of the whole height.
By using a SplitContainer, the user can change the occupied heights of the controls at runtime.
I've create a c# winforms form,
It has a bunch of labels positioned and a flowlayoutpanel.
on certain occasions i set one of the labels and the flowlayoutpanel to visible =false.
As a result i want all labels beneath them to be pushed up - at the moment there is a gap where they were.
Also, I'd like the flowlayoutpanel to grow and shrink depending on the number of items it has.
at the moment it is just the size i set it to be in the designer.
please can you help with these 2 issues.
Thanks
If I got you correctly, I would suggest using a TableLayoutPane with two rows. The top row will contain a docked panel with all the controls that may be hidden. The bottom row will contain a docked panel with all the rest.
Set the top row's SizeType to AutoSize and the bottom row's to 100%.
When you want to hide the controls, set the top panel's Visible property to false. Now, because the top row is AutoSized it will shrink to nothing, causing the bottom row to "jump" up.
The TableLayoutPanel does the pushing. Maybe you can use that if there is no better answer in next time.
First problem:
You may use some simple panels to divide your form, give them the dock.fill property. when you'll hide a panel programmatically, the other panels will fill the empty space left.
Second problem:
You have to set the Autosize property to true.
I have a form in C# (WinForm). It looks like this:
(LOGO)
blank space for labels that I add
through code (I can fit 10 labels in
this space)
(close button)
The blank space can hold about 10 labels.
I am stumped on how I would make this form scrollable if I want to add 20 labels? If I add 20 labels via code, then the 11th label will overlap with my close button and the 12th+ label(s) will run off the end of the form.
How do I make just the blank space portion of my form scrollable where I am creating the labels? I don't want to use a listbox.
Thanks.
You should try using either a TableLayoutPanel or a FlowLayoutPanel as a container for your Label controls.
A TableLayoutPanel will allow you a finer level of control over where your labels are positioned. Like an HTML table, you specify the exact cell position (using row and column coordinates) of each control.
By contrast, a FlowLayoutPanel will handle the positioning of its contents automatically, either in a vertical or horizontal layout configuration. The positioning is determined by the order in which you add the controls, allowing you to achieve a dynamic layout with a minimal amount of fuss.
Either will allow you to add your label controls to it at run-time and size itself appropriately. In order for layout panel to be scrollable, make sure that you set its AutoScroll property to "True".
Maybe a FlowLayoutPanel with AutoScroll set to true and FlowDirection set to TopDown.
Place all controls inside a panel and use scrollbar control.
Understand .NET Scrollbars
You could use a FlowLayoutPanel.
Add as many labels you need and enable AutoScroll on the FlowLayoutPanel.
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.
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.