BeepSteppperBar

Overview

BeepSteppperBar is an interactive wizard and process step indicator control that provides visual guidance through multi-step processes. It displays a series of connected circular steps with customizable content, animations, and orientation support.

Built on the BeepControl foundation, BeepSteppperBar features smooth animations, multiple display modes (step numbers, check images, SVG icons), horizontal and vertical orientations, and comprehensive theme integration. It's perfect for wizards, onboarding flows, checkout processes, and any multi-step user interface.

Key Features

Visual Preview

Horizontal Stepper

Vertical Stepper

Basic Usage

// Create a basic horizontal stepper
var stepper = new BeepSteppperBar
{
    Size = new Size(500, 80),
    Location = new Point(10, 10),
    Orientation = Orientation.Horizontal,
    DisplayMode = StepDisplayMode.StepNumber,
    ButtonSize = new Size(40, 40)
};

// Add steps
stepper.ListItems.Add(new SimpleItem 
{ 
    Name = "Personal Info", 
    Text = "Basic details",
    IsChecked = true // Completed step
});

stepper.ListItems.Add(new SimpleItem 
{ 
    Name = "Account Setup", 
    Text = "Login credentials",
    IsChecked = false 
});

stepper.ListItems.Add(new SimpleItem 
{ 
    Name = "Preferences", 
    Text = "Customize settings",
    IsChecked = false 
});

stepper.ListItems.Add(new SimpleItem 
{ 
    Name = "Review", 
    Text = "Confirm details",
    IsChecked = false 
});

// Handle step selection
stepper.SelectedItemChanged += (sender, e) =>
{
    MessageBox.Show($"Selected step: {e.Item.Name}");
};

this.Controls.Add(stepper);

var verticalStepper = new BeepSteppperBar
{
    Size = new Size(200, 400),
    Location = new Point(20, 20),
    Orientation = Orientation.Vertical,
    DisplayMode = StepDisplayMode.CheckImage,
    CheckImage = "check.svg",
    ButtonSize = new Size(35, 35)
};

// Add process steps
var steps = new[]
{
    new SimpleItem { Name = "Order Placed", Text = "Dec 15, 2:30 PM", IsChecked = true },
    new SimpleItem { Name = "Payment Confirmed", Text = "Dec 15, 2:32 PM", IsChecked = true },
    new SimpleItem { Name = "Processing", Text = "Preparing order", IsChecked = false },
    new SimpleItem { Name = "Shipped", Text = "Est. Dec 18", IsChecked = false },
    new SimpleItem { Name = "Delivered", Text = "Est. Dec 20", IsChecked = false }
};

foreach (var step in steps)
{
    verticalStepper.ListItems.Add(step);
}

this.Controls.Add(verticalStepper);

Properties

Core Properties

Display Properties

Events

var stepper = new BeepSteppperBar();

// Handle step selection changes
stepper.SelectedItemChanged += (sender, e) =>
{
    var selectedItem = e.Item;
  //  Console.WriteLine($"Step selected: {selectedItem.Name}");
  //  Console.WriteLine($"Step text: {selectedItem.Text}");
  //  Console.WriteLine($"Is completed: {selectedItem.IsChecked}");
    
    // Handle specific step logic
    HandleStepChange(selectedItem);
};

private void HandleStepChange(SimpleItem step)
{
    switch (step.Name)
    {
        case "Personal Info":
            ShowPersonalInfoPanel();
            break;
        case "Account Setup":
            ShowAccountSetupPanel();
            break;
        case "Preferences":
            ShowPreferencesPanel();
            break;
        case "Review":
            ShowReviewPanel();
            break;
    }
}

Methods

// Navigate to specific step
stepper.UpdateCurrentStep(2); // Move to third step (0-based)

// Mark step as completed
var completedStep = stepper.ListItems[0];
completedStep.IsChecked = true;
stepper.UpdateCheckedState(completedStep);

// Apply theme changes
stepper.Theme = "DarkTheme";
stepper.ApplyTheme();

Examples

