Display pictures with their name from database in winforms?

Question

dataGridView1.DataSource = null;

using (SqlConnection myDatabaseConnection = new SqlConnection(myConnectionString.ConnectionString))
{
    myDatabaseConnection.Open();
    using (SqlCommand mySqlCommand = new SqlCommand("Select Name, Picture from Employee ", myDatabaseConnection))
    {
        DataSet ds = new DataSet();
        SqlDataAdapter adapter = new SqlDataAdapter(mySqlCommand);
        adapter.Fill(ds);
        dataGridView1.DataSource = ds.Tables[0];  
    }
}

Instead of using datagridview, How I can display the picture with their Name in the panel or other control from the database something like this format http://static.neatorama.com/images/2008-04/yearbook-project-robot-johnny.gif in win form? For example I have 7 records in the database, the form will display 7 panels with picture and label. And when I click or select a panel it will dipslay more information such as Address, Contacts, Etc in a textBox. If the records in the database is too many to fit in the form there will be a vertical or horizontal scroll bar.

Answer 1

I suggest you to create the objects you need dynamically. You can use "Location" to position your object.

Example :

int cptx = 0;
int cpty = 0;

for(int i=0; i<ds.Tables[0].Rows.Count;i++)
{
    PictureBox currentpic = new PictureBox();
    Label currentlabel = new Label();

    currentpic.Size = new Size(20,20);
    currentlabel.Size = new Size(20,20);

    currentpic.BorderStyle = BorderStyle.FixedSingle;
    currentlabel.Text = "te";

    if(cptx >= 4)
    {
        cptx = 0;
        cpty ++;
    }

    currentpic.Location= new Point((cptx*25),(cpty*50));
    currentlabel.Location = new Point((cptx*25),(cpty*50)+25);

    This.Controls.Add(currentpic);

    cptx ++;

}

This code should do this :

EDIT : I suggest you to take a look at the "User control", the user control allow you to create you own control. So, the picture and the label will be inside a single control. The advantage to use the user control is the control you will create will be totally reusable for your other windows and/or programs.

Answer 2

Form has only one panel (pnlGrid) and panel's AutoScroll property setted as true;

DataTable dtImage = new DataTable();

dtImage.Columns.Add("Path");
dtImage.Columns.Add("Name");

dtImage.Rows.Add(new object[] { "ImagePath", "ImageText" });
dtImage.Rows.Add(new object[] { "ImagePath", "ImageText" });
dtImage.Rows.Add(new object[] { "ImagePath", "ImageText" });

CreateImageGrid(dtImage);

and method;

private void CreateImageGrid(DataTable dtDataSource)
{
    int colCount = 5;
    int rowCount = 0;
    int imgWidth = 100;
    int imgHeight = 100;
    int imgPadding = 10;
    int lblPadding = 5;
    int ind = -1;

    PictureBox pic = null;
    Label lbl = null;

    if (dtDataSource.Rows.Count > colCount)
    {
        rowCount = Convert.ToInt32(dtDataSource.Rows.Count / colCount);

        if (Convert.ToInt32(dtDataSource.Rows.Count % colCount) > 0)
        {
            rowCount++;
        }
    }
    else
    {
        rowCount = 1;
    }

    for (int j = 0; j < rowCount; j++)
    {
        for (int i = 0; i < colCount && dtDataSource.Rows.Count > ((j * colCount) + i); i++)
        {
            ind = (j * colCount) + i;

            pic = new PictureBox();
            pic.Image = Image.FromFile(dtDataSource.Rows[ind]["Path"].ToString());

            pnlGrid.Controls.Add(pic);

            pic.Width = imgWidth;
            pic.Height = imgHeight;
            pic.Top = (j * (imgHeight + imgPadding)) + imgPadding;
            pic.Left = (i * (imgWidth + imgPadding)) + imgPadding;

            lbl = new Label();
            lbl.Text = dtDataSource.Rows[ind]["Name"].ToString();

            pnlGrid.Controls.Add(lbl);

            lbl.Left = pic.Left;
            lbl.Top = pic.Top + pic.Height + lblPadding;
        }
    }
}

Note: Text lengths may cause problems, you should define some rules.