I want to disable rows autoscaling of TableLayoutPanel so that it would fit, for example, 4 columns on width and 3 rows on height and autoscrolling also would work. What should I change?
Code:
public UserControl()
{
InitializeComponent();
tableLayoutPanel1.ColumnStyles.Clear();
tableLayoutPanel1.RowStyles.Clear();
foreach (Picture picture in Program.gallery)
addImage(picture);
for (int i=0;i<tableLayoutPanel1.ColumnCount;i++)
tableLayoutPanel1.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 100f/4));
for (int i = 0; i < 99999; i++)
tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Percent, 100f/3));
}
TableLayoutPanel has:
AutoScroll=true;
AutoSize=false;
ColumnCount=4;
RowCount=3;
Dock=true;
GrowStyle=AddRows;
Percent size type is broken.
Scrollbar of TableLayoutPanel is also glitchy and is not shrink. Here
I used these properites for table:
AutoScroll=false;
AutoSize=true;
ColumnCount=4;
RowCount=0;
Dock=Top;
GrowStyle=AddRows;
and external control property:
AutoScroll=true;
Code for checking rows count and disabling unused:
private int cellsCount=0;
private const int rows = 3;
private int CellsCount {
get => cellsCount;
set {
cellsCount = value;
int expectedRows = (cellsCount - 1 + tableLayoutPanel1.ColumnCount) / tableLayoutPanel1.ColumnCount;
while (expectedRows > tableLayoutPanel1.RowCount)
{
tableLayoutPanel1.RowCount++;
tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Absolute, Height/rows));
}
while (expectedRows < tableLayoutPanel1.RowCount) {
tableLayoutPanel1.RowCount--;
tableLayoutPanel1.RowStyles.RemoveAt(0);
}
}
}
And resize listener to set true dimensions of rows:
private void tableLayoutPanel1_Resize(object sender, EventArgs e)
{
foreach (RowStyle row in tableLayoutPanel1.RowStyles)
row.Height = Height / rows;
}
Related
How to size all panels as fill in form1 window without changing panels size? I searched on Google. very difficult to find. That why i want to help. like in below Thanks.
If 3 panels this will be resized:
4 Panels:
5 Panels:
9 Panels:
You can use a FlowLayoutPanel. Insert in your form and set Dock=Fill in the designer. Add this const to your form:
private const int PanelSize = 200;
In the constructor:
this.flowLayoutPanel1.Resize += this.OnFlowLayoutPanel1_Resize;
this.OnFlowLayoutPanel1_Resize(this.flowLayoutPanel1, EventArgs.Empty);
And use this method to create/destroy the panels:
private void OnFlowLayoutPanel1_Resize(object sender, EventArgs e)
{
// At least, one panel
var columns = Math.Max(1, this.flowLayoutPanel1.Width / (double)PanelSize);
var rows = Math.Max(1, this.flowLayoutPanel1.Height / (double)PanelSize);
var panelsCount = this.flowLayoutPanel1.Controls.Count;
var requiredPanelsCount = rows * columns;
var diff = requiredPanelsCount - panelsCount;
if (diff > 0)
{
// We need more panels: create it
for (int i = 0; i < diff; i++)
{
var panel = new Panel
{
Size = new Size(PanelSize, PanelSize),
TabIndex = this.flowLayoutPanel1.Controls.Count,
BackColor = GetBackColor()
};
this.flowLayoutPanel1.Controls.Add(panel);
}
}
else
{
// Remove unneeded panels
for (int i = 0; i < diff; i++)
{
this.flowLayoutPanel1.Controls.RemoveAt(
this.flowLayoutPanel1.Controls.Count - 1);
}
}
}
I have used this method to set a color:
private Color GetBackColor()
{
var colors = new[]
{
Color.Black, Color.Red, Color.Green, Color.Blue, Color.White
};
var index = this.flowLayoutPanel1.Controls.Count % colors.Length;
return colors[index];
}
Adapt it to your needs.
If you need fill entire form, you must work with a variable PanelSize. Use a minimum and maximum size for the panels instead a fixed value.
I'm creating/removing Panels to fill entire space. If you only need fixed panels in the form, you don't need the resize event. The FlowLayoutControl do what you need.
I am adding 8 panels to a "flowLayoutPanel1". It works fine.
The problem is that it comes 4 panels on the first"row" and then 4 panels on next "row".
The thing is that I have made the size of the "flowLayoutPanel1" to visually show 3 panels on each "row", - so in this case, half of the 4th panel on each row are not seen.
But if I add them in the designer manually, it do come 3 panels on each "row" which I want.
I wonder why this is happening when I add them dynamically with this code?
flowLayoutPanel1.Controls.Clear(); int count = 0;
for (int n = 0; n < 4; n++)
{
for (int i = 0; i < latestImageLIST.Count; i++)
{
//Now add all images as panels
String imagefile = latestImageLIST[i];
if (File.Exists(imagefile))
{
Panel panel = new Panel(); count++;
panel.Name = "thepanel" + count;
panel.Size = new Size(284, 160);
panel.Margin = new Padding(3);
Image image = Image.FromFile(imagefile);
panel.BackgroundImage = image;
panel.BackgroundImageLayout = ImageLayout.Stretch;
panel.Tag = "thepanel" + count;
panel.Click += new System.EventHandler(this.panel216_Click);
flowLayoutPanel1.Controls.Add(panel);
}
}
}
I recommend using TableLayoutPanel, which is an alternative to FlowLayoutPanel. You can first determine the row and column based on the number of images you need to load, then dynamically create a Panel through a loop and add it to the specified row and column.
public void AddImages(int row, int col)
{
TableLayoutPanel tlp = new TableLayoutPanel();
int prow = 100 / row, pcol = 100 / col;
for(var i=0;i<row;i++)
{
tlp.RowStyles.Add(new RowStyle(SizeType.Percent, prow));
}
for(var i=0;i<col;i++)
{
tlp.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, pcol));
}
//modify the add logic according to your requirement.
tlp.Controls.Add(new Panel() { Dock = DockStyle.Fill }, 1, 1);
//todo...
this.Controls.Add(tlp);
}
I'm trying to create an autosizing button grid using a TableLayoutPanel. When I add columns at runtime with the following code they are not being sized evenly:
tableLayoutPanel.ColumnCount += 1;
for (var i = 0; i < tableLayoutPanel.RowCount; i++) {
var button = new Button {
Margin = Padding.Empty,
Padding = Padding.Empty,
Dock = DockStyle.Fill
}
tableLayoutPanel.Controls.Add(button);
}
The initial form with 1 column:
Adding a 2nd column:
Adding a 3rd column:
Is there a way to make the columns autosize evenly without manually calculating the dimensions?
It's necessary to explicitly reset the column styles:
private void RecalculateColumnStyles()
{
var cols = tableLayoutPanel.ColumnCount;
var pct = (float) 100 / cols;
tableLayoutPanel.SuspendLayout();
tableLayoutPanel.ColumnStyles.Clear();
for (var i = 0; i < cols; i++) {
tableLayoutPanel.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, pct));
}
tableLayoutPanel.ResumeLayout();
}
How can I get the value of the cell index where the user has clicked in tablelayoutpanel.
I want to get the value of column and row and then show it in messagebox.
How can i achieve this using c# ?
You can get the location like this:
private void tableLayoutPanel1_MouseClick(object sender, MouseEventArgs e)
{
int row = 0;
int verticalOffset = 0;
foreach (int h in tableLayoutPanel1.GetRowHeights())
{
int column = 0;
int horizontalOffset = 0;
foreach(int w in tableLayoutPanel1.GetColumnWidths())
{
Rectangle rectangle = new Rectangle(horizontalOffset, verticalOffset, w, h);
if(rectangle.Contains(e.Location))
{
Trace.WriteLine(String.Format("row {0}, column {1} was clicked", row, column));
return;
}
horizontalOffset += w;
column++;
}
verticalOffset += h;
row++;
}
}
Hi I have a small winforms program that will soon develop into something more. The program has 2 panels panel1 and panel2 these panels are populated dynamically with some form controls. the first panel is populated with combo-boxes and the second with a grid of buttons. What I want to achieve is to be able to disable the right button depending on what the user selects from the combobox. Each column of the grid represent a day of the week and the combobox will be used to disable the wanted day by selecting it from the list if you like.
To do this statically is straight forward, however my program will soon expand so that it can handle a large database so that's why I am doing this dynamically. Basically this is where I'm stuck at the moment I want to simply disable the right button.
Below is the interface that i have so far:
And this is my code if any help:
public Form1()
{
InitializeComponent();
}
Button[] btn = new Button[2];
ComboBox[] cmb = new ComboBox[1];
private void Form1_Load(object sender, EventArgs e)
{
placeRows();
}
public void createColumns(int s)
{
for (int i = 0; i < btn.Length; ++i)
{
btn[i] = new Button();
btn[i].SetBounds(40 * i, s, 35, 35);
btn[i].Text = Convert.ToString(i);
panel1.Controls.Add(btn[i]);
}
for (int i = 0; i < cmb.Length; ++i)
{
cmb[i] = new ComboBox();
cmb[i].SelectedIndexChanged += new EventHandler(cmb_SelectedIndexChanged);
cmb[i].Text = "Disable";
cmb[i].Items.Add("Monday");
cmb[i].Items.Add("Tuesday");
cmb[i].SetBounds(40 * i, s, 70, 70);
panel2.Controls.Add(cmb[i]);
}
}
void cmb_SelectedIndexChanged(object sender, EventArgs e)
{
ComboBox senderCmb = (ComboBox)sender;
if (senderCmb.SelectedIndex == 1)
{
//MessageBox.Show("Tuesday");
btn[1].Enabled = false;
}
}
public void placeRows()
{
for (int i = 0; i < 80; i = i + 40)
{
createColumns(i);
}
}
}
Alternative 1
Every control has a Tag property.
You can set the Tag property of your buttons to represent the column they are in.
When a selection is made in the combo box, simply search through all buttons, and enable or disable the button based on whether each button's Tag property matches the selected text in the combo box.
Alternative 2
Create a
Dictionary<string, List<Button>> buttonMap;
where the key is the value representing the column ("Tuesday") and the value is a list of buttons with that tag. When creating the buttons initially, also populate that dictionary.
If you go with Alternative 2, you'll have to remember the previously selected value of the checkbox so you can re-enable buttons that are no longer disabled.
If you have lots of buttons, you may find that Alternative 2 is noticeably faster.
UPDATE
Here's a complete working sample of Alternative 1.
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
const int ROWS = 2;
const int COLS = 2;
Button[,] btn = new Button[ROWS,COLS];
ComboBox[] cmb = new ComboBox[ROWS];
private void Form1_Load(object sender, EventArgs e)
{
placeRows();
}
private readonly string[] cbTexts = new string[] { "Monday", "Tuesday" };
public void createColumns(int rowIndex)
{
int s = rowIndex * 40;
// Your original code kept overwriting btn[i] for each column. You need a 2-D array
// indexed by the row and column
for (int colIndex = 0; colIndex < COLS; colIndex++)
{
btn[rowIndex, colIndex] = new Button();
btn[rowIndex, colIndex].SetBounds(40 * colIndex, s, 35, 35);
btn[rowIndex, colIndex].Text = Convert.ToString(colIndex);
btn[rowIndex, colIndex].Tag = cbTexts[colIndex];
panel1.Controls.Add(btn[rowIndex, colIndex]);
}
cmb[rowIndex] = new ComboBox();
cmb[rowIndex].SelectedIndexChanged += new EventHandler(cmb_SelectedIndexChanged);
cmb[rowIndex].Text = "Disable";
foreach (string cbText in cbTexts)
{
cmb[rowIndex].Items.Add(cbText);
}
cmb[rowIndex].SetBounds(40, s, 70, 70);
cmb[rowIndex].Tag = rowIndex; // Store the row index so we know which buttons to affect
panel2.Controls.Add(cmb[rowIndex]);
}
void cmb_SelectedIndexChanged(object sender, EventArgs e)
{
ComboBox senderCmb = (ComboBox)sender;
int row = (int)senderCmb.Tag;
for (int col = 0; col < COLS; col++)
{
Button b = btn[row, col];
// These three lines can be combined to one. I broke it out
// just to highlight what is happening.
string text = ((string)b.Tag);
bool match = text == senderCmb.SelectedItem.ToString();
b.Enabled = match;
}
}
public void placeRows()
{
for (int rowIndex = 0; rowIndex < 2; rowIndex++)
{
createColumns(rowIndex);
}
}
}