Click here to Skip to main content
15,867,308 members
Articles / Programming Languages / C#
Article

Creating an Extensible User Interface with .NET, Part 1

Rate me:
Please Sign up or sign in to vote.
4.68/5 (36 votes)
15 Dec 20024 min read 204.9K   726   217   37
An architecture for extending the User Interface of a program via plug-in components.

Introduction

Many times it can be desirable to extend or enhance the User Interface (UI) of a program after it has been deployed. Usually this means redeploying the entire application. This document describes a “plug in” architecture that allows for the UI to be extended at any time. An example of a program with an extensible UI is the Microsoft Management Console (MMC) and its associated snap-ins.

Overview

There is one main requirement that your program must meet before this architecture can be considered.

  • There should be NO interaction between UI plug-ins. This does not mean they cannot share a common data structure or business objects, but each UI plug-in should not try to make direct calls to other plug-ins.

In this architecture all UI elements are contained in a set of plug-ins based upon the System.Windows.Forms.UserControl class. All plug-ins are described in a configuration file, and loaded at runtime. Extending the UI is accomplished by creating a new plug-in and adding the appropriate entries to the config file.

Some of the advantages of this architecture are:

  • Independent development of different UI elements. For example, if you are developing a Personal Information Manager (PIM), one person could be working on the "Appointments/Calender" UI, while another works on the "Contacts" UI.
  • Application control. You could restrict the functionality of the application based upon the user's name or the user's roll or purchased options.
  • You can add new UI elements at any time. In the PIM example above, you could add a "Diary" UI after the application has been distributed.

The architecture consists of 3 parts:

  1. A “shell” application that handles the loading and navigation between the plug-ins.
  2. A base class that supplies all communications between the “shell” and the plug-ins.
  3. The individual UI plug-ins themselves.

The shell

At startup the shell application reads a configuration file to get the names and locations for each UI plug-in. It then uses reflection to load each plug-in. In the screen shots below, the Shell application contains a ListBox used to navigate between plug-ins, and a Panel in which the plug-ins are loaded.

Here is an example of a “shell” with 2 plug-ins loaded. The ListBox on the left is used to select between each plug-in, while the panel on the right will display the plug-in when it is made visible.

Image 1

Clicking on "PlugIn1" made the plug-in visible.

Image 2

And then clicking on "PlugIn Number 2" makes it visible in the panel.

Image 3

The Tabbed Shell application shows another way of navigation:

Here is the Tabbed Shell after it has been loaded.

Image 4

And here it is after "PlugIn Number 2" has been selected.

Image 5

How the Shell finds the plug-ins.

The plug-ins to be loaded at runtime are listed in an XML file named config.xml.

XML
<?xml version="1.0" encoding="utf-8" ?>
<PlugIns>
  <PlugIn Location="E:\ExtensibleUI\OurControls\bin\Debug\OurControls.dll" 
        Name="OurControls.PlugIn1"></PlugIn>
  <PlugIn Location="E:\ExtensibleUI\OurControls\bin\Debug\OurControls.dll" 
        Name="OurControls.PlugIn2"></PlugIn>
</PlugIns>

In the form load event, the config.xml file is loaded into a DataSet via ReadXml. Then it iterates each DataRow calling AddPlugin with the “location” and “name” of the plug-in.

C#
private void Form1_Load(object sender, System.EventArgs e)
{
    DataSet ds = new DataSet();
    ds.ReadXml("Config.xml");
    foreach(DataRow dr in ds.Tables["Plug-In"].Rows)
    {
        AddPlugIn(dr["Location"].ToString(),
            dr["Name"].ToString());
    }
}

Two examples of the AddPlugIn code.

The AddPlugIn loads the assembly containing the plug-in and creates an instance of it. It also adds the plug-in to the ListBox. When a new item in the list box is selected, we need to hide the current plug-in, and show the new selection.

C#
// Load and add a plug-in to the panel1 control
// Also set the list box to navigate between plugins.
private void AddPlugIn(string Location, string ControlName)
{
    Assembly ControlLib;
    PlugIn NewPlugIn;
    // Load the assembly.
    ControlLib = Assembly.LoadFrom(Location);

    // Now create the plugin.
    NewPlugIn = (PlugIn)ControlLib.CreateInstance(ControlName);
    NewPlugIn.Location = new System.Drawing.Point(0, 0);
    NewPlugIn.Dock = DockStyle.Fill;
    NewPlugIn.Visible = false;
    // Add it to the panel, note that its Visible property is false.
    panel1.Controls.Add(NewPlugIn);
    // Set up the ClickHandler
    NewPlugIn.Clicked += new PlugInLib.ClickHandler(Control_Clicked);
    // Add the plugin to the listBox, listBox will use ToString to
    // get the text to display.
    listBox1.Items.Add(NewPlugIn);

}

