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

C# Windows Aero Style Wizard Control

By , 14 Jun 2010
 

Introduction

I have been a fan of the Windows Aero styled Windows since Aero was first introduced in Windows Vista. However, there is little to no Aero inclusion in the .NET Framework, so I set out to create my own Windows Aero themed form. This project makes use of work done by others; (as well as lots of my own hard graft) Windows Forms Aero over at CodePlex.

Here is an example of a Windows Aero wizard commonly found on Windows Vista:

NewPrinterWizard-Small.gif

As (as far as I know) there are no resources built into the .NET Framework for creating Windows Aero style forms easily, the aim of this project was to provide access to a (or some) classes that the user can use to create themed forms easily.

Visual aspects of interest are:

  • Transparency (top of the window)
  • Navigation button (back button)
  • Icon
  • Glow text (Title)

This control provides easy access to these features (and more) to streamline the set up process. What this control doesn’t feature (yet) is a simple way of switching between pages. You will need to use something like Panels to achieve this. (Some events have been included to help you with this).

Behind the Scenes

In order to make this magic happen, we need to make use of the Desktop Window Manager API (dwmapi.dll) and Visual Styles (UxTheme.dll) built into Windows Vista and higher. There are a couple of methods herein that we need to call in order to extend the “glass” theme to our window.

DwmExtendFrameIntoClientArea extends the glass look onto the form based on the given MARGIN.

var Margins = new MARGINS { Top = 41, Left = 0, Right = 0, Bottom = 0 };
DwmExtendFrameIntoClientArea(Handle, ref Margins);

To increase the height of the glass area, simply tweak the margin properties to your heart's content.

In addition, we have the SetWindowThemeAttribute external method (UxTheme.dll), which was also introduced in Windows Vista, to define the visual styles of the window.

The rest of what is going on is just compensation for different scenarios across different OSs (some work happens when both Desktop window composition is disabled and also when the program is run on an OS lower than Windows Vista).

Setting Up Your Project

The Windows Aero Style Wizard control (which is actually called “JPWizardForm”) is included as part of the JPC Framework, which I have developed. However, at the time of writing, the JPC framework is not yet ready for download in its entirety, so I have made a dedicated project available, which is linked at the top of this page.

  • Download and open the attached project.
  • Go to source view on the MainForm.cs file.
  • Change the class so that it inherits JPWizardForm instead of the standard Form class.
namespace WindowsAeroWizardControl
{
     public partial class MainForm : JPWizardForm
     {
          public MainForm()
          {
               InitializeComponent();
          }
     } 

Build the project and switch back to design view.

Using the Control

The wizard exposes a few properties and events that we can use to create our wizard.

EnablePreviousButton : Boolean

Enables or disables the navigation button at the top left hand corner of the form. This button is a back button and will automatically change dependent on user interaction.

IsAeroEnabled : Boolean

Gets a value that indicates whether or not Windows Aero style themes is currently enabled on the PC. Note, this value will always be false when used inside Visual Studio (design time). You need to build and run the program for the value to change.

WizardIcon : Image

Gets or sets the icon to use on the top left side of the form.

DesktopCompositionChanged : Event

This event is raised when the Desktop Window Manager (DWM) notifies the control that Windows themes have changed. It is probable that themes have been either switched on or off. You should check the IsAeroEnabled property when this event is raised.

Next : Event

Raised when the Next button is clicked.

Previous : Event

Raised when the Previous button (navigation button) is clicked.

CloseRequest : Event

Raised when the user clicks the Cancel button.

Further Development

I intend to update the project over time to include a custom control that you can use to navigate between steps automatically. The article, Windows Aero Style Wizard control, was originally posted on my website.

History

  • 15/06/10 - Updated to use NAV_BACKBUTTONSTATES as contributed by tonyt
  • 14/06/10 – First release

License

This article, along with any associated source code and files, is licensed under The GNU General Public License (GPLv3)

About the Author

jonpreecebsc
Software Developer
United Kingdom United Kingdom
Member
I have been an avid software developer since 1997 when I got my first Microsoft Windows PC, and I haven’t looked back since… I have a first class degree in Computer Science, and currently work for a large PLC.

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
GeneralMy vote of 4memberBurak Tunçbilek5 Sep '12 - 8:03 
Thank you for example.
QuestionHelp me!memberBarbu Victor3 Apr '12 - 19:02 
Hi. I downloaded your program and I can't combine it with another Visual Studio project... Please help me with some tips...
GeneralXPmembersvanheest26 Oct '10 - 11:05 
What will happen if i run the app on a XP machine? Will it still work(without the Aero)? Or will it crash?
GeneralRe: XPmemberjonpreecebsc26 Oct '10 - 20:34 
it should run fine
GeneralRe: XPmemberAnthropicus29 Jun '11 - 4:45 
It doesn't seem to work at all in XP, unfortunately.
GeneralRe: XPmemberAnthropicus29 Jun '11 - 5:22 
However, it still functions just fine by checking for XP with Environment.OSVersion.Version.Major < 6 and then skipping all the code that requires DwmIsCompositionEnabled(). Thanks!
GeneralNavigation Buttonmembertonyt14 Jun '10 - 21:58 
I noticed you fudged the navigation button.
 
You can draw the navigation buttons using VisualStyleRenderer.
 
From vsstyle.h:
 
//
//  NAVIGATION class parts and states 
//
#define VSCLASS_NAVIGATION	L"NAVIGATION"
 
enum NAVIGATIONPARTS {
	NAV_BACKBUTTON = 1,
	NAV_FORWARDBUTTON = 2,
	NAV_MENUBUTTON = 3,
};
 
enum NAV_BACKBUTTONSTATES {
	NAV_BB_NORMAL = 1,
	NAV_BB_HOT = 2,
	NAV_BB_PRESSED = 3,
	NAV_BB_DISABLED = 4,
};
 
enum NAV_FORWARDBUTTONSTATES {
	NAV_FB_NORMAL = 1,
	NAV_FB_HOT = 2,
	NAV_FB_PRESSED = 3,
	NAV_FB_DISABLED = 4,
};
 
enum NAV_MENUBUTTONSTATES {
	NAV_MB_NORMAL = 1,
	NAV_MB_HOT = 2,
	NAV_MB_PRESSED = 3,
	NAV_MB_DISABLED = 4,
};

GeneralRe: Navigation Buttonmemberjonpreecebsc14 Jun '10 - 22:53 
i have updated the code/article to reflect your suggestion

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Permalink | Advertise | Privacy | Mobile
Web04 | 2.6.130523.1 | Last Updated 15 Jun 2010
Article Copyright 2010 by jonpreecebsc
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid