Getting Started with WPF TimeSpan Editor (TimeSpanEdit)

This section describes how to design a TimeSpanEdit control in a WPF application and overview of its basic functionalities.

Assembly deployment

The below assembly should be added as references to use the TimeSpanEdit Control in any application:

Required assembly


Syncfusion.Shared.WPF The Syncfusion.Shared.WPF contains the class that handles all UI operations and contains helper class of TimeSpanEdit control.

Creating simple application with TimeSpanEdit

You can create the Windows Forms application with TimeSpanEdit control as follows:

  1. Creating project
  2. Adding control via Designer
  3. Adding control manually in code

Creating the project

Create a new WPF project in the Visual Studio to display the TimeSpanEdit with time information.

Adding control via designer

The TimeSpanEdit control can be added to the application by dragging it from the toolbox and dropping it in a designer view. Syncfusion.Shared.WPF assembly added automatically in project:

WPF TimeSpanEdit ToolBox images

Adding control manually in code

To add control manually in C#, follow the given steps:

  1. Add Syncfusion.Shared.WPF assembly to the project:

  2. Include the namespace Syncfusion.Windows.Shared

using Syncfusion.Windows.Shared;
  1. Create TimeSpanEdit control instance and add it to the Window.
//Create the instance of TimeSpanEdit

TimeSpanEdit timespan = new TimeSpanEdit();

timespan.Width = 150;

timespan.Height = 30;

timespan.VerticalAlignment = VerticalAlignment.Top;

//Adding control to the window

this.Content = timespan;

Value Changed Notification

The TimeSpanEdit control can notifies the value changes through the ValueChanged event. You can get old value and new Value from OldValue and NewValue properties in ValueChanged event.

<syncfusion:TimeSpanEdit ValueChanged="TimeSpanEdit_ValueChanged"/>
TimeSpanEdit timespanedit = new TimeSpanEdit();
TimeSpanEdit.ValueChanged += new PropertyChangedCallback(TimeSpanEdit_ValueChanged);

You can handle the event as follows:

private void TimeSpanEdit_ValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    // Get old and new value
    var newValue = e.NewValue;
    var oldValue = e.OldValue;

Min Max Value Restriction

The Value of TimeSpanEdit can be restricted within maximum and minimum limit. You can define the minimum and maximum values by setting the MinValue and MaxValue properties. It allows the user to enter the value between MinValue and MaxValue.

<syncfusion:TimeSpanEdit x:Name="timespanedit" Width="100" Height="25" Value="10.11:32:43" MaxValue="21.3:8:5" MinValue="2.4:7:4"/>
TimeSpanEdit timespanedit = new TimeSpanEdit();
timespanedit.Width = 100;
timespanedit.Height = 25;
//Setting minimum value
timespanedit.MinValue = 2.4:7:4;
//Setting maximum value
timespanedit.MaxValue = 21.3:8:5;
this.Content = timeSpanEdit;

Formatting the TimeSpanEdit value

The fields can be formatted to show what the numerals denote i.e. hours minutes or days.

custom format string images

<syncfusion:TimeSpanEdit Value="10.2:25:52" Format="d 'days' h 'hours'"  Height="40"/>
timeSpanEdit1.Format = @" d 'days' h 'hours'";

Struture of TimeSpanEdit

TimeSpanEdit members


Properties Description Type Of Property Acceptable Value
MaxValue Gets or sets the maximum value that can be accepted by the control TimeSpan Any value of type TimeSpan
MinValue Gets or sets the minimum value that can be accepted by the control TimeSpan Any Value of type TimeSpan
AllowNull Gets or sets a value indicating whether the control can accept the null value bool True/False
NullString Gets or sets a value that will be displayed when the value is null string Any string
Value Gets or sets the value of the control TimeSpan Any value of type TimeSpan
ShowArrowButtons Gets or Sets a value whether the up down button can be visible bool True/False
IncrementOnScrolling Gets or sets a value indicating whether to increment or decrement the selected option bool True/False
Format Gets or sets the custom format strings. The word given between single quotes is displayed as it is. But the following tokens are replaced with values in the custom format string. d – replaced with days value , h – replaced with hours value , m – replaced with minutes value, s – replaced with seconds value , z- replaced with milliseconds valueExample :The following format string : d ‘Days’ h ‘Hours’ m ‘Minutes’Displayed as : 10 Days 20 Hours 30 Minutes string Any string


Event Description Argument Type
ValueChanged This event is fired when the value of the control is changed Value PropertyChangedCallback

To view samples:

  1. Click Start–>All Programs–>Syncfusion–>Essential Studio -->Dashboard.

  The Essential Studio Enterprise Edition window is displayed.

Sample image

The User Interface edition panel is displayed by default.

  1. Select WPF from the samples listed. The following options will be displayed. You can view the samples in the following three ways:
  2. Run Locally Installed Samples-View the locally installed Tools samples for WPF using the sample browser
  3. Run Online Samples-View the online samples for WPF
  4. Run Online XBAP Samples – View the online XBAP samples for WPF
  5. Explore Samples-Locate the WPF samples on the disk

    User interface images

  6. Select Run Locally Installed Samples. The WPF Sample Browser displays.

    Locally Installed Samples images

  7. On the left pane, go to Editor Controls ->Time Span Edit Demo.