syncfusion-winforms-radial-slider

RadialSlider の実装

カスタマイズ可能な目盛りとテーマを備えた円形ダイヤルの周囲で針を回転させ、視覚的に数値を選択できる Windows Forms 用の円形スライダーコントロールです。

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

次のような場合に、このスキルを使用してください。

• 円形の値選択：ダイヤル式の数値入力（音量ノブ、温度ダイヤルなど）を実装する
• 回転式コントロール：視覚的なフィードバックを備えた回転式コントロールを作成する
• 値ピッカー：最小値と最大値の範囲を指定できる円形の値選択コントロールを作成する
• 目盛りマーカー：円形ダイヤルの周囲に値の目盛りを表示する
• 視覚的インジケーター：数値を放射状／円形の形式で表示する
• インタラクティブなダイヤル：ノブ型のコントロール（ゲージ、スライダー、ロータリースイッチ）を実装する
• テーマ付きコントロール：円形スライダーに Office 2016 のビジュアルテーマを適用する
• カスタム値範囲：視覚的な目盛りを備えた、特定の最小値／最大値の範囲を設定する

コンポーネントの概要

RadialSlider は、高度な円形スライダーコントロールです。次の機能を備えています。

• 回転する針による円形／放射状の値選択
• 最小値と最大値の範囲をカスタマイズ可能
• ダイヤル周囲の目盛りマーカー
• 2 種類のスライダースタイル（中空の円を表示する Default と、背景付きの Frame）
• 5 種類の Office 2016 ビジュアルテーマとデフォルトスタイル
• 色をカスタマイズ可能（背景、円、針、前景）
• 2 種類の針（Straight Line、Dotted Line）
• 値をリアルタイムに追跡する ValueChanged イベント
• 目盛りラベルのテキストをカスタマイズ可能

主な機能：

• 範囲設定用の MinimumValue および MaximumValue プロパティ
• 現在の選択値を取得／設定する Value プロパティ
• 目盛りマーカーを設定する SliderDivision プロパティ
• SliderStyle 列挙型（Default、Frame）
• 6 種類のビジュアルテーマを指定する Style プロパティ
• NeedleType 列挙型（StraightLine、DottedLine）
• 色のカスタマイズ（BackgroundColor、InnerCircleColor、OuterCircleColor、SliderNeedleColor）
• 値の変更を追跡する ValueChanged イベント
• テキスト書式をカスタマイズする DrawText イベント

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

はじめに

📄 参照： references/getting-started.md

参照する場面： RadialSlider を初めてセットアップするとき、フォームに追加するとき、基本的な設定を行うとき

説明する内容：

• アセンブリの要件と NuGet によるインストール
• デザイナーを使ったセットアップ（ツールボックスからのドラッグ＆ドロップ）
• プログラムによる作成と設定
• 基本的なサイズとプロパティの設定
• スライダースタイル（Default と Frame）
• ShowOuterCircle プロパティ
• インストール時の問題のトラブルシューティング

値の設定

📄 参照： references/value-configuration.md

参照する場面： 値の範囲や目盛りを設定するとき、値の変更を処理するとき、テキスト書式をカスタマイズするとき

説明する内容：

• MinimumValue および MaximumValue プロパティ
• Value プロパティ（現在の値の取得／設定）
• 目盛りマーカー用の SliderDivision プロパティ
• ValueChanged イベントの処理
• テキスト書式をカスタマイズする DrawText イベント
• TextType 列挙型（Interval、Pointer、Value）
• DrawTextEventArgs のプロパティ（Text、ForeColor、Font）
• 値を追跡する実践的な例

外観のカスタマイズ

📄 参照： references/appearance-customization.md

参照する場面： ビジュアルテーマを適用するとき、色をカスタマイズするとき、針の外観を変更するとき

説明する内容：

• BackgroundColor プロパティ
• InnerCircleColor および OuterCircleColor プロパティ
• SliderNeedleColor プロパティ
• ForeColor プロパティ
• NeedleType 列挙型（StraightLine、DottedLine）
• ビジュアルスタイル（6 種類のテーマ：Default、Office2016Colorful/White/DarkGray/Black）
• テーマ設定の完全な例
• 色の組み合わせに関するベストプラクティス

クイックスタートの例

音量コントロール用の基本的な RadialSlider を作成します。

C#:

using System;
using System.Windows.Forms;
using Syncfusion.Windows.Forms.Tools;

public partial class VolumeControl : Form
{
    private RadialSlider volumeSlider;
    private Label lblVolume;
    
    public VolumeControl()
    {
        InitializeComponent();
        SetupVolumeControl();
    }
    
