Using .NET to create a Windows XP 'Fading-pages' style Wizard

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 PictureBoxes, some 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.

1. Create a new Form to be our 'Smoke'
2. Place this Form above our wizards' Panel area
3. Set the Form's size to cover the Panel we're fading
4. Ramp the Form's opacity from 0%->100%
5. Hide the current Panel, Show the new one
6. Ramp the first Form's opacity back down to 0%
7. Destroy the first Form

Sample code

'API for fading
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)

  'This API is *not* asynchronus - It returns when the blend is completed
  AnimateWindow(frmSmoke.Handle.ToInt32, 100, AnimateStyles.Blend)

  'm_Pages is an array of Panel objects
  'Hide the old panel
  m_Pages(intLastPage).Enabled = False
  m_Pages(intLastPage).Visible = False

  'Set the current heading
  lblHeading.Text = m_Pages(m_intCurrPage).Text

  'Show the new panel
  m_Pages(intPage).Enabled = True
  m_Pages(intPage).Visible = True
  m_Pages(intPage).BringToFront()

  'Focus on the correct default control for this wizard page
  FocusDefaultControl(intPage)

  'We've done the switchero, fade out the smoke form to show the next page
  AnimateWindow(frmSmoke.Handle.ToInt32, 100, AnimateStyles.Blend Or _
                                              AnimateStyles.Hide)

  'Clean up some resources
  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).