Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Circular Step Tracker

Siticone Circular Step Tracker

The SiticoneCircularStepTracker is a specialized circular gauge designed specifically for tracking progress towards a goal, such as daily steps, calories burned, or financial savings. It combines momentum-based physics animations with motivational features like milestone events (e.g., "Halfway there!", "Goal reached!") and rich text formatting.

Steps & Goal

The core data model that drives the tracker.

Property Type Description & Usage Example
Steps double tracker.Steps = 7500; The current progress value. Setting this triggers a physics-based animation to the new value.
DailyGoal double tracker.DailyGoal = 10000; The target value that represents 100% completion.
CurrentSteps double double val = tracker.CurrentSteps; Read-Only. The current visual value being rendered during animation.
GoalReached bool if (tracker.GoalReached) { ... } Read-Only. Returns true if CurrentSteps is greater than or equal to DailyGoal.

Design & Styling

Customize the visual presentation of the track and progress arc.

Property Type Description & Usage Example
DesignStyle StepTrackerDesignStyle tracker.DesignStyle = StepTrackerDesignStyle.RainBow; Solid: Single color fill.
RainBow: Static multi-color gradient.
Animated: Dynamic color cycling.
SolidColor Color tracker.SolidColor = Color.DodgerBlue; Used when style is Solid.
RainbowColors Color[] tracker.RainbowColors = new Color[] { Color.Red, Color.Blue }; Array of colors for the static gradient.
AnimatedColors Color[] tracker.AnimatedColors = new Color[] { Color.Cyan, Color.Magenta }; Array of colors for the cycling animation.
ProgressThickness int tracker.ProgressThickness = 12; Width of the active progress arc in pixels.
BaselineThickness int tracker.BaselineThickness = 8; Width of the background track in pixels.

Center Text Display

Configure the informational text shown inside the ring.

Property Type Description & Usage Example
ShowSteps bool tracker.ShowSteps = true;
StepsFormat string tracker.StepsFormat = "#,0"; Format string for the numeric value.
StepsSuffix string tracker.StepsSuffix = " steps"; Text appended to the step count.
ShowGoalText bool tracker.ShowGoalText = true;

Animation Physics

Control the feel of the momentum-based animations.

Property Type Description & Usage Example
AnimationSpeed double tracker.AnimationSpeed = 0.1; Controls the velocity of the transition. (0.01 to 1.0)
Damping double tracker.Damping = 0.85; Friction factor. Lower values = more oscillation; Higher values = smoother stop.
ColorAnimationSpeed double tracker.ColorAnimationSpeed = 0.02; Speed of the color cycling effect.
UltraFastPerformance bool tracker.UltraFastPerformance = true; Disables complex physics and gradients for maximum FPS on low-end devices.

Events & Milestones

The tracker includes a unique milestone system that fires events at specific completion percentages (10%, 25%, 50%, 75%, 90%, 100%).

Event Wiring
// Milestone Event
// Fires when a significant percentage is reached.
tracker.StepMilestone += (s, e) => 
{
                // e.MilestoneMessage contains encouraging text like "Halfway to your goal! 🎯"
                Console.WriteLine(e.MilestoneMessage);
                ShowToastNotification(e.MilestoneMessage);
};

// Goal Completed Event
// Fires when Steps >= DailyGoal.
tracker.DailyGoalCompleted += (s, e) => 
{
                Console.WriteLine($"Goal Reached in {e.AnimationDuration.TotalSeconds}s!");
                PlayConfettiAnimation();
};

// Steps Changed Event
// Fires on every animation tick.
tracker.StepsChanged += (s, e) => 
{
                Console.WriteLine($"Remaining: {e.StepsRemaining}");
};

Designer & Smart Tags

Includes a comprehensive Smart Tag menu for rapid configuration in Visual Studio.

Feature Category Capabilities
Tracker Presets One-click configurations for common use cases:
  • Fitness Tracker: Classic green step ring.
  • Water Intake: Blue solid style for hydration.
  • Calorie Tracker: Animated fiery colors.
  • Fundraising: Gold/Green financial theme.
  • Project Completion: Professional purple/slate.
Beautiful Themes Styling presets like Forest Green, Ocean Blue, Sunset Orange, Cyberpunk Neon, etc.
Quick Actions Add 500 / 1000 Steps: Quickly test value increments.
Reach Goal / Reset: Test completion logic.

Detailed Usage Examples

Example 1: Daily Fitness Goal

Setting up a standard step counter with a goal.

C# - Fitness Setup
private void SetupFitnessTracker()
{
    stepTracker.DailyGoal = 10000;
    stepTracker.Steps = 0;
    
                // Style
    stepTracker.DesignStyle = StepTrackerDesignStyle.RainBow;
    stepTracker.RainbowColors = new[] { Color.Red, Color.Orange, Color.Green };
    
                // Text
    stepTracker.StepsSuffix = ""; // Just number
    stepTracker.ShowGoalText = true;
    
                // Logic
    stepTracker.DailyGoalCompleted += (s, e) => MessageBox.Show("You did it!");
}

private void OnStepDetected(int newSteps)
{
                // Animation handles the transition automatically
    stepTracker.AddSteps(newSteps); 
}

Example 2: Financial Savings Goal

Tracking money saved towards a target purchase.

C# - Savings Tracker
private void SetupSavingsTracker()
{
    moneyTracker.DailyGoal = 5000; // $5,000 Goal
    
                // Currency Formatting
    moneyTracker.StepsFormat = "$#,0";
    moneyTracker.StepsSuffix = "";
    
                // Visuals
    moneyTracker.SolidColor = Color.Gold;
    moneyTracker.DesignStyle = StepTrackerDesignStyle.Solid;
    
                // Update logic
    moneyTracker.Steps = 2500; // Current savings
}

Example 3: Custom Painting

Adding a custom icon in the center using the Paint event.

C# - Custom Paint
// Subscribe to AfterStepTrackerPaint
tracker.AfterStepTrackerPaint += (s, e) => 
{
                if (e.GoalReached)
    {
                Image trophy = Properties.Resources.TrophyIcon;
        
                // Calculate center position above text
                float x = e.TrackerBounds.X + (e.TrackerBounds.Width - trophy.Width) / 2;
                float y = e.TrackerBounds.Y + (e.TrackerBounds.Height / 4);
        
        e.Graphics.DrawImage(trophy, x, y);
    }
};