syncfusion-maui-date-time-range-selector

.NET MAUI 日時範囲セレクターの実装

Syncfusion .NET MAUI 日時範囲セレクター（SfDateTimeRangeSelector）は、指定された最小値と最大値の範囲内で、ユーザーが DateTime 値の範囲を選択できる、操作性に優れた UI コントロールです。チャートなどの視覚的なコンテンツとシームレスに連携するように設計されており、時間ベースのデータを直感的にフィルターおよび探索できます。

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

ユーザーが以下の操作を行う必要がある場合に、このスキルを使用します。

• 日付／時刻の範囲選択を実装する - ユーザーが日付または時刻の範囲を選択できるようにします
• チャートデータをインタラクティブにフィルターする - 期間を選択してチャートをズームまたはフィルターできるようにします
• 期間セレクターを作成する - 四半期、月、週、またはカスタム期間を選択する UI を構築します
• 日付用の範囲スライダーを追加する - DateTime 値に対応するスライダーコントロールを実装します
• データ探索ツールを構築する - 時系列データを分析するためのインタラクティブなコントロールを作成します
• 範囲セレクターの外観をカスタマイズする - ラベル、目盛り、つまみ、トラック、領域をスタイル設定します
• 範囲選択イベントを処理する - 範囲の変更を伴うユーザー操作に応答します
• チャートと連携する - Syncfusion Charts やその他のコンテンツを範囲セレクターに埋め込みます

コンポーネントの概要

• ドラッグ可能なつまみによる日時範囲の選択
• データの視覚化に対応したチャートコンテンツの連携
• カスタマイズ可能なラベル、目盛り、区切り線
• 間隔を指定した離散的な選択
• カスタム書式設定に対応したツールチップ
• すべての視覚要素に対応した豊富なスタイル設定オプション
• 領域の強調表示（アクティブ／非アクティブ領域）
• 複数のドラッグ動作
• コマンドを使用したイベント駆動型アーキテクチャ
• 最新の UI に対応した Liquid Glass エフェクト（iOS 26 以降、macOS 26 以降）

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

はじめに

📄 参照： references/getting-started.md

• NuGet パッケージのインストール（Syncfusion.Maui.Sliders）
• ハンドラーの登録（ConfigureSyncfusionCore）
• 日時範囲セレクターの基本的な実装
• チャートコンテンツの追加
• Minimum、Maximum、RangeStart、RangeEnd の設定

間隔と書式設定

📄 参照： references/interval-and-formatting.md

• 日付間隔の設定（Interval、IntervalType）
• 間隔の種類（Years、Months、Days、Hours、Minutes、Seconds）
• 間隔の自動計算
• 日付書式のパターン（DateFormat プロパティ）
• カスタム間隔のシナリオ

ラベルの設定

📄 参照： references/labels.md

• ラベルの有効化（ShowLabels）
• 日付書式のカスタマイズ
• ラベルの配置（LabelsPlacement：OnTicks、BetweenTicks）
• 端のラベルの配置（EdgeLabelsPlacement）
• ラベルのスタイル設定（アクティブ／非アクティブ時の色、フォント、サイズ）
• ラベルのオフセットのカスタマイズ
• LabelCreated イベントによるラベルテキストのカスタマイズ

目盛りと区切り線

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

• 主目盛りの設定（ShowTicks）
• 補助目盛り（MinorTicksPerInterval）
• 目盛りのスタイル設定（色、サイズ、オフセット）
• 区切り線の表示（ShowDividers）
• 区切り線のカスタマイズ（半径、色、線）
• アクティブ／非アクティブ時の目盛りの状態

トラックと領域

📄 参照： references/track-and-regions.md

• トラックのプロパティ（Minimum、Maximum、範囲値）
• トラックの色のカスタマイズ（アクティブ／非アクティブ）
• トラックの高さ（ActiveSize、InactiveSize）
• トラックの範囲の設定
• 領域の塗りつぶし色と線の色
• 領域の線の太さ
• アクティブ／非アクティブ領域の区別

つまみとオーバーレイ

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

• つまみのサイズの設定（Radius）
• つまみの塗りつぶし色と線の色
• つまみの重なりの処理（OverlapStroke）
• つまみのオーバーレイのカスタマイズ
• オーバーレイのサイズと色
• インタラクティブな視覚的フィードバック

ツールチップ

📄 参照: references/tooltip.md

• ツールチップの有効化
• 常時表示する ShowAlways モード
• ツールチップのスタイル設定（塗りつぶし、線、パディング）
• テキストのカスタマイズ（色、フォント、サイズ）
• ツールチップの日付形式
• TooltipLabelCreated イベントによるカスタムツールチップテキスト

選択と操作

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

• 離散選択（StepDuration）
• 区間選択モード（EnableIntervalSelection）
• ドラッグ動作（OnThumb、BetweenThumbs、Both）
• 更新の遅延（EnableDeferredUpdate、DeferredUpdateDelay）
• タッチおよびマウスによる操作
• IsInversed プロパティ

イベントとコマンド

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

• ValueChangeStart/End イベント
• DateTimeRangeSelectorValueChangingEventArgs を使用する ValueChanging イベント
• DateTimeRangeSelectorValueChangedEventArgs を使用する ValueChanged イベント
• LabelCreated および TooltipLabelCreated イベント
• DragStartedCommand および DragCompletedCommand
• コマンドパラメーター
• MVVM パターンの実装

応用編：リキッドグラス効果

📄 参照: references/liquid-glass-effect.md

• モダンな半透明のガラス風 UI 効果
• EnableLiquidGlassEffect プロパティ
• プラットフォーム要件（.NET 10、iOS 26+、macOS 26+）
• ビジュアルデザインの原則
• 実装例