Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Segment Gauge

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.

PropertyTypeDescription & 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).

PropertyTypeDescription & 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.

PropertyTypeDescription & 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.

PropertyTypeDescription
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.

SetValue(float, bool)
// 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);
}
Reset(bool)
// Resets the gauge value to the MinimumValue.
public void Reset(bool animate = true)
{
    siticoneSegmentGauge1.Reset();
}
AddValue(float, bool)
// Adds a delta to the current value.
public void AddValue(float delta, bool animate = true)
{
                // Increase value by 10
    siticoneSegmentGauge1.AddValue(10);
}
SetSegmentCount(int, bool)
// 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.

Zone Monitoring Example
// 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.

C# - Industrial Setup
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.

C# - Neon Setup
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 NameVisual Description
ModernSegmentThemeClean rounded segments, blue/orange/red thresholds, light background.
NeonSegmentThemeDark background, pill shapes, glowing green/yellow/red colors.
IndustrialSegmentThemeBlocky rectangular segments, gray/orange/red colors, outer ring enabled.
MinimalistSegmentThemeThin segments, no labels, monochromatic scheme.
RainbowSegmentThemeRounded segments with smooth color transitions.