Siticone Digital Arc Clock
The SiticoneDigitalArcClock is a hybrid timekeeping control that blends a clear digital display with a graphical progress arc.
The arc visualizes the passing of seconds (or minutes in performance mode), creating a "fitness ring" style aesthetic perfect for modern dashboards.
Visual Styling
Customize the arc, colors, and fonts to match your application's theme.
| Property | Type | Description & Usage Example |
|---|---|---|
ArcColor |
Color | clock.ArcColor = Color.DodgerBlue; The color of the sweeping progress bar. |
ArcWidth |
float | clock.ArcWidth = 10f; The thickness of the progress arc in pixels. |
ArcCapStyle |
LineCap | clock.ArcCapStyle = LineCap.Round; Defines the shape of the arc ends (Round, Flat, Triangle, etc.). |
TickColor |
Color | clock.TickColor = Color.LightGray; The color of the background ticks representing minutes. |
DigitalTimeColor |
Color | clock.DigitalTimeColor = Color.Black; The text color for the digital time display. |
Display & Formatting
Control how time and date are presented in the center of the arc.
| Property | Type | Description & Usage Example |
|---|---|---|
DisplayFormat |
Enum | clock.DisplayFormat = ClockDisplayFormat.Format24Hour; Selects the time format (12h/24h, with or without seconds). |
ShowDate |
bool | clock.ShowDate = true; Displays the current date below the time. |
DateFormat |
string | clock.DateFormat = "MMM dd, yyyy"; The standard .NET date format string. |
ShowTicks |
bool | clock.ShowTicks = false; Hides the background tick marks for a cleaner "ring only" look. |
Performance & Effects
Manage visual effects and resource usage.
| Property | Type | Description & Usage Example |
|---|---|---|
EnableGlow |
bool | clock.EnableGlow = true; Adds a neon-like glow effect to the progress arc. |
UltraPerformanceMode |
bool | clock.UltraPerformanceMode = true; Disables glow, anti-aliasing, and smooth second-hand animation. Updates the arc once per minute instead of every second/millisecond. |
Events
Events triggered by the passage of time.
// 1. SecondChanged Event
// Fires every second. Useful for updating other UI elements synchronously.
clock.SecondChanged += (s, e) =>
{
progressBar1.Value = e.NewSecond;
};
// 2. HourChanged Event
// Fires on the hour mark.
clock.HourChanged += (s, e) =>
{
CheckScheduledTasks();
};
// 3. TimeChanged Event
// Fires on every visual update tick (approx 20ms).
clock.TimeChanged += (s, e) =>
{
// e.CurrentTime holds the precise time
};
Detailed Usage Examples
Example 1: Fitness Tracker Style
A vibrant, ring-based design often seen in health apps.
private void ApplyFitnessTheme()
{
// Bright, energetic colors
clock.FaceColor = Color.Black;
clock.ArcColor = Color.LimeGreen;
clock.TickColor = Color.FromArgb(40, 40, 40); // Dark gray ticks
clock.DigitalTimeColor = Color.White;
// Thick arc, no caps
clock.ArcWidth = 12f;
clock.ArcCapStyle = LineCap.Flat;
// Date settings
clock.ShowDate = true;
clock.DateColor = Color.Gray;
clock.DateFormat = "ddd, MMM dd";
}
Example 2: Retro Terminal
A monochromatic green-on-black phosphor screen look.
private void ApplyRetroTheme()
{
Color phosphorGreen = Color.FromArgb(0, 255, 65);
clock.FaceColor = Color.FromArgb(10, 10, 10);
clock.DigitalTimeColor = phosphorGreen;
clock.ArcColor = phosphorGreen;
clock.TickColor = Color.FromArgb(0, 50, 0);
clock.EnableGlow = true; // Enhances the CRT look
clock.DigitalTimeFont = new Font("Consolas", 32f, FontStyle.Bold);
clock.DisplayFormat = ClockDisplayFormat.Format24HourWithSeconds;
}
Example 3: Minimalist Timer
A clean, distraction-free look suitable for productivity tools.
private void ApplyMinimalistTheme()
{
clock.FaceColor = Color.White;
clock.ArcColor = Color.SlateBlue;
// Hide ticks for a solid ring effect
clock.ShowTicks = false;
clock.DigitalTimeColor = Color.DarkSlateGray;
clock.EnableGlow = false; // Flat design
clock.ArcWidth = 4f;
clock.ClockPadding = 10;
}
Example 4: Shift Change Alert
Using the `HourChanged` event to visually signal a specific time of day.
public void InitializeShiftClock()
{
clock.HourChanged += CheckShift;
}
private void CheckShift(object sender, SiticoneDigitalArcHourChangedEventArgs e)
{
// Change arc color based on shift (9 AM to 5 PM)
if (e.NewHour >= 9 && e.NewHour < 17)
{
clock.ArcColor = Color.DodgerBlue; // Work hours
}
else
{
clock.ArcColor = Color.OrangeRed; // After hours
}
}
Example 5: Low Power Mode
Dynamically enabling `UltraPerformanceMode` to save resources on laptops/batteries.
private void ToggleBatterySaver(bool isLowBattery)
{
clock.UltraPerformanceMode = isLowBattery;
if (isLowBattery)
{
// In Ultra mode, the arc updates once per minute
// and anti-aliasing is disabled to save CPU.
clock.EnableGlow = false;
}
else
{
// Restore smooth second-by-second animation
clock.EnableGlow = true;
}
}