How can I add more than custom control using code behind? - forms

Question

Here I create two objects form my Custom control and add them to the form but it show the first one only, why ?
private void frmWelcome_Load(object sender, EventArgs e)
{
// Count number of Contacts in XML
XmlDocument doc = new XmlDocument();
doc.Load(#"C:\Users\Taha\Documents\Visual Studio 2013\Projects\ContactsMangementSystem\ContactsMangementSystem\ContactsData.xml");
int numOfContacts = doc.GetElementsByTagName("Contact").Count;
XmlNodeList nodelist = doc.GetElementsByTagName("Contact");
foreach (XmlNode item in nodelist)
{
// Create Control for each Item
ContactControl.ContactControl userControl = new ContactControl.ContactControl();
// Fill Control With Data
userControl.labelOrganizationText = item.ChildNodes.Item(5).InnerText;
userControl.labelTitleText = item.ChildNodes.Item(0).InnerText;
userControl.labelWorkAddressText = item.ChildNodes.Item(12).InnerText;
userControl.labelWorkPhoneText = item.ChildNodes.Item(8).InnerText;
userControl.labelEmailText = item.ChildNodes.Item(7).InnerText;
Image img = Image.FromFile(item.ChildNodes.Item(9).InnerText);
userControl.ContactImage = img;
// Add item to the form
this.Controls.Add(userControl);
}
ContactControl.ContactControl userControl2 = new ContactControl.ContactControl();
this.Controls.Add(userControl2);
}

Answer 1

If you add controls all by yourself, aka programmaticaly, to the Control collection of a form, you become responsible for handling the position, bounds, size etc. I'll demonstrate the root cause of your issue with a trimmed down code example that is similar to yours.
First I create a UserControl, with one label on it. Set the label property Dock to Fill, Font to Point 28, TextAlign to MiddelCentre and most important Modifiers to Public:
Now we create a new Form in the Designer and add a Timer, a Button, two checkboxes and a FlowLayoutPanel to it. The FlowLayoutPanel has its Anchor property set to Top,Left,Right,Bottom so it will resize if the form resizes. Our design looks like this:
In the Timer_Tick event a new instance of the UserControl is created and either added to the Forms Control collection or the FlowLayoutPanel. There are two variables that keep track of the number of controls created and on which position the control needs to be.
Here is the code in the codebehind of the form:
int position = 0; // what position the control should be
int controlsCreated = 0; // how many controls did we create
private void timer1_Tick(object sender, EventArgs e)
{
// create the control
var ucnext = new UserControl1();
controlsCreated++;
ucnext.label1.Text = controlsCreated.ToString();
// where are we adding the control?
if (!chkFlow.Checked)
{
// do we want to use the Location?
// if not Top will be 0
if (chkLocation.Checked)
{
// Ok, position times height should gives us
// a free spot
ucnext.Top = position * ucnext.Height;
position++;
}
this.Controls.Add(ucnext);
ucnext.BringToFront(); // otherwise we always see control 1
} else
{
// now the FlowLayout takes over all Layout logic
this.flowLayoutPanel1.Controls.Add(ucnext);
}
}
private void button1_Click(object sender, EventArgs e)
{
this.timer1.Enabled = !this.timer1.Enabled;
this.btnStart.Text = this.timer1.Enabled ? "Pause" : "Continue";
}
If we run this we can check and uncheck the options for Location and Adding to the flowlayout to see the various effects of adding controls to either the form directly or the FlowLayout panel.
So keep in mind if you add a control yourself to the Control collection of a Form make sure to set its Location properties (Top, Left) to a suitable value. If you do this wrong your control is going to end up hidden behind another control or is placed outside the visible bounds of the form. If you don't know before hand how many controls you will have consider using one of the container controls, like a FlowLayoutPanel.