How to Load multiple User control dynamically in C#

By FoxLearn 7/20/2024 3:23:45 AM   25.3K
Dynamically loading user controls in a C# Windows Forms Application allows you to create flexible and customizable UIs.

To dynamically load multiple user controls into a panel in a C# Windows Forms application, you can follow these steps

How to load multiple User control dynamically in C#

Open your Visual Studio, then click New Project, then select Visual C# on the left, then Windows and then select Windows Forms Application. Name your project "LoadingUserControl" and then click OK button.

Create a Windows Form that contains the panel where you want to load the user controls.

Drag and drop Panel, Button controls from the Visual Studio toolbox onto your form designer, then design your form as shown below.

user control c#

Create a Windows Form with a Panel control named panel where you want to load the user controls.

Let's say you have 3 user controls named ucModule1, ucModule2 and ucModule3.

Create the user controls that you want to load dynamically into the panel. then you can design the user interface and functionality of the user control as needed.

ucModule1

c# user control

Add code to handle ucModule1 as below

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace LoadingUserControl
{
    public partial class ucModule1 : UserControl
    {
        //Using singleton pattern to create an instance to ucModule1
        private static ucModule1 _instance;
        public static ucModule1 Instance
        {
            get
            {
                if (_instance == null)
                    _instance = new ucModule1();
                return _instance;
            }
        }
        public ucModule1()
        {
            InitializeComponent();
        }
    }
}

ucModule2

c# user control

Add code to handle ucModule2 as below

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace LoadingUserControl
{
    public partial class ucModule2 : UserControl
    {
        //Using singleton pattern to create an instance to ucModule2
        private static ucModule2 _instance;
        public static ucModule2 Instance
        {
            get
            {
                if (_instance == null)
                    _instance = new ucModule2();
                return _instance;
            }
        }
        public ucModule2()
        {
            InitializeComponent();
        }
    }
}

ucModule3

c# user control

Add code to handle ucModule3 as below

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace LoadingUserControl
{
    public partial class ucModule3 : UserControl
    {
        //Using singleton pattern to create an instance to ucModule3
        private static ucModule3 _instance;
        public static ucModule3 Instance
        {
            get
            {
                if (_instance == null)
                    _instance = new ucModule3();
                return _instance;
            }
        }
        public ucModule3()
        {
            InitializeComponent();
        }
    }
}

Use C# code to dynamically load the user controls into the panel. You can handle your main form as shown below.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace LoadingUserControl
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void btnModule1_Click(object sender, EventArgs e)
        {
            //Add module1 to panel control
            if (!panel.Controls.Contains(ucModule1.Instance))
            {
                panel.Controls.Add(ucModule1.Instance);
                ucModule1.Instance.Dock = DockStyle.Fill;
                ucModule1.Instance.BringToFront();
            }
            else
                ucModule1.Instance.BringToFront();
        }

        private void btnModule2_Click(object sender, EventArgs e)
        {
            //Add module2 to panel control
            if (!panel.Controls.Contains(ucModule2.Instance))
            {
                panel.Controls.Add(ucModule2.Instance);
                ucModule2.Instance.Dock = DockStyle.Fill;
                ucModule2.Instance.BringToFront();
            }
            else
                ucModule2.Instance.BringToFront();
        }

        private void btnModule3_Click(object sender, EventArgs e)
        {
            //Add module3 to panel control
            if (!panel.Controls.Contains(ucModule3.Instance))
            {
                panel.Controls.Add(ucModule3.Instance);
                ucModule3.Instance.Dock = DockStyle.Fill;
                ucModule3.Instance.BringToFront();
            }
            else
                ucModule3.Instance.BringToFront();
        }
    }
}

For each button click we will check if it exists in the Panel control, if not we will add it, else we can use the BringToFront method to show it.

You can also create the LoadUserControl to help you dynamically load multiple user control to the Panel.

private void LoadUserControl(Type controlType)
{
    UserControl userControl = (UserControl)Activator.CreateInstance(controlType);
    userControl.Dock = DockStyle.Fill;

    if (!panel.Controls.Contains(userControl))
    {
        panel.Controls.Add(userControl);
        userControl.Instance.Dock = DockStyle.Fill;
        userControl.Instance.BringToFront();
    }
    else
        userControl.Instance.BringToFront();
}

For example to load module1

private void btnModule1_Click(object sender, EventArgs e)
{
    LoadUserControl(typeof(ucModule1));
}

In the form's code, you can use the Controls.Add method to dynamically load multiple user controls into a panel in a C# Windows Forms application.

In this example, LoadUserControl method loads a specified user control type into the panel. Three buttons (btnModule1 , btnModule2 and btnModule3) are used to trigger the loading of ucModule1,  ucModule2 and ucModule3, respectively.

VIDEO TUTORIAL