Recreate a group of Controls

Question

Let\'s say that I have a panel with like... 3 controls in it. I may end up adding more controls to it or changing the positioning within that panel. When the program starts,

Answer 1

You will have to do it in code and therefore it'll be as nice as you can code ;-)

Seriously the course most often taken is to

• create a UserControl which is a class related to a form, with the layout you want..
• ..and add more and more instances of it..
• ..often to a FlowLayoutPanel, often with AutoScroll

This is pretty nice and simple imo.

Here is a short walk-though..:

• first we start, as usual, by picking a nice name for the UserObject class, maybe 'DataPanel' or 'BookItem'..
• Next we create it: Go to the project explorer and right-click, choosing Add-New UserControl and give it the class name you chose. I'll use 'BookItem'.
• Now you can see the Designer showing you a small empty control.
• Look closer: You can also see that in the project explorer ther is now not only the new 'BookItem.cs' file but also the complementary 'BookItem.Designer.cs' and even a 'BookItem.resx' file; so this works very much like creating a new Form..
• Let's add a few controls from the toolbox, I chose to add a PictureBox, four Labels and a NumericUpDown.
• Have a look at the BookItem.Designer.cs file: Here you can see the very things you see in a Form.Desginer.cs file: All settings and all declarations for all controls you add to the layout. Note especially the declarations (at the bottom of the file): Just like for a Form, all controls by default are declared as private!
• We can now work on the layout and script the controls. We also can add functions and properties to the UC, just like a Form.
• Please note: Anything you need to access from outside, read from your form or its methods must be public! So if you want to access the NUpDown, let call it 'nud_quantity' you have a choice
  • You can change its declaration in the BookItem.Designer.cs from private to public or in the Designer by changing the Modifiers property
  • Or you can write a public function in the UC to get/set its value

• Chosing between those two ways is a matter of taste; if other developers will work with the UC class, it will probably be better to put close control over what you expose by writing access methods.

• After you have compiled the project you can see the new UC in the Toolbox.

• You can now either add it from the Toolbox or
• you can add it in code like any control you create dynamically.

Let's look at an example:

Imagine a simple order system in a bookstore: The customer has done a search on the books in our store and is presented with a list of books in a DataGridView 'dgv_bookList', readonly, multiselect. To the right there is a FlowLayoutPanel 'flp_cart' represeting a shopping cart. And we have a command button 'cb_addItems' to add selected books to the cart.

The Button might be scripted like this:

private void cb_addItems_Click(object sender, EventArgs e)
{
    if (dgv_bookList.SelectedRows.Count <= 0) return;

    foreach (DataGridViewRow row in dgv_bookList.SelectedRows)
    {
        BookItem book = new BookItem (row);
        book.label1.Text = "#00" + book.label1.Text;
        book.Name = book.label1.Text;
        flp_cart.Controls.Add(book);

    }
}

This will add one BookItem for each selected row in the DGV.

A few things to note on the above code:

I pass a DataGridViewRow into the constructor of the UC so it can directly set its labels! This means that, in addition to the parameterless contructor the desginer has built for us, we need to write a second contructor, maybe like this:

public bookItem()
{
    InitializeComponent();
}

public bookItem(DataGridViewRow bookData)
{
    InitializeComponent();
    label1.Text = bookData.Cells[0].FormattedValue.ToString();
    label2.Text = bookData.Cells[1].FormattedValue.ToString();
    label3.Text = bookData.Cells[2].FormattedValue.ToString();
    label4.Text = bookData.Cells[3].FormattedValue.ToString();
}

Instead you could write a public setData(DataGridViewRow bookData) function.

Also note how stupid my labels are named! You can do better than that, I hope!

Also note how I access 'label1' and modify its Text from a Button in the Form; to do that I had to change its declaration in the Desginer.cs file:

private System.Windows.Forms.PictureBox pb_cover;
public System.Windows.Forms.Label label1;          // <<----expose this label !
private System.Windows.Forms.Label label2;
private System.Windows.Forms.Label label3;
private System.Windows.Forms.Label label4;
private System.Windows.Forms.NumericUpDown numericUpDown1;

Often preferrable: An access function, maybe like this:

public int quantity() { return (int) numericUpDown1.Value; } 

Or, of course a Property:

public int quantity {  get { return (int)numericUpDown1.Value;  }  }

Also note, that I set the Name of the BookData item to some variant of the 1st data item, my book id. This might as well, or better, happen in the constructor; and there should be a check to prevent adding the same item twice..

All in all one can say, that using UserControls is very much like working with Forms, including all the usual ways or tricks for inter-form communication: keep references, expose members, create properties and functions..

One final Note: Like with forms or subclassed controls there is one catch: By placing them in the designer, you assign the designer the responsiblity to display your UC during design time.

This is normally just fine; however it is also possible to introduce subtle mistakes which make it impossible for the designer to display the control. You need to correct these problems before the designer will be able to show a control or any form that contains it. Let have a look at a simple example of such a problem:

Let's script the Paint event of the PictureBox 'pb_cover' in the UC:

public Brush myBrush = null;

private void pb_cover_Paint(object sender, PaintEventArgs e)
{
    if (pb_cover.Image == null)
    {
        Size  s = pb_cover.ClientSize;
        e.Graphics.FillRectangle(myBrush, 0, 0, s.Width, s.Height);
        e.Graphics.DrawLine(Pens.Red, 0, 0, s.Width, s.Height);
        e.Graphics.DrawLine(Pens.Red, s.Height, 0, 0, s.Width);
    }
}

And let's modify the code in the Add button:

 BookItem book = new BookItem (row);
 book.label1.Text = "#00" + book.label1.Text;
 book.myBrush = Brushes.OliveDrab;
 flp_cart.Controls.Add(book);

Now, if you run the program all will be fine. Even if you try to look at the UC in the designer there may or may not be problems. But once you try to open a Form on which the UC was placed, the Desginer will crash and tell you that it can't work, since the Brush is null. Here the remedy is simple: add a default value to the Brush declaration and all is well. Other situations may need a little more thinking..

I don't even run into the problem btw, since I have not placed an instance of BookItem on the Form; they are only created in the Add Button..

I hope that gets you started!