public class WizardForm : Form
{
    private BeepSteppperBar stepper;
    private Panel contentPanel;
    private BeepButton nextButton;
    private BeepButton previousButton;
    private BeepButton finishButton;
    private List wizardPages;
    private int currentPageIndex = 0;

    public WizardForm()
    {
        InitializeWizardForm();
        SetupWizardPages();
    }

    private void InitializeWizardForm()
    {
        this.Text = "Setup Wizard";
        this.Size = new Size(600, 500);
        this.StartPosition = FormStartPosition.CenterScreen;

        // Create stepper
        stepper = new BeepSteppperBar
        {
            Size = new Size(580, 80),
            Location = new Point(10, 10),
            Orientation = Orientation.Horizontal,
            DisplayMode = StepDisplayMode.StepNumber,
            ButtonSize = new Size(45, 45)
        };

        // Add wizard steps
        stepper.ListItems.Add(new SimpleItem 
        { 
            Name = "Welcome", 
            Text = "Getting started",
            IsChecked = true 
        });
        stepper.ListItems.Add(new SimpleItem 
        { 
            Name = "Personal Info", 
            Text = "Your details" 
        });
        stepper.ListItems.Add(new SimpleItem 
        { 
            Name = "Preferences", 
            Text = "Settings" 
        });
        stepper.ListItems.Add(new SimpleItem 
        { 
            Name = "Complete", 
            Text = "Finish setup" 
        });

        // Content panel
        contentPanel = new Panel
        {
            Size = new Size(580, 300),
            Location = new Point(10, 100),
            BorderStyle = BorderStyle.FixedSingle
        };

        // Navigation buttons
        previousButton = new BeepButton
        {
            Text = "Previous",
            Size = new Size(80, 30),
            Location = new Point(400, 420),
            Enabled = false
        };

        nextButton = new BeepButton
        {
            Text = "Next",
            Size = new Size(80, 30),
            Location = new Point(490, 420)
        };

        finishButton = new BeepButton
        {
            Text = "Finish",
            Size = new Size(80, 30),
            Location = new Point(490, 420),
            Visible = false
        };

        // Event handlers
        stepper.SelectedItemChanged += OnStepperSelectionChanged;
        previousButton.Click += (s, e) => NavigateToPage(currentPageIndex - 1);
        nextButton.Click += (s, e) => NavigateToPage(currentPageIndex + 1);
        finishButton.Click += (s, e) => CompleteWizard();

        // Add controls
        this.Controls.AddRange(new Control[]
        {
            stepper, contentPanel, previousButton, nextButton, finishButton
        });
    }

    private void NavigateToPage(int pageIndex)
    {
        if (pageIndex < 0 || pageIndex >= wizardPages.Count)
            return;

        // Validate current page before moving
        if (currentPageIndex < wizardPages.Count)
        {
            var currentPage = wizardPages[currentPageIndex] as IWizardPage;
            if (currentPage != null && !currentPage.ValidatePage())
            {
                MessageBox.Show("Please complete all required fields before continuing.",
                              "Validation Error", MessageBoxButtons.OK, MessageBoxIcon.Warning);
                return;
            }
        }

        currentPageIndex = pageIndex;
        ShowPage(pageIndex);
        stepper.UpdateCurrentStep(pageIndex);
        UpdateNavigationButtons();
    }

    private void CompleteWizard()
    {
        MessageBox.Show("Wizard completed successfully!",
                       "Success", MessageBoxButtons.OK, MessageBoxIcon.Information);
        this.DialogResult = DialogResult.OK;
        this.Close();
    }
}

public class OrderTrackingControl : UserControl
{
    private BeepSteppperBar trackingStepper;
    private BeepLabel orderNumberLabel;
    private BeepLabel estimatedDeliveryLabel;
    private Timer refreshTimer;

    public string OrderNumber { get; set; }

    public OrderTrackingControl()
    {
        InitializeTrackingControl();
        SetupRefreshTimer();
    }

