Skip to content

StepDialog.md

Latest commit

 

History

History
163 lines (127 loc) · 4.53 KB

StepDialog.md

File metadata and controls

163 lines (127 loc) · 4.53 KB

StepDialog

A modal dialog that presents a sequence of numbered StepItem steps. Supports a title, description, status message, primary/secondary action buttons, and open/close animations consistent with ContentDialog.

Basic usage

<StepDialog Title="Setup Wizard"
           Description="Follow these steps to configure your application"
           PrimaryButtonText="Next"
           SecondaryButtonText="Cancel">
    <StepItem Title="Step 1" Description="Configure settings" />
    <StepItem Title="Step 2" Description="Connect to server" />
    <StepItem Title="Step 3" Description="Complete setup" />
</StepDialog>
await stepDialog.ShowAsync(window);

Properties

Property Type Default Description
Title string? — Dialog title
Description string? — Optional description shown below the title
StatusMessage string? — Status message shown at the bottom of the steps
PrimaryButtonText string? — Text of the primary action button (null hides the button)
SecondaryButtonText string? — Text of the secondary action button (null hides the button)
MinDialogWidth double 420 Minimum width of the dialog card
OpenAnimation Animation? — Animation played when the dialog opens
CloseAnimation Animation? — Animation played when the dialog closes
Steps AvaloniaList<StepItem> — Collection of steps displayed in the dialog

Events

Event Description
PrimaryButtonClicked Raised when the primary button is clicked
SecondaryButtonClicked Raised when the secondary button is clicked
Closed Raised when the dialog is closed

Adding steps

Add steps in XAML:

<StepDialog>
    <StepItem Title="Step 1" Description="Configure settings" />
    <StepItem Title="Step 2" Description="Connect to server" />
    <StepItem Title="Step 3" Description="Complete setup" />
</StepDialog>

Or programmatically:

stepDialog.Steps.Add(new StepItem
{
    Title = "Step 1",
    Description = "Configure settings"
});

Status message

Display a status message at the bottom of the steps:

<StepDialog StatusMessage="Waiting for authentication…" />
stepDialog.StatusMessage = "Processing step 2 of 3...";

Button handling

Handle button clicks:

stepDialog.PrimaryButtonClicked += (sender, e) =>
{
    // Move to next step or complete
};

stepDialog.SecondaryButtonClicked += (sender, e) =>
{
    // Cancel or go back
};

Show/hide buttons

Hide buttons by setting their text to null:

<StepDialog PrimaryButtonText="Next"
           SecondaryButtonText="{x:Null}" />

Custom animations

Provide custom open/close animations:

<StepDialog>
    <StepDialog.OpenAnimation>
        <Animation Duration="0:0:0.3">
            <KeyFrame Cue="0.0">
                <Setter Property="Opacity" Value="0" />
                <Setter Property="ScaleTransform.ScaleX" Value="0.9" />
                <Setter Property="ScaleTransform.ScaleY" Value="0.9" />
            </KeyFrame>
            <KeyFrame Cue="1.0">
                <Setter Property="Opacity" Value="1" />
                <Setter Property="ScaleTransform.ScaleX" Value="1" />
                <Setter Property="ScaleTransform.ScaleY" Value="1" />
            </KeyFrame>
        </Animation>
    </StepDialog.OpenAnimation>
</StepDialog>

Example

var dialog = new StepDialog
{
    Title = "Installation Wizard",
    Description = "Complete these steps to install the application",
    PrimaryButtonText = "Next",
    SecondaryButtonText = "Cancel"
};

dialog.Steps.Add(new StepItem { Title = "Welcome", Description = "Introduction" });
dialog.Steps.Add(new StepItem { Title = "License", Description = "Accept terms" });
dialog.Steps.Add(new StepItem { Title = "Install", Description = "Install files" });

dialog.PrimaryButtonClicked += (sender, e) =>
{
    // Handle next step
};

await dialog.ShowAsync(window);

Pseudo-classes

The control applies pseudo-classes based on state:

  • :open - Applied when the dialog is open
  • :hasStatus - Applied when a status message is set
  • :hasPrimary - Applied when primary button text is set
  • :hasSecondary - Applied when secondary button text is set

Template parts

The control template must provide:

  • PART_CloseButton - Close button
  • PART_PrimaryButton - Primary action button
  • PART_SecondaryButton - Secondary action button
  • PART_StepsHost - ItemsControl that hosts the steps