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.
Related
I have a windows form which have a lot of controls in
that(Listbox,Groupbox,Combobox,TextBox,ListBox etc). I need to resize
and arrange the controls automatically whenever the form's size gets
changed. I need to know the difference between Dock and Anchor to
implement this. What is the actual difference between Docking and
Anchoring?
The Anchor and Dock properties of a form are two separate properties.
Anchor refers to the position a control has relative to the edges of the form. A textbox, for example, that is anchored to the left edge of a form will stay in the same position as the form is resized.
Docking refers to how much space you want the control to take up on the form. If you dock a control to the left of the form, it will stretch itself to the height of the form, but its width will stay the same.
This EXAMPLE can help you understand a bit more.
How to run or adjust Windows application efficiently in any screen resolution in C# 4.0?
I have done it in 1600 x 1200 resolution but if I try in lower resolutions only some part of the forms are visible.
How to solve this problem? I have searched a lot and got to know about Anchor & Dock will be useful but also to came to know that these should be used from the beginning of designing but I have completed my application while this resolution is now causing the problem when I install the application in any system
The quick and dirty method of making sure your controls remain visible would be to place a Panel on the form, set Dock = Fill and AutoScroll = True, then place every other control in your form inside it. Your controls won't get cut off, but your program won't win any awards for asthetics. If the program is brand new, that's really not the way you want to start things off.
You could redesign it to make use of Anchors and Docking, as you mentioned. You could also place items such as a row of Button controls or a series of TextBox controls in a FlowLayoutPanel, which will take care of repositioning them as you resize the form.
But if adjusting for screen resolutions is important to you, a better way would have been to use WPF from the start. Controls are automatically resized and repositioned as needed, based on their container control.
The real question should be:
How do I want the controls to resize themselves with their parent?
The answer is that you need to specify anchors. Anchors are used to tell your controls how they should react on resize, and what the concerns should be.
Lets say you have a form with two [Cancel] and [OK] buttons. They are usually seen fit at the bottom right of your window. But the default Anchor property is set to Top, Left, so on your form's resize, they stick to the Top, Left corner where they belong according to the default settings. This won't be any trouble if your maximize your form, thus you'll have your button probably in the middle of the screen. But at least, you will see every controls adequately.
But what if resize your form smaller and smaller? Do you still want them to stick at the Top, Left, or Bottom, Right would be more useful? My guess is that you should set the Anchor property to Bottom, Right, for those two.
This might come in handy to have different Anchor property settings depending on how you want your control to react to your form resize. Let's take three TextBox controls aligned horizontally with each other. Perhaps your longer field will be your object Description property located on horizontal-center of your form. Then, when you risize, you have to think what would make more sense on resize. If it is to make it longer on resize in order to fill your form width with all your control, then perhaps you want the DescriptionTextBox to get wider and wider, and the contraray should also be true, on form's resize, you probably want this field to be resized smaller too. Then, to make this happen, you have to set the Anchor property to Left, Right, so that the edge of your DescriptionTextBox control remains at the same very distance of your form's edge at any time.
Another thing is of concern in case of resizing to smaller window, is its MinimumSize property. One shall agree that there is use to have a form of size 34x34 pixels. So, setting your MinimumSize property to a certain size which makes sens for the form to exist, you will avoid display glitches of controls getting one over another.
For more details on the Anchor property: Control.Anchor Property
For more details on the MinimumSize property: Control.MinimumSize Property
how to resize a tab control in a winform (C# .Net), controls(inside tabpage) must move while resizing the form
maybe the Dock property is what you're looking for.
If you put a panel.Dock=Dock.Fill then it will take all the space available.
so when the controls is resized, the panel is too.
Going off of your comment to Andrzej's answer:
the control's size must be unchanged and move one below the other while resizing the form
It sounds like what you need is a FlowLayoutPanel. Drop one onto your TabPage, set its FlowDirection property to the value of your choice, and place your controls into it. Now, whenever the TabControl is resized, the controls it contains will automatically shift positions to fill the space.
Set Anchor property of that control. Alternatively you may use Dock
Anchor - defines a constant space between one or more edges of it's container.
Dock - control borders are docked to its parent control.
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 a user control that has:
a) a buttons panel at the top (it always has to be visible)
b) a panel with controls that are dynamically added and re-sized at run-time. The controls can be many, so the panel has to be scrollable.
This user control will be hosted in a form, with the following requirements:
a) The initial size of the form will try to fit in maximum part of the dynamic content.
b) On changing the form size, the control has to be re-sized accordingly.
I had played with various anchoring, docking, and auto-sizing and I don't quite get it working in the way I want to. Sometimes, it is the scrolling that messes up, sometimes it is something else.
What combination of anchoring, docking, and auto-sizing of the panels, usercontrol, form should work best to achieve the desired outcome?
I succeeded to meet the requirements. Here is my solution:
The dynamic panel is anchored to the top and the bottom of the control. It does not AutoSize, it manually changes its MaximumSize and PreferredSize after change in the contents.
The form hosts the form using:
cntrl.AutoSize = true;
cntrl.AutoSizeMode = System.Windows.Forms.AutoSizeMode.GrowAndShrink;
cntrl.Dock = System.Windows.Forms.DockStyle.Fill;
The form subscribes to a custom control's event that notifies for the preferredHeight and it changes its own Height accordingly.
I'd go with a table layout panel. You can specify two rows by one column with the exact size for the buttons at the top and fill the rest with the bottom. Then put put either a normal panel or a flowlayoutpanel for the dynamic content in that area.
Without knowing the specifics of your problem I find multiple fill docked split containers with one fixed panel and/or a fixed slider usually creates a really handy resizing experience. You can also collapse panels very effectively too.