    private void InitializeTrackingControl()
    {
        this.Size = new Size(350, 500);

        // Order info
        orderNumberLabel = new BeepLabel
        {
            Text = $"Order #{OrderNumber}",
            Location = new Point(10, 10),
            Size = new Size(330, 30),
            Font = new Font("Arial", 12, FontStyle.Bold)
        };

        estimatedDeliveryLabel = new BeepLabel
        {
            Text = "Estimated delivery: Dec 20, 2024",
            Location = new Point(10, 40),
            Size = new Size(330, 25),
            ForeColor = Color.DarkGreen
        };

        // Tracking stepper
        trackingStepper = new BeepSteppperBar
        {
            Size = new Size(330, 400),
            Location = new Point(10, 80),
            Orientation = Orientation.Vertical,
            DisplayMode = StepDisplayMode.CheckImage,
            CheckImage = "check.svg",
            ButtonSize = new Size(30, 30)
        };

        // Initialize tracking steps
        SetupTrackingSteps();

        this.Controls.AddRange(new Control[]
        {
            orderNumberLabel, estimatedDeliveryLabel, trackingStepper
        });
    }

    private void SetupTrackingSteps()
    {
        var steps = new[]
        {
            new SimpleItem { Name = "Order Placed", Text = "Dec 15, 2024 at 2:30 PM", IsChecked = true },
            new SimpleItem { Name = "Payment Confirmed", Text = "Dec 15, 2024 at 2:32 PM", IsChecked = true },
            new SimpleItem { Name = "Processing", Text = "Preparing your order", IsChecked = true },
            new SimpleItem { Name = "Shipped", Text = "Dec 17, 2024 at 10:15 AM", IsChecked = false },
            new SimpleItem { Name = "Out for Delivery", Text = "Dec 20, 2024 (estimated)", IsChecked = false },
            new SimpleItem { Name = "Delivered", Text = "Awaiting delivery", IsChecked = false }
        };

        foreach (var step in steps)
        {
            trackingStepper.ListItems.Add(step);
        }

        // Set current step to "Processing"
        trackingStepper.UpdateCurrentStep(2);
    }
}

Theming

BeepSteppperBar provides comprehensive theming with automatic application of theme colors and fonts:

var stepper = new BeepSteppperBar
{
    Theme = "DarkTheme",
    UseThemeFont = true,
    IsRounded = true,
    ShowShadow = true
};

// Apply theme manually if needed
stepper.ApplyTheme();

// Theme automatically applies:
// - ButtonPressedBackColor: Completed/checked steps
// - ButtonBackColor: Currently selected step
// - DisabledBackColor: Pending/uncompleted steps
// - ButtonForeColor: Step text and numbers
// - CardTitleForeColor: Step titles
// - CardSubTitleForeColor: Step subtitles

Theme-Responsive Properties

• Step circles - Colors adapt based on completion state
• Text colors - Step titles and subtitles use theme colors
• Connector lines - Lines between steps use theme border colors
• Background colors - Main control background adapts to theme

Best Practices

🎯 User Experience

• Clear step labels: Use concise, descriptive names for each step
• Logical progression: Ensure steps follow a logical sequence that users can understand
• Visual feedback: Provide clear visual indicators for completed, current, and pending steps
• Allow navigation: Enable users to jump to previous steps when appropriate

🎨 Visual Design

• Consistent sizing: Use appropriate button sizes that are easy to click/tap
• Adequate spacing: Ensure sufficient spacing between steps for readability
• Color meaning: Use consistent color coding (green for completed, blue for current, gray for pending)
• Responsive design: Choose orientation based on available space and content layout

⚡ Performance

• Efficient updates: Use UpdateCurrentStep for programmatic navigation
• Animation control: Built-in animations are optimized, avoid custom animations on top
• Data binding: Use BindingList for automatic UI updates when data changes
• Memory management: Dispose of timer-based components properly

♿ Accessibility

• Keyboard navigation: Ensure stepper works with keyboard navigation
• Screen readers: Provide descriptive text for step content
• Color contrast: Ensure good contrast between text and background colors
• Alternative indicators: Don't rely solely on color to indicate step states