syncfusion-maui-date-time-range-slider

.NET MAUI Date Time Range Slider の実装

このスキルでは、Syncfusion .NET MAUI DateTime Range Slider（SfDateTimeRangeSlider）コントロールの実装方法を包括的に説明します。この高度にインタラクティブな UI コンポーネントでは、2 つのつまみを使って DateTime 値の範囲を選択できます。

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

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

• .NET MAUI アプリで DateTime の範囲を選択するための範囲スライダーを実装する
• トラック、つまみ、ラベルを備えた日付範囲ピッカーを作成する
• 時、分、秒単位で選択できる時間範囲セレクターを構築する
• 最小値と最大値の日付／時刻を選択するための2 つのつまみを持つスライダーを追加する
• スライダーで範囲を選択できるインタラクティブなカレンダーを実装する
• トラック、つまみ、目盛り、ラベル、区切り線、ツールチップの外観をカスタマイズする
• DateTime 値を一定の間隔で段階的に選択できるようにする
• 値変更イベントを処理する、またはMVVM コマンドを実装する
• iOS 26+/macOS 26+ プラットフォームで最新のLiquid Glass Effectを適用する
• RTL 対応で水平および垂直の方向をサポートする
• 選択範囲のアクティブ領域と非アクティブ領域を個別にスタイル設定する

このスキルでは、インストール、構成、スタイル設定、イベント、コマンドに加え、更新の遅延や間隔選択などの高度な機能を含む API 全体を扱います。

コンポーネントの概要

コントロール： SfDateTimeRangeSlider（Syncfusion .NET MAUI Range Slider）
名前空間： Syncfusion.Maui.Sliders
パッケージ： Syncfusion.Maui.Sliders（NuGet）
プラットフォームのサポート： .NET MAUI（iOS、Android、macOS、Windows）

主な機能

• DateTime のサポート - 日付／時刻の書式設定機能を標準で備え、DateTime の範囲を選択できます
• 2 つのつまみ - 範囲を選択する開始位置と終了位置のつまみ
• 柔軟な間隔 - 年、月、日、時、分、秒
• ラベルと目盛り - ラベル、主目盛り／副目盛り、区切り線をカスタマイズできます
• ツールチップ - 選択値を表示するインタラクティブなツールチップ
• 方向 - 反転にも対応する水平および垂直レイアウト
• 離散モード - 特定の間隔で値を段階的に選択できます
• ドラッグ動作 - OnThumb、BetweenThumbs、Both の各モード
• 豊富なスタイル設定 - すべての要素について、アクティブ状態と非アクティブ状態を個別に設定できます
• イベントとコマンド - MVVM をサポートする一連のライフサイクルイベント
• Liquid Glass Effect - 最新の半透明デザイン（iOS 26+/macOS 26+/.NET 10+）
• Visual State Manager - 有効状態／無効状態をカスタマイズできます

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

はじめに

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

次の内容が必要な場合に参照してください。

• インストールとパッケージの設定
• ハンドラーの登録（ConfigureSyncfusionCore）
• DateTime Range Slider の基本的な実装
• 最小構成の動作するサンプル
• クイックスタートコード（XAML と C#）
• 初期設定に関するトラブルシューティング

トラックと範囲の設定

📄 参照先： references/track-and-range.md

次の内容が必要な場合に参照してください。

• 最小および最大の DateTime 値を設定する
• RangeStart と RangeEnd（選択範囲）を設定する
• 方向を変更する（水平／垂直）
• スライダーの方向を反転する
• トラックの色をカスタマイズする（ActiveFill/InactiveFill）
• トラックの高さ／サイズを調整する
• 端でトラックを延長する（TrackExtent）
• Visual State Manager で無効状態のスタイルを設定する

ラベル、間隔、書式設定

📄 参照先： references/interval-and-labels.md

次の内容が必要な場合に参照してください。

• 間隔の値と種類（年、月、日など）を設定する
• 間隔の自動計算を有効にする
• DateTime ラベルをフォーマットする（DateFormat 文字列）
• ラベルの表示／非表示を切り替える
• ラベルの位置を設定する（OnTicks または BetweenTicks）
• 端のラベルの配置を設定する（Default または Inside）
• アクティブ状態と非アクティブ状態のラベルを個別にスタイル設定する
• ラベルの色、フォント、サイズをカスタマイズする
• 目盛りからのラベルのオフセットを調整する
• LabelCreated イベントでカスタムラベルテキストを作成する

目盛りと区切り線

📄 参照： references/ticks-and-dividers.md

次のような場合にお読みください：

• 大目盛りと小目盛りの表示／非表示を切り替える
• 区間ごとの目盛り数を設定する
• 目盛りの色（アクティブ／非アクティブ）をカスタマイズする
• 目盛りのサイズを調整する
• トラックからの目盛りのオフセットを設定する
• トラックに区切り線を表示する
• 区切り線の角丸、色、ストロークを設定する
• 無効状態に Visual State Manager を適用する

ツールチップとつまみ

📄 参照： references/tooltip-and-thumb.md

次のような場合にお読みください：

• ツールチップを有効にして設定する
• 操作しなくてもツールチップを常に表示する
• ツールチップの外観（塗りつぶし、ストローク、テキスト）を設定する
• ツールチップの DateTime 値をフォーマットする
• TooltipLabelCreated イベントでツールチップのテキストをカスタマイズする
• つまみのサイズ、色、ストロークを設定する
• つまみが重なったときの動作を設定する
• つまみのオーバーレイ（操作時のハロー）をカスタマイズする
• 無効状態を適用する

選択と操作

📄 参照： references/selection-and-interaction.md

次のような場合にお読みください：

• 離散選択（StepDuration）を有効にする
• 区間の選択モードを設定する
• ドラッグ動作（OnThumb、BetweenThumbs、Both）を設定する
• パフォーマンス向上のために更新を遅延させる
• 遅延更新の時間を調整する
• タッチやジェスチャーによる操作に対応する
• さまざまな選択パターンを理解する

イベントとコマンド

📄 参照： references/events-and-commands.md

次のような場合にお読みください：

• 値変更のライフサイクルイベントを処理する
• ValueChangeStart、ValueChanging、ValueChanged、ValueChangeEnd を監視する
• イベント引数（OldStart、OldEnd、NewStart、NewEnd）にアクセスする
• 値の変更をキャンセルする
• LabelCreated イベントでラベルをカスタマイズする
• TooltipLabelCreated イベントでツールチップをカスタマイズする
• DragStartedCommand／DragCompletedCommand で MVVM を実装する
• コマンドパラメーターを使用する
• Liquid Glass Effect を有効にする（プラットフォーム固有）