Click here to Skip to main content
Click here to Skip to main content

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

, 21 Dec 2002
Rate this:
Please Sign up or sign in to vote.
Windows XP's 'Out-Of-Box-Experience' during its setup and activation, brought us a cool new style of Wizard with pages that fade, and a clean blue interface.

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).

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

JohnWellsMCSD
Web Developer
United States United States
Microsoft Certified Solution Developer

Comments and Discussions

 
GeneralFocusDefaultControl(intPage) Pinmemberdazinith29-May-03 11:49 
Generalusing this code for paneled options Pinmemberdazinith19-May-03 12:16 
GeneralRe: using this code for paneled options Pinmemberdazinith29-May-03 11:48 
GeneralMissing API Constants PinmemberJohnWellsMCSD23-Dec-02 4:49 

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
Web04 | 2.8.141216.1 | Last Updated 22 Dec 2002
Article Copyright 2002 by JohnWellsMCSD
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid