Siticone Hybrid Clock
The SiticoneHybridClock combines the best of both worlds: a precise digital time display surrounded by an animated, analog-style seconds ring.
It features advanced visual effects like neon glows, pulse animations, and gradient backgrounds, making it a centerpiece for modern dashboards.
Digital Display
Customize the central digital readout and date display.
| Property | Type | Description & Usage Example |
|---|---|---|
TimeColor |
Color | clock.TimeColor = Color.White; The color of the main time text. |
DateColor |
Color | clock.DateColor = Color.Gray; The color of the date text displayed below the time. |
TimeFont |
Font | clock.TimeFont = new Font("Segoe UI", 48F); The font used for the digital time. |
DateVerticalOffset |
int | clock.DateVerticalOffset = 10; Adjusts the vertical spacing between the time and the date. |
DateTextCase |
Enum |
clock.DateTextCase = DateCase.Upper;
Forces the date text to Upper, Lower, or Normal case.
|
Analog Seconds Ring
Configure the animated ring that tracks the seconds.
| Property | Type | Description & Usage Example |
|---|---|---|
SecondsRingColor |
Color | clock.SecondsRingColor = Color.DodgerBlue; The color of the active progress ring (the seconds). |
SecondsRingTrackColor |
Color | clock.SecondsRingTrackColor = Color.FromArgb(30, 30, 30); The background track color for the ring. |
RingThickness |
float | clock.RingThickness = 12f; The width of the seconds ring. |
RingStyle |
DashStyle | clock.RingStyle = DashStyle.Dot; The line style of the ring (Solid, Dot, Dash, etc.). |
RingCapStyle |
LineCap | clock.RingCapStyle = LineCap.Round; The shape of the ends of the ring arc. |
Visual Effects
Enhance the visual appeal with gradients, shadows, and pulses.
| Property | Type | Description & Usage Example |
|---|---|---|
EnableRingGlow |
bool | clock.EnableRingGlow = true; Adds a neon glow effect to the seconds ring. |
GlowIntensity |
int | clock.GlowIntensity = 100; The alpha/opacity (0-255) of the glow effect. |
EnablePulseEffect |
bool | clock.EnablePulseEffect = true; If true, the ring triggers a visual "pulse" animation every time the second changes. |
EnableTextShadow |
bool | clock.EnableTextShadow = true; Adds a drop shadow to the digital time and date text. |
Events
Respond to time changes at various granularities.
// 1. SecondChanged Event
// Fires precisely when the second increments.
clock.SecondChanged += (s, e) =>
{
Console.WriteLine($"Tick: {e.NewSecond}");
};
// 2. MinuteChanged Event
// Fires once per minute. Useful for updating weather or less frequent data.
clock.MinuteChanged += (s, e) =>
{
UpdateWeatherWidget();
};
// 3. DayChanged Event
// Fires when the day of the week changes (at midnight).
clock.DayChanged += (s, e) =>
{
RefreshDailySchedule();
};
Detailed Usage Examples
Example 1: Neon Noir Theme
A high-contrast, dark theme with vibrant neon accents.
private void ApplyNeonNoirTheme()
{
// Dark Background
clock.FaceColor = Color.FromArgb(18, 1, 31);
clock.FaceGradientColor = Color.FromArgb(32, 5, 58);
clock.EnableGradient = true;
// Vibrant Ring
clock.SecondsRingColor = Color.Magenta;
clock.SecondsRingTrackColor = Color.FromArgb(60, 255, 0, 255); // Transparent magenta
clock.RingThickness = 8f;
// Text
clock.TimeColor = Color.Cyan;
clock.DateColor = Color.HotPink;
// Effects
clock.EnableRingGlow = true;
clock.GlowIntensity = 120;
clock.EnablePulseEffect = true;
}
Example 2: Minimalist White Theme
A clean, professional look suitable for business applications.
private void ApplyMinimalistTheme()
{
clock.FaceColor = Color.White;
clock.EnableGradient = false;
clock.SecondsRingColor = Color.Black;
clock.SecondsRingTrackColor = Color.LightGray;
clock.RingThickness = 4f;
clock.RingStyle = DashStyle.Solid;
clock.TimeColor = Color.Black;
clock.DateColor = Color.DarkGray;
clock.TimeFont = new Font("Segoe UI Light", 40F);
clock.EnableRingGlow = false;
clock.EnablePulseEffect = false;
}
Example 3: Data-Driven Coloring
Dynamically changing the ring color based on time (e.g., work hours vs. off hours).
public void InitializeDynamicClock()
{
clock.HourChanged += UpdateClockStatus;
UpdateClockStatus(null, new HybridHourChangedEventArgs(DateTime.Now.Hour, DateTime.Now));
}
private void UpdateClockStatus(object sender, HybridHourChangedEventArgs e)
{
// Work hours: 9 AM - 5 PM (17:00)
if (e.NewHour >= 9 && e.NewHour < 17)
{
clock.SecondsRingColor = Color.LimeGreen; // Active/Open
clock.DateColor = Color.Green;
}
else
{
clock.SecondsRingColor = Color.OrangeRed; // Closed/Off
clock.DateColor = Color.DarkRed;
}
}
Example 4: Custom Date Formatting
Displaying the date in a specific, uppercase format.
private void SetupCustomFormat()
{
clock.UseCustomFormats = true;
// Standard time, specific date format
clock.CustomTimeFormat = "HH:mm";
clock.CustomDateFormat = "ddd, dd MMM yyyy";
// Force Uppercase (e.g., "MON, 01 JAN 2025")
clock.DateTextCase = DateCase.Upper;
// Move date slightly lower
clock.DateVerticalOffset = 15;
}
Example 5: Performance Mode
Switching to `UltraFastMode` to save resources.
private void EnablePowerSaving()
{
// Disable expensive visual effects
clock.UltraFastMode = true;
// Note: In UltraFastMode, gradients, glows, and anti-aliasing are disabled automatically.
// You might want to set a solid background color manually if the gradient was transparent.
clock.FaceColor = Color.Black;
}