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.
