Click here to Skip to main content
11,502,821 members (39,683 online)
Click here to Skip to main content

Aero Wizard in VB.NET

, 30 Jul 2009 CPOL 40.9K 4.2K 26
Rate this:
Please Sign up or sign in to vote.
Create an Aero-style wizard in VB.NET
screenshot.png

Introduction 

I wanted to make an update application for my program. As I like the Vista Aero interface, I also wanted an Aero-style wizard. I couldn't find a complete one on the Internet, so I decided to just make my own. After doing so, I thought it would be useful to share it to help others in the same situation.

Aspects of an Aero Wizard

There are several aspects which give the wizard an Aero look and feel. Here are the ones I've used to make it look like an Aero Wizard.

  • Extended glass in top area
    As you probably have noticed in the screenshot or the demo application, the wizard does have more glass than usual. This is done by DwmExtendFrameIntoClientArea. It is a function in dwm.dll which is only available in Windows Vista. Therefore, you need to check whether the system is running Windows Vista and also whether Aero is enabled. There is an easy function called DwmIsCompositionEnabled for this. It just returns a Boolean which shows this.
  • Hidden default drawn title bar text & icon
    Because the wizard title and icon are not at the default position in the wizard, they must be removed from the title bar. This is done by SetWindowThemeAttribute, also in dwm.dll. I really didn't know any way to achieve this but fortunately there was an article on CodeProject about this. Please see the references section of this article.
  • Back button
    The back button in all Vista applications is actually the same, so it is in a wizard. It's a blue one which is transparent when it's disabled, but it is semi-transparent. This means that it is not completely transparent, but it has a dark and light part. The top part is light and the bottom part is dark, but they are both partly transparent (semi-transparent). To achieve this, I found the program GIMP very useful. But first I had to get the images. They are located in ieframe.dll. The file can be opened in ResHacker and you can search for 'travelbutton' in the bitmaps section. Then save it and open it in GIMP. Remove the forward button and then save it as a .png file - the semi-transparency is magically done automatically. Then just add it to the project and add some MouseEnter and MouseLeave code so that it changes when the mouse is hovered. When the button is disabled, I've set the tag of the PictureBox to use with If so that the image does not change when hovering it when it's disabled.
  • Glowing text
    The custom drawn title bar text needs to be glowing as usual in Aero. I've used a VistaControls component for this. Please see the references section for it. 
  • The wizard's pages
    I found a TabControl really useful for the pages of the wizard, especially when I found a tweaked TabControl of which the headers can be hidden (see references section for link to the website where I found it). You can easily navigate with TabControl1.SelectedIndex and the user does not even think about a TabControl as the headers are hidden. It was the perfect solution in my opinion.  

Using the Code 

The wizard contains a regular Form and a class with API functions. If the wizard is a separate application, you can use File->Add->Existing Project and select the .vbproj in the AeroWizard directory. If you want to embed it in your application (in the same .exe file), it becomes more complicated. You'll have to do the following:

  • Open the Resources section in My Project of your project and add all files in the Resources directory of the AeroWizard project.
  • Open the References section in My Project of your project and add the following *.dll files (they are in the bin\Release directory): TabControlWithoutHeader.dll, VistaControls.dll.
  • Project->Add Existing Item... Add the following files: AeroWizard.vb, AeroWizard.Designer.vb, AeroWizard.resx, DWM.vb.

After doing one of these two methods, open AeroWizard.vb in the Designer. Set the Icon property of the Form to the icon you want to be shown in the task bar (and Alt+Tab).
Secondly, set the image of PictureBox1 to an image version of your icon, for example, a .png one.
Thirdly, open AeroWizard.vb in code. Open the Configuration variables section and set the texts you want (button texts, application title).
Then you can start adding your contents to the wizard. Go back to the designer and change/remove the Label on the first tab. You can, of course, also add other controls (ProgressBars, ...). Do the same with the other tabs. You can add new tabs, but please copy a TableLayoutPanel of an existing tab. This makes all controls have a margin (like in the 'real' Aero-style wizards). At runtime, the tab header will be removed, of course, but if you do so in the Designer, it becomes quite difficult to navigate to another tab.
Now you have to add code that will do the actual things you want. Double-click Button1. Now you come to the code which will be executed when the user clicks the next button. You can add code here to execute when a specific tab has been opened. For example, if you want to display a MsgBox when the third tab has been opened, add some code like this, AFTER the GoToTab() function:

