Winforms, creating padding when using Dock properties - c#

How do I add padding, or some space between the textboxes when using dockstyle.top property?
for(int i =0; i< 10; i++) {
textboxes[i] = new TextBox();
textboxes[i].Dock = DockStyle.Top;
mypanel.Controls.Add(textboxes[i]);
}
The code above puts textboxes right beneath each other. Can't figure this out without using mass panels or fixed positioning. How to do the following?
1) I would like to add around 10-20pixels between boxes.
2) How to change size (height,width) of the textboxes, since when using dockstyle.top it ignores the size commands ?

With DockStype.Top you can't change the width of your TextBoxes, cause they are docked. You can only change the height. But to change the height of a TextBox you have to set the Multiline = true beforehand.
To get the space between the different boxes you have to put each TextBox within a panel, set the TextBox.Dock = Fill, the Panel.Dock = Top and the Panel.Padding = 10. Now you have some space between each TextBox.
Sample Code
for (int i = 0; i < 10; i++)
{
var panelTextBox = CreateBorderedTextBox();
this.Controls.Add(panelTextBox);
}
private Panel CreateBorderedTextBox()
{
var panel = CreatePanel();
var textBox = CreateTextBox();
panel.Controls.Add(textBox);
return panel;
}
private Panel CreatePanel()
{
var panel = new Panel();
panel.Dock = DockStyle.Top;
panel.Padding = new Padding(5);
return panel;
}
private TextBox CreateTextBox()
{
var textBox = new TextBox();
textBox.Multiline = true;
textBox.Dock = DockStyle.Fill;
return textBox;
}
What i forgot, you can also give a try to the FlowLayoutPanel. Just remove the DockStyle.Top from the panels and put them into the FlowLayoutPanel. Also you should set the FlowDirection to TopDown. Maybe this can also help you to solve your problem, too.

Another work around that suits smaller layouts is to just add a Label control afterwards also docked to the Top, which is not AutoSized, Text=" ", Height=your padding. This is quite useful for the odd bit of padding when using the designer.

I know where you're coming from, this is especially frustrating after returning to WinForms from WPF.
I would suggest using a TableLayoutPanel, in which each TextBox would get its own cell, and adjusting the properties of the cells. This should solve both your padding and size problems.
Another alternative would be to use some more complex layout controls, such as the DevExpress ones (not free).

Related

Cannot remove spacing between controls in TableLayoutPanel?

There's some spacing between the Buttons I add to my TableLayoutPanel. I removed the border in the Button and set the Margin and Padding to 0 in the Panel. But I continue getting that spacing.
tableLayoutPanel.RowCount is set to 8 and the Rows collection I've added 8 rows with Size Type Absolute.
Am I missing something? Here's the code:
private void FillSelectLayout()
{
tableLayoutPanelSelect.Controls.Clear();
tableLayoutPanelSelect.RowStyles.Clear();
tableLayoutPanelSelect.RowCount = 8;
for (int i = 0; i < 8; i++)
{
Button buttonSelector = new Button();
buttonSelector.Height = 64;
buttonSelector.Width = 100;
buttonSelector.FlatStyle = FlatStyle.Flat;
buttonSelector.FlatAppearance.BorderSize = 0;
buttonSelector.BackColor = Color.Yellow;
tableLayoutPanelSelect.Controls.Add(buttonSelector, 0, i);
}
}
Here's how it's displayed:
To remove the space between buttons in cells, it's enough to set dock property of them to fill and then remove default margins of buttons:
var b = new Button();
b.Dock = DockStyle.Fill;
b.Margin = new Padding(0);
Note:
Usually it's better to set Dock property of controls which you host in cells to Fill. This way your controls will follow TableLayouPanel sizing rules which you set for columns and rows.
TableLayoutPanel use Margin property of control to set the location of control in cell. So If you don'n want to set Dock and you prefer to set the Size manually, it's enough to set the Margin only.
I .. set the Margin and Padding to 0 in the Panel.
Why didn't you remove the Margin in the Buttons instead:
buttonSelector.Margin = new Padding(0);
MSDN:
The Margin property defines the space around the control that keeps
other controls a specified distance from the control's borders.
I faced the same problem while using different control in TableLayoutPanel
You can do this
Go to Design View
Click on the properties
GoTo Columns, When you click text box besides Columns, a button (...) appears on extreme right, click it
A pop up window appears, Select AutoSize (Instead of Absolute or Percentage).
In the same window in Show: select Rows and again select Autosize.
Click okay and you are done.

how to make auto adjustable controls?

