C# - Add, update, delete flow layout panel controls at runtime

csharp example to add, update and delete controls at runtime inside a flowlayoutpanel. A picturebox and labels are created to show a movie image, title and release date.
Files:
drive.google.com/drive/folder...
private void AddMovieToUI(Movie movie)
{
//Create panel
Panel panel;
panel = new Panel();
panel.Name = String.Format("PnlMovie{0}", movie.Id);
panel.BackColor = Color.White;
panel.Size = new Size(125, 205);
panel.Margin = new Padding(10);
panel.Tag = movie.Id;
//Create picture box
PictureBox picBox;
picBox = new PictureBox();
picBox.Name = String.Format("PbMovieImage{0}", movie.Id);
picBox.Size = new Size(100, 148);
picBox.Location = new Point(12, 10);
picBox.SizeMode = PictureBoxSizeMode.Zoom;
if (File.Exists(movie.ImagePath))
picBox.Image = Image.FromFile(movie.ImagePath);
picBox.Tag = movie.Id;
//Create title label
Label labelTitle;
labelTitle = new Label();
labelTitle.Name = String.Format("LblMovieTitle{0}", movie.Id);
labelTitle.Text = movie.Title;
labelTitle.Location = new Point(12, 165);
labelTitle.ForeColor = Color.Black;
labelTitle.Font = new Font(this.Font.FontFamily, 9.5f, FontStyle.Regular);
labelTitle.AutoSize = true;
labelTitle.Tag = movie.Id;
//Create year label
Label labelYear;
labelYear = new Label();
labelYear.Name = String.Format("LblMovieYear{0}", movie.Id);
labelYear.Text = movie.ReleaseDate.Year.ToString();
labelYear.Location = new Point(12, 185);
labelYear.ForeColor = Color.Gray;
labelYear.Font = new Font(this.Font.FontFamily, 9.5f, FontStyle.Regular);
labelYear.Tag = movie.Id;
//Set Context Menu
panel.ContextMenuStrip = contextMenuStrip1;
//Add controls to panel
panel.Controls.Add(picBox);
panel.Controls.Add(labelTitle);
panel.Controls.Add(labelYear);
//Add Event Handlers
panel.DoubleClick += new EventHandler(Edit_DoubleClick);
foreach (Control c in panel.Controls)
{
c.DoubleClick += new EventHandler(Edit_DoubleClick);
}
//Add panel to flowlayoutpanel
flowLayoutPanel1.Controls.Add(panel);
}
private void UpdateMovieInUI(Movie movie)
{
Control control;
PictureBox picBox;
string name;
//Find picturebox and update movie image
name = String.Format("PbMovieImage{0}", movie.Id);
control = this.Controls.Find(name, true).FirstOrDefault();
picBox = (PictureBox)control;
if (File.Exists(movie.ImagePath))
picBox.Image = Image.FromFile(movie.ImagePath);
else
picBox.Image = null;
//Find movie title label and update text
name = String.Format("LblMovieTitle{0}", movie.Id);
control = this.Controls.Find(name, true).FirstOrDefault();
control.Text = movie.Title;
//Find movie year label and update text
name = String.Format("LblMovieYear{0}", movie.Id);
control = this.Controls.Find(name, true).FirstOrDefault();
control.Text = movie.ReleaseDate.Year.ToString();
}
private void DeleteMovieFromUI(Movie movie)
{
Control panel;
string name;
//Find panel
name = String.Format("PnlMovie{0}", movie.Id);
panel = this.Controls.Find(name, true).FirstOrDefault();
//Remove event handlers
panel.DoubleClick -= new EventHandler(Edit_DoubleClick);
foreach (Control c in panel.Controls)
{
c.DoubleClick -= new EventHandler(Edit_DoubleClick);
}
//Remove panel
flowLayoutPanel1.Controls.Remove(panel);
panel.Dispose();
}

[@quaen8930]

i really need this right now for my homework

[@quaen8930]

yes very good wish you luck

[@TomShneor]

hi, can you please write the code that updates the flow layout panel once the main form is opened?
Thanks !

[@roshauuun8274]

Not sure if your still avaliable but is it possible for you to upload the full code in your drive?

[@JFLHV]

I have a link in the description to the cs code. Were you looking for something else?

[@jangansotoy]

Which Code for AddEditMovie form?

[@JFLHV]

I added a link in the description to the code

[@frenchkawimbkisimba5486]

I'm not a new project I got stuck on this point please can you make me a long video which details the whole step I'm asking for your help

[@JFLHV]

What question did you have? I can try to answer here

[@frenchkawimbkisimba5486]

@@JFLHV I wanted to do the same thing but the images must come directly from the internet and automatically thanks to the title of the films given on each (picturebox) so a (label) below like title and year

[@JFLHV]

Try PictureBox.Load() with the image url

[@frenchkawimbkisimba5486]

@@JFLHV Thanks for the answer, but that's not what I'm looking for, the question: example I have a list of film titles which contains more than 1000 titles so instead of me looking for the Fichet URL one by one it would really be a lot to do it manually I want the Fichet to appear automatically

[@JFLHV]

Interesting. It would take some playing around to get a url from a web request, but feasible. I’ll keep that as an idea to look into.

[@abigailmcdonald3300]

Is it possible for this to just display and create new aspects of itself with new information. So the opposite ot this. I want the card to be clickable so it can lead to a next page .

[@JFLHV]

I think you would just have to update Edit_Doubleclick if I understand your question. There you will know what item was clicked and can do whatever you need to. Display another panel, load new items etc.

[@abigailmcdonald3300]

There are all ards, I want ten first on the page, these information basically draw from the database.So I want a card to represent a small amount of information about the recipe . But I want to display numerous cards.Then after the first 10 ,I want it to generate a next 10 , and so forth.

[@abigailmcdonald3300]

Hopefully you understand what I am trying to do now

[@abigailmcdonald3300]

I was thinking about using a user control from but i don't know if that would be effective.

[@JFLHV]

If you're limiting the number to display to 10, I'd create 10 sets of controls at design or runtime and continue to use those as you navigate through your recipes. That could be done with panels or even a list view in icon view depending on how you want it to look

[@roshauuun8274]

It's a bit ugent so not sure if you'll see this in time

[@GadgetMeta]

It doesn't require any database?

[@JFLHV]

Yes. If you want to save the data it would require a database or file. I didn't do that for this example

[@rafanojoke704]

can u do it please?@@JFLHV

[@user-nl2ec5bz6f]

smell code