If TabControl1.SelectedIndex = 3 Then
MsgBox("Hello World!")
End If 

That's it!

Points of Interest

Whilst writing the code, I learned about 'semi-transparency' and alpha-channels of *.png files. As you may have seen, the back button, when it's disabled, has a light top part and a dark bottom part. If you have set the glass color to blue, it appears as light and dark blue. However, when you set the glass color to pink, it appears as light and dark pink. So it is partly (semi) transparent. It needed quite some research as it is hardly used (web developers don't use it as Internet Explorer doesn't support it). But it was an interesting subject. I used GIMP to make the back button semi-transparent, which wasn't too difficult to do.

References

I've used different resources to get this wizard. I'll list them here.

If I've forgotten one, please tell me.

Bugs

  • You cannot go back very fast. If you are on the last wizard page and click the back button many times very fast, it won't go back that fast. I think this is a bug of the PictureBox events, but anyway I think it isn't annoying.

License

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

Share

About the Author

pimb2

Netherlands Netherlands
No Biography provided

Comments and Discussions

 
GeneralMy vote of 2 Pin
Rixterz1236-Jun-14 9:14
memberRixterz1236-Jun-14 9:14 
GeneralMy vote of 5 Pin
Kamonth20-Jan-13 20:54
memberKamonth20-Jan-13 20:54 
QuestionError on Your Source code [modified] Pin
Mehdi_Dirbaz16-May-11 20:37
memberMehdi_Dirbaz16-May-11 20:37 
AnswerRe: Error on Your Source code Pin
Mehdi_Dirbaz16-May-11 21:17
memberMehdi_Dirbaz16-May-11 21:17 
GeneralRe: Error on Your Source code Pin
pimb216-May-11 21:21
memberpimb216-May-11 21:21 
GeneralMy vote of 3 [modified] Pin
stefangab9530-Dec-10 7:27
memberstefangab9530-Dec-10 7:27 
GeneralC# version Pin
alleyes7-May-10 5:58
memberalleyes7-May-10 5:58 
GeneralRe: C# version Pin
pimb29-May-10 4:40
memberpimb29-May-10 4:40 
GeneralRe: C# version Pin
alleyes10-May-10 4:49
memberalleyes10-May-10 4:49 
GeneralRe: C# version Pin
pimb210-May-10 5:04
memberpimb210-May-10 5:04 
GeneralRe: C# version Pin
alleyes10-May-10 5:50
memberalleyes10-May-10 5:50 
GeneralRe: C# version Pin
pimb210-May-10 7:29
memberpimb210-May-10 7:29 
GeneralRe: C# version Pin
alleyes10-May-10 7:40
memberalleyes10-May-10 7:40 
GeneralMy vote of 2 Pin
Dave Kreskowiak28-Jul-09 7:26
mvpDave Kreskowiak28-Jul-09 7:26 
GeneralRe: My vote of 2 Pin
pimb228-Jul-09 8:15
memberpimb228-Jul-09 8:15 
GeneralRe: My vote of 2 Pin
marco_ragogna28-Jul-09 22:10
membermarco_ragogna28-Jul-09 22:10 
GeneralRe: My vote of 2 Pin
pimb229-Jul-09 2:07
memberpimb229-Jul-09 2:07 
GeneralRe: My vote is 4 Pin
marco_ragogna29-Jul-09 2:43
membermarco_ragogna29-Jul-09 2:43 

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 | Terms of Use | Mobile
Web03 | 2.8.150520.1 | Last Updated 30 Jul 2009
Article Copyright 2009 by pimb2
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid