Siticone Vertical Step Indicator

The SiticoneVerticalStepIndicator is a modern, customizable control for visualizing sequential processes in a vertical layout. Perfect for timeline views, sidebar wizards, or activity logs, it offers the same rich feature set as its horizontal counterpart, including custom shapes, gradient animations, and interactive navigation.

Steps & State

Properties defining the structure and current status of the step sequence.

Property	Type	Description & Usage Example
`StepCount`	int	vStepper.StepCount = 4; The total number of steps in the sequence.
`CurrentStep`	int	vStepper.CurrentStep = 2; The 1-based index of the currently active step. Setting this triggers a transition animation.

Appearance & Layout

Customize the dimensions and spacing for vertical alignment.

Property	Type	Description & Usage Example
`StepSize`	int	vStepper.StepSize = 40; The width/height of the step markers in pixels.
`StepSpacing`	int	vStepper.StepSpacing = 200; Vertical distance between the centers of adjacent steps.
`TopMargin`	int	vStepper.TopMargin = 50; Padding from the top edge of the control.
`BottomMargin`	int	vStepper.BottomMargin = 50; Padding from the bottom edge of the control.

Text & Content

Rich content support including titles, subtitles, and custom images positioned next to steps.

Property	Type	Description & Usage Example
`StepTitles`	List<string>	vStepper.StepTitles.Add("Step 1"); Primary text displayed next to each step.
`StepSubtitles`	List<string>	vStepper.StepSubtitles.Add("Description"); Secondary text displayed below the title.
`StepImages`	List<Image>	vStepper.StepImages.Add(icon); Custom images rendered inside the step markers.
`TitleHorizontalOffset`	int	vStepper.TitleHorizontalOffset = 50; Pixel offset for title text from the step center.

Animations & Effects

Bring the vertical timeline to life with smooth transitions.

Property	Type	Description & Usage Example
`CurrentStepAnimation`	StepAnimationType	vStepper.CurrentStepAnimation = StepAnimationType.Ripple; Animation effect for the active step: `None`, `Pulse`, `Ripple`, or `ColorTransition`.
`EnableFadeAnimation`	bool	vStepper.EnableFadeAnimation = true; Adds a subtle pulsing fade effect to the next upcoming step.

Events

Hooks for managing workflow logic.

Event Wiring

// Step Changing
vStepper.StepChanging += (s, e) => 
{
                if (e.RequestedStep > e.CurrentStep && !IsStepComplete())
    {
        e.Cancel = true;
                MessageBox.Show("Please complete the current step.");
    }
};

// Step Clicked
vStepper.StepClicked += (s, e) => 
{
                Console.WriteLine($"User clicked step {e.StepIndex + 1}");
};

// Progress Completed
vStepper.ProgressCompleted += (s, e) => 
{
                Console.WriteLine($"Workflow complete in {e.TotalSteps} steps!");
};

Designer & Smart Tags

The control includes a Smart Tag menu for rapid styling in Visual Studio.

Feature Category	Capabilities
`Theme Presets`	One-click styles: Forest / Ocean / Sunset: Nature-inspired themes. Corporate: Professional blue/square style. Cyberpunk: Neon colors with Diamond shapes. Minimalist: Clean black/white outlines.
`Settings`	Copy/Paste Settings: Transfer configuration between instances.

Detailed Usage Examples

Example 1: Order Tracking Timeline

Creating a vertical shipment history view.

C# - Timeline

private void SetupTimeline()
{
    vStepper.StepCount = 4;
    vStepper.StepTitles = new List<string> { "Order Placed", "Processed", "Shipped", "Delivered" };
    vStepper.StepSubtitles = new List<string> { "Jan 10", "Jan 11", "Jan 12", "Estimated Jan 15" };
    
                // Vertical Layout
    vStepper.StepSpacing = 100;
    vStepper.StepSize = 30;
    vStepper.ShowStepNumbers = false;
    vStepper.ShowCheckmark = true;
    
                // Styling
    vStepper.CurrentStepAnimation = StepAnimationType.None;
    vStepper.CompletedStepColor = Color.SeaGreen;
    vStepper.CurrentStep = 3; // Shipped
}

Example 2: Sidebar Wizard Navigation

Using the stepper as a navigation menu in a wizard form.

C# - Wizard Nav

private void SetupWizardNav()
{
    vStepper.StepCount = 5;
    vStepper.AllowStepClick = true;
    
                // Custom Icons
    vStepper.StepIcons = new List<Image> { 
                Properties.Resources.IconUser,
                Properties.Resources.IconSettings,
                Properties.Resources.IconNetwork,
                Properties.Resources.IconSecurity,
                Properties.Resources.IconFinish
    };
    
    vStepper.StepStyleType = SiticoneVerticalStepIndicatorStepStyle.Filled;
    vStepper.StepSize = 45;
}

private void vStepper_StepClicked(object sender, StepInteractionEventArgs e)
{
                // Navigate to the clicked page
                LoadWizardPage(e.StepIndex);
    vStepper.CurrentStep = e.StepIndex + 1;
}