diff --git a/README.md b/README.md index 699d5f2..33a06db 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,57 @@ -# TimeSpanEdit samples +# 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. -This repository contains the samples that demonstrate the functionalities of TimeSpanEdit. +## 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 StartedChanging timespan valueNull Value SupportTime display formatting
Restrict user inputRestrict selection limit and validationAppearanceThemes
+## 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.