Siticone Stepped Progress Indicator

The SiticoneSteppedProgressIndicator is a sophisticated control designed for multi-step workflows, wizards, and tracking systems. It visualizes a sequence of steps, indicating which are completed, active, or upcoming. With support for custom shapes, ripple animations, gradient fills, and rich interactivity, it transforms standard form navigation into a modern, engaging experience.

Steps & State

Properties defining the structure and current status of the progress workflow.

Property	Type	Description & Usage Example
`StepCount`	int	stepper.StepCount = 4; The total number of steps in the sequence. Changing this automatically adjusts the `StepTexts` collection.
`CurrentStep`	int	stepper.CurrentStep = 2; The 1-based index of the currently active step. Setting this triggers the transition animation. If set greater than `StepCount`, the process is marked as fully complete.
`StepTexts`	List<string>	stepper.StepTexts = new List<string> { "Cart", "Shipping", "Payment", "Review" }; A collection of labels displayed below (or next to) each step marker.
`Orientation`	ProgressOrientation	stepper.Orientation = ProgressOrientation.Vertical; Layout direction of the steps: `Horizontal` (default) or `Vertical`.

Visual Styling

Customize the shapes, sizes, and colors of steps and connecting lines.

Property	Type	Description & Usage Example
`Shape`	StepShape	stepper.Shape = StepShape.RoundedRectangle; Geometric shape of the step markers. Options: `Circle`, `Square`, `RoundedRectangle`, `Diamond`.
`StepRadius`	float	stepper.StepRadius = 20f; The size (radius or half-width) of the step markers in pixels.
`LineThickness`	float	stepper.LineThickness = 4f; The thickness of the connecting lines between steps.
`StepBorderColor`	Color	stepper.StepBorderColor = Color.Black; The color of the border drawn around each step shape.
`StepBorderSize`	float	stepper.StepBorderSize = 2f; The thickness of the border around steps. Set to 0 to disable borders.

Color States

Define the color palette for different states of the workflow.

Property	Type	Description
`StepColor`	Color	Background color for upcoming (inactive) steps.
`CurrentStepColor`	Color	Background color for the currently active step.
`CompletedStepColor`	Color	Background color for completed steps.
`LineColor`	Color	Color of the connecting line for upcoming steps.
`CompletedLineColor`	Color	Color of the connecting line for completed segments.
`HoverColor`	Color	Color applied when the mouse hovers over a step (if interactive).

Animations & Effects

Add life to the indicator with built-in motion effects.

Property	Type	Description & Usage Example
`CurrentStepAnimation`	StepAnimationType	stepper.CurrentStepAnimation = StepAnimationType.Pulse; Animation effect for the active step. Options: `None`, `Pulse`, `Ripple`, `ColorTransition`.
`LineAnimation`	LineAnimationType	stepper.LineAnimation = LineAnimationType.Comet; Animation for the connecting lines during transition. `Solid` draws a filling line, `Comet` adds a trailing effect.
`AnimateCurrentStepText`	bool	stepper.AnimateCurrentStepText = true; If true, the text label of the current step gently sways or pulses to draw attention.
`AnimateStepHover`	bool	stepper.AnimateStepHover = true; Enables smooth color fading when hovering over steps.

Icons & Content

Replace standard numbers with custom icons or checkmarks.

Property	Type	Description & Usage Example
`ShowCheckmark`	bool	stepper.ShowCheckmark = true; If true, completed steps display a checkmark symbol instead of their index number.
`StepIcons`	List<Image>	stepper.StepIcons.Add(myIcon); A list of images to render inside the step shapes. If an image exists for a step index, it overrides the number/checkmark.

User Interaction

Control how users engage with the stepper.

Property	Type	Description & Usage Example
`AllowStepClick`	bool	stepper.AllowStepClick = true; If true, users can click on any step to navigate directly to it (triggers `CurrentStepChanged`).
`ShowTooltips`	bool	stepper.ShowTooltips = true; Displays the full step text in a tooltip when hovering, useful for compact layouts.

