Custom GroupBox control with other controls inside

Question

I didn't like any available solutions so I started to make my own wizard interface. I use a GroupBox for each step of the wizard but since every step (every GroupBox) must have the same structure and style, I decided to use custom controls.

Now I need a custom GroupBox which has these elements:

• A FlowLayoutPanel so the developer can put desired controls in it using the designer. (For example two TextBox controls so the user can enter a username and a password.)

• A Label in that FlowLayoutPanel to describe the step.

• A Button to go back.

• Another FlowLayoutPanel that user can put custom buttons in.

Here is a preview:

Problem #1

When I create a new UserControl and make it inherit the GroupBox, I can't get a GroupBox that I can put and position stuff in it. All I see in the designer is this message:

Problem #2

Since I couldn't make it inherit GroupBox like I wanted it to, I tried doing it by putting a GroupBox in the custom UserControl. (I don't want this. I just did this so I could provide some screenshots.) After I did that, I had to EnableDesignMode on the FlowLayoutPanels so the developer could add controls in them by using the designer. The problem is that they also became movable and resizable (I don't want this. They are anchored properly and they should not be moved nor resized.) and when you try to move them you get "Object reference not set to an instance of an object." which is making it uglier:

Problem #3

I want elements in the main FlowLayoutPanel to be centered. To do this, I had to put a control (the description label) and resize it to the width of the FlowLayoutPanel so the controls after it would be centered. (Messy workaround if you ask me. Doing this with TableLayoutPanel looked easier but their cells can only hold one element. You can add a Panel to make the cell hold more elements but then you lose centering.) The problem is that I have to set Anchor to None for every control I add. Can I hook something (like OnDesignerControlAdded???) to automatically set added control's Anchor to None?

All of your answers will help me build the open source project Magician on GitHub and many other open source projects powered by it. Thanks in advance for all of your efforts.

Answer 1

Quick answer for problem #1:

Design your groupbox (GroupBox1) on a Form or a UserControl (it doesn't matter).

Go to InitializeComponent() in the designer.cs file and copy all code related to the groupbox and its child controls.

Add a new Custom Control called CustomGroupBox to the project.

Change it to inherit from GroupBox:

public partial class CustomGroupBox : GroupBox

Paste all the copied code into the constructor of CustomGroupBox (or into a new method, which you call from the constructor after InitializeComponent(), if you want to be neat).

Remove all occurrences of this. from the pasted code. Replace all occurences of GroupBox1 with this.

For any child controls you want the developer to have access to, add a public property for that control.

E.g.

    public FlowLayoutPanel FLP
    { 
        get { return flowLayoutPanel1; } 
    }

And of course add your CustomDesigner

    public class CustomGroupBoxDesigner : ControlDesigner
    {
        public override void Initialize(IComponent component)
        {
            base.Initialize(component);
            var c = component as CustomGroupBox;
            EnableDesignMode(c.FLP, "FLP");
        }
    }

And apply the attribute

[Designer(typeof(CustomGroupBoxDesigner))]
public partial class CustomGroupBox : GroupBox