Develop Reference

TableLayoutPanel: How can i navigate with tab key through dynamically added controls?

I have a form which contains a dynamically added TableLayoutPanel, which contains some dynamically added Labels, TextBox, CheckBox. I am obtaining exactly the visualization I would like to have, but I am struggling to get the "tab key" to work for moving from one control to the other.
I have tried to add a:
control.TabIndex = tabIndex++;
control.TabStop = true;
But this doesn't seem to have any impact...
This is the (tested) stub code:
class MyForm : Form
{
public MyForm()
{
InitializeComponent();
string[] titles = {"first","second"};
var myLayout = new TableLayoutPanel();
myLayout.AutoSize = true;
int myTabIndex = 1; //Not really necessary
int rowNumber = 0;
foreach (var title in titles)
{
var label = new Label();
label.Text = title;
myLayout.Controls.Add(label, 0, rowNumber);
var control = new TextBox();
control.TabIndex = myTabIndex++; //Not really necessary
myLayout.Controls.Add(control, 1, rowNumber);
rowNumber++;
}
this.Controls.Add(myLayout);
}
}
This is the window I get, and I am not able to navigate from first to second field using the tab key.
Update:
Applying Visual Studio 2013 Update 5 did not help.

Something must have been corrupted in my project. The best I could do is to move on with a new clean Windows Form project, and everything now is working.

retrieving data from database with dynamic controls

I have made a voting system for our school. I already made an Add, Update, Delete, and retrieving data from database. I have a problem making a dynamic control automatically with the exact amount of data i have in database. For example, I have added pictures to the two Candidates in the position of President, then, I want it to dynamically create a PictureBox in my new form and retrieve the pictures in a 2 pictureboxes and radiobutton for their names under it. Is it possible for me to do it in array? I'm new to programming so bear with me please.
I'm a little bit confused. Can you make an example of it, if possible please.. :)

This should get you going.
Add this code to your form. And you can use this code for any buttons or anything you want. But you should maybe read up on the FlowLayoutPanel or GroupBox to get this to work in reality.
Point _imagePos = new Point(10,10);
int _imageCounter = 1;
private void NewPictureBox(string pathToImg, string imageName)
{
var img = new PictureBox
{
Name = "imageBox" + _imageCounter,
ImageLocation = pathToImg,
Left = _imagePos.X,
Top = _imagePos.Y,
SizeMode = PictureBoxSizeMode.StretchImage,
Height = 50,
Width = 50
};
var txt = new TextBox
{
Text = imageName,
Left = _imagePos.X,
Top = img.Bottom + 10
};
this.Controls.Add(img);
this.Controls.Add(txt);
_imageCounter++;
_imagePos.Y += 10 + img.Height + txt.Height;
}
private void Form1_Load(object sender, EventArgs e)
{
NewPictureBox(#"C:\test\QuestionMark.jpg", "image1");
NewPictureBox(#"C:\test\QuestionMark.jpg", "image2");
}

Form doesn't show anything

I am new to Winforms and C# so this may sound like a stupid question. I have the class shown below for creating a form to be displayed as a modal dialog.
class FrmDelivery : Form
{
ListBox s;
public FrmDelivery()
{
s = new ListBox();
s.DataSource = new List<int>(){1,2,3,4};
s.Update();
s.Show();
}
}
However for some reson when I use the ShowDialogmethod to display this form it doesnt show anything in it. What should I do to add a list box to this form ?
EDIT:
I use the code to display the form:
FrmDelivery frm = new FrmDelivery();
frm.ShowDialog();

One note - WPF uses Windows, not Forms, so I'm not clear why you're deriving from Form rather than Window. But I'll answer as if you were talking about a WPF Window as your "form".
First, something will need to display the Window. Currently, the code provided doesn't show the Window, it attempts to show a ListBox.
Second, you either need to add a LayoutPanel to the window and add your ListBox as a child of the layout panel. Layout Panels come in many flavors, such as Grids and StackPanels and Canvases based on what type of layout you want.
Or, you can set the Content of the Window to be your ListBox. This will mean the only thing on the Window is your ListBox', so if you want multiple visual elements on yourWindow`, you'll need to use a layout panel.
The second approach would look like
this.Content = s;
For the first approach, I'd recommend reading up on Layout Panels in WPF. Here is one tutorial and here is the MSDN topic on layout. A google search will yield many more results.

I suggest you create a new form using Add|New Item|Windows Form.
You will then get a design surface to which you can add a listbox, and generated code which will initialize your form and listbox correctly. In particular your form and listbox will gain default sizes which they don't have currently.
Your code (in say Form1.cs) will then be similar to this:
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
this.listBox1.DataSource = new List<int> { 1, 2, 3, 4 };
}
public int? SelectedValue
{
get
{
return (int?)this.listBox1.SelectedValue;
}
}
}
Plus there will be a load of code in Form1.Designer.cs similar to
....
#region Windows Form Designer generated code
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.listBox1 = new System.Windows.Forms.ListBox();
this.SuspendLayout();
//
// listBox1
//
this.listBox1.FormattingEnabled = true;
this.listBox1.Location = new System.Drawing.Point(30, 37);
this.listBox1.Name = "listBox1";
this.listBox1.Size = new System.Drawing.Size(120, 95);
this.listBox1.TabIndex = 0;
//
// Form1
//
this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
this.ClientSize = new System.Drawing.Size(284, 261);
this.Controls.Add(this.listBox1);
this.Name = "Form1";
this.Text = "Form1";
this.ResumeLayout(false);
}
#endregion
And you could use your form like this:
private void button1_Click(object sender, System.EventArgs e)
{
using (var form = new Form1()) // you should dispose forms used as dialogs
{
if (DialogResult.OK == form.ShowDialog()) // optional (you could have OK/Cancel buttons etc
{
Debug.WriteLine(form.SelectedValue ?? -1);
}
}
}

