Skip to content

995186-Resolve the ReadMe file length issue in this sample repository #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 1, 2025
Merged

995186-Resolve the ReadMe file length issue in this sample repository #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 55 additions & 16 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)

<table>
<tr>
<td><a href="Samples/Getting-Started">Getting Started</a></td>
<td><a href="Samples/TimeSpanEdit-Features">Changing timespan value</a></td>
<td><a href="Samples/TimeSpanEdit-Features">Null Value Support</a></td>
<td><a href="Samples/TimeSpanEdit-Features">Time display formatting</a></td>
</tr>
<tr>
<td><a href="Samples/TimeSpanEdit-Features">Restrict user input</a></td>
<td><a href="Samples/TimeSpanEdit-Features">Restrict selection limit and validation</a></td>
<td><a href="Samples/Appearance">Appearance</a></td>
<td><a href="Samples/Themes">Themes</a></td>
</tr>
</table>
## 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.