Unable to reuse the same layout in a new form

Question

Unable to reuse the same layout in a new form. I've created a CustomControl inherited from ContainerControl and added items in it. However, I'm encountering difficulties when attempting to use it in another form.

I want to use the below in a new form.

I have copied the above layout and pasted it into a new form, but the items are not placed in the new form.

Code Snippets for your reference:

public class MyCustomControl : ContainerControl
{
    TabControl tabControl;
    private bool isItemsAdded = false;
    private List<TabPage> _buttons = new List<TabPage>();

    [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
    public List<TabPage> Items
    {
        get
        {
            return _buttons;
        }
        set
        {
            _buttons = value;
        }
    }

    public MyCustomControl()
    {
        BackColor = Color.LightGray;
        tabControl = new TabControl();
        tabControl.Dock = DockStyle.Fill;
        this.Controls.Add(tabControl);
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        base.OnPaint(e);

        // Draw custom content here
        if (Items.Count >= 2 && !isItemsAdded)
        {
            for (int i = 0; i < Items.Count; i++)
            {
                tabControl.TabPages.Add(Items[i]);
            }
            isItemsAdded = true;
        }
    }
}

Answer 1

Hi @Vignesh , Welcome to Microsoft Q&A,

You have cognitive biases in how you use it, and normally custom controls are used to customize specific controls.

For a combination of controls, we usually use usercontrol. After compiling it, we can use it by dragging and dropping it directly in the toolbox.

For details, please refer to https://learn.microsoft.com/en-us/dotnet/api/system.windows.forms.usercontrol?view=windowsdesktop-8.0.

Best Regards,

Jiale

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". 

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

To copy the layout of a custom control, you need to create a designer. Refer to the System.Design assembly and write the code below.

using System;
using System.ComponentModel;
using System.ComponentModel.Design;
using System.Windows.Forms;
using System.Windows.Forms.Design;

public class MyCustomControlDesigner : ParentControlDesigner
{
    public MyCustomControlDesigner() { }

    public override void Initialize(IComponent component) {
        base.Initialize(component);
        MyCustomControl control = (MyCustomControl)component;
        EnableDesignMode(control.TabControl, "TabControl");
    }
}

public class TabPageCollectionEditor : CollectionEditor
{
    public TabPageCollectionEditor()
        : base(typeof(TabControl.TabPageCollection)) {
    }

    protected override object CreateInstance(Type itemType) {
        object obj = base.CreateInstance(itemType);
        TabPage tabPage = obj as TabPage;
        tabPage.UseVisualStyleBackColor = true;
        return tabPage;
    }
}

Inherits the ParentControlDesigner class and enables the designer for the inner TabControl. TabPageCollectionEditor is required to make UseVisualStyleBackColor = true; when adding a TabPage.

Next, use the designer when designing your custom control. Note that instead of serializing the Items property, you need to serialize the TabControl's Controls property.

using System.ComponentModel;
using System.Drawing;
using System.Drawing.Design;
using System.Windows.Forms;

[Designer(typeof(MyCustomControlDesigner))]
public class MyCustomControl : ContainerControl
{
    private readonly TabControl tabControl;

    public MyCustomControl() {
        BackColor = Color.LightGray;
        tabControl = new TabControl();
        tabControl.Dock = DockStyle.Fill;
        Controls.Add(tabControl);
    }

    [Browsable(false)]
    public TabControl TabControl {
        get { return tabControl; }
    }

    [DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]
    [Editor(typeof(TabPageCollectionEditor), typeof(UITypeEditor))]
    public TabControl.TabPageCollection Items {
        get {
            return tabControl.TabPages;
        }
    }

    [Browsable(false)]
    [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
    public ControlCollection TabChildren {
        get {
            return tabControl.Controls;
        }
    }
}