syncfusion-maui-time-picker

Syncfusion .NET MAUI TimePicker の実装

Syncfusion .NET MAUI TimePicker（SfTimePicker）は、直感的にスクロールできるインターフェイスで時刻を選択できる強力なコントロールです。複数の時刻形式、カスタマイズ可能な間隔、ダイアログモード、時刻の制限、幅広いスタイル設定に対応しています。

このスキルを使用する場面

次のような場合に、このスキルを使用してください。

• .NET MAUI アプリケーションに時刻選択機能を実装する
• XAML または C# コードに SfTimePicker コントロールを追加する
• 時刻形式（12時間／24時間、秒の有無）を設定する
• ダイアログモードまたは配置型ピッカーモードを設定する
• 時刻選択の時間、分、秒の間隔を定義する
• 選択可能な時刻を制限する（営業時間、予約枠、選択不可の時刻）
• 時刻選択イベントを処理する、または MVVM コマンドを使用する
• ピッカーの外観（ヘッダー、フッター、選択ビュー、テキスト表示）をカスタマイズする
• アクセシビリティに対応した、またはローカライズされた時刻ピッカーを実装する
• TimePicker の設定や動作に関する問題をトラブルシューティングする

コンポーネントの概要

SfTimePicker は次の機能を提供します。

• 14種類の定義済み時刻形式：時、分、秒、ミリ秒を含む12時間／24時間形式に対応
• 3つのピッカーモード：Default（インライン）、Dialog（ポップアップ）、RelativeDialog（位置指定ポップアップ）
• 時、分、秒、ミリ秒の時間間隔
• 最小／最大時刻や選択不可の時刻などの時刻制限
• 最初と最後の項目間をシームレスに移動できるループ機能
• 選択変更、ダイアログのライフサイクル、フッターボタンのイベントに対応する豊富なイベントシステム
• コマンド（SelectionChangedCommand、AcceptCommand、DeclineCommand）によるMVVM 対応
• ヘッダー、フッター、列ヘッダー、選択ビュー、テキスト表示モードの幅広いカスタマイズ
• グローバルアプリケーション向けのアクセシビリティとローカライズ対応

ドキュメントとナビゲーションガイド

はじめに

📄 参照先： references/getting-started.md

参照するタイミング： 初めて TimePicker をセットアップする場合、インストールする場合、基本的な実装を行う場合。

掲載内容：

• NuGet パッケージのインストール（Syncfusion.Maui.Picker）
• ハンドラーの登録（MauiProgram.cs で ConfigureSyncfusionCore を設定）
• SfTimePicker の基本的な初期化（XAML と C#）
• ヘッダーとフッタービューの設定
• 高さと幅の設定
• SelectedTime プロパティの使用
• 選択のクリアへの対応

時刻の書式設定

📄 参照先： references/formatting.md

参照するタイミング： 時刻の表示方法（12時間／24時間、秒やミリ秒の表示／非表示）を設定する場合。

掲載内容：

• Format プロパティの概要
• 14種類の定義済み時刻形式：
  • H_mm、H_mm_ss（先行ゼロなしの24時間形式）
  • HH_mm、HH_mm_ss、HH_mm_ss_fff（先行ゼロありの24時間形式）
  • h_mm_tt、h_mm_ss_tt（先行ゼロなしの12時間形式＋AM/PM）
  • hh_mm_tt、hh_mm_ss_tt、hh_mm_ss_fff_tt、hh_tt（先行ゼロありの12時間形式＋AM/PM）
  • mm_ss、mm_ss_fff、ss_fff（分／秒の組み合わせ）
  • Default（カルチャに基づく形式）
• 形式の使用例と形式の切り替え

ピッカーモードと表示

📄 参照先： references/picker-modes.md

参照するタイミング： ピッカーの表示方法（インライン、ポップアップダイアログ、位置指定ダイアログ）を設定する場合。

掲載内容：

