syncfusion-maui-date-time-slider

.NET MAUI Date Time Slider の実装

Syncfusion .NET MAUI DateTime Slider（SfDateTimeSlider）は、日付／時刻の値の範囲から単一の DateTime 値を選択するための、操作性に優れた UI コントロールです。ラベル、目盛り、ツールチップ、トラック、サム、区切り線を柔軟にカスタマイズできるため、MAUI アプリケーションでの時間データの選択に最適です。

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

次のような場合にこのスキルを使用します。

• 日付の選択を実装する：.NET MAUI アプリケーションでスライダーインターフェイスを使用する場合
• 時刻ピッカーを作成する：視覚的なフィードバックを備えた日時範囲セレクターを作成する場合
• 時間に関する UI コントロールを構築する：日付、時刻、または日時の値を選択する場合
• スライダーの外観をカスタマイズする：トラックの色、サムのスタイル、ラベル、目盛り、ツールチップを設定する場合
• 日時の値の変更を処理する：MVVM パターンでイベントやコマンドを使用する場合
• 離散的な選択を有効にする：特定の日付／時刻の間隔（日単位、月単位、年単位、時間単位）を設定する場合
• RTL とアクセシビリティに対応する：WCAG に準拠した日時スライダーを使用する場合
• 最新のガラス効果を追加する：Liquid Glass Effect（.NET 10 以降）を使用する場合

このスキルは、時間データの選択、カレンダー形式の入力、日付範囲のフィルタリング、時刻のスケジュール設定インターフェイスなど、.NET MAUI で直感的な日時の値の選択が必要なあらゆる場面で役立ちます。

コンポーネントの概要

主な機能：

• DateTime のサポート：柔軟な範囲設定で DateTime 値を選択できます
• 2 種類の向き：水平および垂直のスライダーの向きに対応しています
• 豊富なラベル表示：アクティブ状態と非アクティブ状態を含む、カスタマイズ可能な日付形式のラベル
• 目盛りと区切り線：主要／補助間隔を視覚的に表示します
• 操作に応じたツールチップ：操作中に選択した値を表示します
• 離散モード：設定可能な間隔に基づいて値を選択します
• 外観のカスタマイズ：色、サイズ、フォント、スタイルをすべて調整できます
• イベントとコマンド：値の変更を追跡し、MVVM コマンドをサポートします
• Visual State Manager：有効状態／無効状態をサポートします
• Liquid Glass Effect：最新の半透明デザイン（.NET 10、iOS/macOS 26）

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

はじめに

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

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

取り上げるトピック：

• Syncfusion.Maui.Sliders NuGet パッケージのインストール
• ConfigureSyncfusionCore を使用したハンドラーの登録
• DateTime Slider の基本的な実装（XAML と C#）
• Minimum、Maximum、Value プロパティの設定
• 向きの設定（Horizontal/Vertical）
• IsInversed を使用したスライダーの方向の反転
• プラットフォーム固有のセットアップ（Visual Studio、VS Code、JetBrains Rider）

トラックの設定

📄 参照先： references/track-customization.md

参照するタイミング： トラックの外観、色、またはサイズをカスタマイズする場合。

取り上げるトピック：

• Minimum、Maximum、Value プロパティの詳細
• アクティブおよび非アクティブなトラックの色（ActiveFill、InactiveFill）
• トラックの高さのカスタマイズ（ActiveSize、InactiveSize）
• トラックの端を延長するためのトラックの範囲設定
• TrackStyle クラスとプロパティ
• Visual State Manager を使用したトラックの無効状態

ラベルと書式設定

📄 参照先： references/labels.md

参照するタイミング： 書式設定した日付ラベルを表示する場合、またはラベルの外観をカスタマイズする場合。

取り上げるトピック：

• ShowLabels プロパティによるラベルの有効化
• DateFormat プロパティによる日付／時刻形式のカスタマイズ
• ラベルの配置オプション（OnTicks、BetweenTicks）
• 端のラベルの配置（Default、Inside）
• ラベルのスタイルのカスタマイズ（色、フォント、サイズ）
• アクティブおよび非アクティブなラベルのスタイル設定
• ラベルのオフセットの調整
• LabelCreated イベントによるラベルテキストのカスタマイズ
• ラベルの無効状態

目盛りと区切り線

📄 お読みください： references/ticks-and-dividers.md

読むタイミング： 間隔を示すインジケーターを追加するとき、または目盛りや区切り線の外観をカスタマイズするとき。

内容：

• 主目盛りの ShowTicks プロパティ
• 副目盛りインジケーターの MinorTicksPerInterval
• 主目盛りと副目盛りのスタイル（色、サイズ）
• 目盛りのオフセット設定
• 区切り線マークの ShowDividers プロパティ
• 区切り線のスタイル（半径、色、ストローク）
• アクティブおよび非アクティブな目盛り／区切り線のカスタマイズ
• Visual State Manager を使用した無効状態

つまみとオーバーレイのカスタマイズ

📄 お読みください： references/thumb-and-overlay.md

読むタイミング： ドラッグ可能なつまみ、またはそのインタラクティブなオーバーレイをカスタマイズするとき。

内容：

• つまみの定義と目的
• Radius プロパティによるつまみのサイズ
• つまみの色（Fill、Stroke、StrokeThickness）
• ThumbStyle クラスのプロパティ
• つまみのオーバーレイの定義と動作
• オーバーレイのサイズと色のカスタマイズ
• ThumbOverlayStyle のプロパティ
• Visual State Manager を使用した無効状態のつまみ

ツールチップの設定

📄 お読みください： references/tooltip.md

読むタイミング： 操作中にツールチップを表示するとき、またはツールチップの外観をカスタマイズするとき。

内容：

• SliderTooltip によるツールチップの有効化
• 常時表示するための ShowAlways プロパティ
• ツールチップのスタイル（Fill、Stroke、StrokeThickness）
• ツールチップのテキストのカスタマイズ（TextColor、FontSize、FontFamily）
• Padding プロパティと Position プロパティ
• ツールチップの日付表示に使用する DateFormat
• カスタムのツールチップテキストを設定する TooltipLabelCreated イベント

間隔と値の選択

📄 お読みください： references/intervals-and-selection.md

読むタイミング： 日付間隔、離散選択、または更新の遅延を設定するとき。

内容：

• ラベル／目盛り／区切り線の間隔を設定する Interval プロパティ
• IntervalType 列挙型（Years、Months、Days、Hours、Minutes、Seconds）
• 間隔の自動計算
• 離散選択モードの StepDuration
• EnableDeferredUpdate と DeferredUpdateDelay
• DateFormat を使用したさまざまな間隔タイプの例

イベントとコマンド

📄 お読みください： references/events-and-commands.md

読むタイミング： 値の変更を処理するとき、MVVM コマンドを実装するとき、またはラベルやツールチップを動的にカスタマイズするとき。

内容：

• ValueChangeStart、ValueChanging、ValueChanged、ValueChangeEnd イベント
• イベントハンドラーの実装
• ラベルを動的にカスタマイズする LabelCreated イベント
• ツールチップのテキストを整形する TooltipLabelCreated イベント
• DragStartedCommand と DragCompletedCommand
• MVVM バインディング用のコマンドパラメーター
• リキッドグラスエフェクト（EnableLiquidGlassEffect プロパティ）