#Wizard

A Wizard shows one WizardStep at a time, with a step list at the top, the step title and description, and Cancel, Back, Skip and Next (Finish on the last step) buttons.

Video tutorial: Wizard. All videos: Video tutorials.

<UIToolbox.Wizard name="setup" allow-step-clicking="true" finish-text="Complete Setup">
    <UIToolbox.WizardStep name="welcome" title="Welcome" description="This wizard sets up a user account." />
    <UIToolbox.WizardStep name="user" title="User">
        <ui:TextField name="username" label="User name" />
    </UIToolbox.WizardStep>
    <UIToolbox.WizardStep name="advanced" title="Advanced" can-skip="true" />
    <UIToolbox.WizardStep name="summary" title="Summary" can-go-back="false" />
</UIToolbox.Wizard>

wizard.GetStep("user").Validator = step =>
{
    if (step.Q<TextField>("username").value.Length > 0) return true;
    wizard.ShowValidationError("Enter a user name.", step.Q<TextField>("username"));
    return false;
};
wizard.GetStep("advanced").VisibilityCondition = () => expert.value;
expert.RegisterValueChangedCallback(_ => wizard.Refresh());

• The steps are the wizard's content: Add puts a step in the content area. Call Refresh after an Add while the wizard shows.
• A step-list click goes back when the current step can go back. It goes forward when all the steps between are completed; it validates the current step first.
• Skip marks the step completed, so a step-list click can go past it.
• Cancelled does not reset or close anything. The owner closes the window. To ask first, set CancelConfirmation:

wizard.CancelConfirmation = async () =>
    await MessageBox.ShowAsync(this, "Discard the setup?", "Cancel", MessageBoxButtons.YesNo) == MessageBoxResult.Yes;

• The buttons stay at the bottom of the wizard when the wizard has a height from its parent: the content area takes the free space. A window puts its content in a ScrollView by default, and there the wizard is only as tall as the current step, so the buttons move from step to step. Set enable-scrolling="false" on the window to keep the buttons at the bottom of the window:

<tb:Window id="setup" title="Setup" width="520" height="400" enable-scrolling="false">
    <UIToolbox.Wizard style="flex-grow: 1;"> ... </UIToolbox.Wizard>
</tb:Window>

• A step that can be taller than the wizard needs its own ScrollView: the content area clips.
• The buttons reuse the MessageBox button style.
• A move to another step slides the new step in, from the right after a forward move and from the left after a backward move, and fades it in. The old step hides at once. A new move stops the last transition. There is no transition when the workspace has AnimationsEnabled off, or for Reset and RestoreState.
• The content area clips, so the slide does not change the size of a parent ScrollView. It also clips a child that reaches past the content, such as a focus ring on the edge.
• StepValidating comes after the Validator of the step on a forward move. It clears the old validation error first, so call ShowValidationError in the handler to tell the user why the move stopped:

wizard.StepValidating += e =>
{
    if (e.Direction != WizardDirection.Backward || !unsavedChanges) return;
    e.Cancel = true;
    wizard.ShowValidationError("Save the changes first.");
};

• GoToStep, Reset and RestoreState do not send StepValidating.

#Styling