syncfusion-wpf-timespan-editor

Syncfusion WPF TimeSpanEdit の実装

TimeSpanEdit コントロールを使用すると、キーボードやマウスによる操作、カスタム書式、テーマ設定に対応しながら、日:時:分:秒（d.h:m:s）形式で時刻を設定または表示できます。

このスキルを使用するタイミング

次のような場合に TimeSpanEdit コントロールを使用します。

• WPF アプリケーションで時間の長さや間隔を入力または表示する
• 使いやすいインターフェイスで日:時:分:秒を入力する
• キーボード、マウスホイール、ボタンを使用して、ユーザーが時間の値を増減できるようにする
• 「5日、3時間、15分、30秒」のように、カスタム書式やラベルを使用して時間を表示する
• 許容する時間範囲を制限する最小値／最大値の制約を適用する
• 空の状態でウォーターマークテキストを表示し、null 値に対応する
• 色、テーマ、RTL サポートでコントロールをスタイル設定する

コンポーネントの概要

主な機能：

• ✓ 日:時:分:秒形式で時間を表示（ミリ秒にも対応）
• ✓ プログラムによる値の変更とユーザー操作による値の変更
• ✓ フィールド間のキーボードナビゲーション（矢印キー）
• ✓ マウスホイールおよびクリック＆ドラッグ操作
• ✓ フィールドラベルを指定できるカスタム書式文字列
• ✓ 最小値／最大値の制約
• ✓ ValueChanged イベント通知
• ✓ 表示専用のシナリオに対応する読み取り専用モード
• ✓ ウォーターマークを使用した null 値のサポート
• ✓ テーマとの統合（SfSkinManager、ThemeStudio）
• ✓ RTL（右から左）のフロー方向のサポート

---

ドキュメントガイド

トピック	ファイル	内容
セットアップ	getting-started.md	NuGet のインストール、デザイナー／XAML／C# からの追加
書式	value-and-formats.md	カスタム書式文字列、ラベル、ミリ秒
操作	user-interactions.md	キーボード、マウス、ボタン、ドラッグ、矢印キー
制約とイベント	constraints-and-events.md	最小値／最大値、ValueChanged イベント、検証
外観	appearance-and-theming.md	色、テーマ、RTL、SfSkinManager

---

クイックスタートの例

XAML：

<Window xmlns:syncfusion="http://schemas.syncfusion.com/wpf">
    <Grid>
        
        <syncfusion:TimeSpanEdit 
            x:Name="timeSpanEdit"
            Value="5.12:30:45"
            Width="150"
            Height="30" />
    </Grid>
</Window>

C# コードビハインド：

using Syncfusion.Windows.Shared;

public partial class MainWindow : Window {
    public MainWindow() {
        InitializeComponent();
        
        // Create and configure TimeSpanEdit
        TimeSpanEdit editor = new TimeSpanEdit();
        editor.Value = new TimeSpan(5, 12, 30, 45);
        editor.Width = 150;
        editor.Height = 30;
        
        this.Content = editor;
    }
}

アセンブリ参照： WPF プロジェクトに次を追加します。

• Syncfusion.Shared.WPF

---

よく使われるパターン

使用例	XAML の設定
制約あり	MinValue="2.00:00:00" MaxValue="10.00:00:00"
カスタム書式	Format="d 'days' h 'hours' m 'minutes' s 'seconds'"
精密な間隔	StepInterval="1.00:15:30" IncrementOnScrolling="True"
読み取り専用	IsReadOnly="True" ShowArrowButtons="False"
null 許容	AllowNull="True" NullString="Enter duration..."

簡単な例：

<syncfusion:TimeSpanEdit 
    Value="5.08:30:00"
    MinValue="2.00:00:00"
    MaxValue="10.00:00:00"
    Format="d 'days' h 'hours'" />

---

主要なプロパティのリファレンス

プロパティ	型	デフォルト	目的
Value	TimeSpan?	0.0:0:0	表示または編集する時間の長さ
Format	string	d.h:m:s	カスタム書式文字列（d＝日、h＝時間、m＝分、s＝秒、z＝ミリ秒）
MinValue	TimeSpan	—	許可される時間の長さの最小値
MaxValue	TimeSpan	—	許可される時間の長さの最大値
StepInterval	TimeSpan	1.01:01:01	ボタン／マウスホイール／キーボードで増減する間隔
AllowNull	bool	false	null／空の値を許可する
NullString	string	""	値が null のときに表示するウォーターマークテキスト
ShowArrowButtons	bool	true	上下のスピナーボタンを表示する
IncrementOnScrolling	bool	true	マウスホイールで値を変更できるようにする
EnableExtendedScrolling	bool	false	クリックとドラッグで値を変更できるようにする
IsReadOnly	bool	false	ユーザーによる編集を防ぐ（読み取り専用モード）
Background	Brush	White	コントロールの背景色
Foreground	Brush	Black	テキストの色
SelectionBrush	Brush	RoyalBlue	選択範囲のハイライト色
FlowDirection	FlowDirection	LeftToRight	RTL のサポート（RightToLeft）

---

よくある使用例

シナリオ	主な設定
時間の長さの入力	ボタン、マウスホイール、キーボードを有効にし、Min/Max を設定してラベルを使用する
表示のみ	IsReadOnly="True" ShowArrowButtons="False" を設定し、わかりやすい書式を使用する
精密な操作	StepInterval（例：15 分）を設定し、フィールドごとにキーボードで入力する
柔軟な入力	すべての操作を有効にし、論理的なステップ間隔と視覚的なフィードバックを使用する

---

次のステップ

1. 「Getting Started」から始める：getting-started.md を読んでコントロールを設定します
2. 表示形式を設定する：カスタム書式については value-and-formats.md を確認します
3. 操作を有効にする：最適な UX については user-interactions.md を確認します
4. ロジックを追加する：イベントと制限については constraints-and-events.md を使用します
5. スタイルを設定する：appearance-and-theming.md を使用して色とテーマを適用します