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
// Sets the value instantly, bypassing any active animation settings.
public void ResetProgress()
{
// Jump to 0 immediately
hBarsProgress1.SetValueWithoutAnimation(0);
}
// 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);
}
// Resets the value to the Minimum property.
hBarsProgress1.ResetValue();
// Halts any currently running animation sequence.
// The value snaps to the final target immediately.
hBarsProgress1.StopAnimation();
Events
// 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:
|
Bar Styles |
Presets for line geometry:
|
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.
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.
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.
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);
};
}