syncfusion-winui-slider

Syncfusion WinUI Slider の実装

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

次のような場合は、Syncfusion WinUI Slider を使用します。

• ユーザーが範囲内から単一の数値を選択できるようにする
• 値（音量、明るさ、価格帯など）を調整するためのインタラクティブな方法を提供する
• 視覚的なフィードバック（ラベル、目盛り、ツールチップ）を使って値の選択を表示する
• 外観や動作をカスタマイズできるスライダーコントロールを作成する
• フィルタリングや構成設定用の範囲セレクターを実装する
• 調整可能な数値パラメーターを備えた設定パネルを作成する
• 測定値、評価、スコア用のインタラクティブなコントロールを追加する

コンポーネントの概要

Syncfusion WinUI Slider（SfSlider）は、ユーザーが値の範囲内から単一の値を選択できる、高度にインタラクティブな UI コントロールです。次のような豊富な機能を備えています。

• 数値のサポート - 任意の数値範囲から値を選択できます
• ラベル - カスタマイズ可能なスタイルで書式設定済みの値を表示します
• 目盛り - 間隔に応じて主目盛りと副目盛りを表示します
• 仕切り - 間隔の間に視覚的な区切りを表示します
• つまみのカスタマイズ - 組み込みアイコンやカスタムスタイルを使用できます
• ツールチップ - カスタム書式で選択した値を表示します
• トラックのスタイル設定 - アクティブおよび非アクティブなトラックの外観をカスタマイズします
• 向き - 水平または垂直のレイアウトに対応します
• アクセシビリティ - キーボードとスクリーンリーダーを完全にサポートします

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

はじめに

📄 参照: references/getting-started.md

• WinUI 3 デスクトップアプリケーションの作成
• Syncfusion.Sliders.WinUI NuGet パッケージのインストール
• 名前空間のインポート
• スライダーの基本的な初期化
• 最小値、最大値、現在値の設定
• 目盛り、ラベル、仕切りの有効化
• 簡単な実装例

主な機能と構成

📄 参照: references/basic-features.md

• 数値のサポートと範囲
• 向き（水平／垂直）
• Value プロパティとデータバインディング
• 間隔とステップ頻度
• IsEnabled プロパティと IsInversed プロパティ
• ValueChanged イベントの処理
• カスタム範囲の実装
• エッジケースと検証

ラベル

📄 参照: references/labels.md

• ShowLabels プロパティ
• ラベルの配置と位置指定
• ラベルの書式文字列（数値、パーセンテージ、通貨、カスタム）
• LabelStyle のカスタマイズ
• LabelOffset の構成
• カスタムラベルテンプレート
• ラベルの表示と間隔
• ラベルの RTL サポート

目盛り

📄 参照: references/ticks.md

• 主目盛り用の ShowTicks プロパティ
• MinorTicksPerInterval による副目盛り
• 目盛りの配置とオフセット
• MajorTickStyle のカスタマイズ
• MinorTickStyle のカスタマイズ
• TickPlacement（After、Before）
• カスタム目盛りテンプレート
• 目盛りの頻度と間隔

仕切り

📄 参照: references/dividers.md

• ShowDividers プロパティ
• DividerHeight と DividerWidth
• 仕切りのスタイルと色
• カスタム仕切りテンプレート
• トラックに対する仕切りの配置
• 間隔間の視覚的な区切り

つまみとツールチップ

📄 参照: references/thumb-tooltip.md

• つまみのアイコンとカスタマイズ
• ThumbStyle プロパティ
• つまみのオーバーレイ効果
• ShowToolTip プロパティ
• ツールチップの配置（Top／Bottom）
• カスタム表示用の TooltipFormat
• カスタムツールチップテンプレート
• ホバー時と操作時の状態
• つまみのアクセシビリティ機能

トラックのカスタマイズ

📄 参照: references/track-customization.md

• ActiveTrackHeight と InactiveTrackHeight
• ActiveTrackStyle と InactiveTrackStyle
• トラックの色とブラシ
• トラックの塗りつぶしのカスタマイズ
• グラデーショントラック
• カスタムトラックテンプレート
• 角丸とスタイル設定
• トラックの操作時の状態

クイックスタートの例

基本的なスライダーの実装

<Window xmlns:slider="using:Syncfusion.UI.Xaml.Sliders">

    <Grid>
        <slider:SfSlider Value="50"
                         Minimum="0"
                         Maximum="100"
                         Width="400"
                         Margin="20" />
    </Grid>
</Window>

ラベルと目盛りを備えたスライダー

<slider:SfSlider Value="50"
                 Minimum="0"
                 Maximum="100"
                 Interval="10"
                 ShowLabels="True"
                 ShowTicks="True"
                 Width="400" />

機能をすべて備えたスライダー

<slider:SfSlider Value="50"
                 Minimum="0"
                 Maximum="100"
                 Interval="10"
                 ShowLabels="True"
                 ShowTicks="True"
                 ShowDividers="True"
                 ShowToolTip="True"
                 MinorTicksPerInterval ="1"
                 Width="400"
                 Height="60" />

