Getting Started with the DevExpress VCL Wizard Control

Version 12.2 of the DevExpress VCL controls contains the long awaited ExpressWizard control. DevExpress released a WinForms version, their XtraWizard control, over four years ago. They have now delivered a native version of this same control for the Delphi VCL.

Features of the ExpressWizard control mirror those touted by DevExpress for their XtraWizard control:

  • You can design dialogs that conform to either the Wizard 97 or Wizard Aero standard… creating standard based UIs has never been easier.
  • Cutting-edge interfaces are only a few clicks away and developers can be certain that their wizard control will look and feel the same as all other DevExpress controls within their applications.
  • By using DevExpress fade in/fade out effects, developers can easily enhance their wizards during page transition operations.

It’s worth noting that the ExpressWizard control is a new product in the VCL subscription. This means that, when installing 12.2, you should select “Modify and Update” rather than simply “Update”. This will allow you to select ExpressWizard for installation.

DX VCL Setup

To get started with the ExpressWizard control, create a new VCL Forms Application in Delphi. Next, use the File, New, Other menu item to display the New Items dialog. Select Delphi Files on the left. On the right you’ll see a new entry: DevExpress 12.2 Wizard Form.

New Items Template

Select this item and click OK.

Using this Wizard Form template nets you three things:

  1. A new form descended from TdxWizardControlForm. This is necessary to support the Aero glass features of the TdxWizardControl (similar to the TdxRibbonForm).
  2. A TdxWizardControl parented on the new form
  3. A single TdxWizardControlPage added to the wizard control

The TdxWizardControl is also found on the component palette and can be dropped on any form. However, if you want to use the Aero style wizard, you’ll need to change your form’s ancestor. Starting in this manner (versus the template) will also give you an empty wizard control with no pages.

To check out the basic features of the wizard control, I’d like a total of three pages: a Welcome page, an Agreement page, and a Finished page. For the Agreement page, I’d like the Next button disabled until the user checks a checkbox. I’d also like the wizard to use the Aero style rather than the Wizard 97 style.

Pages can be added to the wizard control in two ways, both available from the TdxWizardControl and TdxWizardControlPage context menus.

Wizard Context Menu

You can either click New Page directly, or click Page Collection Editor to display a dialog for managing the wizard pages.

Page Collection Editor

Using one of these two methods, add two new pages to the TdxWizardControl. As with the rest of the DevExpress VCL controls, the designtime editors and experience are top notch. You can actually click on the Next and Back buttons at designtime to switch through the wizard pages.

Use the Next and Back buttons to select each wizard page. Then, adjust the Header.Title property so that the pages read Welcome, Agreement, and Finish. You can also adjust the Header.Description property, but this line of text will not be visible when using the Aero style wizard.

Next, add a TcxCheckBox to the Agreement page in the wizard and adjust its Caption property to indicate accepting the agreement.

Added Checkbox

In order to show the wizard we’ll need some code on our main form. Open up Unit1 and click the Design tab. Add a TcxButton to the form. While we’re here, let’s take a very quick look at a new feature of the TcxButton in 12.2. Set the Kind to cxbkCommandLink. Assign values to both the Caption and CommandLinkHint properties. Bump the Font.Size property up to 12 and resize the control to fit its contents. Finally, assign a OnClick event handler with the following code:

uses Unit2;

{$R *.dfm}

procedure TForm1.cxButton1Click(Sender: TObject);
begin
  Form2 := TForm2.Create(Self);
  try
    Form2.ShowModal;
  finally
    Form2.Free;
  end;
end;

Click Run (or press F9) to check out the new button style.

TcxButton Runtime

Pretty nice huh?

Click the TcxButton to show the wizard dialog. You’ll see that, with no code, you can click Back and Next to navigate through the pages. In addition, the Back button automatically disables when you are on the first page. Also, the Next button caption automatically changes to Finish when you are on the last page of the wizard. However, clicking Finish and Cancel do not currently do anything. In addition, we need some code for our “agreement” and the wizard is still not the Aero style.

Close the app and return to Unit2. Select the TdxWizardControl and set the ViewStyle property to wcvsAero in the Object Inspector. Handle the OnCreate event of the TdxWizardForm itself with the following code to initialize the wizard:

procedure TForm2.FormCreate(Sender: TObject);
begin
  dxWizardControl1.ActivePageIndex := 0;
end;

Next, handle the OnClick event of the TcxCheckBox with the following code:

procedure TForm2.cxCheckBox1Click(Sender: TObject);
begin
  dxWizardControl1.Buttons.Next.Enabled := cxCheckBox1.Checked;
end;

Select the TdxWizardControl and handle its OnPageChanged event with the same logic:

procedure TForm2.dxWizardControl1PageChanged(Sender: TObject);
begin
  dxWizardControl1.Buttons.Next.Enabled := (dxWizardControl1.ActivePageIndex <> 1) or cxCheckBox1.Checked;
end;

Finally, handle the TdxWizardControl’s OnButtonClick event with the following code:

procedure TForm2.dxWizardControl1ButtonClick(Sender: TObject; AKind: TdxWizardControlButtonKind; var AHandled: Boolean);
begin
  if AKind = wcbkCancel then
    ModalResult := mrCancel
  else if AKind = wcbkFinish then
    ModalResult := mrOk;
end;

If you run the application again you’ll see the wizard is now functional. It starts on the Welcome page, and the Next button is disabled for the Agreement page unless the checkbox is checked. Finally, clicking Cancel or Finish dismisses the dialog.

Wizard Animated

Also, notice that each screen of the wizard fades in and out smoothly. Very nice!

You can download the Delphi source code for this example here.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>