学習記事一覧 · WinForms基礎

【学習】WinFormsでTrackBarを使ってみよう（スライダーで値を調整する）

これまでの学習では、

NumericUpDown で数値を上下ボタンで入力する
ボタンやラベルで操作する

という形でプログラムを動かしてきました。

しかし、音量や明るさのように連続的な値を直感的に調整したい場面があります。

スライダーをドラッグして値を変える

という仕組みです。

今回は TrackBar（トラックバー） を使って、スライダーで値を選べるアプリを作ります。

今日作るもの

音量のスライダーを動かすと

音量：50%

のように、0〜100 の値が Label に表示されます。スライダーを左に動かすと小さく、右に動かすと大きくなります。

ソリューションとプロジェクトを作る

Visual Studio で新しいプロジェクトを作ります。

テンプレート: Windows Forms アプリ (.NET Framework)
ソリューション名: TrackBarSample
プロジェクト名: TrackBarDemo

作成すると Form1 が表示されます。

フォームに配置するコントロール

フォームに次のものを配置します。

コントロール	名前
Label	volumeLabel
TrackBar	volumeTrackBar
Label	valueLabel

volumeLabel の Text を「音量」、valueLabel の Text を空にしておきます。

TrackBarの設定（プロパティ）

TrackBar を選択し、プロパティウィンドウで次のように設定します。

プロパティ	値	説明
Minimum	0	最小値
Maximum	100	最大値
Value	50	初期値
TickFrequency	10	目盛りの間隔

これで 0〜100 の範囲でスライダーを動かせます。目盛りは 10 ごとに表示されます。

イベントを登録する

volumeTrackBar を選択した状態で、プロパティウィンドウの ⚡ 雷マーク（イベント） をクリックし、ValueChanged をダブルクリックすると volumeTrackBar_ValueChanged イベントが作成されます。

スライダーを動かすたびにこのイベントが発生します。

完成コード

using System;
using System.Windows.Forms;

namespace TrackBarDemo
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            // 初期表示
            valueLabel.Text = $"音量：{volumeTrackBar.Value}%";
        }

        private void volumeTrackBar_ValueChanged(object sender, EventArgs e)
        {
            valueLabel.Text = $"音量：{volumeTrackBar.Value}%";
        }
    }
}

プログラムの流れ

フォームが表示される
        ↓
valueLabel に初期値（50%）を表示
        ↓
ユーザーがスライダーを動かす
        ↓
ValueChanged が発生
        ↓
volumeTrackBar.Value を取得
        ↓
valueLabel に表示を更新

重要ポイント

TrackBar は「スライダーで値を調整する」 コントロールです。

Value プロパティで現在の値を取得・設定する（int 型）
Minimum / Maximum で範囲を制限する
TickFrequency で目盛りの間隔を指定する
ValueChanged で値が変わるたびに処理できる
音量、明るさ、閾値など、連続的な値の入力に適している

発展：縦スライダーにする

Orientation プロパティを Vertical にすると、縦方向のスライダーになります。音量スライダーなどでよく使います。

発展：TickStyle で見た目を変える

プロパティ	値	説明
TickStyle	None	目盛りを非表示
TickStyle	TopLeft	上または左に目盛り
TickStyle	BottomRight	下または右に目盛り
TickStyle	Both	両側に目盛り

発展アイデア

TrackBar を使うと次のようなものも作れます。

音量調整スライダー
明るさ・コントラストの調整
閾値の設定（0〜255 など）
ゲームの難易度選択（1〜10）
タイマーの秒数設定

TrackBar は連続的な値の入力に適した基本コントロールです。