コードビハインドでの実装

using Syncfusion.UI.Xaml.Sliders;

// Create slider
SfSlider slider = new SfSlider();
slider.Value = 50;
slider.Minimum = 0;
slider.Maximum = 100;
slider.Interval = 10;
slider.ShowLabels = true;
slider.ShowTicks = true;
slider.Width = 400;

// Handle value changes
slider.ValueChanged += (sender, e) =>
{
    double newValue = e.NewValue;
    Console.WriteLine($"Value changed to: {newValue}");
};

// Add to layout
rootGrid.Children.Add(slider);

一般的なパターン

音量コントロールのパターン

<slider:SfSlider Value="{Binding Volume, Mode=TwoWay}"
                 Minimum="0"
                 Maximum="100"
                 Interval="10"
                 ShowLabels="True"
                 ShowTicks="True"
                 ShowToolTip="True"
                 Width="300">
</slider:SfSlider>

価格範囲フィルターパターン

<slider:SfSlider Value="{Binding MaxPrice, Mode=TwoWay}"
                 Minimum="0"
                 Maximum="1000"
                 Interval="100"
                 ShowLabels="True"
                 ShowTicks="True"
                 Width="400">
</slider:SfSlider>

垂直スライダーパターン

<slider:SfSlider Value="50"
                 Minimum="0"
                 Maximum="100"
                 Orientation="Vertical"
                 ShowLabels="True"
                 ShowTicks="True"
                 Height="300"
                 Width="80" />

無効状態のパターン

<slider:SfSlider Value="50"
                 IsEnabled="False"
                 ShowLabels="True"
                 ShowTicks="True"
                 Width="400" />

主なプロパティ

プロパティ	型	説明
Value	double	スライダーの現在値
Minimum	double	最小値（既定値：0）
Maximum	double	最大値（既定値：100）
Interval	double	ラベルと目盛りの間隔（既定値：自動計算）
ShowLabels	bool	値ラベルを表示します（既定値：false）
ShowTicks	bool	目盛りを表示します（既定値：false）
ShowDividers	bool	区間の区切り線を表示します（既定値：false）
ShowToolTip	bool	つまみのホバー時またはドラッグ時にツールチップを表示します（既定値：false）
Orientation	Orientation	水平または垂直（既定値：Horizontal）
IsInversed	bool	方向を反転します（既定値：false）
MinorTicksPerInterval	int	区間ごとの補助目盛りの数（既定値：0）
ActiveTrackHeight	double	塗りつぶされたトラックの高さ
InactiveTrackHeight	double	塗りつぶされていないトラックの高さ
DividerHeight	double	区切りマーカーの高さ
DividerWidth	double	区切りマーカーの幅

主なイベント

イベント	説明
ValueChanged	スライダーの値が変更されたときに発生します

よくある使用例

1. オーディオ／ビデオコントロール - 音量、再生位置、明るさ
2. フィルタースライダー - 価格範囲、年齢範囲、評価フィルター
3. 設定パネル - 調整可能なパラメーター、設定値
4. 画像編集 - 明るさ、コントラスト、彩度の調整
5. 測定ツール - 温度、圧力、スケールの選択
6. 評価システム - スコアの選択、満足度の評価
7. 進行状況インジケーター - インタラクティブなプログレスバー
8. ズームコントロール - スケール／ズームレベルの調整

ベストプラクティス

1. 適切な範囲を設定する： 意味のある Minimum 値と Maximum 値を定義します
2. 間隔を適切に設定する： データに適した間隔を選びます
3. 視覚的なフィードバックを有効にする： UX を向上させるため、ラベル、目盛り、またはツールチップを表示します
4. データバインディング： 変更を反映するため、双方向バインディングを使用します
5. アクセシビリティ： キーボード操作（Tab、矢印キー）が機能することを確認します
6. カスタム書式設定： 分かりやすくするため、LabelFormat と TooltipFormat を使用します
7. レスポンシブな幅： レイアウトに適した Width を設定します
8. 検証： ValueChanged を処理して、値を検証し、範囲内に制限します

トラブルシューティング

スライダーが表示されない場合：

• Syncfusion.Sliders.WinUI NuGet がインストールされていることを確認します
• 名前空間のインポートを確認します：xmlns:slider="using:Syncfusion.UI.Xaml.Sliders"
• Width または Height が適切に設定されていることを確認します

値が更新されない場合：

• データバインディングに Mode=TwoWay を使用します
• ValueChanged イベントが正しく処理されていることを確認します
• IsEnabled が true か確認します

ラベル／目盛りが表示されない場合：

• ShowLabels="True" と ShowTicks="True" を設定します
• Interval プロパティを定義します
• レイアウトに十分な Width／Height があることを確認します

ツールチップが表示されない場合：

• ShowToolTip="True" を設定します
• マウス／タッチ操作が機能することを確認します

次のステップ

• カスタムラベルの書式設定については、labels.md を参照してください
• 正確な値インジケーターについては、ticks.md をご覧ください
• track-customization.md で外観をカスタマイズします
• thumb-tooltip.md でツールチップを追加します