Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

Wizard Control based on TabControl

, 3 May 2010
Rate this:
Please Sign up or sign in to vote.
Wizard Control based on TabControl. Takes care of next and back movements.

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.

History

This is the first step. Any suggestions are welcome.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Som Shekhar

India India
No Biography provided

Comments and Discussions

 
Generalvery smart friend PinmemberMember 87144219-Oct-12 11:57 
GeneralRe: very smart friend PinmemberSom Shekhar9-Oct-12 23:14 
I didn't understand much. But probably you are asking how tabs are disappearing.
 
Basically, there is a panel in the form. All the controls of tab are copied to panel, tabcontrol.visible = false and then the form is displayed.
 

When you click next button, all the controls are copied back to tab and the same process is repeated for next tab.
 
So, you don't see the tabcontrol during runtime. Only the panel.
 
Som
GeneralRe: very smart friend PinmemberMember 871442110-Oct-12 2:51 
GeneralGood idea but implementation is fairly limited PinmemberEd Bouras10-May-10 8:17 
GeneralRe: Good idea but implementation is fairly limited PinmemberSom Shekhar10-May-10 8:34 
Generalnice work! PinmemberVirtualVoid.NET3-May-10 6:46 
GeneralRe: nice work! PinmemberSom Shekhar3-May-10 7:10 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 3 May 2010
Article Copyright 2010 by Som Shekhar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid