Siticone Horizontal Step Indicator

The SiticoneHorizontalStepIndicator is a feature-rich, high-performance control for guiding users through multi-step processes. It supports advanced styling like custom shapes, images, gradients, and ripple effects, while maintaining fluid animations. This control is ideal for checkout flows, setup wizards, and timeline tracking.

Step Management

Properties that define the structure and progress of the step sequence.

Property	Type	Description & Usage Example
`StepCount`	int	stepper.StepCount = 5; The total number of steps. Automatically manages the internal collections for titles and labels.
`CurrentStep`	int	stepper.CurrentStep = 2; The 1-based index of the active step. Setting this triggers a smooth transition animation to the new step.
`Orientation`	ProgressOrientation	stepper.Orientation = ProgressOrientation.Vertical; Layout direction of the indicator: `Horizontal` or `Vertical`.

Appearance & Shapes

Customize the geometric look and dimensions of the step markers.

Property	Type	Description & Usage Example
`Shape`	StepShape	stepper.Shape = StepShape.Diamond; Sets the shape of the step markers: `Circle`, `Square`, `RoundedRectangle`, or `Diamond`.
`StepSize`	int	stepper.StepSize = 40; The width/height of the step markers in pixels.
`LineHeight`	int	stepper.LineHeight = 4; The thickness of the connecting lines between steps.
`StepSpacing`	int	stepper.StepSpacing = 150; Distance between the centers of adjacent steps.
`StepStyleType`	StepStyle	stepper.StepStyleType = SiticoneHorizontalStepIndicatorStepStyle.Outlined; Visual style: `Filled`, `Outlined`, or `TickOnly`.

Text & Icons

Rich content support including titles, subtitles, and custom images.

Property	Type	Description & Usage Example
`StepTitles`	List<string>	stepper.StepTitles.Add("Checkout"); Primary text displayed for each step.
`StepSubtitles`	List<string>	stepper.StepSubtitles.Add("Enter details"); Secondary explanatory text displayed below the title.
`StepImages`	List<Image>	stepper.StepImages.Add(myImage); Custom images to display inside the step markers. Overrides default numbers/checks if present.
`ShowCheckmark`	bool	stepper.ShowCheckmark = true; If true, completed steps display a checkmark icon.

Animations & Transitions

Advanced motion effects for a polished user experience.

Property	Type	Description & Usage Example
`CurrentStepAnimation`	StepAnimationType	stepper.CurrentStepAnimation = StepAnimationType.Ripple; Animation for the active step: `None`, `Pulse`, `Ripple`, or `ColorTransition`.
`LineAnimation`	LineAnimationType	stepper.LineAnimation = LineAnimationType.Comet; Animation style for the connecting line fill: `Solid` or `Comet` (adds a trailing tail).
`EnableRippleEffect`	bool	stepper.EnableRippleEffect = true; Enables the expanding ripple visual effect on the active step.
`AnimateStepHover`	bool	stepper.AnimateStepHover = true; Enables smooth scaling/color fade when hovering over a step.

Events

Hooks for controlling flow and responding to user interaction.

Event Wiring

// CurrentStepChanging (Cancellable)
// Use this to validate before allowing the user to proceed.
stepper.CurrentStepChanging += (s, e) => 
{
                if (e.NewStepIndex > e.PreviousStepIndex && !ValidateForm())
    {
        e.Cancel = true;
                MessageBox.Show("Please fill all required fields.");
    }
};

// StepClicked
// Fires when a user clicks a specific step (if AllowStepClick is true).
stepper.StepClicked += (s, e) => 
{
                Console.WriteLine($"Clicked Step: {e.StepIndex}");
};

// ProgressCompleted
// Fires when the final step is finished.
stepper.ProgressCompleted += (s, e) => 
{
                SubmitOrder();
};

Designer & Smart Tags

The control features an extensive Smart Tag menu for rapid visual configuration.

Feature Category	Capabilities
`Theme Presets`	One-click styling options: Forest / Ocean / Sunset: Nature-inspired color schemes. Corporate: Professional blue/square style. Cyberpunk: Neon colors with Diamond shapes. Minimalist: Clean black/white outlines.
`Quick Setup`	Easy access to `StepCount`, `CurrentStep`, and layout settings directly from the designer surface.
`Clipboard`	Copy/Paste Settings: Transfer the entire configuration (colors, fonts, animations) between different indicator instances.

Detailed Usage Examples

Example 1: E-Commerce Checkout

Setting up a standard 4-step checkout process with validation.

C# - Checkout Flow

private void SetupCheckout()
{
    stepper.StepCount = 4;
    stepper.StepTitles = new List<string> { "Cart", "Address", "Payment", "Done" };
    stepper.StepSubtitles = new List<string> { "Review Items", "Shipping Info", "Credit Card", "Confirm" };
    
                // Style
    stepper.CurrentStepAnimation = StepAnimationType.Pulse;
    stepper.ActiveStepFill = Color.DodgerBlue;
    stepper.CompletedStepColor = Color.SeaGreen;
    
                // Navigation Logic
    stepper.AllowStepClick = false; // Enforce linear flow
}

private void btnNext_Click(object sender, EventArgs e)
{
    stepper.NextStep();
}

Example 2: Vertical Timeline

Using the vertical orientation to create a history or activity log view.

C# - Vertical Timeline

private void SetupTimeline()
{
    stepper.Orientation = ProgressOrientation.Vertical;
    stepper.StepSpacing = 80; // Tighter spacing
    stepper.Shape = StepShape.Circle;
    
                // Minimalist look
    stepper.StepSize = 20;
    stepper.LineThickness = 2;
    stepper.ShowStepNumbers = false;
    stepper.ShowCheckmark = false;
    
    stepper.StepTitles = new List<string> { "Order Placed", "Processed", "Shipped", "Delivered" };
}

Example 3: Custom Icons

Replacing default numbering with custom images.

C# - Image Icons

private void SetupIconStepper()
{
    stepper.ShowStepNumbers = false;
    stepper.StepSize = 48; // Larger for icons
    
                // Load images (ensure resources exist)
    stepper.StepIcons = new List<Image> {
                Properties.Resources.IconUser,
                Properties.Resources.IconSettings,
                Properties.Resources.IconDownload,
                Properties.Resources.IconCheck
    };
    
                // Custom styling for icons
    stepper.CompletedIconColor = Color.White;
    stepper.StepStyleType = SiticoneHorizontalStepIndicatorStepStyle.Filled;
}