Develop Reference

draw picture box and get coordinates

i'm newbie here and also in c#.
my project is to create a box in grid view.
then when click desired box, i'll get the box coordinate or position and box will change the colour.
when click another box, the previous box colour will change to original.
the box will resize when total size for rows x cols more than panel2 size.
i wanna extend the function of code by add new button NEXT, when click, then next picture box will be highlight and also coordinate will update. how to relate new button with existing picture box?
for (int cols = 0; cols < COLUMNS; cols++)
{
for (int rows = 0; rows < ROWS; rows++)
{
PictureBox newPic = new PictureBox();
newPic.Height = HEIGHT;
newPic.Width = WIDTH;
newPic.BackColor = Color.Maroon;
int x = cols * (HEIGHT + SPACE);
int y = rows * (WIDTH + SPACE);
newPic.Location = new Point(x + SPACE, y + SPACE);
newPic.Click += NewPic_Click;
items.Add(newPic);
this.panel2.Controls.Add(newPic);
}
}

Just for color switching, you only need the PictureBox which has been clicked on. It is stored in the sender parameter.
I you want the coordinates, you need to store some information on the PictureBox. You don't want to specify 50 handlers.
The way I would do is; to make use of the Tag property of a Control.
Your for-loop would be something like:
for (int cols = 0; cols < COLUMNS; cols++)
{
for (int rows = 0; rows < ROWS; rows++)
{
PictureBox newPic = new PictureBox();
newPic.Height = HEIGHT;
newPic.Width = WIDTH;
newPic.BackColor = Color.Maroon;
// instead of the coordinates, store the indices (for col, row)
newPic.Tag = new Point(cols, rows);
// I would use the Width on the cols, instead of the Height.
int x = cols * (WIDTH + SPACE);
int y = rows * (HEIGHT + SPACE);
newPic.Location = new Point(x + SPACE, y + SPACE);
newPic.Click += NewPic_Click;
items.Add(newPic);
this.panel2.Controls.Add(newPic);
}
}
And your handler would be something like:
// a field to store the previous selected picturebox.
private PictureBox _currentPictureBox = null;
private void NewPic_Click(object sender, EventArgs e)
{
// the picturebox which has been clicked, is stored in the sender object, but you need to cast it to a PictureBox.
PictureBox pb = (PictureBox)sender;
// just for the extra use of the Tag.
var location = (Point)pb.Tag;
// location.X Contains the Column index
// location.Y Contains the Row index
// did we have a previous picturebox?
if(_currentPictureBox != null)
{
// change the previous pictureBox back to Maroon
_currentPictureBox.BackColor = Color.Maroon;
}
// change the current to blue
pb.BackColor = Color.Blue;
// store the new one as the current. (so we can revert it)
_currentPictureBox = pb;
}
I haven't tested it, only in a notepad. So there might be some typo's. But I hope you get the idea.

How to create dynamically C# panels

I create a contact manager. The user can already enter some and they are stored in a file and re-opened when the program is started. Each contact is an object of my Person class.
When launching the program (in Load()) I created a for loop until all contacts have been explored (contacts are stored when opened in a Person table)
So now I come to my problem:
I have a panel that is scrollable (I have enabled the option) and I would like every 50 pixels in height, that a new panel is created with name, first name, email and phone number of my contacts and a pictureBox.
Except, I would like to be able to do it dynamically instead of creating the same thing more than 50 times and repeating the same code 50 times
Because for the moment I have done this:
for(int i = 0; i < contacts.Count; i++) //Afficher les contacts
{
if(!panel_contact1.Visible)
{
panel_contact1.Visible = true;
label_prenom_nom1.Text = contacts[i].Prenom + " " + contacts[i].Nom;
label_email1.Text = contacts[i].mail;
label_tel1.Text = contacts[i].tel;
pictureBox1.Image = Image.FromFile(contacts[i].pathImage);
}
else if(!panel_contact2.Visible)
{
panel_contact2.Visible = true;
label_prenom_nom2.Text = contacts[i].Prenom + " " + contacts[i].Nom;
label_email2.Text = contacts[i].mail;
label_tel2.Text = contacts[i].tel;
pictureBox2.Image = Image.FromFile(contacts[i].pathImage);
}
}
It's the code only for the first two contacts and I don't want to repeat it up to 100 times.
So my question is:
How to create panels, with in each of the labels and a pictureBox, every 50px in a panel.
Thank you for reading, if you just have advice said always the same if you all have the code I'm a taker especially since I think it should be easy to do because the content of the labels are already dynamically teaching.
Thank you.

