Syncfusion Wpf Timespan Editor

Implementing Syncfusion WPF TimeSpanEdit

The TimeSpanEdit control allows users to set or display time as Days:Hours:Minutes:Seconds (d.h:m:s) format with support for keyboard and mouse interactions, custom formatting, and theming.

When to Use This Skill

Use the TimeSpanEdit control when you need to:

• Capture or display time durations/intervals in your WPF application
• Provide Days:Hours:Minutes:Seconds input with a user-friendly interface
• Enable users to increment/decrement time values using keyboard, mouse wheel, or buttons
• Display time with custom formats and labels (e.g., "5 days, 3 hours, 15 minutes, 30 sec")
• Apply min/max constraints to limit allowed time ranges
• Support null values with watermark text for empty states
• Style the control with colors, themes, and RTL support

Component Overview

Key Capabilities:

• ✓ Display time as Days:Hours:Minutes:Seconds (with milliseconds support)
• ✓ Programmatic and user-based value changes
• ✓ Keyboard navigation between fields (arrow keys)
• ✓ Mouse wheel and click-drag interactions
• ✓ Custom format strings with field labels
• ✓ Min/Max value constraints
• ✓ ValueChanged event notifications
• ✓ ReadOnly mode for display-only scenarios
• ✓ Null value support with watermarks
• ✓ Theme integration (SfSkinManager, ThemeStudio)
• ✓ RTL (Right-to-Left) flow direction support

Documentation Guide

Quick Start Example

XAML:

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        <!-- Basic TimeSpanEdit -->
        <syncfusion:TimeSpanEdit 
            x:Name="timeSpanEdit"
            Value="5.12:30:45"
            Width="150"
            Height="30" />
    </Grid>
</Window>

C# Code-Behind:

using Syncfusion.Windows.Shared;

public partial class MainWindow : Window {
    public MainWindow() {
        InitializeComponent();
        
        // Create and configure TimeSpanEdit
        TimeSpanEdit editor = new TimeSpanEdit();
        editor.Value = new TimeSpan(5, 12, 30, 45);
        editor.Width = 150;
        editor.Height = 30;
        
        this.Content = editor;
    }
}

Assembly Reference: Add this to your WPF project:

• Syncfusion.Shared.WPF

Common Patterns

Quick Example:

<!-- Constrained input with custom format -->
<syncfusion:TimeSpanEdit 
    Value="5.08:30:00"
    MinValue="2.00:00:00"
    MaxValue="10.00:00:00"
    Format="d 'days' h 'hours'" />

Key Props Reference

Common Use Cases

Next Steps

1. Start with Getting Started: Read getting-started.md to set up the control
2. Format Your Display: Check value-and-formats.md for custom formats
3. Enable Interactions: Review user-interactions.md for optimal UX
4. Add Logic: Use constraints-and-events.md for events and limits
5. Style It: Apply colors and themes with appearance-and-theming.md