WPF TimeSpanEdit Demo: Editing and Formatting Time Spans

This sample shows how to let users view and edit TimeSpan values in a WPF app using the Syncfusion TimeSpanEdit. It covers keyboard and mouse interactions, step-based increments, field navigation, display formatting, watermark/null handling, read-only mode, and min/max limits so users can input durations precisely and intuitively.

Features

• Field navigation with Left/Right keys or mouse, with automatic advance after validation
• Step-based increments via Up/Down keys, buttons, and mouse wheel (StepInterval)
• Optional drag-to-increment (click and drag) for quick adjustments
• Show/hide Up/Down arrow buttons
• Keyboard-friendly editing with Up/Down arrows
• Null handling and watermark text (AllowNull, NullString)
• Custom display formatting for days/hours/minutes/seconds/milliseconds (Format: d, h, m, s, z)
• Value changed notifications (ValueChanged with OldValue/NewValue)
• Read-only display with programmatic updates (IsReadOnly)
• Restrict selection within min/max bounds (MinValue/MaxValue)

Getting Started

1. Open the WPF solutions in the repository, for example:
   • Samples/Getting-Started/Getting-Started.sln
   • Samples/Appearance/Appearance.sln
   • Samples/Themes/Themes.sln
2. Ensure .NET Framework 4.6.2 is targeted (see App.config and the .csproj files).
3. Install or restore the required NuGet packages referenced in the projects:
   • Syncfusion.Shared.WPF
   • Syncfusion.Licensing
   • Optional theme packages under Samples/Themes/packages.config
4. Add the Syncfusion XML namespace in XAML where you use the editor:
   • xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
5. Add TimeSpanEdit to your Window/Page and set core properties:
   • Value for the current TimeSpan
   • StepInterval for increment/decrement intervals
   • Format to control visible fields (e.g., d.h:m:s or h:m:s:z)
   • MinValue/MaxValue to constrain input
   • AllowNull and NullString for watermark behavior
   • ShowArrowButtons, IncrementOnScrolling, EnableExtendedScrolling, IsReadOnly as needed

Usage Tips

• Field navigation: Move with Left/Right or click a field; focus advances automatically after validation.
• Step interval: Use StepInterval to define how each field changes via keys, buttons, or mouse wheel. Example: with Value=1.1:1:10 and StepInterval=1.01:01:01, seconds change by 10s, minutes by 1m, hours by 1h, days by 1d.
• Up/Down buttons: Toggle with ShowArrowButtons.
• Mouse wheel: Enable/disable with IncrementOnScrolling.
• Click-and-drag: Set EnableExtendedScrolling=True to drag up/down when unfocused.
• Keyboard: Use Up/Down arrows to adjust the active field.
• Null/watermark: Set AllowNull=True and Value=null; provide NullString for a hint.
• Formatting: Control visible parts with Format tokens:
  • d (days), h (hours), m (minutes), s (seconds), z (milliseconds).
• Value change notifications: Handle ValueChanged to track OldValue/NewValue.
• Read-only: Use IsReadOnly=True to prevent user edits while allowing programmatic changes.
• Limits: Use MinValue/MaxValue to keep values within bounds.

Samples in this repository

• Getting started: Samples/Getting-Started
• Feature demos (value changes, null support, formatting, input restriction, limits): Samples/TimeSpanEdit-Features
• Appearance customization: Samples/Appearance
• Themes using Syncfusion theme packages: Samples/Themes

About the Demo

These samples focus on flexible duration input: precise field control, consistent step behavior, accessible keyboard/mouse editing, and clear formatting. Use them as a foundation to add validation, commands, or theming that fits your application’s UX and branding.