• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1187
  • Last Modified:

C# multiple user controls or listbox

I am trying to create a listbox with much more extended information.  The best way for me to show you what I mean is to show you another program with this so lets take this one for example


as you can see there is a list of objects that you can select from in a listview type but its not a basic listview control.  I am wondering how to make this.  Should I make a user control then put them into a listview or what?  I am not sure how to do any of this.  Please help


  • 6
  • 3
  • 2
1 Solution
The particular screen shot you referenced can be done fairly easily with the repeater class.


I hope this helps.
The repeater is only for web apps - i suppose you could embed a browser and manipulate it that way..

I'd of thought a datagrid with some custom columns would be a better winforms approach;

This article explains how to a picture column to a datagrid


The link is from my collection of 'useful snippets for later....'   I have a similar need to what you require coming up......
First of all, sorry, I was thinking asp.net all the way.  Talk about missing the boat!

A grid control will do, but you'll not have much fun trying to group multiple rows to give the same effect as the screen shot you reference.  The grid can handle a single row fairly easily.

I would take a look at a panel control, which embeds a collection of panels containing your controls (or some other control container).  The containing panel control can scroll, you can populate programmatically the contained panel with the controls you need.
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

ICaldwellAuthor Commented:
ok, sounds like a panel control is the best way to do what I am looking for.  I know how to add and remove one pannel but not multiple.  Would it be best to create the panel in a user control and the user control to list?  and how do I add multiple controls to a scrollable list?

Yes, you would design the contained panel as a user control.  The contained panel (user control) will have the controls placed in it that you want to display.  You would then populate the outer panel control with a collection of the contained panels (user controls).  You can create multiple instances of the user control you design using the new operator and add them to the panel programmatically.

The code for the contained control would be responsible for reading the data from a DataRow, and would also be responsible for any updates to the database.

As for your last question, you would use the CreateControlCollection method of the outer panel to add controls:
// Create child controls.
ChildControl myControl[i] = new ChildControl();


This is just pseudo code, so don't try to cut and paste.

Hope this helps.
ICaldwellAuthor Commented:
Ok, I understand how to create the array of controls and how to add them to a control but th part you mentioned about CreateControlCollection(); I do not.  I tried looking up info on google about this but there is very little.  I am not sure how to add these controls multiple controls, could you add some code for this or something?


google's fair for .Net stuff, but you need to download the .Net SDK and look at the docs.  If you don't want to do that, then msdn.microsoft.com is the only way to go.  Here's a reference that presents the code you need:

I basically use the online version when I have access to it, because it gets updated.  Otherwise, the docs that ship with the .Net SDK are fabulous with many samples and quickstarts.

Here's another attempt:
outerPanel.controls.add(new containedPanel(parm1, parm2...))

You would simply create a user control named containedPanel, which contains the text boxes, check boxes, etc that you want to display.  The contained panel would look like one row of data on your display.
Then to populate your scrolling panel (outerPanel) you would loop through your database secords, populating new containedPanel controls and add them to the controls collection.  As the new containedPanel controls exceed the view area of the outerPanel, scroll bars are added and you get a scrolling display.

