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

Description

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:

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;

Structure of the TimeSpanEdit control

Appearance

Appearance of TimeSpanEdit can be changed using different Styles.

Visual Styles

SkinManager provides rich and professional look and feel UI for the TimeSpanEdit Control. Some of the available visual styles are as follows:

  • Blend
  • Office2007Blue
  • Office2007Black
  • Office2007Silver
  • Office2010Blue
  • Office2010Black
  • Office2010Silver
  • VS2010
  • Metro
  • Transparent

The visual style can be applied for the TimeSpanEdit using the VisualStyle property of the SkinStorage.

<!--TimeSpanEdit Visual Style -->
<syncfusion:TimeSpanEdit x:Name="Tiem1"  Width="200" Height="23"  Value="10.2:25:52"  syncfusion:SkinStorage.VisualStyle="Blend" />
//Set Visual Style
SkinStorage.SetVisualStyle(timespan,"Blend");
'Set Visual Style
SkinStorage.SetVisualStyle(timespan,"Blend")

Blend Theme

Office2007Blue Theme

Office2007Black Theme

Office2007Silver Theme

Office2010Blue Theme

Office2010Black Theme

Office2010Silver Theme

VS2010 Theme

Metro Theme

Transparent Theme

TimeSpanEdit members

Properties

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

Events

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.

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

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

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