Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Clock (Hybrid)

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.

Event Descriptions & Wiring
// 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.

C# - Neon Theme
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.

C# - Minimalist
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).

C# - Dynamic Coloring
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.

C# - Custom 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.

C# - Performance
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; 
}