Siticone Circular Progress
The SiticoneCircularProgress is a versatile gauge control for visualizing numeric values within a range.
It supports modern design features such as gradients, customizable end caps, an inner circle background, and precision tick marks.
With built-in smooth animation and an "Ultra Performance" mode, it handles everything from high-fidelity dashboards to resource-constrained monitoring interfaces.
Values & Range
Properties defining the data model of the gauge.
| Property | Type | Description & Usage Example |
|---|---|---|
Value |
float |
progress.Value = 75.5f;
The current position of the indicator. Setting this triggers an animation unless UltraPerformanceMode is enabled.
|
MinimumValue |
float | progress.MinimumValue = 0; The lower bound of the gauge's scale. |
MaximumValue |
float | progress.MaximumValue = 100; The upper bound of the gauge's scale. |
Visual Appearance
Customize the stroke, colors, and shape of the progress arc.
| Property | Type | Description & Usage Example |
|---|---|---|
FillColor |
Color | progress.FillColor = Color.DodgerBlue; The color of the active (filled) portion of the gauge when gradients are disabled. |
TrackColor |
Color | progress.TrackColor = Color.WhiteSmoke; The background color of the unfilled track. |
GaugeThickness |
int | progress.GaugeThickness = 15; The width of the progress arc in pixels. |
CapStyle |
GaugeCapStyle |
progress.CapStyle = GaugeCapStyle.Round;
Determines the shape of the arc ends. Options: Round or Flat.
|
StartAngle |
int | progress.StartAngle = 270; The starting position in degrees. 270 is Top, 0 is Right, 90 is Bottom, 180 is Left. |
SweepAngle |
int | progress.SweepAngle = 360; The length of the arc in degrees. 360 creates a full circle; 180 creates a semi-circle. |
Gradient Support
Enhance the visual appeal with smooth color transitions.
| Property | Type | Description & Usage Example |
|---|---|---|
GradientEnabled |
bool |
progress.GradientEnabled = true;
Enables the gradient renderer. Note: Gradients are disabled in UltraPerformanceMode.
|
GradientColor1 |
Color | progress.GradientColor1 = Color.Blue; The starting color of the gradient. |
GradientColor2 |
Color | progress.GradientColor2 = Color.Cyan; The ending color of the gradient. |
Inner Circle & Ticks
Options for the center background and measurement scales.
| Property | Type | Description & Usage Example |
|---|---|---|
DrawInnerCircle |
bool | progress.DrawInnerCircle = true; Fills the center of the gauge with a solid color. |
InnerCircleColor |
Color | progress.InnerCircleColor = Color.White; |
ShowTicks |
bool | progress.ShowTicks = true; Draws scale markers around the gauge track. |
TickCount |
int | progress.TickCount = 20; The total number of tick marks to display. |
TickColor |
Color | progress.TickColor = Color.Gray; |
Value Display
Configuration for the central text label.
| Property | Type | Description & Usage Example |
|---|---|---|
ShowValue |
bool | progress.ShowValue = true; Toggles the visibility of the central text. |
ValueFont |
Font | progress.ValueFont = new Font("Segoe UI", 20); |
ValueFormat |
string | progress.ValueFormat = "0.0"; Standard numeric format string (e.g., "0", "0.00"). |
UnitText |
string | progress.UnitText = "%"; Suffix text appended to the formatted value. |
Animation & Performance
| Property | Type | Description & Usage Example |
|---|---|---|
EnableAnimation |
bool | progress.EnableAnimation = true; If true, value changes are animated smoothly. If false, the gauge snaps instantly to the new value. |
AnimationSpeed |
int | progress.AnimationSpeed = 15; Speed factor (1-100). Higher values result in faster transitions. |
UltraPerformanceMode |
bool | progress.UltraPerformanceMode = true; Critical for High Load: When enabled, disables animations, gradients, and ticks. Forces simple Flat caps. Use this when updating many gauges simultaneously. |
Events
Hooks for monitoring state changes.
// Fires when the value changes (during animation or manual set)
progress.ValueChanged += (s, e) =>
{
Console.WriteLine($"Value moved from {e.OldValue} to {e.NewValue}");
};
// Fires when the visual animation reaches the target value
progress.AnimationCompleted += (s, e) =>
{
if (!e.AnimationInterrupted)
{
Console.WriteLine("Animation finished successfully!");
}
};
Designer & Smart Tags
Integrated design-time support for rapid styling.
| Feature | Description |
|---|---|
Theme Presets |
Instantly apply professional styles:
|
Copy/Paste Settings |
Easily duplicate the exact visual configuration from one gauge to another. |
Detailed Usage Examples
Example 1: Dashboard CPU Monitor
Creating a high-visibility gauge with gradient coloring.
private void SetupCpuGauge()
{
cpuGauge.MinimumValue = 0;
cpuGauge.MaximumValue = 100;
// Visuals
cpuGauge.GradientEnabled = true;
cpuGauge.GradientColor1 = Color.Cyan;
cpuGauge.GradientColor2 = Color.Blue;
cpuGauge.GaugeThickness = 20;
cpuGauge.StartAngle = 180; // Start from left
cpuGauge.SweepAngle = 180; // Semi-circle
// Text
cpuGauge.UnitText = "%";
cpuGauge.ValueFormat = "0";
}
private void UpdateCpu(float usage)
{
// Change color based on load
if (usage > 80)
cpuGauge.GradientColor2 = Color.Red;
else
cpuGauge.GradientColor2 = Color.Blue;
cpuGauge.Value = usage;
}
Example 2: High-Performance Data Feed
Updating multiple gauges rapidly without UI lag using UltraPerformanceMode.
private void InitializeFastGauges()
{
foreach (var gauge in _gaugeList)
{
// Disable expensive rendering features
gauge.UltraPerformanceMode = true;
// Visuals for speed
gauge.ShowTicks = false;
gauge.GradientEnabled = false;
gauge.FillColor = Color.LimeGreen;
gauge.CapStyle = SiticoneCircularProgress.GaugeCapStyle.Flat;
}
}
private void OnHighFrequencyData(List<float> values)
{
// Updates happen instantly without animation overhead
for (int i = 0; i < values.Count; i++)
{
_gaugeList[i].Value = values[i];
}
}