Siticone Advanced Linear Gauge
The SiticoneAdvancedLinearGauge is a powerful, horizontally or vertically oriented linear measurement control.
It goes beyond simple progress bars by offering precise scale divisions, customizable pointers (needles), multi-colored safety zones, and a modern digital display.
Ideal for industrial dashboards, medical interfaces, and detailed data visualization.
Values & Range
Properties defining the gauge's measurement scale, current reading, and formatting.
| Property | Type | Description & Usage Example |
|---|---|---|
CurrentValue |
double |
gauge.CurrentValue = 75.5;
The current reading of the gauge. Setting this triggers the smooth animation to the new value unless UltraFastPerformance is enabled.
|
MinimumRange |
double | gauge.MinimumRange = -50; The starting value of the scale. |
MaximumRange |
double | gauge.MaximumRange = 150; The ending value of the scale. |
PrecisionDigits |
int | gauge.PrecisionDigits = 2; Number of decimal places to show in the digital display (e.g., 2 shows "12.34"). |
UnitLabel |
string | gauge.UnitLabel = "°C"; Text appended to the numeric value in the display. |
Appearance & Design
Controls for the overall look, theme, and geometry of the linear gauge.
| Property | Type | Description & Usage Example |
|---|---|---|
VisualTheme |
LinearVisualTheme |
gauge.VisualTheme = LinearVisualTheme.Neon;
Applies a preset visual style. Options: Light, Dark, Professional, Neon, Minimal, etc.
|
Orientation |
Orientation | gauge.Orientation = Orientation.Vertical; Sets the layout direction (Horizontal or Vertical). |
TrackColor |
Color | gauge.TrackColor = Color.WhiteSmoke; Background color of the gauge track. |
FillColor |
Color | gauge.FillColor = Color.DodgerBlue; Color used for the progress fill bar. |
ShowGradientFill |
bool | gauge.ShowGradientFill = true; Enables a gradient effect on the fill bar for depth. |
ShowGlowEffect |
bool | gauge.ShowGlowEffect = true; Adds a luminous glow around the fill bar. |
CornerRadius |
int | gauge.CornerRadius = 10; Rounds the corners of the control background and track. |
Pointer Configuration
Options to customize the indicator (needle or slider) style and behavior.
| Property | Type | Description & Usage Example |
|---|---|---|
PointerStyle |
LinearPointerStyle |
gauge.PointerStyle = LinearPointerStyle.Triangle;
Shape of the value indicator. Options: Arrow, Diamond, Circle, Modern, Sleek.
|
PointerColor |
Color | gauge.PointerColor = Color.Black; Fill color of the pointer. |
PointerSize |
float | gauge.PointerSize = 15; Size of the pointer in pixels. |
EnablePointerGlow |
bool | gauge.EnablePointerGlow = true; Adds a pulsating glow effect around the pointer. |
ShowPointer |
bool | gauge.ShowPointer = true; Toggles visibility of the pointer. |
Scale & Ticks
Fine-tune the ruler marks, divisions, and numbering.
| Property | Type | Description & Usage Example |
|---|---|---|
MajorDivisions |
int | gauge.MajorDivisions = 10; Number of primary sections on the scale. |
MinorDivisionsPerMajor |
int | gauge.MinorDivisionsPerMajor = 4; Number of smaller ticks between major ticks. |
TickStyle |
TickMarkStyle |
gauge.TickStyle = TickMarkStyle.Line;
Shape of the ticks. Options: Line, Dot, Rectangle, Gradient.
|
ShowScaleNumbers |
bool | gauge.ShowScaleNumbers = true; Displays numeric labels along the scale. |
Zones & Warning
Configure colored zones to indicate safety levels, danger areas, or specific ranges.
| Property | Type | Description & Usage Example |
|---|---|---|
ShowWarningZone |
bool | gauge.ShowWarningZone = true; Enables a dedicated warning area at the end of the scale. |
WarningThreshold |
double | gauge.WarningThreshold = 80; Value where the warning zone begins. |
WarningColor |
Color | gauge.WarningColor = Color.Red; Color of the warning zone. |
Text & Display
Settings for the digital readout and gauge title.
| Property | Type | Description & Usage Example |
|---|---|---|
ShowDigitalDisplay |
bool | gauge.ShowDigitalDisplay = true; Shows the precise numeric value in a digital box. |
GaugeTitle |
string | gauge.GaugeTitle = "Pressure"; Label text displayed on the gauge. |
ValueDisplayFormat |
string | gauge.ValueDisplayFormat = "0.00"; Custom string format for the displayed value. |
Animation & Performance
Control the smoothness of value transitions and rendering quality.
| Property | Type | Description & Usage Example |
|---|---|---|
EnableAnimation |
bool | gauge.EnableAnimation = true; Toggles smooth sliding animation for the pointer. |
AnimationSpeed |
int | gauge.AnimationSpeed = 25; Speed of the animation (1-100). |
AntiAliasRendering |
bool | gauge.AntiAliasRendering = true; Enables high-quality anti-aliased drawing (smoother edges). |
UltraFastPerformance |
bool | gauge.UltraFastPerformance = true; Disables effects like Glow and Shadow for maximum FPS. |
Public Methods
// Define specific colored ranges on the gauge track
private void SetupCustomZones()
{
advancedGauge1.ClearColorZones();
// Safe Zone (0-50)
advancedGauge1.AddColorZone(0, 50, Color.LightGreen, "Normal");
// Caution Zone (50-80)
advancedGauge1.AddColorZone(50, 80, Color.Orange, "Caution");
// Danger Zone (80-100)
advancedGauge1.AddColorZone(80, 100, Color.Red, "Danger");
}
// Reset min/max values and adjust current value if out of bounds
advancedGauge1.CalibrateRange(0, 200);
Events
// 1. ValueChanged Event
// Fires whenever the value property updates (before animation finishes).
advancedGauge1.ValueChanged += (s, e) =>
{
Console.WriteLine($"Value changed from {e.OldValue} to {e.NewValue}");
};
// 2. AnimationComplete Event
// Fires when the pointer settles at the target value.
advancedGauge1.AnimationComplete += (s, e) =>
{
if (advancedGauge1.IsInWarningZone())
{
MessageBox.Show("Warning Limit Reached!");
}
};
Designer & Smart Tags
The control includes a rich Smart Tag menu for rapid configuration.
| Feature | Description |
|---|---|
Theme Presets |
One-click styling presets:
|
Quick Actions |
Test Warning Zone: Sets value to warning threshold. Calibrate: Resets Min/Max range. Toggle Orientation: Swaps between Horizontal and Vertical. |
Detailed Usage Examples
Example 1: Health Monitor (With Warning Zone)
Sets up a gauge to monitor a vital sign, using the built-in warning zone feature.
private void SetupHealthGauge()
{
healthGauge.GaugeTitle = "Heart Rate";
healthGauge.UnitLabel = "BPM";
healthGauge.MinimumRange = 40;
healthGauge.MaximumRange = 180;
// Configure Warning Zone (High BPM)
healthGauge.ShowWarningZone = true;
healthGauge.WarningThreshold = 150;
healthGauge.WarningColor = Color.Crimson;
// Visuals
healthGauge.VisualTheme = LinearVisualTheme.Green;
healthGauge.PointerStyle = LinearPointerStyle.Diamond;
healthGauge.EnableAnimation = true;
}
Example 2: Vertical Temperature Gauge
A vertically oriented gauge simulating a thermometer with custom color zones.
private void SetupThermometer()
{
tempGauge.Orientation = Orientation.Vertical;
tempGauge.GaugeTitle = "Temp";
tempGauge.UnitLabel = "°C";
tempGauge.MinimumRange = -20;
tempGauge.MaximumRange = 50;
// Define Zones
tempGauge.ClearColorZones();
tempGauge.AddColorZone(-20, 0, Color.LightBlue, "Freezing");
tempGauge.AddColorZone(0, 30, Color.LightGreen, "Normal");
tempGauge.AddColorZone(30, 50, Color.OrangeRed, "Hot");
// Style
tempGauge.VisualTheme = LinearVisualTheme.Light;
tempGauge.TrackThickness = 30;
tempGauge.ShowGradientFill = true;
}
Example 3: File Upload Progress
Demonstrates using the gauge as a detailed progress bar, utilizing events to trigger completion logic.
private void StartUpload()
{
uploadGauge.MinimumRange = 0;
uploadGauge.MaximumRange = 100;
uploadGauge.CurrentValue = 0;
uploadGauge.GaugeTitle = "Uploading...";
// Subscribe to animation completion
uploadGauge.AnimationComplete += (s, e) =>
{
if (uploadGauge.CurrentValue >= 100)
{
uploadGauge.GaugeTitle = "Complete";
uploadGauge.FillColor = Color.LimeGreen;
MessageBox.Show("Upload Finished!");
}
};
// Simulate upload
SimulateProgress();
}
private async void SimulateProgress()
{
for (int i = 0; i <= 100; i += 10)
{
uploadGauge.CurrentValue = i;
await Task.Delay(500);
}
}