Why flowlayoutPanel is extending horizontally? - c#

I have set this flowLayoutPanel, the controls inside arrange well, till the last arrives to the bottom border of the panel, then the controls start arranging on the right side (forming another column) keepping the vertical flow. I just want one column.
this.panel.Anchor =
((System.Windows.Forms.AnchorStyles)
(((System.Windows.Forms.AnchorStyles.Top |
System.Windows.Forms.AnchorStyles.Bottom)| System.Windows.Forms.AnchorStyles.Right)));
this.panel.AutoScroll = true;
this.panel.BorderStyle = BorderStyle.None;
this.panel.FlowDirection = System.Windows.Forms.FlowDirection.TopDown;
this.panel.Location = new System.Drawing.Point(0, 184);
this.panel.Name = "myPanel";
this.panel.RightToLeft = System.Windows.Forms.RightToLeft.No;
this.panel.Size = new System.Drawing.Size(300, 371);
this.panel.TabIndex = 9;

Use
this.panel.FlowDirection = System.Windows.Forms.FlowDirection.LeftToRight;
instead of
this.panel.FlowDirection = System.Windows.Forms.FlowDirection.TopDown;
if you want only one column than please add below code to your application just after control added to your flowlayoutpanel
this.panel.SetFlowBreak(<<YOUR_ADDED_CONTROL_NAME>>, true);
Example
Button btn1 = new Button();
btn1.Text = "TEST";
btn1.Height = 30;
btn1.Width = 100;
this.panel.Controls.Add(btn1);
this.panel.SetFlowBreak(btn1, true);

Related

Horizontal Scrolling not working with autoscroll in C#

I am trying to set my panel so it will scroll horizontally. I have tried:
MainPanel.HorizontalScroll.Enabled = true;
MainPanel.HorizontalScroll.Visible = true;
MainPanel.VerticalScroll.Enabled = false;
MainPanel.VerticalScroll.Visible = false;
My MainPanel is a parent to 2 sub Panels that are Horizontaly larger than the Panel itself but the horizontal scroll bar still doesn't appear. How can I fix this?
This is the code in the .Designer.cs file of the Parent Form of my Panels:
this.panel0.Dock = System.Windows.Forms.DockStyle.Top;
this.panel0.Location = new System.Drawing.Point(0, 0);
this.panel0.Name = "panel0";
this.panel0.Size = new System.Drawing.Size(828, 28);
this.panel0.TabIndex = 2;
//
// list
//
this.list.Dock = System.Windows.Forms.DockStyle.Fill;
this.list.Location = new System.Drawing.Point(0, 28);
this.list.Name = "list";
this.list.Size = new System.Drawing.Size(828, 444);
this.list.TabIndex = 3;
//
// MainPanel
//
this.MainPanel.AutoScroll = true;
this.MainPanel.Controls.Add(this.list);
this.MainPanel.Controls.Add(this.panel0);
this.MainPanel.Dock = System.Windows.Forms.DockStyle.Fill;
this.MainPanel.Location = new System.Drawing.Point(152, 104);
this.MainPanel.Name = "MainPanel";
this.MainPanel.Size = new System.Drawing.Size(828, 472);
this.MainPanel.TabIndex = 7;

How to layout items in winform

