Siticone Ruler 2 (Modern)

The SiticoneRuler2 is a next-generation measurement control designed for high-precision, modern UI applications. It advances beyond the standard ruler by introducing interactive zooming, gradient backgrounds, and versatile marker visual styles (Circle or Block). Fully responsive and DPI-aware, it is perfect for design tools, scientific applications, and advanced data visualization.

DPI Awareness Required:
This control relies on accurate screen measurements. Ensure your application is DPI-aware (configured in app.manifest) to guarantee precision across different displays.

Core Configuration

Basic setup for the ruler's scale, units, and orientation.

Property	Type	Description & Usage Example
`MeasurementSystem`	SiticoneRulerScaleUnit	ruler.MeasurementSystem = SiticoneRulerScaleUnit.Pixels; Defines the unit of measurement: `Centimeters`, `Inches`, or `Pixels`.
`Orientation`	SiticoneRulerOrientation	ruler.Orientation = SiticoneRulerOrientation.Vertical; Sets the ruler layout to Horizontal or Vertical.
`StartValue`	decimal	ruler.StartValue = 0.0m; The value at the origin (0,0) of the control. Can be adjusted by panning (Middle Mouse Button).
`MinValue / MaxValue`	decimal	ruler.MinValue = -500m; ruler.MaxValue = 500m; Constraints for the draggable markers.

Zoom & Scaling

Unique to SiticoneRuler2, this feature allows dynamic scaling of the measurement display.

Property	Type	Description & Usage Example
`ZoomFactor`	decimal	ruler.ZoomFactor = 1.5m; Multiplier for the scale display. 1.0 is 100% scale. Values > 1 zoom in, < 1 zoom out.
`EnableZoom`	bool	ruler.EnableZoom = true; Allows users to zoom interactively using `Ctrl + Mouse Wheel`.

Markers & Interaction

Manage the dual-marker system for range measurement and user input.

Property	Type	Description & Usage Example
`Marker1Value`	decimal	ruler.Marker1Value = 10.5m; Position of the first measurement marker.
`Marker2Value`	decimal	ruler.Marker2Value = 25.0m; Position of the second measurement marker.
`Value`	decimal	var length = ruler.Value; Read-only. The absolute distance between the two markers.
`SnapToTicks`	bool	ruler.SnapToTicks = true; Enforces precision by snapping markers to the nearest tick mark during drag.
`ShowGuideLines`	bool	ruler.ShowGuideLines = true; Draws dashed lines extending across the parent container to assist with alignment.

Appearance & Styling

Advanced visual customization including gradients and marker shapes.

Property	Type	Description & Usage Example
`GradientStartColor`	Color	ruler.GradientStartColor = Color.FromArgb(30, 30, 40); Starting color for the background gradient.
`GradientEndColor`	Color	ruler.GradientEndColor = Color.Black; Ending color for the background gradient.
`MarkerStyle`	SiticoneMarkerVisualStyle	ruler.MarkerStyle = SiticoneMarkerVisualStyle.Block; Changes the marker handle shape: `Circle` (Default) or `Block` (Square with rounded corners).
`MarkerFillColor`	Color	ruler.MarkerFillColor = Color.Cyan; The fill color of the marker handle.
`MarkerSize`	float	ruler.MarkerSize = 12f; The diameter or width of the marker handle.

Visual Effects

Property	Type	Description & Usage Example
`EnableMarkerPulse`	bool	ruler.EnableMarkerPulse = true; Displays an animated ripple effect around the currently selected marker.
`EnableAnimations`	bool	ruler.EnableAnimations = true; Smoothly animates marker movement when values are changed via code.

Events

Event Handling

// 1. Zoom Changed
// Fires when the zoom level changes (via Ctrl+Wheel or property).
ruler.ZoomChanged += (s, e) => 
{
                Console.WriteLine($"Zoom Level: {e.NewZoomFactor * 100}%");
};

// 2. Marker Value Changed
// Detailed event for individual marker tracking.
ruler.MarkerValueChanged += (s, e) => 
{
                string markerName = e.MarkerIndex == 1 ? "Start" : "End";
                Console.WriteLine($"{markerName} moved to: {e.Value:F2}");
};

// 3. Value Changed
// Standard event for the measured distance.
ruler.ValueChanged += (s, e) => 
{
                Console.WriteLine($"Total Distance: {e.NewValue} {e.Unit}");
};

Designer Support

Includes a rich Smart Tag panel in Visual Studio.

Category	Features
`Themes`	Instant styling presets: Graphite, Cyber, Forest, Royal, Sunset, Neon, Ocean, Corporate, Elegant, etc.
`Utilities`	Copy/Paste Settings: Replicate ruler styles across different forms instantly. Reset to Default: Revert to the base configuration.

Detailed Usage Examples

Example 1: Interactive Zooming Ruler

A highly interactive horizontal ruler that allows users to zoom in for precision work.

C# - Zooming Setup

private SiticoneRuler2 CreateZoomableRuler()
{
                var ruler = new SiticoneRuler2
    {
        Dock = DockStyle.Top,
        Height = 70,
        MeasurementSystem = SiticoneRulerScaleUnit.Centimeters,
        
                // Enable Zoom Features
        EnableZoom = true,
        ZoomFactor = 1.0m,
        
                // Visuals
        GradientStartColor = Color.WhiteSmoke,
        GradientEndColor = Color.LightGray,
        MarkerColor = Color.RoyalBlue,
        MarkerStyle = SiticoneMarkerVisualStyle.Circle
    };

                // Feedback label
    ruler.ZoomChanged += (s, e) => 
    {
        lblStatus.Text = $"Zoom: {e.NewZoomFactor}x";
    };

                return ruler;
}

Example 2: "Cyber" Theme Vertical Ruler

Programmatically applying a dark, neon-styled theme for a vertical layout guide.

C# - Cyber Theme

private void ApplyCyberTheme(SiticoneRuler2 ruler)
{
    ruler.Orientation = SiticoneRulerOrientation.Vertical;
    ruler.Dock = DockStyle.Left;
    ruler.Width = 80;
    
                // Dark Background Gradient
    ruler.GradientStartColor = Color.FromArgb(10, 20, 40);
    ruler.GradientEndColor = Color.FromArgb(20, 40, 60);
    
                // Neon Accents
    ruler.TickColor = Color.Cyan;
    ruler.MarkerColor = Color.Cyan;
    ruler.MarkerFillColor = Color.FromArgb(10, 20, 40);
    ruler.MarkerBorderColor = Color.Cyan;
    ruler.GuideLineColor = Color.Cyan;
    
                // Block markers for tech feel
    ruler.MarkerStyle = SiticoneMarkerVisualStyle.Block;
    ruler.MarkerSize = 14f;
}