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

Siticone VBars Progress

The SiticoneVBarsProgress control is a vertical, segmented progress indicator. It renders a stack of horizontal lines that fill from bottom to top, simulating a "ladder" or "tower" effect. This design is ideal for volume meters, battery indicators, signal strength gauges, and server load monitoring.

Values & Range

Properties for managing the progress data.

Property Type Description & Usage Example
Value double vBars.Value = 75.0; The current progress value. Setting this property triggers the smooth transition animation automatically.
Minimum double vBars.Minimum = 0; The lower bound of the progress range (default 0).
Maximum double vBars.Maximum = 100; The upper bound of the progress range (default 100).
Percentage int int p = vBars.Percentage; Read-only property that returns the current value as a percentage (0-100).

Line Configuration

Settings that define the geometry of the stacked segments.

Property Type Description & Usage Example
LineCount int vBars.LineCount = 20; Total number of horizontal lines stacked vertically in the control.
LineWidth int vBars.LineWidth = 4; Thickness (height) of each individual line in pixels.
LineSpacing int vBars.LineSpacing = 2; Vertical gap in pixels between stacked lines.

Appearance & Styling

Visual customization for colors, gradients, and shapes.

Property Type Description & Usage Example
StartColor Color vBars.StartColor = Color.Green; The primary color for the filled portion of the bars.
EndColor Color vBars.EndColor = Color.Lime; The secondary color used for gradient fills.
GradientMode LinearGradientMode vBars.GradientMode = LinearGradientMode.Vertical; Direction of the gradient blend within the lines.
UseRoundedCorners bool vBars.UseRoundedCorners = true; If true, draws each line segment with rounded edges.
CornerRadius int vBars.CornerRadius = 3; The radius of the rounded corners in pixels.
HoverColor Color vBars.HoverColor = Color.FromArgb(50, Color.White); An overlay color applied when the mouse hovers over the active bars.

Animation System

Controls the physics and smoothing of value transitions.

Property Type Description & Usage Example
AnimationEnabled bool vBars.AnimationEnabled = true; Toggles smoothing on/off. When false, value changes are instant.
AnimationDuration int vBars.AnimationDuration = 300; Time in milliseconds to complete a transition from one value to another.
AnimationEasingFunc AnimationEasing vBars.AnimationEasingFunc = AnimationEasing.EaseOutBounce; Physics function for the motion (e.g., Linear, EaseIn, Bounce, Elastic).
IsAnimating bool if (vBars.IsAnimating) { ... } Read-only flag indicating if an animation is currently in progress.

Text & Interaction

Property Type Description & Usage Example
ShowPercentage bool vBars.ShowPercentage = true; Displays the current value as a percentage overlay on the control.
FormatString string vBars.FormatString = "0"; String format for the percentage text (e.g., "0.0" for decimals).
TextAlignment ContentAlignment vBars.TextAlignment = ContentAlignment.TopCenter; Position of the text overlay within the control bounds.
UserInteractionEnabled bool vBars.UserInteractionEnabled = true; Allows users to change the value by clicking or dragging the mouse over the bars.
UltraFastMode bool vBars.UltraFastMode = true; Disables anti-aliasing and animations for high-frequency updates (e.g., audio visualization).

Public Methods

SetValueWithoutAnimation(double)
// Updates the progress bar instantly, bypassing the animation engine.
public void SyncVolume(double volume)
{
                // Instant update for responsive sliders
    vBarsProgress1.SetValueWithoutAnimation(volume);
}
IncrementValue(double) / DecrementValue(double)
// Adjusts the current value by a specific delta.
private void btnVolUp_Click(object sender, EventArgs e)
{
    vBarsProgress1.IncrementValue(5);
}

private void btnVolDown_Click(object sender, EventArgs e)
{
    vBarsProgress1.DecrementValue(5);
}
ResetValue()
// Resets the progress to the Minimum value.
vBarsProgress1.ResetValue();
StopAnimation()
// Immediately stops any active transition animation.
// The value freezes at its current visual state.
vBarsProgress1.StopAnimation();

Events

Events Wiring
// 1. ProgressChanged Event
// Fires whenever the target value changes (either programmatically or via interaction).
vBarsProgress1.ProgressChanged += (s, e) => 
{
                Console.WriteLine($"Value changed from {e.OldValue} to {e.NewValue}");
};

// 2. AnimationCompleted Event
// Fires when the visual bar has finished growing/shrinking to the target value.
vBarsProgress1.AnimationCompleted += (s, e) => 
{
                if (vBarsProgress1.Value >= 100)
    {
                MessageBox.Show("Fully Charged!");
    }
};

// 3. AnimationStateChanged Event
// Fires when the animation starts or stops.
vBarsProgress1.AnimationStateChanged += (s, e) => 
{
    lblStatus.Text = e.IsAnimating ? "Animating..." : "Idle";
};

Designer & Smart Tags

Design-time tools available in the Visual Studio Smart Tag menu.

Feature Description
Theme Presets Light/Dark: Standard UI themes.
Colors: Success (Green), Danger (Red), Warning (Yellow), Info (Blue), and more (Orange, Purple, Violet).
Configuration Quick access to Line Count, Line Width, and Line Spacing to drastically change the visual density.
Interaction Toggle User Interaction Enabled to switch between a display-only gauge and an input slider.

Detailed Usage Examples

Example 1: Battery Level Indicator

Creates a "battery" visual style using stacked green blocks that turn red when low.

C# - Battery Monitor
private void UpdateBattery(int level)
{
    batteryBar.Value = level;
    
                if (level < 20)
    {
        batteryBar.StartColor = Color.Red;
        batteryBar.EndColor = Color.DarkRed;
    }
    else
    {
        batteryBar.StartColor = Color.LimeGreen;
        batteryBar.EndColor = Color.Green;
    }
    
                // Styling for "Block" look
    batteryBar.LineCount = 10; // 10 blocks = 10% each
    batteryBar.LineWidth = 15;
    batteryBar.LineSpacing = 3;
    batteryBar.UseRoundedCorners = true;
}

Example 2: Audio Peak Meter

Uses UltraFastMode to handle rapid updates from an audio source without performance lag.

C# - Audio Visualizer
private void SetupAudioMeter()
{
                // Optimize for speed
    vBars.UltraFastMode = true;
    vBars.AnimationEnabled = false;
    
                // High density lines for detailed metering
    vBars.LineCount = 50;
    vBars.LineWidth = 2;
    vBars.LineSpacing = 1;
    vBars.UseRoundedCorners = false;
    
                // Color Gradient
    vBars.StartColor = Color.Cyan;
    vBars.EndColor = Color.Blue;
}

// Called frequently by audio engine
public void OnAudioData(double peakLevel)
{
                // Direct update bypasses animation queue
    vBars.SetValueWithoutAnimation(peakLevel);
}

Example 3: Interactive Equalizer Slider

Configures the control as an interactive slider for an equalizer, allowing users to drag the level up and down.

C# - EQ Slider
private void InitSlider()
{
    vBars.UserInteractionEnabled = true;
    vBars.HoverColor = Color.FromArgb(50, Color.White);
    
                // Visual Feedback
    vBars.ShowPercentage = true;
    vBars.FormatString = "0dB";
    
                // Physics feel
    vBars.AnimationEnabled = true;
    vBars.AnimationDuration = 200;
    vBars.AnimationEasingFunc = SiticoneVBarsProgress.AnimationEasing.EaseOutQuad;
    
    vBars.ProgressChanged += (s, e) => 
    {
                UpdateEqBand(e.NewValue);
    };
}