private PlugIn CurrentPlugIn;

// When a new item in the listBox is selected,
// hide the current plugin and show the new.
private void listBox1_SelectedIndexChanged(object sender, 
                                           System.EventArgs e)
{
    if(CurrentPlugIn!=null)
    {
        CurrentPlugIn.Visible = false;
    }
    CurrentPlugIn = (PlugIn)listBox1.SelectedItem;
    CurrentPlugIn.Visible = true;
}

The AddPlugIn for the Tabbed Shell application is only slightly different. The Tabbed Shell application needs no navigation code because it is handled by the TabControl.

C#
// Load and add a plug-in to the TabControl1 control
private void AddPlugIn(string Location, string ControlName)
{
    Assembly ControlLib;
    PlugIn NewPlugIn;
    // Load the assembly.
    ControlLib = Assembly.LoadFrom(Location);

    // Now create the plugin.
    NewPlugIn = (PlugIn)ControlLib.CreateInstance(ControlName);
    NewPlugIn.Location = new System.Drawing.Point(0, 0);
    NewPlugIn.Dock = DockStyle.Fill;
    NewPlugIn.Visible = true;
    // Create a new TabPage.
    TabPage newPage = new TabPage();
    // Set the text on the tabPage with the PlugIn Caption.
    newPage.Text = NewPlugIn.Caption;
    // Add the PlugIn to the TabPage.
    newPage.Controls.Add(NewPlugIn);
    // Add the page to the tabControl.
    tabControl1.TabPages.Add(newPage);
    // Set up the ClickHandler
    NewPlugIn.Clicked += new PlugInLib.ClickHandler(Control_Clicked);
}

The PlugIn base blass

The PlugIn base class is based upon the System.Windows.Forms.UserControl class and extends it to provide predefined events, methods, and properties that each plug-in can use to communicate with the shell applications. In this example a Clicked event, a Caption property, and a TestFunction method are predefined. In addition, ToString is overridden to return the Caption instead of the object name.

C#
using System;
using System.Windows.Forms;

namespace PlugInLib
{
    /// <summary>
    /// A delegate type for hooking up notifications.
    /// </summary>
     public delegate void ClickHandler(object sender, EventArgs e);
    /// <summary>
    /// Summary description for PlugIn.
    /// </summary>
    public class PlugIn : System.Windows.Forms.UserControl
    {
        // The following provides "Clicked" event back to the container.
        public event ClickHandler Clicked;
        protected void DoClick(EventArgs e)
        {
            if (Clicked != null)
                Clicked(this, e);
        }
        // Provide a "Caption" that the container can display.
        protected string m_Caption = "PlugIn";
        public string Caption
        {
            get
            {
                return m_Caption;
            }
            set
            {
                m_Caption = value;
            }
        }
        public override string ToString()
        {
            return m_Caption;
        }

        // Provide a method "TestFunction" that the container can call.
        public virtual void TestFunction()
        {
        }
    }
}

Creating a UI plug-in.

  1. Use Visual Studio to create a new “Windows Control Library”.
  2. Add a reference to the PlugInLib that contains the plug-in base class.
  3. Change the name of the user control from UserControl1 to something more descriptive.
  4. Add the using directive for the PlugInLib.
  5. Change the base class for the user control from System.Windows.Forms.UserControl to PlugIn.
  6. Connect any events that you want to send to the shell applications.
  7. Add the necessary overrides for calls from the shell to the plug-in.
  8. Construct your UI as you would for any other UserControl.
C#
using System;
using System.Collections;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Windows.Forms;
using PlugInLib;            // <---Add using for the plug-In base class

namespace OurControls
{
    /// <summary>
    /// Summary description for PlugIn3.
    /// </summary>
    public class PlugIn3 : PlugIn    // <---Change base class to PlugIn
    {
        /// <summary> 
        /// Required designer variable.
        /// </summary>
        private System.ComponentModel.Container components = null;

        public PlugIn3()
        {
            // This call is required by the Windows.Forms Form Designer.
            InitializeComponent();

            // TODO: Add any initialization after the InitForm call

        }

        /// <summary> 
        /// Clean up any resources being used.
        /// </summary>
        protected override void Dispose( bool disposing )
        {
            if( disposing )
            {
                if(components != null)
                {
                    components.Dispose();
                }
            }
            base.Dispose( disposing );
        }