As we dynamically add controls to a web page, its location is automatically adjusted, one control will not place over another.
Can we do the same in windows Form Application.
I have to add dynamic label, textbox and buttons at last of an existing win form.
Take a look at the FlowLayoutPanel control.
Represents a panel that dynamically lays out its contents horizontally or vertically.
When you drop controls on the FlowLayoutPanel, it will take care of automatically spacing one from another. If you dock it to the form, such that it resizes with the form, then it will also handle moving controls to the next row / column as needed, so they don't become hidden beyond the boundaries of the form.
If you want to group some controls together, place them inside a Panel and then use that inside the FlowLayoutPanel. Here's some code to demonstrate:
for (var i = 0; i < 5; i++)
{
var panel = new Panel { BorderStyle = BorderStyle.FixedSingle, Width = 100, BackColor = Color.LightBlue };
panel.Controls.AddRange(
new Control[]
{
new Label { Text = "Title", Location = new Point(0, 0) },
new Label { Text = "Subtitle", Location = new Point(0, 25) }
});
flowLayoutPanel1.Controls.Add(panel);
}

Column Styles not working on TableLayoutPanel

I have a TableLayoutPanel that has a dynamic amount of columns and rows determined by the user. I want the buttons inside to be square and the same size, but whenever I use a loop to set the column/rows styles, they never turn out to be the size I want them to be.
How can I get the column/row styles to set the appropriate widths and height os the container elements?
Here is the loop method of the code that handles setting the width size of the table (I use a similar method for rows)
void FormatTableWidth(ref TableLayoutPanel container)
{
TableLayoutColumnStyleCollection columnStyles = container.ColumnStyles;
foreach (ColumnStyle style in columnStyles)
{
style.SizeType = SizeType.Absolute;
style.Width = 60;
}
}
You can do it like....
public void AddButtontControls()
{
tblPanel.SuspendLayout();
tblPanel.Controls.Clear();
tblPanel.GrowStyle = TableLayoutPanelGrowStyle.FixedSize;//.AddColumns;
tblPanel.ColumnStyles.Clear();
for (int i = 0; i < tblPanel.ColumnCount; i++)
{
ColumnStyle cs = new ColumnStyle(SizeType.Percent, 100 / tblPanel.ColumnCount);
tblPanel.ColumnStyles.Add(cs);
//Add Button
Button a = new Button();
a.Text = "Button " + i + 1;
tblPanel.Controls.Add(a);
}
tblPanel.ResumeLayout();
}
Sorry to tell you, but you don't use the right control.
You definitely must use FlowLayoutPanel control, and you can add as many controls you want in it, you can tell which direction will fill the control, if it wrap content or not, and many others.
And the most important - It Will Not Flickering like TableLayoutPanel does :)

Align dynamically added controls horizontally and vertically within a control in c# winforms