On WinForms, you can use this:
int x = 0;
int y = 0;
int delta = 10;
for ( int i = 0; i < contacts.Count; i++ )
{
// Create picture box
var picture = new PictureBox();
picture.Image = Image.FromFile(contacts[i].pathImage);
picture.Location = new Point(x, y);
picture.Size = new Size(picture.Image.Width, picture.Image.Height);
int dx = picture.Width + delta;
// Create name label
var labelName = new Label();
labelName.AutoSize = true;
labelName.Location = new Point(x + dx, y);
labelName.Font = new Font(labelName.Font, FontStyle.Bold);
labelName.Text = contacts[i].Prenom + " " + contacts[i].Nom;
// Create mail label
var labelMail = new Label();
labelMail.AutoSize = true;
labelMail.Location = new Point(x + dx, y + labelName.Height);
labelMail.Text = contacts[i].mail;
// Create phone label
var labelPhone = new Label();
labelPhone.AutoSize = true;
labelPhone.Location = new Point(x + dx, y + labelName.Height + labelMail.Height);
labelPhone.Text = contacts[i].tel;
// Add controls
panel.Controls.Add(picture);
panel.Controls.Add(labelName);
panel.Controls.Add(labelMail);
panel.Controls.Add(labelPhone);
// Iterate
int dy1 = labelName.Height + labelMail.Height + labelPhone.Height;
int dy2 = picture.Height;
y += Math.Max(dy1, dy2) + delta;
}
But you may prefer create a custom control where you put a picture box and three labels designed as you want with colors, font size, bolding, margin, borderstyle and so on, with Height at 50.
Add new user custom control with Project > Add > User control and choose a file name like PersonControl.
public partial class PersonControl : UserControl
{
public PersonControl()
{
InitializeComponent();
}
public PersonControl(Person person) : this()
{
pictureBox.Image = Image.FromFile(person.pathImage);
labelName.Text = person.Prenom + " " + person.Nom;
labelMail.Text = person.mail;
labelPhone.Text = person.tel;
}
}
int x = 0;
int y = 0;
for ( int i = 0; i < contacts.Count; i++ )
{
var control = new PersonControl(contacts[i]);
control.Location = new Point(x, y);
panel.Controls.Add(control);
y += control.Height;
}
You should take care of the file image size that must be the same for all and the same as the picture box else you need to manage that by resizing for example.
How to resize an Image C#

If you're using windows forms, create a user control with a constructor using the Person object, set the labels and picture boxes to the info of that person. In the main loop you posted, create a new instance of this and set it's position to 0, i * 50 to place it under the previous one.
Example:
for(int i = 0; i < contacts.Count; i++)
{
YourUserControl u1 = new YourUserControl(pass the person object);
Panel1.Controls.Add(u1);
u1.Location = new Point(0, i * 50);
}

This depends on the display technolgy you are using (WinForms, WPF/UWP, ASP.NET, other).
In Windows Forms you just create the elements and add them to the container. The designer wroks on it's own part of the partial class. The designer code is run with InitializeComponents() in the constructor. Anything it can do, you can do. And you can easily look at it.
In WPF/UWP stuff is a bit more complicated. The designer does not work on code, but on XAML, a dedciated markup language. You are not supposed to manually add anything to the UI from the code. WPF/UWP and XAML were designed with the MVVM pattern in mind. And dealing with lists of things is what it does best. While you can use other patterns, generally that looses 90% of it's power and runs into issues at every other corner.
For ASP.Net it would depend on wich pattern you use. While not originally designed for it, MVC has been extremely popular with WebApplication. So much so, it is almost synonimous with WebApplications and ASP.NET. However this does not look like a web Application.

Adding a control to another control which is created at runtime

I am trying to add a picturebox control to a panel which is created at runtime.
It is for a chess game I am working on. I want to add a picture box to each panel , an assigning the image to the control later. Here is what I have so far:
//Sets the number of rows on the chess board
for (int i = 0; i < 8; i++)
{
//Set the number of columns on the board
for (int j = 0; j < 8; j++)
{
ChessSquare sq = new ChessSquare(((char)(65 + i)).ToString(), 7- j);
sq.Color = (i + (j % 2)) % 2 == 0 ? Color.Black : Color.White;
Panel p = new Panel()
{
Size = new Size(blockSize, blockSize),
BackColor = sq.Color,
Tag = sq,
Location = new Point(blockSize * i + 15, blockSize * j + 15),
BackgroundImageLayout = ImageLayout.Stretch
};
p.MouseEnter += new EventHandler(squareMouseEnter);
p.MouseLeave += new EventHandler(squareMouseLeave);
p.Click += new EventHandler(squareMouseClick);
chessBoardPanels[i, j] = p;
groupBox1.Controls.Add(p);
}
}
//SetUp Board
SetUpBoad Setup = new SetUpBoad();
SetUpBoad(chessBoardPanels);

