Siticone Circular Progress Meter
The SiticoneCircularProgressMeter is an advanced circular gauge control designed for monitoring values against specific thresholds.
Unlike standard progress bars, it features physics-based animations (Bounce, Elastic), logic-driven color states (Warning, Critical), and advanced visual effects like glow and pulse.
Values & Range
Properties defining the data model of the meter.
| Property | Type | Description & Usage Example |
|---|---|---|
Value |
double | meter.Value = 85.5; The current target value. Setting this property initiates the transition animation to the new value. |
MinimumValue |
double | meter.MinimumValue = 0; The lower bound of the meter scale. |
MaximumValue |
double | meter.MaximumValue = 200; The upper bound of the meter scale. |
Thresholds & States
Define logic for automatic color changes based on value severity.
| Property | Type | Description & Usage Example |
|---|---|---|
EnableWarningThreshold |
bool | meter.EnableWarningThreshold = true; Enables the warning state logic. |
WarningThreshold |
double |
meter.WarningThreshold = 75;
The value at which the meter switches to the WarningColor.
|
WarningColor |
Color | meter.WarningColor = Color.Orange; The color applied when the value exceeds the warning threshold. |
EnableCriticalThreshold |
bool | meter.EnableCriticalThreshold = true; Enables the critical state logic. |
CriticalThreshold |
double |
meter.CriticalThreshold = 90;
The value at which the meter switches to the CriticalColor.
|
CriticalColor |
Color | meter.CriticalColor = Color.Red; The color applied when the value exceeds the critical threshold. |
Design & Styles
Customize the visual rendering mode and indicator elements.
| Property | Type | Description & Usage Example |
|---|---|---|
DesignStyle |
DesignStyle |
meter.DesignStyle = ProgressMeterDesignStyle.Glow;
Solid: Flat single color. Gradient: Smooth fade between Primary and Secondary colors. Pulse: Color brightness oscillates. Glow: Draws blurred layers for a neon effect. |
IndicatorStyle |
IndicatorStyle |
meter.IndicatorStyle = ProgressMeterIndicatorStyle.Arrow;
Adds a visual pointer: None, Dot, Arrow, or Line.
|
PrimaryColor |
Color | meter.PrimaryColor = Color.DodgerBlue; |
SecondaryColor |
Color | meter.SecondaryColor = Color.Cyan; Used for gradients. |
TrackThickness |
int | meter.TrackThickness = 10; |
ProgressThickness |
int | meter.ProgressThickness = 15; |
Physics & Effects
Properties that control the "feel" of the value transition.
| Property | Type | Description & Usage Example |
|---|---|---|
AnimationMode |
AnimationMode |
meter.AnimationMode = ProgressMeterAnimationMode.Elastic;
None: Instant jump. Smooth: Linear interpolation. Elastic: Overshoots slightly before settling. Bounce: Bounces at the target value. |
Elasticity |
double | meter.Elasticity = 0.8; Controls the spring effect strength (0.1 to 1.0). Higher is bouncier. |
AnimationSpeed |
double | meter.AnimationSpeed = 0.15; Base speed factor. Lower values are slower. |
EnablePulse |
bool | meter.EnablePulse = true; Makes the active color breathe/pulse continuously. |
EnableGlow |
bool | meter.EnableGlow = true; Adds a blurred glow effect around the progress arc. |
Text Display
Customize the labels rendered in the center of the meter.
| Property | Type | Description & Usage Example |
|---|---|---|
ShowValue |
bool | meter.ShowValue = true; |
ValueFormat |
string | meter.ValueFormat = "0.0"; Standard format string for numbers. |
ValueSuffix |
string | meter.ValueSuffix = " MPH"; |
ShowLabel |
bool | meter.ShowLabel = true; |
LabelText |
string | meter.LabelText = "Velocity"; Descriptive text displayed below the numeric value. |
Events
Hooks for monitoring thresholds and animation states.
// Threshold Reached Event
// Fires when value crosses Warning or Critical thresholds.
meter.ThresholdReached += (s, e) =>
{
if (e.IsCritical)
{
Console.WriteLine($"CRITICAL ALERT: {e.ThresholdName} reached at {e.CurrentValue}!");
// Example: Play alarm sound
SystemSounds.Hand.Play();
}
};
// Value Changed Event
// Fires during animation steps.
meter.ValueChanged += (s, e) =>
{
// e.CurrentAnimatedValue contains the interpolated frame value
Console.WriteLine($"Animating... {e.CurrentAnimatedValue:0.0}");
};
Designer & Smart Tags
The SiticoneCircularProgressMeter includes a comprehensive Smart Tag menu for rapid setup.
| Feature Category | Capabilities |
|---|---|
Theme Presets |
One-click configurations:
|
Test Actions |
Test Animation: Previews the easing/physics in the designer. Test Thresholds: Simulates warning/critical states. |
Detailed Usage Examples
Example 1: Server Load Monitor
Using thresholds to visually indicate server health status.
private void SetupServerMonitor()
{
serverMeter.MinimumValue = 0;
serverMeter.MaximumValue = 100;
// Logic
serverMeter.EnableWarningThreshold = true;
serverMeter.WarningThreshold = 75;
serverMeter.WarningColor = Color.Orange;
serverMeter.EnableCriticalThreshold = true;
serverMeter.CriticalThreshold = 90;
serverMeter.CriticalColor = Color.Red;
// Visuals
serverMeter.DesignStyle = ProgressMeterDesignStyle.Glow;
serverMeter.AnimationMode = ProgressMeterAnimationMode.Elastic;
serverMeter.LabelText = "CPU Load";
}
private void OnTimerTick(object sender, EventArgs e)
{
// Update value - Colors change automatically based on thresholds
serverMeter.Value = GetCpuUsage();
}
Example 2: File Download Progress
Using the meter for a smooth, high-performance download indicator.
private void SetupDownloadMeter()
{
dlMeter.DesignStyle = ProgressMeterDesignStyle.Gradient;
dlMeter.PrimaryColor = Color.DeepSkyBlue;
dlMeter.SecondaryColor = Color.BlueViolet;
// Performance optimization for rapid updates
dlMeter.UltraFastPerformance = false; // Keep true if updates > 60fps
dlMeter.AnimationMode = ProgressMeterAnimationMode.Smooth;
dlMeter.UnitText = "%";
dlMeter.LabelText = "Downloading...";
}
private void OnProgressChanged(int percentage)
{
dlMeter.Value = percentage;
if (percentage >= 100)
{
dlMeter.LabelText = "Complete";
dlMeter.PrimaryColor = Color.LimeGreen;
dlMeter.SecondaryColor = Color.Green;
}
}