I have this program that dynamically adds pictureboxes referring to the number of president in the database. How do i put them inside the groupbox and align the pictureboxes inside the groupbox? And the groupbox should stretch if the pictureboxes are many.
I have this codes now :
private void Form1_Load(object sender, EventArgs e)
{
conn.Open();
try
{
cmd = new SqlCommand("SELECT COUNT(Position) FROM TableVote WHERE Position='" + "President" + "'", conn);
Int32 PresCount = (Int32)cmd.ExecuteScalar();
TxtPresCount.Text = PresCount.ToString();
for (int i = 0; i < PresCount; ++i)
{
GroupBox PresGB = new GroupBox();
{
PresGB.Size = new Size(491, 152);
PresGB.Location = new Point(12, 12);
PresGB.Text = "President";
this.Controls.Add(PresGB);
PresGB.SendToBack();
PictureBox PresPB = new PictureBox();
PresPB.Location = new Point(80 + (150 * i) + 20, 50);
PresPB.Size = new Size(75, 75);
PresPB.BorderStyle = BorderStyle.Fixed3D;
PresPB.ImageLocation = "imgPath";
this.Controls.Add(PresPB);
PresPB.BringToFront();
};
}
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
finally
{
conn.Close();
}
}
I would want the pictureboxes to be inside the groupbox and align it inside.
Maybe the FlowLayoutPanel control already does what you are trying to do. Just create your picture boxes and add them to a FlowLayoutPanel instead of a GroupBox.
FlowLayoutPanel automatically arranges controls in rows and/or columns depending on the value of its FlowDirection property. Set myFlowLayoutPanel.FlowDirection = FlowDirection.TopDown to get a vertical arranged list.
If you don't want multiple rows or columns set the WrapContents property to false. You can also set the AutoScroll property to true to automatically get scrollbars if the controls don't fit.
If you prefer to have the border of a GroupBox you can still put the FlowLayoutPanel into a GroupBox.
To adjust the space between the picture boxes you can use the Margin property.
This gives you a lot of control over the layout and you don't need to calculate the control positions. Also, if the size of the FlowLayoutPanel changes everything is rearranged automatically.
UPDATE:
I have a few comments on your code:
The curly braces make this look like the syntax of an object initializer - but it isn't.
GroupBox PresGB = new GroupBox(); // this line ends with a semicolon
{
// therefore this is just a block of code not related to new GroupBox()
};
You should remove the curly braces.
The creation of the group box is inside the loop. I doubt that you want a new group box for each picture box. This is the reason why you only see a single picture. Each new group box hides all the previous ones.
You add the picture boxes to the form instead of the group box.
You use "cryptic" names. PresGB and PresPB are very likely to be swapped accidentally. Abbreviations are usually a bad choice for names.
You don't need to call SendToBack or BringToFront since you don't want the controls to overlap anyway.
I don't think GroupBox is a good choice. Of course you can make it bigger if the number of pictures increases but you are limited by the screen and you don't get scollbars if the picture boxes don't fit. Use a FlowLayoutPanel. It has all the "magic" that you are looking for.
Replace your for loop with this piece of code:
var panel = new FlowLayoutPanel();
panel.SuspendLayout(); // don't calculate the layout before all picture boxes are added
panel.Size = new Size(491, 152);
panel.Location = new Point(12, 12);
panel.BorderStyle = BorderStyle.Fixed3D;
panel.FlowDirection = FlowDirection.LeftToRight;
panel.AutoScroll = true; // automatically add scrollbars if needed
panel.WrapContents = false; // all picture boxes in a single row
this.Controls.Add(panel);
for (int i = 0; i < PresCount; ++i)
{
var pictureBox = new PictureBox();
// the location is calculated by the FlowLayoutPanel
pictureBox.Size = new Size(75, 75);
pictureBox.BorderStyle = BorderStyle.FixedSingle;
pictureBox.ImageLocation = "imgPath";
panel.Controls.Add(pictureBox);
}
panel.ResumeLayout();
You can always drop a control on your form, do what you want to do then look at the designer generated code to see how the designer does it (in the "Designer.cs" file). Behind the scenes it is loading all controls and setting all properties via code.
That being said.
Keep in mind that once you put your picturebox inside the groupbox all location coordinate are in relation to the groupbox. So "0,0" is the upper-left corner of the groupbox, not the form.
To anchor your picturebox use the following code (this is just a straight copy-paste from my designer generated code, so you can clean it up a bit):
this.PresPB.Anchor = ((System.Windows.Forms.AnchorStyles)((((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)
| System.Windows.Forms.AnchorStyles.Left)
| System.Windows.Forms.AnchorStyles.Right)));
To dock your picture box (so it fills the entire containing control):
this.PresPB.Dock = System.Windows.Forms.DockStyle.Fill;
You also need to change this line:
this.Controls.Add(PresPB);
to this:
PresGB.Controls.Add(PresPB);

Resize Panel according to Label size

I have a Panel with a Label inside.
Sometimes, the Label is very long and the panel must be resized.
I have set the Autosize property to true for both controls, but ....
Can you help me please ?
You also must set AutoSize to true for the containing containers as well, up to the window.
My last attempt in doing so involved quite a bit of redesigning the form with TableLayoutPanel and the like since Dock/Anchor and AutoSize don't seem to mix well.
I have set the Autosize property to true for both controls, but ....
I can tell from the "but" what you are asking for. That's the AutoEllipsis property of the Label. Set it to true and set the MaximumSize property so the label cannot get bigger than its container. The user will see ... so she'll realize the text is truncated. She'll hover the mouse over the label to get a tooltip with the full text.
Letting everything grow to accommodate a label is drastically impractical. You typically can manipulate MaximumSize to let it grow vertically for a while, up to a point.
I encountered a similar problem, and here is a code for you. Assuming your Panel is anchored to the form (top,left,bottom,right), it is the form that needs to be resized, not the Panel.
public static void FitPanel(Panel pnl)
{
int maxright = 0;
int maxbottom = 0;
foreach (Control ctl in pnl.Controls)
{
maxright = (ctl.Right > maxright ? ctl.Right : maxright);
maxbottom = (ctl.Bottom > maxbottom ? ctl.Bottom : maxbottom);
}
int deltabottom = pnl.Bottom - (pnl.Top + maxbottom);
int deltaright = pnl.Right - (pnl.Left + maxright);
Form frm = pnl.FindForm();
frm.SuspendLayout();
frm.Height = frm.Height - deltabottom;
frm.Width = frm.Width - deltaright;
frm.ResumeLayout();
}

Categories

Resources