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%).
// 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:
|
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.
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.
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.
// 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);
}
};