You should not only add the controls to the collection but also set up his caracteristics.
Size & emplacement, at least.
class FrmDelivery : Form
{
ListBox s;
public FrmDelivery()
{
s = new ListBox();
s.Location = new System.Drawing.Point(0, 0); //relative to the parent control (not an absolute value, so)
s.Name = "listBox1";
s.Size = new System.Drawing.Size(120, 95);
s.DataSource = new List<int>(){1,2,3,4};
this.Controls.Add(s); //it will add it to the form but you can add it to another control, like panel.
}
}
Hope it will help

You need to add the listbox to the controls collection:
ListBox s;
public FrmDelivery()
{
s = new ListBox();
s.DataSource = new List<int>() { 1, 2, 3, 4 };
this.Controls.Add(s);
}
This will get the control onto your form for you, though there are a bunch of other properties you will likely want to set (e.g. to get it looking how you want) - as others have mentioned, you can see how the designer does this in the code behind by putting a listbox onto a form and examining the resulting code.

Please see if you have the InitializeComponent() in the default construct commented out. It usually initializes all the control of the form on FormLoad.

Contacting a dynamically created control

I have created a textBox control on run-time for my winform application. The control appears just find once the form loads up, and works great too. However, I have just run into a problem as I realize I do not know how to write the code to write to a dynamically created control.
Let's assume I have created a button (named "Button1") on design time. In Button1's click event, (Button1_Click), I would like to write the word "Hello" to a textBox control that won't be created until the application is executed. Some code below:
C# Code:
// Create the textBox control
TextBox new_textBox = null;
int x = 10;
int y = 10;
int xWidth = 300;
int yHeight = 200;
new_textBox = new TextBox();
new_textBox.Text = controlText;
new_textBox.Name = "textBox" + controlName;
new_textBox.Size = new System.Drawing.Size(xWidth - 10, yHeight - 10);
new_textBox.Location = new Point(x, y);
new_textBox.BringToFront();
new_textBox.Multiline = true;
new_textBox.BorderStyle = BorderStyle.None;
// Add the textBox control to the form
this.Controls.Add(new_textBox);
The Problem:
From Button1_Click event, I cannot get in contact with a control that has not even been created yet. Thus, Visual Studio will throw an obvious error that the control does not exist (because it doesn't).
So, is there some way to dynamically call a control, and more
specifically, a textBox control?
Thank you for any help on the matter,
Evan

Declare the new_textBox at class scope. Then the compiler can access it. For example:
class MyForm
{
TextBox new_textBox;
void InitializeTextBox()
{
new_textBox = new TextBox();
// initialization code here
// Add it to the form
this.Controls.Add(new_textBox);
}
void Button1_Click(...)
{
new_textBox.Text = "clicked";
}

You can make the new_textBox a class member (member of the form). You can again assign it a value and add to the forms controls later dynamically.
It would be a good practice to check if is null in the buttonClick event, though.

Dynamic and Immutable UIElement Arrays

I have a WrapPanel that contains multiple Canvas of the same size. Each Canvas has some UIElements (i.e. TextBox, TextBlock, Buttons etc) as children. The creation of each Canvas (including its UIElement children) and the number of Canvas to be created are all done in run-time code behind (no XAML).
Initially I did the following, which works:
// declare as class properties, so all function can access them
WrapPanel wp = new WrapPanel();
Canvas[] cv = new Canvas[500];
TextBox[] tb = new TextBox[500];
// A function (e.g. a Button_Click event) that generates multiple Canvas in a WrapPanel
for (int i = 0; i<myInt; i++)
{
cv[i] = new Canvas();
tb[i] = new TextBox();
cv[i].Children.Add(tb[i]);
wp.Children.Add(cv[i]);
}
The above code is straight forwards works OK - Until I implement add, minus and destroy buttons where I could
1. Add an additional `Canvas` on a click event
2. Remove the last `Canvas` on a click event
3. Destroy a specific `Canvas` in the `WrapPanel` on a click event (may ba a little cross icon in each `Canvas`)
If I process some combination of the above 3 actions, I could easily create UIElements of the same index or create Canvas that goes out of the range of what it had been declared initially.
I looked into List however, each Canvas have different properties (each also has UIElement Children with different properties) and I can't figure out how List would solve it. A way for me to go around that is to declare a super large Array size for Canvas (e.g. Canvas[] cv = new Canvas[99999] but I though that's not very efficient.
Also, if I use List, how could I change properties of a specific UIElement after the they are generated? E.g. If i add 10 Canvas and add to List, and after they are all generated, I need to select the 5th Canvas and change a TextBox.Text, how do I access it like I did in an Array (i.e. tb[5].Text = "Hello")?
Can anyone show me some approaches to this problem?

Just a direct translation on how to do this with a list instead below. Given your code I don't know why you want to keep track of the canvas and textbox'es in a list - you can just access the children collection of the WrapPanel directly instead - let's assume you do need these separate collections for now.
WrapPanel wp = new WrapPanel();
List<Canvas> cvList = new List<Canvas>();
List<TextBox> tbList = new List<TextBox>();
public void Init()
{
int myInt = 500;
// in a function (e.g. a Button_Click event) to generate the multiple Canvas in a WrapPanel
for (int i = 0; i < myInt; i++)
{
Canvas cv = new Canvas();
TextBox tb = new TextBox();
cv.Children.Add(tb);
wp.Children.Add(cv);
cvList.Add(cv);
tbList.Add(tb);
}
}
public void AddCanvas()
{
Canvas cv = new Canvas();
TextBox tb = new TextBox();
cv.Children.Add(tb);
wp.Children.Add(cv);
cvList.Add(cv);
tbList.Add(tb);
}
public void RemoveCanvas()
{
wp.Children.RemoveAt(wp.Children.Count-1);
cvList.RemoveAt(cvList.Count - 1);
tbList.RemoveAt(cvList.Count - 1);
}
Edit for added comment:
E.g. If i add 10 Canvas, and after
they are all generated, I need to
select the 5th Canvas and change a
TextBox.Text, how do I access it like
I did in an Array (i.e. tb[5].Text =
"Hello")?
You can just access the children directly. You know you only added Canvas elements to your WrapPanel. So you could do (wp is the WrapPanel again):
TextBox textbox = (wp.Children[5] as Canvas).Children[0] as TextBox;
textbox.Text = "Hello";

Just operate directly on the WrapPanel's Children collection.
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
AddCanvasToWrapPanel(this.TestWrapPanel);
RemoveLastCanvasFromWrapPanel(this.TestWrapPanel);
AddCanvasToWrapPanel(this.TestWrapPanel);
DestroyCanvasAtWrapPanelIndex(this.TestWrapPanel, 0);
}
private void AddCanvasToWrapPanel(WrapPanel wp)
{
TextBox t = new TextBox();
Canvas c = new Canvas();
c.Children.Add(t);
wp.Children.Add(c);
}
private void RemoveLastCanvasFromWrapPanel(WrapPanel wp)
{
wp.Children.RemoveAt(wp.Children.Count - 1);
}
private void DestroyCanvasAtWrapPanelIndex(WrapPanel wp, int index)
{
wp.Children.RemoveAt(index);
}
}
}