        #region Component Designer generated code
        /// <summary> 
        /// Required method for Designer support - do not modify 
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            // 
            // PlugIn3
            // 
            this.Caption = "PlugIn 3";
            this.Name = "PlugIn3";
            this.Click += new System.EventHandler(this.PlugIn3_Click);

        }
        #endregion

        // Override Base class to receive call from the shell.
        public override void TestFunction()
        {
            Console.WriteLine("TestFunction called by the shell.");
        }

        // Send clicks to the shell, just because we can.
        private void PlugIn3_Click(object sender, System.EventArgs e)
        {
            DoClick(e);
        }
    }
}

Conclusions

With this architecture, the interaction between the plug-ins and the shell should be well defined and limited. In the PlugIn base class example shown above, the only real interaction between the shell and plug-in is the Caption property. Another possible interaction would be for the shell to load a common data structure that is passed to each plug-in when it is loaded.

You can add new plug-ins at any time, simply by creating a new plug-in and adding the appropriate entries to the config.xml file.

Notes

In the demo zip available in the downloads section, config.xml file is located in both the Release and Debug directories of the two "Shell" applications. These files contain the absolute pathname to the OurControls.dll including a drive letter. You will need to modify these paths for your local system.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United States United States
I am a senior software developer located in Phoenix, AZ. I have a wide range of experience using Microsoft development technologies and have clung to the bleeding edge of their developments tools since Windows 3.1. I am now lacerating myself on .Net.

I am currently available for any contract or permanent assignments.

Comments and Discussions

 
Generalhelp neede!!! Pin
er.atirek16-Jun-09 6:56
er.atirek16-Jun-09 6:56 
JokeRe: help neede!!! Pin
smslt15-Oct-09 1:46
smslt15-Oct-09 1:46 
GeneralDesigner support for plugins Pin
waveangle10-Dec-05 22:19
waveangle10-Dec-05 22:19 
QuestionWhy require a config file? Pin
Greg Donovan26-Aug-05 15:06
Greg Donovan26-Aug-05 15:06 
AnswerRe: Why require a config file? Pin
Keith Jacquemin27-Aug-05 6:04
Keith Jacquemin27-Aug-05 6:04 
GeneralDependencies Pin
BigBenDk27-Jul-05 5:39
BigBenDk27-Jul-05 5:39 
GeneralRe: Dependencies Pin
Keith Jacquemin27-Jul-05 14:44
Keith Jacquemin27-Jul-05 14:44 
GeneralRe: Dependencies Pin
BigBenDk2-Aug-05 1:39
BigBenDk2-Aug-05 1:39 
GeneralRe: Dependencies Pin
richerm22-Sep-05 3:01
richerm22-Sep-05 3:01 
Generalhelp needed Pin
raghavendra .K27-Feb-05 18:11
raghavendra .K27-Feb-05 18:11 
General?how to create database connection inside of DLL Pin
MBCMDR15-Oct-04 7:54
MBCMDR15-Oct-04 7:54 
GeneralOurControls Pin
dbay15-Oct-04 9:08
dbay15-Oct-04 9:08 
GeneralRe: OurControls Pin
MBCMDR5-Oct-04 9:16
MBCMDR5-Oct-04 9:16 
GeneralRe: OurControls Pin
Keith Jacquemin5-Oct-04 19:28
Keith Jacquemin5-Oct-04 19:28 
GeneralRe: OurControls Pin
dbay16-Oct-04 5:37
dbay16-Oct-04 5:37 
GeneralAccess error when loading the plug-in Pin
sivankoil23-Jul-04 7:04
sivankoil23-Jul-04 7:04 
GeneralYet Another Alternative Pin
mooman_fl17-Mar-04 19:11
mooman_fl17-Mar-04 19:11 
GeneralRe: Yet Another Alternative Pin
Keith Jacquemin18-Mar-04 18:34
Keith Jacquemin18-Mar-04 18:34 
GeneralGlobalization Pin
17-Aug-03 1:32
suss17-Aug-03 1:32 
GeneralRe: Globalization Pin
Keith Jacquemin18-Aug-03 5:44
Keith Jacquemin18-Aug-03 5:44 
GeneralRe: Globalization Pin
Keith Jacquemin18-Aug-03 14:11
Keith Jacquemin18-Aug-03 14:11 
GeneralThank you Pin
dbystrov8-Jul-03 2:11
dbystrov8-Jul-03 2:11 
Generalunload the plug-in Pin
nullpointer6-Apr-03 4:48
nullpointer6-Apr-03 4:48 
GeneralRe: unload the plug-in Pin
Keith Jacquemin7-Apr-03 7:04
Keith Jacquemin7-Apr-03 7:04 
QuestionWriting the config? Pin
JohnGH18-Mar-03 1:47
JohnGH18-Mar-03 1:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.