Introduction
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 PictureBox
es, some Label
s, 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' Panel
area
- Set the
Form
's size to cover the Panel
we're fading
- Ramp the
Form
's opacity
from 0%->100%
Hide
the current Panel
, Show
the new one
- Ramp the first
Form
's opacity
back down to 0%
- Destroy the first
Form
Sample code
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()
With frmSmoke
.Location = New Point(Me.PointToScreen(New Point(0, 0)).X _
+ pnlTarget.Left, _
Me.PointToScreen(New Point(0, 0)).Y_
+ pnlTarget.Top)
.Size = pnlTarget.Size
.FormBorderStyle = Windows.Forms.FormBorderStyle.None
.BackColor = Color.FromArgb(71, 111, 214)
.Visible = False
.ShowInTaskbar = False
.StartPosition = Windows.Forms.FormStartPosition.Manual
End With
Me.AddOwnedForm(frmSmoke)
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
m_Pages(intPage).BringToFront()
FocusDefaultControl(intPage)
AnimateWindow(frmSmoke.Handle.ToInt32, 100, AnimateStyles.Blend Or _
AnimateStyles.Hide)
Me.RemoveOwnedForm(frmSmoke)
frmSmoke.Close()
frmSmoke = Nothing
End Sub
Notes
The 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).