Events

Hooks for custom logic and rendering.

Event Wiring

// Step Changing (Cancellable)
// Fired before the step actually changes. Good for validation.
stepper.CurrentStepChanging += (s, e) => 
{
                if (e.NewStepIndex > e.PreviousStepIndex && !ValidateCurrentStep())
    {
        e.Cancel = true; // Prevent moving forward
                MessageBox.Show("Please complete the current step.");
    }
};

// Step Changed
// Fired after the step has successfully updated.
stepper.CurrentStepChanged += (s, e) => 
{
                Console.WriteLine($"Moved from {e.PreviousStepText} to {e.NewStepText}");
                LoadPage(e.NewStepIndex);
};

// Step Completed
// Fired when a step is fully marked as complete (passed by the current step).
stepper.StepCompleted += (s, e) => 
{
                Console.WriteLine($"Step {e.NewStepText} finished!");
};

// Custom Paint
// Draw custom graphics on steps
stepper.AfterStepPaint += (s, e) => 
{
                if (e.State == StepState.Current)
    {
                // Draw a glowing ring
                using (var pen = new Pen(Color.Gold, 2))
        {
            e.Graphics.DrawEllipse(pen, e.StepBounds);
        }
    }
};

Designer & Smart Tags

The control includes a robust Smart Tag menu for rapid configuration.

Feature Category	Capabilities
`Theme Presets`	Apply comprehensive visual styles instantly: Default / Minimalist: Clean, professional looks. Forest / Ocean / Sunset: Nature-inspired palettes. Cyberpunk / Neon: High-contrast, futuristic styles. Corporate: Square, business-blue styling. Vintage: Soft, muted tones with rounded rectangles.
`Settings`	Copy/Paste Settings: Transfer the entire configuration to another stepper instance.

Detailed Usage Examples

Example 1: Wizard Navigation

Standard Next/Back buttons controlling the stepper.

C# - Wizard Logic

private void btnNext_Click(object sender, EventArgs e)
{
                // The stepper handles bounds checking internally
    stepper.NextStep();
}

private void btnBack_Click(object sender, EventArgs e)
{
    stepper.PreviousStep();
}

// Initialize Wizard
private void SetupWizard()
{
    stepper.StepTexts = new List<string> { 
                "Welcome", "License", "Install", "Finish" 
    };
    stepper.CurrentStep = 1;
    stepper.AllowStepClick = false; // Enforce linear progression
}

Example 2: Order Status Tracker

Using the vertical orientation and custom icons to track a package.

C# - Tracker Logic

private void SetupTracker()
{
    tracker.Orientation = ProgressOrientation.Vertical;
    tracker.StepTexts = new List<string> { 
                "Order Placed", "Processing", "Shipped", "Delivered" 
    };
    
                // Custom Icons (Assuming resources exist)
    tracker.StepIcons = new List<Image> {
                Properties.Resources.IconCart,
                Properties.Resources.IconGear,
                Properties.Resources.IconTruck,
                Properties.Resources.IconHome
    };
    
                // Styling
    tracker.CurrentStepAnimation = StepAnimationType.Pulse;
    tracker.Shape = StepShape.RoundedRectangle;
}

private void UpdateStatus(int statusLevel)
{
    tracker.CurrentStep = statusLevel;
}

Example 3: Custom Validation Logic

Preventing step changes if fields are invalid.

C# - Validation

private void stepper_CurrentStepChanging(object sender, StepChangingEventArgs e)
{
                // Only validate when moving forward
                if (e.NewStepIndex > e.PreviousStepIndex)
    {
                if (e.PreviousStepIndex == 0) // Step 1
        {
                if (string.IsNullOrWhiteSpace(txtName.Text))
            {
                e.Cancel = true;
                MessageBox.Show("Name is required!");
            }
        }
    }
}