I am working on a homework c# winforms project and would like to add date and time in top right corner of my main form in a way that in first row I have a date written in one label, and on second row I have time written in second label.
Also I need that those stick in the top right corner if form is resized.
I don't know if it matters, but those label controls are inside panel which is top docked in form, and this panel already contains two controls that are docked left.
example of what I want
I've been playing with anchor and dock properties but I can't get it to work in a way I want.
private void GlavnaForma_Load(object sender, EventArgs e)
{
timerDateTime.Start();
lblDate.Text = DateTime.Now.ToString("dddd, dd.M.yyyy", new CultureInfo("hr-HR"));
lblTime.Text = DateTime.Now.ToString("HH:mm:ss", new CultureInfo("hr-HR"));
}
private void timerDateTime_Tick(object sender, EventArgs e)
{
lblDate.Text = DateTime.Now.ToString("dddd, dd.M.yyyy", new CultureInfo("hr-HR"));
lblTime.Text = DateTime.Now.ToString("HH:mm:ss", new CultureInfo("hr-HR"));
}
Set the anchor to Top, Right like so:
There are several ways to do this.
I would probably make the main form have a table layout panel with one column and three rows. Make the top two rows be absolutely sized and the third row have size type "percent" with a value of 100.0% to take up all remaining room. Then put a label each in the top two rows and justify the labels to the right via setting their "Dock" property to "Right".
All of this can be done in the form designer GUI. The generated code looks like the following:
this.tableLayout = new System.Windows.Forms.TableLayoutPanel();
this.labelDate = new System.Windows.Forms.Label();
this.labelTime = new System.Windows.Forms.Label();
this.tableLayout.SuspendLayout();
this.SuspendLayout();
//
// tableLayout
//
this.tableLayout.ColumnCount = 1;
this.tableLayout.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 100F));
this.tableLayout.Controls.Add(this.labelDate, 0, 0);
this.tableLayout.Controls.Add(this.labelTime, 0, 1);
this.tableLayout.Dock = System.Windows.Forms.DockStyle.Fill;
this.tableLayout.Location = new System.Drawing.Point(0, 0);
this.tableLayout.Name = "tableLayout";
this.tableLayout.RowCount = 3;
this.tableLayout.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Absolute, 24F));
this.tableLayout.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Absolute, 24F));
this.tableLayout.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 100F));
this.tableLayout.Size = new System.Drawing.Size(800, 450);
this.tableLayout.TabIndex = 0;
//
// labelDate
//
this.labelDate.AutoSize = true;
this.labelDate.Dock = System.Windows.Forms.DockStyle.Right;
this.labelDate.Location = new System.Drawing.Point(742, 0);
this.labelDate.Name = "labelDate";
this.labelDate.Size = new System.Drawing.Size(55, 24);
this.labelDate.TabIndex = 0;
this.labelDate.Text = "26-8-2019";
//
// labelTime
//
this.labelTime.AutoSize = true;
this.labelTime.Dock = System.Windows.Forms.DockStyle.Right;
this.labelTime.Location = new System.Drawing.Point(748, 24);
this.labelTime.Name = "labelTime";
this.labelTime.Size = new System.Drawing.Size(49, 24);
this.labelTime.TabIndex = 1;
this.labelTime.Text = "19:59:58";
Add whatever further content you want to the third row. Maybe add a panel to that row docked to "Fill"

Set button fill all the width & top of parent in WinForms

I want to create a form with columns of buttons. The buttons should fit all the width of form. Also I want to push it to top of form as possible. It should look like this:
|----------------------------------|
| Form caption |
|----------------------------------|
||--------------------------------||
||Button0 ||
||--------------------------------||
||--------------------------------||
||Button1 ||
||--------------------------------||
||--------------------------------||
||Button2 ||
||--------------------------------||
| |
| |
| free space |
| |
|----------------------------------|
Usually I work with C++/Qt and it's rich of layouts. As I understand c# is not so good in that. I've found that TableLayoutPanel with 1 column can do that. The only thing I want is to push all the buttons to top.
So I've created the following code:
// panelButton was created by VS with following params:
this.panelButton = new System.Windows.Forms.TableLayoutPanel();
this.panelButton.Dock = System.Windows.Forms.DockStyle.Fill;
this.panelButton.Name = "panelButton";
this.panelButton.RowCount = 1;
for(int i = 0;i < 3;i ++)
{
Button button = new Button();
button.Dock = DockStyle.Fill;
button.Height = 40;
button.Text = "Button" + i;
button.Click += new EventHandler(delegate(object o, EventArgs args) {});
panelButton.Controls.Add(button, 0, i);
}
But the layout I get is wrong - button0 and button1 are 40px height as expected but button2 fills all the space when I expect it will be 40px.
ADDED: I've found a workaround. I add
panelButton.Controls.Add(new Control(), 0, rowIndex);
after the loop and so thet works as expected.
You don't need to use TableLayoutPanel for such task. It's enough to use a Panel and add buttons to it. For each button you need to set its Dock to Top.
If you want the panel grows instead of showing scrolls, you can set the panel AutoSize=true and AutoScroll=false.
If you want scrollbars, just set it's AutoSize=false and AutoScroll=true.
Example 1
An auto sized form containing a panel which has a list of buttons:(Screenshot)
public Form1()
{
InitializeComponent();
this.Controls.Clear();
this.AutoSize = true;
this.AutoSizeMode = System.Windows.Forms.AutoSizeMode.GrowAndShrink;
var panel = new Panel();
panel.Dock = DockStyle.Fill;
panel.AutoScroll = false;
panel.AutoSize = true;
panel.AutoSizeMode = System.Windows.Forms.AutoSizeMode.GrowAndShrink;
this.Controls.Add(panel);
for (int i = 0; i < 20; i++)
{
var buttun = new Button();
buttun.Text = string.Format("Button {0}", i + 1);
buttun.Dock = DockStyle.Top;
panel.Controls.Add(buttun);
}
}
Example 2
A form containing an auto-scroll panel which has a list of buttons:(Screenshot)
public Form1()
{
InitializeComponent();
this.Controls.Clear();
this.AutoSize = false;
var panel = new Panel();
panel.Dock = DockStyle.Fill;
panel.AutoScroll = true;
this.Controls.Add(panel);
for (int i = 0; i < 20; i++)
{
var buttun = new Button();
buttun.Text = string.Format("Button {0}", i + 1);
buttun.Dock = DockStyle.Top;
panel.Controls.Add(buttun);
}
}
Note: Layout is not related to C# it's the job of UI frameworks like Windows Forms. To learn more about layout in windows forms take a look at these documents:
Windows Forms Layout
Layout in Windows Forms Controls

