Most of us have probably seen the neat-o wizard Windows XP uses, to configure the operating system for the first time. This portion of the setup is called the 'Out-Of-Box-Experience'. If you haven't seen it, it looks much like the above screen shot of an application I am working on. Unfortunately, I haven't seen any programs taking on this new style, and being that it's so warm and fuzzy, I feel the community at large should be implementing this sort of wizard interface.
What is an OOBE style wizard?
Well, first off, I don't own a multi-billion dollar company with the resources to study user-acceptance of GUI design, nor do I have the artistic merit to create my own. For this reason, I tend to take my lead in this area from a certain company, which does have the resources to create usable interfaces. Anyways, Microsoft's Windows XP OOBE wizard, complete with snazzy blue colors and nifty fading pages is a visual treat. I don't know if it will make people more productive, but a wizard like this could be the cherry on top of your application.
Why it's not done
I believe the main reason this isn't that common (the author has only seen Microsoft do it) is that, it requires a black belt in API and some pretty good ninja moves to make a control (not a top-level form) alter it's opacity with time. There are a couple of options, you could use the
WM_PRINT window message and get a picture of the background of the wizard form, you could create your own controls which inherit standard controls and add opacity functionality, or you could (egad...) play a video (don't try that one at home).
Pieces of the puzzle
- Clean interface
- Navigation buttons
- Descriptive label for each page
- Wizard-specific icon
- Fading pages
My method: A 'Smoke-and-Mirrors' solution
Smoke and Mirrors? We're programmers, we do things (uh) correctly! Well, hear my solution before you gafaw me.... The list above reads like just about any other wizard, and you can create this wizard just like you would any other wizard. This part is up to you to implement. A couple of
Labels, some nice lines (I used two gradient lines I created in Photoshop and just popped them in my project, each is 3 pixels high). You may want to create a
Panel object for each page in your wizard, nothing special.
To cut to the chase, I tried a couple of methods and found the best place to accomplish the fade is during the 'next' button logic. You could create a routine named
ShowPage or whatever. In my implementation, this routine knows which page is desired, and which page is currently shown. Here's an ordered list of the actions to be taken, followed by some sample code.
- Create a new
Form to be our 'Smoke'
- Place this
Form above our wizards'
- Set the
Form's size to cover the
Panel we're fading
- Ramp the
opacity from 0%->100%
Hide the current
Show the new one
- Ramp the first
opacity back down to 0%
- Destroy the first
Private Declare Auto Function AnimateWindow Lib _
"user32.dll" (ByVal hWnd As Integer, _
ByVal dwTime As Integer, _
ByVal dwFlags As Integer _
) As Boolean
Private Sub ShowPage(ByVal intPage As Integer, ByVal intLastPage As Integer)
Dim frmSmoke Windows.Forms.Form = New Windows.Forms.Form()
.Location = New Point(Me.PointToScreen(New Point(0, 0)).X _
+ pnlTarget.Left, _
Me.PointToScreen(New Point(0, 0)).Y_
.Size = pnlTarget.Size
.FormBorderStyle = Windows.Forms.FormBorderStyle.None
.BackColor = Color.FromArgb(71, 111, 214)
.Visible = False
.ShowInTaskbar = False
.StartPosition = Windows.Forms.FormStartPosition.Manual
AnimateWindow(frmSmoke.Handle.ToInt32, 100, AnimateStyles.Blend)
m_Pages(intLastPage).Enabled = False
m_Pages(intLastPage).Visible = False
lblHeading.Text = m_Pages(m_intCurrPage).Text
m_Pages(intPage).Enabled = True
m_Pages(intPage).Visible = True
AnimateWindow(frmSmoke.Handle.ToInt32, 100, AnimateStyles.Blend Or _
frmSmoke = Nothing
Form we're using as 'smoke' is basically sitting on top of the wizard
Form, it's setup such that we don't see that it exists on the screen, yet being a top-level window, we can fade it. For multi-platform compatibility, you may want to create your own fading functions using
Form.Opacity and a
Timer. I've used an API function that only works with Windows 2000 and above, but the actual implementation is up to you, this is just one of many methods that could create an OOBE style wizard.
Additional Notes: It can be observed that at least one page of the Windows XP OOBE Wizard actually cross-fades pages, that is, two pages are semi-transparent and the same time, however, with this method, pages must fade into a solid color or background image before fading into the next page.
Enjoy, and vote if you've enjoyed this (It gives me a warm-and-fuzzy feeling that you can't buy with money).