I have a user control that acts as a container for other controls. My container is quite simple as it contains not much more than a styled panel that contains a TableLayoutPanel
to hold multiple child controls:
MyContainerControl -> Panel -> TableLayoutPanel
Now I want to enable designer support for nesting controls. A quick search reveals that this is possible:
- User Control as container at design time
- http://www.codeproject.com/Articles/37830/Designing-Nested-Controls
However my control differs slightly from the controls in the example. The example controls add the child controls to a Panel, whereas my control shall add the child controls to a TableLayoutPanel (which is incidentially a subclass of Panel).
I thought this should not be much of a problem and started implementing:
[Designer(typeof(ControlListPanel.Designer))]
public partial class ControlListPanel : UserControl
{
[Browsable(false)]
[EditorBrowsable(EditorBrowsableState.Never)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
public TableLayoutPanel LayoutArea
{
get { return this.rootTableLayoutPanel; }
}
// ... more class content ...
public class Designer : ParentControlDesigner
{
public override void Initialize(System.ComponentModel.IComponent component)
{
base.Initialize(component);
if (this.Control is ControlListPanel)
{
this.EnableDesignMode(((ControlListPanel)this.Control).LayoutArea, "LayoutArea");
}
}
}
}
Now I am able to drag and drop controls onto my user control, but looking at the designer file reveals the control was added to the user control itself:
this.controlListPanel1.Controls.Add(this.myChildControl);
I expected it to be added to the table layout:
this.controlListPanel1.LayoutArea.Controls.Add(this.myChildControl);
When I change the LayoutArea
property as follows, the designer does what I expect and adds the child controls to my LayoutArea
property:
[Browsable(false)]
[EditorBrowsable(EditorBrowsableState.Never)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
public Panel LayoutArea
{
get { return this.panel; }
}
(I return the panel instead of the table layout)
Is there something I am missing? Why does the designer not want to add my child controls to the TableLayoutPanel
?