syncfusion-maui-slider

.NET MAUI Slider の実装

Syncfusion .NET MAUI Slider（SfSlider）は、定義された範囲から単一の値を選択できる、非常にインタラクティブな UI コントロールです。トラックのスタイル設定、ラベル、目盛り、区切り線、ツールチップなど、豊富なカスタマイズ機能を備えており、直感的で視覚的にも魅力的なスライダーを作成できます。

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

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

• .NET MAUI アプリケーションに数値スライダーコントロールを実装する
• 音量、明るさ、価格など、範囲内の単一の値をユーザーが選択できるようにする
• スライダーのトラック、つまみ、ラベル、目盛り、区切り線、ツールチップを設定する
• イベントやコマンドを使用してスライダーの値の変更を処理する
• ステップ値を使用する離散スライダーを作成する
• 色、サイズ、スタイルを使ってスライダーの外観をカスタマイズする
• 更新の遅延やリキッドグラス効果などの高度な機能を有効にする
• Xamarin.Forms RangeSlider から .NET MAUI Slider に移行する
• 水平と垂直の両方の向きでスライダーを実装する

Syncfusion .NET MAUI Slider（SfSlider）は、範囲内の単一の数値を選択するための、非常にインタラクティブな UI コントロールです。カスタマイズ可能なトラック、ラベル、目盛り、区切り線、ツールチップ、応答性の高い操作など、豊富な機能を備えています。

コンポーネントの概要

SfSlider は .NET MAUI の数値スライダーコントロールです。トラックに沿ってつまみをドラッグすることで、ユーザーが単一の値を選択できます。次の機能を提供します。

• 数値のサポート：設定可能な最小値と最大値で、数値範囲から値を選択できます
• 視覚要素：トラック、つまみ、オーバーレイ、ラベル、目盛り、区切り線、ツールチップ
• 向き：水平および垂直のレイアウトをサポートします
• 操作：値の変更に対応するイベントとコマンドを備えた、滑らかなドラッグ操作
• 離散モード：特定の増分で値を選択するステップベースの選択
• カスタマイズ：すべての視覚コンポーネントに対応する、幅広いスタイル設定
• 高度な機能：更新の遅延、リキッドグラス効果、Visual State Manager のサポート

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

はじめに

📄 参照： references/getting-started.md

• Syncfusion.Maui.Sliders NuGet パッケージのインストール
• ConfigureSyncfusionCore でのハンドラーの登録
• XAML と C# での基本的なスライダーの作成
• Visual Studio、VS Code、JetBrains Rider のセットアップ
• 向き（水平／垂直）
• スライダーの向きを反転する IsInversed プロパティ

トラックと値の設定

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

• Minimum プロパティと Maximum プロパティ
• Value プロパティとデータバインディング
• TrackStyle を使ったトラックのカスタマイズ
• ActiveFill と InactiveFill の色
• トラックの太さを設定する ActiveSize と InactiveSize
• トラックの高さとカスタムスタイル

ラベルと書式設定

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

• ラベルを表示する ShowLabels プロパティ
• 間隔の設定（手動および自動）
• ラベルの書式設定に使用する NumberFormat（接頭辞／接尾辞）
• カスタムラベルテキストを設定する LabelCreated イベント
• SliderLabelCreatedEventArgs（Text、Style プロパティ）
• ラベルのスタイル設定（色、フォント、ファミリー、オフセット）

目盛りと区切り線

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

• 主目盛りに使用する ShowTicks プロパティ
• 副目盛りに使用する MinorTicksPerInterval
• 目盛りのサイズ、長さ、スタイル設定
• トラックのマーカーに使用する ShowDividers プロパティ
• 区切り線の半径、塗りつぶし、ストロークのカスタマイズ
• ActiveRadius、InactiveRadius、ActiveFill、InactiveFill
• ActiveStroke、InactiveStroke、ActiveStrokeThickness、InactiveStrokeThickness
• 無効な区切り線に対する Visual State Manager

ツールチップ

📄 読む: references/tooltip.md

• SliderTooltip によるツールチップの有効化
• ツールチップを常に表示する ShowAlways プロパティ
• 値の書式設定に使用する Tooltip.NumberFormat
• カスタムのツールチップテキストを設定する TooltipLabelCreated イベント
• SliderTooltipLabelCreatedEventArgs（Text、TextColor、FontSize、FontFamily、FontAttributes）
• ツールチップの位置とスタイル設定

サム、選択範囲、オーバーレイ

📄 読む: references/thumb-selection-overlay.md

• ThumbStyle によるサムのカスタマイズ
• サムの Radius、Fill、Stroke、StrokeThickness
• ThumbOverlayStyle による ThumbOverlay プロパティ
• オーバーレイの半径と色の設定
• 選択範囲トラックのスタイル設定
• 無効状態のサムに対する Visual State Manager の使用
• スタイル設定の完全な例

イベント、コマンド、操作

📄 読む: references/events-and-commands.md

• ValueChangeStart イベント（サムを押したとき）
• ドラッグ中の SliderValueChangingEventArgs を伴う ValueChanging イベント
• ドラッグ完了時の SliderValueChangedEventArgs を伴う ValueChanged イベント
• ValueChangeEnd イベント（サムを離したとき）
• DragStartedCommand と DragStartedCommandParameter
• DragCompletedCommand と DragCompletedCommandParameter
• ViewModel と ICommand を使用したコマンドバインディング
• イベントハンドラーのパターン

高度な機能と移行

📄 読む: references/advanced-features.md

• 値を段階的に選択する StepSize
• EnableDeferredUpdate と DeferredUpdateDelay
• 無効状態を設定する IsEnabled プロパティ
• EnableLiquidGlassEffect（.NET 10+ 向けの最新の半透明デザイン）
• LiquidGlass の前提条件（iOS 26、macOS 26）
• 状態ベースのスタイル設定に使用する Visual State Manager（VSM）
• カスタムテーマとスタイル設定のパターン
• Xamarin.Forms SfRangeSlider からの移行
• プロパティの対応関係（Xamarin → MAUI）