    private void SetupVolumeControl()
    {
        // Create radial slider
        volumeSlider = new RadialSlider
        {
            Location = new System.Drawing.Point(50, 50),
            Size = new System.Drawing.Size(250, 250),
            MinimumValue = 0,
            MaximumValue = 100,
            Value = 50,
            SliderDivision = 10,
            SliderStyle = SliderStyles.Frame
        };
        
        // Create label for volume display
        lblVolume = new Label
        {
            Location = new System.Drawing.Point(50, 310),
            Size = new System.Drawing.Size(250, 30),
            Text = "Volume: 50",
            TextAlign = System.Drawing.ContentAlignment.MiddleCenter
        };
        
        // Handle value changes
        volumeSlider.ValueChanged += VolumeSlider_ValueChanged;
        
        // Add to form
        this.Controls.Add(volumeSlider);
        this.Controls.Add(lblVolume);
    }
    
    private void VolumeSlider_ValueChanged(object sender, RadialSlider.ValueChangedEventArgs e)
    {
        lblVolume.Text = $"Volume: {volumeSlider.Value}";
    }
}

よくあるパターン

パターン 1：カスタムテキストを使った温度コントロール

C#:

private RadialSlider tempSlider;

private void SetupTemperatureControl()
{
    tempSlider = new RadialSlider
    {
        MinimumValue = 0,
        MaximumValue = 100,
        Value = 25,
        SliderDivision = 10,
        Style = RadialSliderStyle.Office2016Colorful
    };
    
    // Custom text formatting with degree symbol
    tempSlider.DrawText += TempSlider_DrawText;
    
    this.Controls.Add(tempSlider);
}

private void TempSlider_DrawText(object sender, RadialSlider.DrawTextEventArgs e)
{
    // Add degree Celsius symbol
    e.Text += "°C";
    
    // Color code by temperature range
    int temp = int.Parse(e.Text.Replace("°C", ""));
    
    if (temp <= 33)
    {
        e.ForeColor = System.Drawing.Color.Blue; // Cold
    }
    else if (temp > 33 && temp <= 66)
    {
       e.ForeColor = System.Drawing.Color.Orange; // Warm
    }
    else
    {
        e.ForeColor = System.Drawing.Color.Red; // Hot
    }
}

主なプロパティ

プロパティ	型	デフォルト	用途
MinimumValue	int	0	スライダー範囲の開始値
MaximumValue	int	10	スライダー範囲の終了値
Value	int	0	現在選択されている値
SliderDivision	int	10	目盛りの数
SliderStyle	SliderStyles	Default	表示スタイル（Default、Frame）
Style	RadialSliderStyle	Default	テーマ（Default、Office2016*）
BackgroundColor	Color	システムのデフォルト	背景色
InnerCircleColor	Color	システムのデフォルト	内側の円の色
OuterCircleColor	Color	システムのデフォルト	外側の円の色
SliderNeedleColor	Color	システムのデフォルト	針の色
ForeColor	Color	システムのデフォルト	テキストの色
NeedleType	SliderNeedleType	StraightLine	針の外観
ShowOuterCircle	bool	true	外側の円の表示／非表示

一般的な使用例

音量／オーディオコントロール

RadialSlider は、円形ダイヤルで直感的に操作できる音量つまみ、オーディオレベルコントロール、メディアプレーヤーのコントロールに使用します。

温度設定

色分けされた範囲を備えた、サーモスタット、空調コントロール、天気アプリケーション向けの温度セレクターを実装します。

速度コントロール

目盛りによる視覚的なフィードバックを備えた、モーター、ファン、アニメーション向けの速度セレクターを作成します。

明るさ／不透明度の調整

パーセンテージベースの範囲を備えた、ディスプレイ、画像エディター、照明コントロール向けの明るさコントロールを構築します。

タイマー／時間の選択

円形ダイヤルの周囲に分・秒の目盛りを備えた、カウントダウンタイマーや時間セレクターを実装します。

ゲージ表示

ユーザーが調整できるインタラクティブなゲージ（燃料計、圧力計、進行状況インジケーター）を作成します。

設定パネル

視覚的な表示が便利な数値設定（ズームレベル、品質設定、強度コントロール）に使用します。

データの視覚化

線形スライダーよりも円形の表示が適している、インタラクティブなデータセレクターを実装します。

追加リソース

• Syncfusion RadialSlider API リファレンス
• コントロールの依存関係
• アセンブリ：Syncfusion.Tools.Windows
• 名前空間：Syncfusion.Windows.Forms.Tools