To separate UI with minimize coding effort, solve smaller problem or
reuse purpose, we usually use sub-form or user control. In this topic, I will
introduce how to call multi User Controls from parent form. With this idea you
can make design UI for many kind of simple apps to enterprise apps. Let's get
started:
1. Create new project:
-
Create new project by select: File > New > Project…
-
Enter
the project name and click OK
2. Add controls
-
In Toolbox, find MenuStrip
control, then add to form.
-
Enter some StripMenuItem, look like:
-
Rename all StripMenuItem like: smiControl01, smiControl02, smiControl03
-
Then, in Toolbox, find Panel
control, add to form. Set this panel Dock
property is Fill or do like this:
-
I named this panel is pnlMain
4. Add UserControls
-
In Solution Explorer, right click on project name, select Add > New Item…
-
Select User Control, named it and click Add
-
Do the same for 3 User Controls
5. Show/Add UserControls to
form
-
Now, let’s do some coding. In
the backend code of the form, create add user control to panel function
private void AddUserControlToPanel(Control ctrl)
{
//Clear all old control
pnlMain.Controls.Clear();
//Add the new control
pnlMain.Controls.Add(ctrl);
//Make control fill in the panel
ctrl.Dock = DockStyle.Fill;
}
-
In each click event of StripMenuItem, call that function with
parameter is the relevant control
private void smiControl01_Click(object sender, EventArgs e)
{
AddUserControlToPanel(new MyControl01());
}
private void smiControl02_Click(object sender, EventArgs e)
{
AddUserControlToPanel(new MyControl02());
}
private void smiControl03_Click(object sender, EventArgs e)
{
AddUserControlToPanel(new MyControl03());
}
-
You can also can call a default
control when load form by call function AddUserControlToPanel in form
constructor
-
Note that, each user control
can treat like a form, so you should do some design user controls before run
check our result.
6.
Resize form
-
You may wanna change the size
of form when control added to make User Control
appear fully
-
Edit the AddUserControlToPanel
function
private void AddUserControlToPanel(Control ctrl)
{
//Clear all old control
pnlMain.Controls.Clear();
//Add the new control
pnlMain.Controls.Add(ctrl);
//Make control fill in the panel
//ctrl.Dock = DockStyle.Fill;
//Change size form
this.ClientSize = new Size(ctrl.Width, ctrl.Height + menuStrip1.Height);
}
-
Make controls are different
size and color then run project
Thank you for reading.
