How do I provide designer support to a TabControl

Question

I have a user control, which contains both a Panel and a TabControl. I enabled design-time support for both. I can drag/drop controls from the toolbox onto the Panel control that resides within the user control. I can also add and remove tab pages via the designer on the TabControl. However, I am not able to drag/drop any controls onto the tab pages themselves.

Below is the code generated source code for my user control:

partial class TestUserControl
{
    private System.ComponentModel.IContainer components = null;

    protected override void Dispose(bool disposing)
    {
        if (disposing && (components != null))
        {
            components.Dispose();
        }
        base.Dispose(disposing);
    }

    #region Component Designer generated code

    private void InitializeComponent()
    {
        this.tabControl = new System.Windows.Forms.TabControl();
        this.contentPanel = new System.Windows.Forms.Panel();
        this.SuspendLayout();
        // 
        // tabControl
        // 
        this.tabControl.Dock = System.Windows.Forms.DockStyle.Fill;
        this.tabControl.Location = new System.Drawing.Point(0, 0);
        this.tabControl.Name = "tabControl";
        this.tabControl.SelectedIndex = 0;
        this.tabControl.Size = new System.Drawing.Size(306, 118);
        this.tabControl.TabIndex = 0;
        // 
        // contentPanel
        // 
        this.contentPanel.Dock = System.Windows.Forms.DockStyle.Bottom;
        this.contentPanel.Location = new System.Drawing.Point(0, 118);
        this.contentPanel.Name = "contentPanel";
        this.contentPanel.Size = new System.Drawing.Size(306, 73);
        this.contentPanel.TabIndex = 0;
        // 
        // TestUserControl
        // 
        this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
        this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
        this.Controls.Add(this.tabControl);
        this.Controls.Add(this.contentPanel);
        this.Name = "TestUserControl";
        this.Size = new System.Drawing.Size(306, 191);
        this.ResumeLayout(false);

    }

    #endregion

    private System.Windows.Forms.TabControl tabControl;
    private System.Windows.Forms.Panel contentPanel;
}

Below is the source code I added to enable design-time support:

[Designer(typeof(TestUserControlDesigner))]
public partial class TestUserControl : UserControl
{
    [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
    public TabControl TabControl 
    {
        get { return this.tabControl; }
    }

    [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
    public Panel ContentPanel
    {
        get { return this.contentPanel; }
    }

    public TestUserControl()
    {
        InitializeComponent();
    }
}

internal class TestUserControlDesigner : ParentControlDesigner
{
    public override void Initialize(System.ComponentModel.IComponent component)
    {
        base.Initialize(component);

        EnableDesignMode(
            (this.Control as TestUserControl).TabControl, "TabControl");
        EnableDesignMode(
            (this.Control as TestUserControl).ContentPanel, "ContentPanel");
    }
}

What do I need to do, so that I can drag/drop controls onto the tab pages of the TabControl?

Answer 1

You have to enable design mode on the existing tab pages as well:

internal class TestUserControlDesigner : ParentControlDesigner {
    public override void Initialize(System.ComponentModel.IComponent component) {
        base.Initialize(component);
        var ctl = (this.Control as TestUserControl).TabControl as TabControl;
        EnableDesignMode(ctl, "TabControl");
        foreach (TabPage page in ctl.TabPages) EnableDesignMode(page, page.Name);
        EnableDesignMode((this.Control as TestUserControl).ContentPanel, "ContentPanel");
    }
}