Step one: design a user control containedPanel based on a panel control.  Add your other controls to the usercontrol so it looks like one row of the picture you referenced.  (You can do this in visual studio or the old fashioned way with notepad.  If you don't have visual studio, steal a copy.)

Step two.  Open a datatable or some other data source (an array collection, etc.)
Step three.  Loop through the dataset and execute
outerPanel.controls.add(new containedPanel(parm1, parm2...))
Do this for each record.

If you create the outerPanel programmatically, you would use the CreateControlCollection().  As in outPanel.CreateControlCollection.  The you would still have to loop through your data and execute
outerPanel.controls.add(new containedPanel(parm1, parm2...)).

Good luck.
ICaldwellAuthor Commented:
that msdn site was the one that I hit.  Ok here is a little more info

I am using Visual Studio 2003 to create this

I created a user control with a panel in it containing all the labels, ect.

when the program loads it runs

LineItem[] myLineItem = new LineItem[5];
myLineItem[0] = new LineItem("sadasd, sadasd");
myLineItem[1] = new LineItem("asdasda,as dasd");
myLineItem[2] = new LineItem("asdasd,as dasd");
myLineItem[3] = new LineItem("sdhkjas, ashdasdhasdjwe");
myLineItem[4] = new LineItem("asdas,a sdhauihwe");

This is just basic to see if it worked, no loop yet.  I only see the first one appear, if I remove panel6.Controls.Add(myLineItem[0]); then I see only the second one.  ect.  Each one will show up individually but not together

I must be doing something wrong here but not sure what

OK, I see.  You have to position the controls in the panel.  You can adjust the myLineItem position relative to the top, left position of the panel.

Something like:
myLineItem[0].positionx = 1;
myLineItem[0].positiony = 1;
myLineItem[1].positionx = 1;
myLineItem[1].positiony = 25;
myLineItem[4].positionx = 1;
myLineItem[4].positiony = 100;
// Where each line item has a height of 25 pixels.

If you have questions.  Just draw a panel on a form, then add a few panels into the container.  Then, switch to code view a look at how the designed positioned the panels inside the container panel.  You may need to add a couple of properties to your panel control to allow it to be repositioned.
you could just set the dock property of the subpanel to DockStyle.Top ; then the outer panel will keep track of the positioning for you.

Here's some code that does what you want:

// Place this just after the class definition of your form
private System.Windows.Forms.Panel outerPanel;
private System.Windows.Forms.Panel containedPanel1;
private System.Windows.Forms.TextBox inContainedPanel1;
private System.Windows.Forms.Panel containedPanel2;
private System.Windows.Forms.TextBox inContainedPanel2;
private System.Windows.Forms.Panel containedPanel3;
private System.Windows.Forms.TextBox inContainedPanel3;
private System.Windows.Forms.Panel containedPanel4;
private System.Windows.Forms.TextBox inContainedPanel4;
private System.Windows.Forms.Panel containedPanel5;
private System.Windows.Forms.TextBox inContainedPanel5;
private System.Windows.Forms.Panel containedPanel6;
private System.Windows.Forms.TextBox inContainedPanel6;

// Place this code in your form's constructor function
this.outerPanel = new System.Windows.Forms.Panel();
this.containedPanel1 = new System.Windows.Forms.Panel();
this.inContainedPanel1 = new System.Windows.Forms.TextBox();
this.containedPanel2 = new System.Windows.Forms.Panel();
this.inContainedPanel2 = new System.Windows.Forms.TextBox();
this.containedPanel3 = new System.Windows.Forms.Panel();
this.inContainedPanel3 = new System.Windows.Forms.TextBox();
this.containedPanel4 = new System.Windows.Forms.Panel();
this.inContainedPanel4 = new System.Windows.Forms.TextBox();
this.containedPanel5 = new System.Windows.Forms.Panel();
this.inContainedPanel5 = new System.Windows.Forms.TextBox();
this.containedPanel6 = new System.Windows.Forms.Panel();
this.inContainedPanel6 = new System.Windows.Forms.TextBox();
// outerPanel
this.outerPanel.AutoScroll = true;
this.outerPanel.AutoScrollMinSize = new System.Drawing.Size(0, 82);
this.outerPanel.Location = new System.Drawing.Point(16, 16);
this.outerPanel.Name = "outerPanel";
this.outerPanel.Size = new System.Drawing.Size(400, 208);
this.outerPanel.TabIndex = 0;
// containedPanel1
this.containedPanel1.Location = new System.Drawing.Point(8, 8);
this.containedPanel1.Name = "containedPanel1";
this.containedPanel1.Size = new System.Drawing.Size(368, 56);
this.containedPanel1.TabIndex = 0;
// inContainedPanel1
this.inContainedPanel1.Location = new System.Drawing.Point(144, 16);
this.inContainedPanel1.Name = "inContainedPanel1";
this.inContainedPanel1.Size = new System.Drawing.Size(192, 20);
this.inContainedPanel1.TabIndex = 0;
this.inContainedPanel1.Text = "inContainedPanel1";
// containedPanel2
this.containedPanel2.Location = new System.Drawing.Point(8, 64);
this.containedPanel2.Name = "containedPanel2";
this.containedPanel2.Size = new System.Drawing.Size(368, 72);
this.containedPanel2.TabIndex = 1;
// inContainedPanel2
this.inContainedPanel2.Location = new System.Drawing.Point(144, 24);
this.inContainedPanel2.Name = "inContainedPanel2";
this.inContainedPanel2.Size = new System.Drawing.Size(192, 20);
this.inContainedPanel2.TabIndex = 1;
this.inContainedPanel2.Text = "inContainedPanel2";
// containedPanel3
this.containedPanel3.Location = new System.Drawing.Point(8, 136);
this.containedPanel3.Name = "containedPanel3";
this.containedPanel3.Size = new System.Drawing.Size(368, 72);
this.containedPanel3.TabIndex = 0;
// inContainedPanel3
this.inContainedPanel3.Location = new System.Drawing.Point(144, 24);
this.inContainedPanel3.Name = "inContainedPanel3";
this.inContainedPanel3.Size = new System.Drawing.Size(192, 20);
this.inContainedPanel3.TabIndex = 1;
this.inContainedPanel3.Text = "inContainedPanel3";
// containedPanel4
this.containedPanel4.Location = new System.Drawing.Point(8, 208);
this.containedPanel4.Name = "containedPanel4";
this.containedPanel4.Size = new System.Drawing.Size(368, 72);
this.containedPanel4.TabIndex = 3;
// inContainedPanel4
this.inContainedPanel4.Location = new System.Drawing.Point(144, 24);
this.inContainedPanel4.Name = "inContainedPanel4";
this.inContainedPanel4.Size = new System.Drawing.Size(192, 20);
this.inContainedPanel4.TabIndex = 1;
this.inContainedPanel4.Text = "inContainedPanel4";
// containedPanel5
this.containedPanel5.Location = new System.Drawing.Point(8, 280);
this.containedPanel5.Name = "containedPanel5";
this.containedPanel5.Size = new System.Drawing.Size(368, 72);
this.containedPanel5.TabIndex = 4;
// inContainedPanel5
this.inContainedPanel5.Location = new System.Drawing.Point(144, 24);
this.inContainedPanel5.Name = "inContainedPanel5";
this.inContainedPanel5.Size = new System.Drawing.Size(192, 20);
this.inContainedPanel5.TabIndex = 1;
this.inContainedPanel5.Text = "inContainedPanel5";
// containedPanel6
this.containedPanel6.Location = new System.Drawing.Point(8, 352);
this.containedPanel6.Name = "containedPanel6";
this.containedPanel6.Size = new System.Drawing.Size(368, 72);
this.containedPanel6.TabIndex = 5;
// inContainedPanel6
this.inContainedPanel6.Location = new System.Drawing.Point(144, 26);
this.inContainedPanel6.Name = "inContainedPanel6";
this.inContainedPanel6.Size = new System.Drawing.Size(192, 20);
this.inContainedPanel6.TabIndex = 2;
this.inContainedPanel6.Text = "inContainedPanel6";
// Form1
// Change Form1 to you your form's name!
this.AutoScaleBaseSize = new System.Drawing.Size(5, 13);
this.ClientSize = new System.Drawing.Size(472, 237);
this.Name = "Form1";
this.Text = "Form1";


Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 6
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now