Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Horizontal Bars Progress

Siticone HBars Progress

The SiticoneHBarsProgress is a segmented horizontal progress indicator composed of multiple individual bars. It features fluid cascading animations, customizable segmentation, and gradients, making it ideal for visualizing levels, audio spectrums, or stepped processes.

Values & Range

Properties managing the data visualized by the control.

Property Type Description & Usage Example
Value double hbars.Value = 65.5; The current progress value. Automatically clamped between Minimum and Maximum. Triggering this initiates animation if enabled.
Minimum double hbars.Minimum = 0; The lower bound of the progress range.
Maximum double hbars.Maximum = 100; The upper bound of the progress range.
Percentage int int p = hbars.Percentage; Read-only property calculating the current percentage (0-100).

Line Configuration

Settings defining the geometry and layout of the individual bars.

Property Type Description & Usage Example
LineCount int hbars.LineCount = 40; Total number of bars to draw within the control area.
LineWidth int hbars.LineWidth = 4; Width of each individual bar in pixels.
LineSpacing int hbars.LineSpacing = 2; Gap in pixels between adjacent bars.

Appearance & Styling

Visual customization options including colors, gradients, and shapes.

Property Type Description & Usage Example
StartColor Color hbars.StartColor = Color.DodgerBlue; The starting color of the progress bar gradient.
EndColor Color hbars.EndColor = Color.Cyan; The ending color of the progress bar gradient.
GradientMode LinearGradientMode hbars.GradientMode = LinearGradientMode.Horizontal; Direction of the color gradient.
UseRoundedCorners bool hbars.UseRoundedCorners = true; If true, bars are drawn with rounded edges instead of sharp rectangles.
CornerRadius int hbars.CornerRadius = 3; Radius of the rounded corners in pixels.
BackColor Color hbars.BackColor = Color.WhiteSmoke; Background color of the control container.

Animation System

Controls the motion dynamics of the bars when values change.

Property Type Description & Usage Example
EnableFluidAnimation bool hbars.EnableFluidAnimation = true; Enables a cascading "wave" effect where bars animate sequentially rather than all at once.
AnimationEnabled bool hbars.AnimationEnabled = true; Master toggle for animations. If false, value changes are instant.
AnimationDuration int hbars.AnimationDuration = 300; Duration of the animation cycle in milliseconds.
AnimationEasingFunc AnimationEasing hbars.AnimationEasingFunc = AnimationEasing.EaseOutQuad; Mathematical function for motion smoothing (e.g., Linear, EaseIn, EaseOut).
IsAnimating bool if (hbars.IsAnimating) { ... } Read-only property indicating if an animation is currently active.

Text & Interaction

Property Type Description & Usage Example
ShowPercentage bool hbars.ShowPercentage = true; Overlay text showing the current percentage value.
FormatString string hbars.FormatString = "0.0"; Custom format for the percentage text.
TextAlignment ContentAlignment hbars.TextAlignment = ContentAlignment.MiddleCenter; Position of the overlay text.
UserInteractionEnabled bool hbars.UserInteractionEnabled = true; Allows users to change the value by clicking or dragging on the control.
UltraFastMode bool hbars.UltraFastMode = true; Disables complex gradients and fluid animations for high-frequency updates.

Public Methods

SetValueWithoutAnimation(double)
// Sets the value instantly, bypassing any active animation settings.
public void ResetProgress()
{
                // Jump to 0 immediately
    hBarsProgress1.SetValueWithoutAnimation(0);
}
IncrementValue(double) / DecrementValue(double)
// Convenience methods to adjust value relative to current position.
private void btnStep_Click(object sender, EventArgs e)
{
                // Increase by 10 units
    hBarsProgress1.IncrementValue(10);
    
                // Decrease by 5 units
    hBarsProgress1.DecrementValue(5);
}
ResetValue()
// Resets the value to the Minimum property.
hBarsProgress1.ResetValue();
StopAnimation()
// Halts any currently running animation sequence.
// The value snaps to the final target immediately.
hBarsProgress1.StopAnimation();

