Center and Stretch on a Standard WinForms Panel - c#

So, doing what I'm attempting to do is trivial in WPF, but in WinForms it seems to be a bit problematic:
When using a TableLayoutPanel, you can simply set the Anchor properties to NONE to center the control within the cell of the TableLayoutPanel and then set Anchor.Right | Anchor.Left flags on the control to stretch it to the size of the cell. This behavior does not seem to work properly when using a standard WinForms Panel container. When setting the Anchor property on the child control (TextBox) within the Panel the control does not appear to stretch out, nor center itself within the container.
I've looked up some other answers regarding similar issues to this, but I feel like I'm missing something here. Most of them say just use the Anchor property, but that doesn't not appear to work. Does this need to be manually calculated on load (and each resize), or can the Anchor property actually assist me with this?

Keeping a Control centered works automatically only if you combine stretching it with Anchors.
If you want it centered without stretching it you'll have to do a little bit of math in the Resize event:
private void tableLayoutPanel1_Resize(object sender, EventArgs e)
{
yourControl.Left = (yourControl.Parent.ClientSize.Width - yourControl.Width) / 2;
}
For centering vertically the same rules apply.
With regard to the disappearing ErrorProvider: The ErrorProviders need a little space, on my machine 12 pixels will do. To provide that space for the rightmost cells in an TableLayoutPanel you can set its padding like this:
this.tableLayoutPanel1.Padding = new System.Windows.Forms.Padding(0, 0, 12, 0);
Note how this nicely adds the padding between the Cellborders, if you have any, and the outside.

It seems that MSDN has a page dedicated to this already. (although this mentioned a button, the idea remains the same)

Related

Win Forms Dock fill with gap

Fore note: I know you cannot use a margin with dock, but I am trying to figure a way around this.
I have two objects, a GroupBox (containing loads of buttons and stuff that will always be the same size no matter how big / small the form) and a WebBrowser. The former will take up roughly 100 pixels at the top, and the latter will take up the rest of the space. I have tried multiple ways to get around this, including Panels, GroupBoxs, changing Anchors and Docks, but nothing is working. I know there is a simple solution for this, but I cannot work it out. Could someone point me in the right direction for what I should be using?
P.S. New to WinForms so not very knowledgeable of things.
Start with a TableLayoutPanel control on your Form and set its Dock() property to Fill. Now change the ColumnCount() property to 1, and leave the RowCount() property at 2.
Add your GroupBox to the Top Row and adjust its size. Add your WebBrowser control to the Bottom Row and set its Dock() property to Fill.
Finally, select the TableLayoutPanel, find the Rows() property, and click on the "..." dots to the right. Select Row1 and change its Size Type to AutoSize.
Done!
Alternative Approach...
Add your GroupBox to the Form and set its Dock() property to Top. Add your WebBrowser control and set its Dock() property to Fill. Note with this approach, however, that the GroupBox will extend to fill the full width of the Form.

Control proportions different between runtime and designer

i'm currently modifying an existing C# WinForm project. I try to arrange some controls inside a GroupBox. However on runtime, they seem to be aligned differently and the Groupbox has a lot more space. Is there some option checked or is this the standard behavior? Any hints are highly appreciated! Thanks!
Here is what it looks like, as you can see there is no way except trial and error to arrange the checkboxes. On runtime there is easily enough space to have four colums in one row, in designer i can hardly fit three without having them overlap.
To prevent the groupbox to resize according to its content, you should make GroupBox.AutoSize to false.
GroupBox groupBox = new GroupBox();
groupBox.AutoSize= false;
check to Size property, and check if someone change it, for the checkbox Location to stay the same in different sizes of the form use anchor property and set it to left or left top.
it's basically must be the size, if the autoSize is off. check what's the starting size, and the size after the form is shown. it shouldn't be the same, but if it is, you can set it to smaller
Check the Anchor property on the checkboxes. Looks like some of them might be anchored to the right.
Not sure it applies to these checkboxes, but AutoScaleMode can impact the scaling of a form. Set to None to ensure it doens't get scaled.

BorderColor on XtraUserControl

Is there a way to add a simple border in a DevExpress XtraUserControl?
I tried the following but didn't work:
UserDefaultLookAndFeel=False
UseWindowXPTheme = True
BorderColor = Color.Red
BorderStyle = Simple
I do not want to add a Docked Panel. This is what I have now but I'm trying to reduce the ammount of controls being user to increase performance.
(I'm assuming you are refering to WinForms)
When I try to add borders to controls that do not support it, I use the following approach:
Put a Panel control on the form.
Give the Panel a Padding of 1 on each side.
Give the Panel a BackColor of the desired border color.
Place your XtraUserControl inside the Panel control as a child control.
Set the Dock of the child control to Fill.
This gives you the look of a 1 pixel thin border in your desired color.
Maybe not the most elegant or resource-saving method, but worked several times for me when nothing else works.
As an additional hint: I have overall extraordinary good experiences with the DevExpress support website. If my (or the other) answers do not satisfy your needs, I strongly recommend to ask your question again on their support website.

Setting the .Top property, removes the Anchor property

I have used Anchor property for some of my controls at design time.
but when I change the .Top property of those controls at run time, it seems that it is messing with the Anchor property and does not honor it anymore.
what is happening? how to fix?
I tried to reproduce the problem you describe, but was not able to match it exactly. The following example, however, may help you resolve the issue I suspect you are having.
(My employer blocks i.imgur.com, the image host for SO. If you have any problems viewing the screenshots, let me know.)
The following simple form contains a group box anchored on all four sides to its parent form.
When the button is clicked, the following code executes:
groupBox1.Top = 0;
Which results in the group box relocated like so:
Note, however, that anchoring is still honored:
I suspect you are looking for the effect that nothing except the top location of the control changes when you resize the control. Unfortunately, in this case, setting the Top property relocates the control rather than resize it.
You can accomplish resizing using the SetBounds() method, however. In the example below, I resize the anchored control, with a new top, using its existing bounds. Note that I don't take any measures to avoid illegal negative heights, which you probably should.
int newtop = 0; // the new top bound
groupBox1.SetBounds(
groupBox1.Left,
newtop,
groupBox1.Width,
groupBox1.Height + groupBox1.Top - newtop);
This results in a resized and relocated control that continues to honor its anchoring afterward:

Docking and Anchoring on a Windows Form application

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.

Categories

Resources