• Mode プロパティ（Default、Dialog、RelativeDialog）
• ダイアログモードの設定
• IsOpen プロパティによるピッカーのプログラム制御
• 位置指定ポップアップの RelativeDialog モード
• RelativePosition のオプション（8つの配置位置）：
  • AlignTop、AlignBottom、AlignToLeftOf、AlignToRightOf
  • AlignTopLeft、AlignTopRight、AlignBottomLeft、AlignBottomRight
• 特定のコントロールに対する位置指定に使用する RelativeView プロパティ
• ポップアップサイズのカスタマイズ（PopupWidth、PopupHeight プロパティ）
• 各モードのコード例

時間間隔とループ

📄 参照： references/time-intervals-looping.md

参照するタイミング： 時間値の間隔を設定する場合や、連続ループを有効にする場合。

対象内容：

• HourInterval プロパティ（例：2 時間ごとに表示）
• MinuteInterval プロパティ（例：5、10、15 分ごとに表示）
• SecondInterval プロパティ（例：10 秒ごとに表示）
• 正確な時間選択を可能にする MilliSecondInterval プロパティ
• 最初の項目と最後の項目間をシームレスに移動する EnableLooping プロパティ
• 異なる時間形式と間隔の組み合わせ
• 実用的なシナリオ（予約、時間記録）

時間の制限

📄 参照： references/time-restrictions.md

参照するタイミング： 選択可能な時間を制限する場合（営業時間、最小／最大範囲、選択不可の時間）。

対象内容：

• 最も早い選択可能時間を設定する MinimumTime プロパティ
• 最も遅い選択可能時間を設定する MaximumTime プロパティ
• 特定の時間を無効にする BlackoutTimes コレクション
• 時間範囲の検証ルール
• ユースケース（営業時間：午前 9 時～午後 5 時、予約枠、昼休みの選択不可時間）
• 形式や間隔と制限の組み合わせ

イベントとコマンド

📄 参照： references/events-commands.md

参照するタイミング： 時間選択の変更やダイアログのライフサイクルを処理する場合、または MVVM コマンドを使用する場合。

対象内容：

• SelectionChanged イベント
  • NewValue と OldValue を持つ TimePickerSelectionChangedEventArgs
  • IsSelectionImmediate の動作（即時選択と遅延選択）
• ダイアログモードのイベント：
  • Opened イベント（ピッカーが開いたとき）
  • Closing イベント（キャンセル可能な CancelEventArgs を使用）
  • Closed イベント（ピッカーが閉じた後）
• フッタービューのイベント：
  • OkButtonClicked イベント
  • CancelButtonClicked イベント
• MVVM コマンド：
  • SelectionChangedCommand
  • AcceptCommand（OK ボタン）
  • DeclineCommand（キャンセルボタン）
• イベントの使用パターンとベストプラクティス

カスタマイズとスタイル設定

📄 参照： references/customization.md

参照するタイミング： ピッカーの外観（色、フォント、ヘッダー／フッター、視覚効果）をカスタマイズする場合。

対象内容：

• ヘッダービューのカスタマイズ
  • Text、Height、Background、TextStyle プロパティ
• フッタービューのカスタマイズ
  • OkButtonText、CancelButtonText
  • ShowOkButton、Height、Background、TextStyle
• 列ヘッダービューのカスタマイズ
  • 各列の Text、Height、TextStyle
• 選択ビューのカスタマイズ
  • Background、Stroke、StrokeThickness、CornerRadius、TextStyle
• TextDisplayMode のオプション：
  • Default、Fade、Shrink、FadeAndShrink
• モダンな UI 向けのリキッドグラス効果
• 項目テキストのスタイル設定
• カスタマイズの完全な例

アクセシビリティとローカライズ

📄 参照： references/accessibility-localization.md

参照するタイミング： アクセシブルなコントロールを実装する場合や、複数の言語／カルチャをサポートする場合。

対象内容：

• WCAG 準拠機能
• スクリーンリーダーのサポート
• キーボードナビゲーション
• アクセシビリティ向けのセマンティックプロパティ
• ローカライズの設定
• カルチャ固有の時間書式
• RTL（右から左）言語のサポート
• 多言語実装の例