Events

Events Wiring
// 1. ProgressChanged Event
// Fires whenever the target value property changes.
hBarsProgress1.ProgressChanged += (s, e) => 
{
                Console.WriteLine($"Value changed: {e.OldValue} -> {e.NewValue}");
};

// 2. AnimationCompleted Event
// Fires when the visual transition to the target value finishes.
hBarsProgress1.AnimationCompleted += (s, e) => 
{
    lblStatus.Text = "Ready";
};

// 3. AnimationStateChanged Event
// Fires when animation starts or stops.
hBarsProgress1.AnimationStateChanged += (s, e) => 
{
                if (e.IsAnimating)
        lblStatus.Text = "Processing...";
};

Designer & Smart Tags

The control includes comprehensive design-time support for rapid styling.

Feature Description
Color Themes One-click presets for common color schemes:
  • Themes: Light, Dark, Success, Warning, Danger, Ocean, Sunset, Cyberpunk, etc.
Bar Styles Presets for line geometry:
  • Standard: Default 4px width.
  • Thin: High density 2px lines.
  • Chunky: Bold 8px blocks.
  • No Gaps: Solid bar appearance (0px spacing).
Quick Testing Actions to simulate animations in the designer: Animate to 25%, 75%, Random, or Full.

Detailed Usage Examples

Example 1: Audio Spectrum Visualizer

Configures the control to look like an audio equalizer by using high line counts, tight spacing, and fluid animation.

C# - Audio Visualizer Style
private void SetupAudioStyle()
{
    hBars.AppearanceStyle = ProgressAppearanceStyle.Flat; // Custom logic usually
    
                // High density lines
    hBars.LineCount = 60;
    hBars.LineWidth = 3;
    hBars.LineSpacing = 1;
    hBars.UseRoundedCorners = true;
    hBars.CornerRadius = 1;
    
                // Neon Colors
    hBars.StartColor = Color.Magenta;
    hBars.EndColor = Color.Cyan;
    hBars.GradientMode = LinearGradientMode.Horizontal;
    
                // Fast, fluid movement
    hBars.EnableFluidAnimation = true;
    hBars.AnimationDuration = 150;
    hBars.AnimationEasingFunc = SiticoneHBarsProgress.AnimationEasing.EaseOutQuad;
    
                // Hide text for clean look
    hBars.ShowPercentage = false;
}

Example 2: Interactive Volume Slider

Enables user interaction to allow the control to function as a slider input.

C# - Interactive Input
private void SetupVolumeControl()
{
    hBars.UserInteractionEnabled = true;
    hBars.Minimum = 0;
    hBars.Maximum = 100;
    hBars.Value = 50;
    
                // Style as chunky blocks
    hBars.LineWidth = 8;
    hBars.LineSpacing = 2;
    hBars.LineCount = 20;
    hBars.StartColor = Color.LimeGreen;
    hBars.EndColor = Color.Red;
    
                // React to user changes
    hBars.ProgressChanged += (s, e) => 
    {
                SetSystemVolume((int)e.NewValue);
        lblVolume.Text = $"Volume: {e.NewValue:0}%";
    };
}

Example 3: High Performance Mode

Optimizes the control for rapid updates (e.g., real-time sensor data) by disabling expensive visual effects.

C# - Performance Optimization
public void EnableFastMode()
{
                // Disable complex visuals
    hBars.UltraFastMode = true;
    hBars.EnableFluidAnimation = false;
    hBars.AnimationEnabled = false;
    
                // Use simple geometry
    hBars.UseRoundedCorners = false;
    
                // Update constantly from sensor
    sensorTimer.Tick += (s, e) => 
    {
                double val = ReadSensor();
                // Set directly without animation overhead
        hBars.SetValueWithoutAnimation(val);
    };
}