Siticone VLine Progress

The SiticoneVLineProgress is a sleek, vertical line progress indicator. It mirrors the functionality of the HLineProgress but is oriented vertically, making it perfect for volume mixers, temperature gauges, equalizer bars, and vertical layout dashboards. It includes physics-based animations, gradients, and a completion pulse effect.

Values & Range

Properties managing the progress data and limits.

Property	Type	Description & Usage Example
`Value`	double	vLine.Value = 45.5; The current progress level. Automatically animates from the previous value to the new one upon assignment.
`Minimum`	double	vLine.Minimum = 0; The bottom-most value of the vertical bar.
`Maximum`	double	vLine.Maximum = 100; The top-most value of the vertical bar.

Appearance & Colors

Visual customization options for the vertical track and fill.

Property	Type	Description & Usage Example
`PrimaryColor`	Color	vLine.PrimaryColor = Color.Magenta; The main fill color for the progress indicator.
`SecondaryColor`	Color	vLine.SecondaryColor = Color.Purple; The secondary color used for gradient shading.
`GradientDirection`	GradientDirection	vLine.GradientDirection = GradientDirection.Vertical; Direction of the color blend (Vertical is standard for this control).
`BackgroundOpacity`	int	vLine.BackgroundOpacity = 25; Opacity (0-255) of the unfilled background track.
`HighlightOpacity`	int	vLine.HighlightOpacity = 60; Intensity of the glossy highlight effect on the bar edges.
`EnableGlow`	bool	vLine.EnableGlow = true; Adds a subtle inner glow to the filled portion of the bar.

Animation System

Controls the motion physics for vertical transitions.

Property	Type	Description & Usage Example
`TransitionEffect`	TransitionEffect	vLine.TransitionEffect = TransitionEffect.Bounce; Easing function for movement. Options: `Linear`, `EaseInOut`, `Bounce`, `Elastic`, `Spring`.
`AnimationSpeed`	double	vLine.AnimationSpeed = 0.2; Speed factor (0.01 to 1.0). Higher values result in faster movement.

Pulse Animation

A visual "flash" effect triggered when the bar reaches its maximum value.

Property	Type	Description & Usage Example
`EnablePulseAnimation`	bool	vLine.EnablePulseAnimation = true; Activates the breathing pulse effect upon reaching 100%.
`PulseColor`	Color	vLine.PulseColor = Color.White; The color overlay used for the pulse.
`PulseDuration`	int	vLine.PulseDuration = 1000; Duration of one complete pulse cycle in milliseconds.
`PulseMaxOpacity`	int	vLine.PulseMaxOpacity = 80; Peak opacity of the pulse overlay (0-255).

Corner Radius

Customize the shape of the bar tips.

Property	Type	Description & Usage Example
`SyncCornerRadius`	bool	vLine.SyncCornerRadius = true; If true, setting one corner radius updates all others to match.
`TopLeftRadius`	float	vLine.TopLeftRadius = 4f;
`TopRightRadius`	float	vLine.TopRightRadius = 4f;
`BottomLeftRadius`	float	vLine.BottomLeftRadius = 4f;
`BottomRightRadius`	float	vLine.BottomRightRadius = 4f;

Public Methods

SetCornerRadii(float, float, float, float)

// Helper to set asymmetric corner radii in one call.
// Useful for creating thermometer or test-tube shapes.
public void ApplyTestTubeShape()
{
                // Round bottom, flat top
    vLineProgress1.SetCornerRadii(0f, 0f, 15f, 15f);
}

Designer & Smart Tags

Design-time tools available via the Smart Tag menu.

Feature	Description
`Theme Presets`	Instantly apply color schemes: Modern: Clean blue style. Material Design: Google-inspired blue palette. Dark Theme: High contrast dark mode. Gradient: Purple/Yellow dynamic gradient. Metro: Flat Windows style colors.
`Animation Control`	Quickly configure the Transition Effect (e.g., Bounce, Elastic) and Speed directly from the designer panel.
`Copy/Paste`	Copy Settings: Copies all visual and behavior properties to the internal clipboard. Paste Settings: Applies copied settings to another VLine control.

Detailed Usage Examples

Example 1: Temperature Gauge

Simulates a thermometer using a gradient from blue (cold) to red (hot). The vertical orientation is natural for this data type.

C# - Thermometer Style

private void SetupThermometer()
{
    tempGauge.Minimum = -20;
    tempGauge.Maximum = 50;
    
                // Gradient from Cold (Blue) to Hot (Red)
    tempGauge.PrimaryColor = Color.Red;
    tempGauge.SecondaryColor = Color.Blue;
    tempGauge.GradientDirection = GradientDirection.Vertical;
    
                // Bulb shape at bottom
    tempGauge.SetCornerRadii(5f, 5f, 15f, 15f);
}

public void UpdateTemp(double celsius)
{
    tempGauge.Value = celsius;
}

Example 2: Audio Volume Mixer

A volume meter that bounces responsively to sound levels using the Elastic transition effect.

C# - Volume Peak Meter

private void SetupAudioMeter()
{
    peakMeter.TransitionEffect = TransitionEffect.Elastic;
    peakMeter.AnimationSpeed = 0.2; // Fast response
    
                // Visual style
    peakMeter.PrimaryColor = Color.LimeGreen;
    peakMeter.SecondaryColor = Color.GreenYellow;
    peakMeter.EnableGlow = true;
    peakMeter.HighlightOpacity = 100; // Glassy look
    
                // Clip indication (Pulse on Max)
    peakMeter.EnablePulseAnimation = true;
    peakMeter.PulseColor = Color.Red;
}

Example 3: System Load Monitor

A standard usage scenario for monitoring CPU or RAM usage vertically.

C# - Load Monitor

private void UpdateLoad(float cpuUsage)
{
    cpuBar.Value = cpuUsage;
    
                // Dynamic coloring based on load
                if (cpuUsage > 90)
    {
        cpuBar.PrimaryColor = Color.Crimson;
    }
                else if (cpuUsage > 70)
    {
        cpuBar.PrimaryColor = Color.Orange;
    }
                else
    {
        cpuBar.PrimaryColor = Color.DodgerBlue;
    }
}