C# Windows Aero Style Wizard Control


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.

Introduction

This project makes use of work done by others; (as well as lots of my own hard graft) pimb2 and Windows Forms Aero over at CodePlex.

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

1.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;
  • 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 OS's (some work happens when both Desktop window composition is disabled and also when the program is ran 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 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.


Similar Articles