Wizard Control based on TabControl

By Som Shekhar, 3 May 2010

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Introduction

EZWizard is a wizard control that generates wizard pages from tabcontrol tabpages.

Background

I was trying to create a business application and there was a need of a wizard control. My requirement was to place various controls in different positions and hence I needed a GUI for my wizard. I was using TabControl for this purpose, but then I created this control which transforms the tabcontrol into a wizard.

Why Another Wizard

TabControl is a very interesting control. It provides Page support which doesn't exist in any other control. I wanted to utilize its paging capability and automate the process of display as a Wizard. The earlier idea was to show one tabpage at once. But it was easier to copy paste the controls to background panel. If you need a sophisticated wizard control with multiple capabilities, you can use any other wizard available on CodeProject. This wizard provides a very simple interface which is available for modification.

How It Works

The Wizard Control is basically a Form with three sections.

Top Area - This area contains two labels. The first label is the Title of the wizard. It should be changed manually. It can further be decorated as you like. The second label is to show the step on which the wizard is at. This is changed at run time based on the currently displayed tabpage.

Middle Area - The most important area of all. It contains a Panel and a TabControl. The TabControl is where the controls (to be displayed at runtime) are added at design time. Different pages of the TabControl make the various pages of the wizard. This is achieved by a simple method:

private void SetCurrentTab(int currentIndex)
{
    if (currentPanelIndex > -1) //remove all old controls back to tabcontrol
    {
        int count = m_panelContainer.Controls.Count;

        for (int i = count - 1; i >= 0; i--)
        {
            Control control = m_panelContainer.Controls[i];
            m_panelContainer.Controls.Remove(control);
            tabControl.TabPages[currentPanelIndex].Controls.Add(control);
        }
    }

    {
        int count = tabControl.TabPages[currentIndex].Controls.Count;
        m_labelSubtitle.Text = (currentIndex + 1) + " : " + 
           	tabControl.TabPages[currentIndex].Text;
        for (int i = count - 1; i >= 0; i--)
        {
            Control control = tabControl.TabPages[currentIndex].Controls[i];
            tabControl.TabPages[currentIndex].Controls.Remove(control);
            m_panelContainer.Controls.Add(control);
        }

        currentPanelIndex = currentIndex;
    }
}

The first part of the method removes the controls from the panel to the previous tabpage while the next part of the method copies the controls from the next tabpage to panel.

Bottom Area - This is where the Navigation Buttons are. When you click on the Next or Back button, they call for condition checking methods ( NextButtonClicked or BackButtonClicked). If the condition method is returned as true, the next tabpage is copied to the panel.
Whenever a tabpage is changed, the second label text is changed based on new tabpage's Text property.
```
m_labelSubtitle.Text = (currentIndex + 1) + " : " + 
	tabControl.TabPages[currentIndex].Text;  
```

Using the Code

Just copy the EZWizard.zip file to your template directory to be able to add new wizards into your application. Steps to do that are available here.

Step 1

Simply add a new wizard to your application using "Add New Item" method. You can change the name and formatting of the title. You can also change the background of the panel if you wish to do so.

Step 2

Add TabPages to the tabControl in the middle to add pages into the wizard. Further, place controls on these pages as they should be shown on different pages of the wizard.

By default, all the items in the tab pages are laid out exactly in the same layout on the wizard.

Step 3

In order to load any data before the wizard is loaded, you can use the LoadData method. If you wish, you can also place this method on OnLoad event.

To add any condition for the movement of pages, you can use the methods: NextButtonClicked and BackButtonClicked.

For example, if your first page has a TextBox named textBox1 and it is necessary to fill it before moving to the next page, a condition like this will do the trick.

bool NextButtonClicked()
{
    switch (currentPanelIndex)
    {
        case 0:
        {
            if(textBox1.Text.Length == 0)
                return false;
        }
        break;
    }

    return true;
}

A similar case can be used for using the back button.

Points of Interest

Almost everything in this control is modifiable. The look can be changed. You don't need to worry about the gray background of the tabpages. You can add a new Panel into the page, color it the way you want it and voila, it will be shown in that color. I suggest you play with your imagination.

One of the most important possibilities in this wizard is that the content of Pages 2, 3 can be updated based on the previous pages. This may be really useful in case of selective options.