I want put a bunch of buttons at the top section of my form, and a SplitContainer right below these buttons. All these are done in the code (not thru the designer), so I can manage the number and text of the buttons dynamically. I reckon it is handy to put the button into a FlowLayoutPanel, so they can response with the flow feature when the form gets resized.
My question is how do I set up the SplitContainer layout settings (size, location, anchor, docking etc.), to make sure no matter how I resize the form, the SplitContainer is right below the buttons (no gap), and it fills up the rest of the form. Below is what I've done.
this.Size = new Size(300, 400);
string[] tags = new string[] { "action", "romance", "drama", "sci-fi", "horror" };
FlowLayoutPanel flp = new FlowLayoutPanel();
flp.Size = new Size(this.Width, 50);
flp.Location = new Point(0, 0);
flp.AutoSize = true;
flp.Anchor = AnchorStyles.Left | AnchorStyles.Right | AnchorStyles.Top;
flp.FlowDirection = FlowDirection.LeftToRight;
this.Controls.Add(flp);
//flp.Resize += flp_Resize;
foreach (string tag in tags)
{
Button btn = new Button();
btn.Text = tag;
flp.Controls.Add(btn);
}
SplitContainer sc = new SplitContainer();
ListBox lb = new ListBox(); lb.Dock = DockStyle.Fill; lb.Parent = sc.Panel1; lb.Items.Add("test");
PictureBox pb = new PictureBox(); pb.Dock = DockStyle.Fill; pb.Parent = sc.Panel2; pb.BackColor = Color.LightBlue;
sc.Size = new Size(this.Width, this.Height-flp.Height);
sc.Location = new Point(0, flp.Height);
sc.Anchor = AnchorStyles.Left | AnchorStyles.Right | AnchorStyles.Bottom;
this.Controls.Add(sc);
Here is the solution. Thanks to #Fabio.
this.Size = new Size(300, 400);
TableLayoutPanel tlp = new TableLayoutPanel();
tlp.RowCount = 2;
tlp.ColumnCount = 1;
tlp.Dock = DockStyle.Fill;
this.Controls.Add(tlp);
string[] tags = new string[] { "action", "romance", "drama", "sci-fi", "horror" };
FlowLayoutPanel flp = new FlowLayoutPanel();
flp.AutoSize = true;
flp.Dock = DockStyle.Fill;
flp.BackColor = Color.LightCyan;
flp.FlowDirection = FlowDirection.LeftToRight;
tlp.Controls.Add(flp, 0, 0);
foreach (string tag in tags)
{
Button btn = new Button();
btn.Text = tag;
flp.Controls.Add(btn);
}
SplitContainer sc = new SplitContainer();
ListBox lb = new ListBox(); lb.Dock = DockStyle.Fill; lb.Parent = sc.Panel1; lb.Items.Add("test");
PictureBox pb = new PictureBox(); pb.Dock = DockStyle.Fill; pb.Parent = sc.Panel2; pb.BackColor = Color.LightBlue;
sc.Dock = DockStyle.Fill;
tlp.Controls.Add(sc,0,1);
Related
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;
I created a window containing 1 flowlayoutpanel and panel.
When I enlarge the size of the window, the flowlayoutpanel changes with the window but the panel doesn't change with the flowlayoutpanel.
I'm having a problem that the panel doesn't automatically adjust its size when resize flowlayoutpanel.
this is code :
this.flowLayoutPanel1.AutoScroll = true;
this.flowLayoutPanel1.AutoSizeMode = System.Windows.Forms.AutoSizeMode.GrowAndShrink;
this.flowLayoutPanel1.BackColor = System.Drawing.Color.LightBlue;
this.flowLayoutPanel1.Controls.Add(this.pnl_1);
this.flowLayoutPanel1.Controls.Add(this.panel1);
this.flowLayoutPanel1.Dock = System.Windows.Forms.DockStyle.Fill;
this.flowLayoutPanel1.FlowDirection = System.Windows.Forms.FlowDirection.TopDown;
this.flowLayoutPanel1.Font = new System.Drawing.Font("Times New Roman", 12F, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Point, ((byte)(0)));
this.flowLayoutPanel1.Location = new System.Drawing.Point(0, 0);
this.flowLayoutPanel1.Name = "flowLayoutPanel1";
this.flowLayoutPanel1.RightToLeft = System.Windows.Forms.RightToLeft.No;
this.flowLayoutPanel1.Size = new System.Drawing.Size(666, 545);
this.flowLayoutPanel1.TabIndex = 1;
this.flowLayoutPanel1.WrapContents = false;
//
// pnl_1
//
this.pnl_1.AutoSizeMode = System.Windows.Forms.AutoSizeMode.GrowAndShrink;
this.pnl_1.BackColor = System.Drawing.Color.Azure;
this.pnl_1.Controls.Add(this.txt_input1_3);
this.pnl_1.Controls.Add(this.txt_associated1_3);
this.pnl_1.Controls.Add(this.txt_input1_2);
this.pnl_1.Controls.Add(this.txt_input1_1);
this.pnl_1.Controls.Add(this.txt_associated1_2);
this.pnl_1.Controls.Add(this.txt_associated1_1);
this.pnl_1.Controls.Add(this.txt_field_1);
this.pnl_1.Controls.Add(this.lb_field1);
this.pnl_1.Controls.Add(this.lb_input1);
this.pnl_1.Controls.Add(this.lb_associal1);
this.pnl_1.Location = new System.Drawing.Point(3, 3);
this.pnl_1.Name = "pnl_1";
this.pnl_1.Size = new System.Drawing.Size(663, 113);
this.pnl_1.TabIndex = 0;
I have four panels and in each click events I have loaded different User controls. So when I click a particular panel I want the clicked panel background changed and rest panel to be same.
How can I do it pro-grammatically?
Panel pan1 = new Panel();
Panel pan2 = new Panel();
Panel pan3 = new Panel();
Panel pan4 = new Panel();
private void Form1_Load(object sender, EventArgs e)
{
pan1.Name = "pan1";
pan1.Location = new Point(0, 0);
pan1.Size = new Size(100, 100);
pan1.BackColor = Color.LightGray;
pan1.Click += new EventHandler(this.Panel_Click);
pan2.Name = "pan2";
pan2.Location = new Point(110, 0);
pan2.Size = new Size(100, 100);
pan2.BackColor = Color.LightGray;
pan2.Click += new EventHandler(this.Panel_Click);
pan3.Name = "pan3";
pan3.Location = new Point(220, 0);
pan3.Size = new Size(100, 100);
pan3.BackColor = Color.LightGray;
pan3.Click += new EventHandler(this.Panel_Click);
pan4.Name = "pan4";
pan4.Location = new Point(330, 0);
pan4.Size = new Size(100, 100);
pan4.BackColor = Color.LightGray;
pan4.Click += new EventHandler(this.Panel_Click);
this.Controls.Add(pan1);
this.Controls.Add(pan2);
this.Controls.Add(pan3);
this.Controls.Add(pan4);
}
private void Panel_Click(object sender , EventArgs e)
{
this.pan1.BackColor = Color.LightGray;
this.pan2.BackColor = Color.LightGray;
this.pan3.BackColor = Color.LightGray;
this.pan4.BackColor = Color.LightGray;
Panel pan = (Panel)sender;
pan.BackColor = Color.Red;
}
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);
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)));