Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Linear Bar Gauge

Siticone Linear Bar Gauge

The SiticoneLinearBarGauge is a professional linear scale control that supports both horizontal and vertical orientations. It features a movable pointer, colored ranges (e.g., safe/danger zones), gradient value bars, and momentum-based physics animation.

Values & Scale

Core properties to define the measurement data.

Property Type Description & Usage Example
Value float bar.Value = 75.5f; The current reading. Setting this triggers smooth animation.
Minimum float bar.Minimum = 0; Scale start value.
Maximum float bar.Maximum = 100; Scale end value.
Orientation Orientation bar.Orientation = Orientation.Vertical; Layout direction.

Color Ranges

Define specific zones on the scale track (e.g., Green for 0-50, Red for 80-100).

C# - Defining Ranges
// Clear existing ranges
bar.Ranges.Clear();

// Add Safe Zone (Green)
bar.Ranges.Add(new GaugeRange(Color.Green, 0, 50));

// Add Warning Zone (Orange)
bar.Ranges.Add(new GaugeRange(Color.Orange, 50, 80));

// Add Critical Zone (Red)
bar.Ranges.Add(new GaugeRange(Color.Red, 80, 100));

Appearance & Styling

Customize the track, border, and background.

Property Type Description & Usage Example
ScaleTrackColor Color bar.ScaleTrackColor = Color.LightGray; Color of the empty track.
BorderColor Color bar.BorderColor = Color.Gray; Color of the outer border.
BorderRadius int bar.BorderRadius = 10; Corner roundness.

Pointer & Value Bar

Settings for the moving indicator and the filled progress bar.

Property Type Description & Usage Example
PointerColor Color bar.PointerColor = Color.Blue; Color of the triangular pointer.
PointerSize Size bar.PointerSize = new Size(12, 8); Dimensions of the pointer.
ShowValueBar bool bar.ShowValueBar = true; Shows a filled bar representing the value.
ValueBarColor1 Color bar.ValueBarColor1 = Color.Cyan; Start color for value bar gradient.
ValueBarColor2 Color bar.ValueBarColor2 = Color.Blue; End color for value bar gradient.
EnableValueBarGlow bool bar.EnableValueBarGlow = true; Adds a neon glow effect to the value bar.

Events

Events Wiring
// 1. ValueChanged Event
bar.ValueChanged += (s, e) => 
{
                Console.WriteLine($"Value: {e.NewValue}");
};

// 2. RangeEnter Event
// Fires when pointer enters a specific color range.
bar.RangeEnter += (s, e) => 
{
                MessageBox.Show($"Entered Range: {e.Range}");
};

// 3. RangeLeave Event
bar.RangeLeave += (s, e) => 
{
                Console.WriteLine("Left Range");
};

Designer & Smart Tags

Visual Studio integration for rapid setup.

Feature Description
Presets Themes: Light, Dark, Success, Warning, Danger, Neon.
Layouts: Horizontal, Vertical.
Copy/Paste Copy visual settings from one bar to another instantly.