syncfusion-maui-range-selector

.NET MAUI Range Selector の実装

Syncfusion の SfRangeSelector は、トラック上のつまみをドラッグして数値範囲を選択できる .NET MAUI コントロールです。セレクター内に任意のコンテンツ（通常はチャート）を埋め込める独自の機能を備えており、範囲によるチャートデータのフィルタリングに最適です。

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

ユーザーが次の操作を必要としている場合に、このスキルを使用してください。

• MAUI アプリで SfRangeSelector を一から設定する
• インタラクティブなデータフィルタリングのために、範囲セレクター内に チャートコンテンツ（SfCartesianChart などのビュー）を埋め込む
• トラックの外観をカスタマイズする — 色、高さ、範囲
• 範囲スケールの 間隔、目盛り、ラベル、区切り線を設定する
• つまみとオーバーレイをスタイル設定する — サイズ、色、線
• ツールチップを設定する — 常時表示、スタイル設定、カスタムテキスト
• 選択モードを実装する — 離散値、間隔選択、ドラッグ動作
• イベントを処理する — ValueChanged、ValueChanging、LabelCreated
• MVVM コマンドを使用する — DragStartedCommand、DragCompletedCommand
• ラベルをカスタマイズする — 配置、端への配置、スタイル設定、オフセット
• 目盛りと区切り線をスタイル設定する — 色、サイズ、線
• 視覚的な領域を追加する — アクティブ／非アクティブ領域の色と線
• IsInversed を使って範囲セレクターの方向を反転する
• NumberFormat で接頭辞／接尾辞を付けて 表示ラベルをフォーマットする
• モダンな半透明デザインのために Liquid Glass 効果を有効にする
• MVVM データバインディングのために RangeStart／RangeEnd を ViewModel にバインドする

コンポーネントの概要

SfRangeSelector は、トラック上の2つのつまみをドラッグして数値範囲を選択する .NET MAUI コントロールです。セレクター内に任意のコンテンツ（通常はチャート）を埋め込める独自の機能を備えており、インタラクティブなデータフィルタリングに最適です。

パッケージ: Syncfusion.Maui.Sliders
名前空間: Syncfusion.Maui.Sliders
コントロール: SfRangeSelector

主な機能:

• 埋め込みコンテンツ: セレクター内にレンダリングされる任意の .NET MAUI ビュー（例: SfCartesianChart）
• 2つのつまみ: トラック全体のスタイル設定に対応し、ドラッグして開始値と終了値を指定
• 間隔コントロール: 設定可能な間隔でのラベル、目盛り、副目盛り、区切り線
• 選択モード: 離散ステップ、間隔へのスナップ、ドラッグ動作のオプション
• 豊富なカスタマイズ: トラックの色、つまみのスタイル、ツールチップ、ラベル／目盛り／区切り線のスタイル設定
• 領域のサポート: アクティブ／非アクティブ領域のカスタマイズ
• MVVM 対応: イベント、コマンド、双方向データバインディングをサポート
• Liquid Glass 効果: iOS/macOS 26 以降向けのモダンな半透明デザイン

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

はじめに

📄 参照: references/getting-started.md

• NuGet のインストール（Syncfusion.Maui.Sliders）
• MauiProgram.cs でのハンドラー登録
• 最小限の XAML と C# のセットアップ
• Content プロパティによるチャートコンテンツの追加
• 名前空間のインポート

間隔の設定

📄 参照: references/interval-configuration.md

• Interval、Minimum、Maximum の設定
• Interval = 0 の場合の間隔の自動計算
• ShowTicks と MinorTicksPerInterval による目盛りの表示
• ShowDividers による区切り線の表示
• 間隔がラベルと目盛りの描画に与える影響

表示機能

📄 参照: references/display-features.md

• ShowLabels によるラベルの表示
• 目盛りと副目盛りの有効化
• NumberFormat によるラベルのフォーマット（接頭辞／接尾辞）
• IsInversed によるセレクターの反転
• RangeStart と RangeEnd の設定

コンテンツとチャートの統合

📄 参照: references/content-and-integration.md

• Content プロパティの動作
• 非表示の軸を設定した SfCartesianChart の埋め込み
• ViewModel と ItemsSource のバインディングパターン
• 範囲セレクター内での SplineAreaSeries の設定
• 他のチャートタイプを使用する際のヒント

トラックのカスタマイズ

📄 参照： references/track-customization.md

• Minimum プロパティと Maximum プロパティ
• RangeStart 値と RangeEnd 値
• トラックの色（ActiveFill、InactiveFill）
• トラックの高さ（ActiveSize、InactiveSize）
• トラックの範囲（トラックの端を延長）
• TrackStyle プロパティと完全なスタイル設定

ラベルのカスタマイズ

📄 参照： references/labels-customization.md

• ShowLabels プロパティ
• 接頭辞／接尾辞（$、% など）の NumberFormat
• LabelsPlacement（OnTicks と BetweenTicks）
• EdgeLabelsPlacement（Default と Inside）
• LabelStyle（アクティブ／非アクティブの色、フォント、サイズ）
• ラベルのオフセットのカスタマイズ
• LabelCreated イベントによるカスタムラベルテキスト

目盛りと区切り

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

• ShowTicks と主目盛りの設定
• 副目盛り用の MinorTicksPerInterval
• MajorTickStyle（色、サイズ、オフセット）
• MinorTickStyle（色、サイズ、オフセット）
• ShowDividers プロパティ
• DividerStyle（半径、色、ストローク、ストロークの太さ）
• 目盛りと区切りの完全なスタイル設定例

選択モード

📄 参照： references/selection-modes.md

• StepSize による離散選択
• EnableIntervalSelection プロパティ
• DragBehavior オプション（OnThumb、BetweenThumbs、Both）
• パフォーマンス向上のための EnableDeferredUpdate
• DeferredUpdateDelay の設定
• 選択動作の比較

ツールチップの設定

📄 参照： references/tooltip-configuration.md

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

サムとスタイル設定

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

• ThumbStyle プロパティ（Radius、Fill、Stroke、StrokeThickness）
• サムが重なったときの OverlapStroke
• ThumbOverlayStyle（Radius、Fill）
• 表示領域（ActiveRegionFill、InactiveRegionFill、ストローク）
• 完全なスタイル設定パターン
• モダンな半透明デザインの EnableLiquidGlassEffect
• Liquid Glass のプラットフォーム要件

イベントとコマンド

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

• 値変更イベント（ValueChangeStart、ValueChanging、ValueChanged、ValueChangeEnd）
• カスタムラベルテキスト用の LabelCreated イベント
• カスタムツールチップテキスト用の TooltipLabelCreated イベント
• DragStartedCommand と DragCompletedCommand
• コマンドパラメーター
• MVVM パターンの実装
• イベント処理の完全な例