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
// Updates the progress bar instantly, bypassing the animation engine.
public void SyncVolume(double volume)
{
// Instant update for responsive sliders
vBarsProgress1.SetValueWithoutAnimation(volume);
}
// 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);
}
// Resets the progress to the Minimum value.
vBarsProgress1.ResetValue();
// Immediately stops any active transition animation.
// The value freezes at its current visual state.
vBarsProgress1.StopAnimation();
Events
// 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.
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.
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.
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);
};
}