add control to Panel and control doesn't display anymore c#

I have one textbox (textBox1) and panel (Panel1) I have code like this
Panel1.Controls.Add(textBox1)
so when I run it I can't see textbox anymore, If I do like this I can see textBox
textBox1.Location = Panel1.Location
can anyone tell me what's problem?
When a textbox (or any control) is part of a panel the top left of the panel is point(0.0);
so when textBox1.Location = Panel1.Location the textbox probably falls out of view in the panel.
try something like this instead/
//
// panel1
//
this.panel1.Controls.Add(this.textBox1);
this.panel1.Location = new System.Drawing.Point(59, 27);
this.panel1.Name = "panel1";
this.panel1.Size = new System.Drawing.Size(193, 176);
this.panel1.TabIndex = 1;
//
// textBox1
//
this.textBox1.Location = new System.Drawing.Point(0, 0);
this.textBox1.Name = "textBox1";
this.textBox1.Size = new System.Drawing.Size(100, 20);
this.textBox1.TabIndex = 0;
I believe the reason you're not able to see the Textbox has to do with the Panel's properties. Try setting the AutoSize property to true and the AutoSizeMode property to GrowAndShrink.

Winforms Dynamic size

I have ma de a winform, that contains a tabControl (3 tabs, maybe more later).
In 2 of my tabs, I got a listBoxView.
The problem is, when I click on fullSize button, the tabControl doesn't change his size. That makes an awful window.
How can I define dynamic size of my tabControl, based on the winforms border size, and a dynamic size of my listBoxView based on tabControl size?
TabControl must adapt to form size, then pages in tabControl must adapt to tabControl size, and then, listBox in the pages must adapt to its pages size.
Here is the form :
//
// Form1
//
this.AutoScaleDimensions = new System.Drawing.SizeF(8F, 16F);
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
this.ClientSize = new System.Drawing.Size(1313, 614);
this.Controls.Add(this.tabControl1);
this.tabControl1.ResumeLayout(false);
this.tabPage1.ResumeLayout(false);
this.tabPage1.PerformLayout();
((System.ComponentModel.ISupportInitialize)(this.dgCSV)).EndInit();
this.tabPage2.ResumeLayout(false);
this.tabPage2.PerformLayout();
this.ResumeLayout(false);
And the tabControl with one of his pages :
//
// tabControl1
//
this.tabControl1.Controls.Add(this.tabPage1);
this.tabControl1.Controls.Add(this.tabPage2);
this.tabControl1.Controls.Add(this.tabPage3);
this.tabControl1.Location = new System.Drawing.Point(13, 13);
this.tabControl1.Name = "tabControl1";
this.tabControl1.SelectedIndex = 0;
this.tabControl1.Size = new System.Drawing.Size(1288, 589);
this.tabControl1.TabIndex = 0;
//
// tabPage2
//
this.tabPage2.Controls.Add(this.listBoxFiles);
this.tabPage2.Controls.Add(this.richTextBox1);
this.tabPage2.Controls.Add(this.buttonBottom);
this.tabPage2.Controls.Add(this.buttonFront);
this.tabPage2.Controls.Add(this.buttonDown);
this.tabPage2.Controls.Add(this.buttonUp);
this.tabPage2.Controls.Add(this.label2);
this.tabPage2.Location = new System.Drawing.Point(4, 25);
this.tabPage2.Name = "tabPage2";
this.tabPage2.Padding = new System.Windows.Forms.Padding(3);
this.tabPage2.Size = new System.Drawing.Size(1280, 560);
this.tabPage2.TabIndex = 1;
this.tabPage2.UseVisualStyleBackColor = true;
I tried with Parent.width, ClientRectangle, ClientSize.
I'm lost with all this properties and no one is successfull...
After trippino answer :
Indeed, a dock on the tabControl will resize him, but I can't do it on a listBoxView, because one of the element will just take all the page.
And Anchor do not resize elements, it will juste reorganise them to fit in the page.
Still not resizing like this :
//
// tabControl1
//
this.tabControl1.Controls.Add(this.tabPage1);
this.tabControl1.Controls.Add(this.tabPage2);
this.tabControl1.Controls.Add(this.tabPage3);
this.tabControl1.Dock = System.Windows.Forms.DockStyle.Fill;
this.tabControl1.Location = new System.Drawing.Point(0, 0);
this.tabControl1.Name = "tabControl1";
this.tabControl1.SelectedIndex = 0;
this.tabControl1.Size = new System.Drawing.Size(1313, 614);
this.tabControl1.TabIndex = 0;
//
// listBoxFiles
//
this.listBoxFiles.Anchor = System.Windows.Forms.AnchorStyles.Right;
this.listBoxFiles.Anchor = System.Windows.Forms.AnchorStyles.Top;
this.listBoxFiles.Anchor = System.Windows.Forms.AnchorStyles.Bottom;
this.listBoxFiles.Anchor = System.Windows.Forms.AnchorStyles.Left;
this.listBoxFiles.FormattingEnabled = true;
this.listBoxFiles.ItemHeight = 16;
this.listBoxFiles.Location = new System.Drawing.Point(185, 43);
this.listBoxFiles.Name = "listBoxFiles";
this.listBoxFiles.SelectionMode = System.Windows.Forms.SelectionMode.MultiExtended;
this.listBoxFiles.Size = new System.Drawing.Size(1040, 244);
this.listBoxFiles.TabIndex = 42;
private void tabPage2_SizeChanged(object sender, EventArgs e)
{
this.buttonAucun.Location = new System.Drawing.Point(this.buttonAucun.Location.X, this.listBoxFiles.Location.Y + this.listBoxFiles.Height + 10);
this.progressBar1.Location = new System.Drawing.Point(this.progressBar1.Location.X, this.buttonAucun.Location.Y + this.buttonAucun.Height + 10);
this.richTextBox1.Location = new System.Drawing.Point(this.richTextBox1.Location.X, this.progressBar1.Location.Y + this.progressBar1.Height + 10);
this.buttonEnregistrer.Location = new System.Drawing.Point(this.buttonEnregistrer.Location.X, this.richTextBox1.Location.Y + this.richTextBox1.Height + 10);
}
Since, buttonEnregistrer is on the bottom of my tabPage, I also tried :
this.buttonEnregistrer.Location = new System.Drawing.Point(this.buttonEnregistrer.Location.X, this.tabPage2.Height -50);
But his will not retake it's original location.
Thank you.
Just use the Dock property of the tabControl setting it to Fill. It should solve your issue.
MSDN Dock Property reference
EDIT AFTER DISCUSSION: to anchor 4 sides you have to use :
this.listBoxFiles.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)));

Categories

Resources