title: Custom GroupBox control with other controls inside
body: <p>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.</p>
  
  <p>Now I need a custom GroupBox which has these elements:</p>
  
  <ul>
  <li><p>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.)</p></li>
  <li><p>A Label in that FlowLayoutPanel to describe the step.</p></li>
  <li><p>A Button to go back.</p></li>
  <li><p>Another FlowLayoutPanel that user can put custom buttons in.</p></li>
  </ul>
  
  <p>Here is a preview:</p>
  
  <p><img src="https://i.stack.imgur.com/wCZxf.png" alt="Preview of what the custom GroupBox should look like."></p>
  
  <h1>Problem #1</h1>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/fE73V.png" alt="The error."></p>
  
  <h1>Problem #2</h1>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/iY88l.png" alt="Movers and resizers on the FlowLayoutPanels."></p>
  
  <h1>Problem #3</h1>
  
  <p>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?</p>
  
  <p><img src="https://i.stack.imgur.com/tUtti.png" alt="Control positions with different Anchor values."></p>
  
  <p>All of your answers will help me build the open source project <a href="https://github.com/AlicanC/Magician" rel="nofollow noreferrer">Magician on GitHub</a> and many other open source projects powered by it. Thanks in advance for all of your efforts.</p>