Siticone Segment Gauge
The SiticoneSegmentGauge is a modern, responsive circular progress indicator composed of discrete geometric segments.
Unlike traditional continuous gauges, it uses separated blocks (segments) to visualize data, offering a digital, industrial, or futuristic aesthetic.
It features "Safe", "Warning", and "Danger" zones with smooth color transitions, animated value updates, and a variety of visual styles ranging from industrial to neon.
Visual Styling
Customize the geometric look of the segments, spacing, and overall gauge shape.
| Property | Type | Description & Usage |
|---|---|---|
GaugeStyle |
Enum |
gauge.GaugeStyle = SegmentGaugeStyle.Neon; Sets the overall visual theme. Options: Classic, Modern, Minimal, Industrial, Neon. Setting this applies defaults for spacing and shape.
|
SegmentCount |
int |
gauge.SegmentCount = 20; The total number of discrete segments that make up the gauge arc. |
SegmentShape |
Enum |
gauge.SegmentShape = SegmentShapeEx.Rounded; Defines the geometric shape of each segment: Rectangle, Rounded, Pill, Diamond.
|
SegmentSpacing |
float |
gauge.SegmentSpacing = 2.5f; The gap in pixels between adjacent segments. |
SegmentThickness |
int |
gauge.SegmentThickness = 15; The radial thickness (width) of the segments. |
InnerRadius |
float |
gauge.InnerRadius = 0.7f; Controls the hole size in the center (0.1 to 0.95). |
GlowEffect |
bool |
gauge.GlowEffect = true; If true, active segments emit a soft glow using the GlowColor.
|
GlowColor |
Color | The color used for the glow effect. |
ShowOuterRing |
bool | Draws a thin circular ring outside the segments for decoration. |
Values & Thresholds
Manage the data displayed by the gauge and how it reacts to different value ranges (Safe/Warning/Danger).
| Property | Type | Description & Usage |
|---|---|---|
Value |
float |
gauge.Value = 75.5f; The current value displayed. Changing this triggers an animation to the new value if EnableAnimation is true.
|
MinimumValue |
float | The start value of the scale (e.g., 0). |
MaximumValue |
float | The end value of the scale (e.g., 100). |
WarningThreshold |
float |
gauge.WarningThreshold = 60; Values above this limit will switch to the WarningColor.
|
DangerThreshold |
float |
gauge.DangerThreshold = 85; Values above this limit will switch to the DangerColor.
|
NormalColor |
Color | Color used when value is below WarningThreshold. |
WarningColor |
Color | Color used when value is between WarningThreshold and DangerThreshold. |
DangerColor |
Color | Color used when value is above DangerThreshold. |
InactiveSegmentColor |
Color | Color of the "empty" segments. |
UseSmoothColorTransition |
bool | If true, colors blend smoothly between zones instead of switching abruptly. |
Text & Labels
Configuration for the central readout and scale labels.
| Property | Type | Description & Usage |
|---|---|---|
ShowValueLabel |
bool | Displays the numeric value in the center of the gauge. |
ValueFormat |
string | Format string for the center text (e.g., "0", "F2"). Automatically appends UnitText. |
UnitText |
string |
gauge.UnitText = "°C"; Suffix text displayed after the value. |
DecimalPlaces |
int | Number of decimal digits to show (0 for integers). |
ShowTickLabels |
bool | Shows numeric labels around the arc at regular intervals. |
ShowMinMaxLabels |
bool | Explicitly shows the Minimum and Maximum values at the start/end of the arc. |
LabelColor |
Color | Color for all text labels. |
Animation Settings
Control how the gauge animates between values.
| Property | Type | Description |
|---|---|---|
EnableAnimation |
bool | Master switch for value animations. |
AnimationSpeed |
int | Controls the speed of the transition (1-100). |
AnimateSegmentBySegment |
bool |
gauge.AnimateSegmentBySegment = true; If true, segments light up one by one (discrete steps). If false, value interpolates smoothly (fluid motion). |
Public Methods
Programmatic control over the gauge state.
// Updates the current value, optionally forcing animation on/off for this specific update.
// Useful for initial setup (animate=false) vs runtime updates (animate=true).
public void SetValue(float value, bool animate)
{
// Example: Set to 50 with animation
siticoneSegmentGauge1.SetValue(50, true);
}
// Resets the gauge value to the MinimumValue.
public void Reset(bool animate = true)
{
siticoneSegmentGauge1.Reset();
}
// Adds a delta to the current value.
public void AddValue(float delta, bool animate = true)
{
// Increase value by 10
siticoneSegmentGauge1.AddValue(10);
}
// Dynamically changes the resolution of the gauge.
// preserveValue: If true, recalculates the active segments to match the current value percentage.
public void SetSegmentCount(int count, bool preserveValue = true)
{
siticoneSegmentGauge1.SetSegmentCount(50); // Switch to high-res mode
}
Events
Handle runtime changes and threshold crossings.
// 1. ValueChanged
// Fired whenever the value property updates (during animation or manual set).
gauge.ValueChanged += (s, e) =>
{
Console.WriteLine($"Current: {e.NewValue}, Previous: {e.OldValue}");
};
// 2. Danger Zone Entry
// Fired once when the value crosses the DangerThreshold upwards.
gauge.EnteredDangerZone += (s, e) =>
{
lblStatus.Text = "CRITICAL WARNING";
lblStatus.ForeColor = Color.Red;
// Optional: Flash the gauge background
gauge.GaugeBackColor = Color.FromArgb(50, 255, 0, 0);
};
// 3. Danger Zone Exit
// Fired once when the value drops below the DangerThreshold.
gauge.ExitedDangerZone += (s, e) =>
{
lblStatus.Text = "Stabilized";
gauge.GaugeBackColor = Color.FromArgb(240, 240, 240);
};
// 4. AnimationCompleted
// Fired when the visual transition finishes.
gauge.AnimationCompleted += (s, e) =>
{
Console.WriteLine("Animation finished.");
};
Comprehensive Examples
1. CPU Load Monitor (Industrial Style)
Sets up a gauge to monitor system resources with a rugged industrial look.
public void SetupCpuGauge()
{
// Theme Settings
gauge.GaugeStyle = SegmentGaugeStyle.Industrial;
gauge.SegmentCount = 12;
gauge.SegmentShape = SegmentShapeEx.Rectangle;
gauge.SegmentSpacing = 4.0f;
gauge.ShowOuterRing = true;
// Colors
gauge.NormalColor = Color.SeaGreen;
gauge.WarningColor = Color.Orange;
gauge.DangerColor = Color.Firebrick;
gauge.GaugeBackColor = Color.FromArgb(60, 60, 60); // Dark background
gauge.LabelColor = Color.White;
// Thresholds
gauge.MaximumValue = 100;
gauge.WarningThreshold = 75;
gauge.DangerThreshold = 90;
gauge.UnitText = "%";
// Animation
gauge.EnableAnimation = true;
gauge.AnimateSegmentBySegment = true; // Blocky animation fits industrial theme
}
private void UpdateCpuUsage(float usage)
{
gauge.SetValue(usage, true);
}
2. Temperature Sensor (Neon Style)
Creates a glowing, futuristic gauge for temperature readings.
public void SetupTempGauge()
{
// Theme Settings
gauge.GaugeStyle = SegmentGaugeStyle.Neon;
gauge.SegmentShape = SegmentShapeEx.Pill;
gauge.SegmentCount = 24;
gauge.GlowEffect = true;
gauge.GlowColor = Color.Cyan;
// Range
gauge.MinimumValue = -20;
gauge.MaximumValue = 60;
gauge.UnitText = "°C";
// Smooth fluid animation for neon look
gauge.AnimateSegmentBySegment = false;
gauge.UseSmoothColorTransition = true;
}
Designer Smart Tags
The visual designer provides one-click presets to instantly style the gauge. Access these via the Smart Tag menu in Visual Studio.
| Preset Name | Visual Description |
|---|---|
ModernSegmentTheme | Clean rounded segments, blue/orange/red thresholds, light background. |
NeonSegmentTheme | Dark background, pill shapes, glowing green/yellow/red colors. |
IndustrialSegmentTheme | Blocky rectangular segments, gray/orange/red colors, outer ring enabled. |
MinimalistSegmentTheme | Thin segments, no labels, monochromatic scheme. |
RainbowSegmentTheme | Rounded segments with smooth color transitions. |