Display a number of usercontrol based on the numbe

Question

. The black box is a usercontrol.

Usercontrol Code

 string b = "";
    public string ID
    {
        set { b = value; }
    }

    public void sample()
    {
        textBox1.Clear();
        using (SqlConnection myDatabaseConnection = new SqlConnection(myConnectionString.ConnectionString))
        {
            myDatabaseConnection.Open();
            using (SqlCommand SqlCommand = new SqlCommand("Select LastName, Image from Employee where ID = @a", myDatabaseConnection))
            {
                SqlCommand.Parameters.AddWithValue("@a", b);
                DataSet DS = new DataSet();
                SqlDataAdapter da = new SqlDataAdapter(SqlCommand);
                da.Fill(DS, "Images");
                var imagesTable = DS.Tables["Images"];
                var imagesRows = imagesTable.Rows;
                var count = imagesRows.Count;

                if (count <= 0)
                    return;
                var imageColumnValue =
                    imagesRows[count - 1]["Image"];
                if (imageColumnValue == DBNull.Value)
                    return;

                var data = (Byte[])imageColumnValue;
                using (var stream = new MemoryStream(data))
                {
                    pictureBox1.Image = Image.FromStream(stream);
                }

            }
        }   
    }

    public void getname()
    {
        using (SqlConnection myDatabaseConnection = new SqlConnection(myConnectionString.ConnectionString))
        {
            myDatabaseConnection.Open();
            using (SqlCommand SqlCommand = new SqlCommand("Select LastName from Employee where ID =  @a", myDatabaseConnection))
            using (SqlDataAdapter da = new SqlDataAdapter(SqlCommand))
            {
                SqlCommand.Parameters.AddWithValue("@a", b);

                SqlDataReader DR1 = SqlCommand.ExecuteReader();
                if (DR1.Read())
                {
                    textBox1.Text = DR1.GetString(DR1.GetOrdinal("LastName")).ToString();
                }
            }
        }
    }

Form Code

public string ID
    {
        get { return textBox1.Text; }
    }

        private void textBox1_TextChanged(object sender, EventArgs e)
    {
        userControl21.ID = ID;
        userControl21.sample();
        userControl21.getname();
    }

Using the code above I can display a single record to the usercontrol. How i can display a number of usercontrol based on the number of records in the database with their picture and name? For example I have 7 records in the database, the form will display 7 usercontrols. And when I click or select a usercontrol more information such as Address, Contacts, Etc will be display in my form. If the records in the database is too many to fit in the form there will be a vertical or horizontal scroll bar. Give me some code :)

What is the best container to display the usercontols that can have scroll bar? a panel, groupbox or anything?

This must be the sample output. .

Answer 1

We have created a view very much like what you are describing. We have a Container class that is inherited from Form and is custom drawn (it's actually an abstract class that we further inherit from in order to create many types of containers that all share common functionality). We add these Containers dynamically to a Panel control based on having looped through records in a database to retrieve information about how the Containers are to be constructed. Being its own class means that you can have custom handlers for any event you choose, such as reacting to user selection (to fetch more information like the address and contacts).

In your example, I don't see a class for what you call "UserControl". I would suggesting starting there. A concrete class defining a "container" object is what will anchor this project.

In your last screenshot, the red outline should be a Panel control. Panel will allow scrolling. Alternatively, you could also use a FlowLayoutControl if you would prefer that the control that owns your containers be in control of positioning and spacing. We went with a Panel to retain control over absolute positioning.

Once you have a container class and a form with a Panel on it, you can loop through the records you retrieve from your database, adding a container object for each one, and setting its values simultaneously (based on the example, some text and an image).

Answer 2

In my opinion the best container in your case will be FlowLayoutPanel with its FlowDirectionproperty set to FlowDirection.LeftToRight. It will be especially usefull since all your custom user controls have the same size (from what I can see in your second screenshot). And about your first question: you could create your own descendant of FlowLayoutPanel and add some method like LoadAllItemsFromDataBase where you could create your custom user control for every record like you do now and add it dinamically to Controls collection of FlowLayoutPanel