Since you already put the Panels into the panel-array (?)
chessBoardPanels[i, j] = p;
You can add the PictureBoxes either now or later..:
PictureBox pb = new PictureBox ();
pb.Size = ..
pb.BackColor = Color.Transparent;
chessBoardPanels[i,j].Controls.Add(pb);
To access them later you can cast their first Control to PictureBox:
PictureBox pb = (PictureBox)chessBoardPanels[i,j].Controls[0];
pb.Image = aQueenImage;
If you want to add a PictureBox only where a piece is you need to do checks:
if (chessBoardPanels[i,j].Controls.Count > 0)
{
PictureBox pb = (PictureBox)chessBoardPanels[i,j].Controls[0];
pb.Image = aQueenImage;
}
To move a piece from <i1,j1> to <i2, j2> you do as expected:
chessBoardPanels[i1,j1].Controls[0].Parent = chessBoardPanels[i2,j2];
I notice that you are hooking up mouse events. If you want to use them to move the pieces, remember that transparency will not work for overlapping controls in Winforms and so while a piece-Box is crossing Panels it will not have working tranparency around the Image.
While the pBox is nested in a Panel all is well but to move it you would have to first make it a child of the parent of those panels and only add it to the target Panel upon MouseUp; the coordinate corrections can be solved but the tranparency, if you need it, will be a bigger problem..
The usual advice it to consider drawing at least those board squares and maybe even the pieces onto a base board-Panel (or board-PictureBox)

Adding objects during run time?

Background
I have a tab which is made active if there is more than one record returned from a query on my database.
For each record returned I would like a set of labels created and placed on the tab. For example if there are 8 records I would like 8 labels created.
Question
My loop only creates one label, even though my count is showing I have 8 records? Not sure why?
How do you create labels in a loop 8 times and not have them draw in the same location 8 times? I would them to appear in a horizontal list. Pretty sure the way I have coded the solution ,they will all be drawn in the same place?
Code
for (int i = 1; i <= rowCount; i++)
{
// Create objects
LinkLabel Linklabel1 = new LinkLabel();
Linklabel1.Text += ds.Tables[0].Rows[0]["code"].ToString();
Linklabel1.Location = new Point(10, 50);
Linklabel1.Height = 40;
Linklabel1.Width = 100;
tabControl1.TabPages[0].Controls.Add(Linklabel1);
}

Try something like this out:
for (int i = 0; i < rowCount; i++)
{
// Create objects
LinkLabel Linklabel1 = new LinkLabel();
Linklabel1.Text = ds.Tables[0].Rows[i]["code"].ToString();
Linklabel1.Height = 40;
Linklabel1.Width = 100;
Linklabel1.Location = new Point((i + 1) * 10 + (i * Linklabel1.Width), 50);
tabControl1.TabPages[0].Controls.Add(Linklabel1);
}
If you don't want to explicitly position them by setting the Location() property, consider putting a FlowLayoutPanel on the TabPage and added the controls to that instead. Then they will positioned automatically for you.

cycled pictureboxes

I need to work with much pictureboxes in one cycle. How can i do this? I tryed this :
for (int i = 1; i <= 10; i++)
{
PictureBox[] pb = new PictureBox[i];
pb[i].Image = global::Ippodrom.Properties.Resources.horse;
}
But it crashes with:
An unhandled exception of type 'System.IndexOutOfRangeException' occurred in Ippodrom.exe
Additional information: Index was outside the bounds of the array.
What shall I do?
UPD: I need to change the picture in created picturebox, not to create a new picturebox.

You need to loop through your existing pictureboxes on your form.
This procedure assumes you have the pictureboxes on the form and not in another container, like a panel. If so, adjust this code accordingly:
foreach (PictureBox pb in this.Controls.OfType<PictureBox>()) {
pb.Image = global::Ippodrom.Properties.Resources.horse;
}

What you want is to create an array of 10 PictureBox and initialize each of them.
What you have done is to create 10 arrays, each of size N, where N is [1..10].
Start by creating an array:
PictureBox[] pb = new PictureBox[10];
Now you have an array of 10 PixtureBox references. Each of them holds the value 'null'.
for (int i = 0; i < 10; i++) // C# arrays are zero-indexed, not one
{
// Create a new PictureBox and assign it to the array
pb[i] = new PictureBox();
// Assign an image to this new PictureBox
pb[i].Image = global::Ippodrom.Properties.Resources.horse;
}
The IndexOutOfRangeException occurs because you used a one-based index instead of zero, but the code was flawed to begin with, so it's not relevant.

If you create the Array of PictureBox you don't create any instances. You only declare "space" to hold the References to the Instances.
I guess what you're trying to do is this (but I might be wrong)
PictureBox[] pb = new PictureBox[10]; // creates space for 10 elements, first one is 0
for(int i = 0; i < 10; i++) { // from 0..9
pb[i] = new PictureBox(); // we create the actual thing
pb[i].Image = global::Ippodrom.Properties.Resources.horse;
}
It's probably a lot easier to use a List here
IList<PictureBox> pb = new List<PictureBox>();
for(int i = 0; i < 10; i++) { // if you want exactly 10
var theBox = new PictureBox();
theBox.Image = global::Ippodrom.Properties.Resources.horse;
pb.add(theBox);
}
if you want to change them
IList<PictureBox> pb = new List<PictureBox>() { pictureBox1 /* etc */ };
foreach(PictureBox p in pb) {
p.Image = global::Ippodrom.Properties.Resources.horse;
}
If you want every Picturebox in the Control go with the by LarsTech :)