C#におけるトラックバー（スクロールによる数値変更）の使い方

C#におけるトラックバー（スクロールによる数値変更）の使い方についてご紹介します。

1 条件
2 デザイン
- 2.1 コンポーネントの配置
- 2.2 コンポーネントのプロパティ設定
3 実装
- 3.1 イベントハンドラの設定
- 3.2 処理の実装
4 実行結果
5 参考
- 5.1 CodePanic!：トラックバー（TrackBar）の使い方

条件

Visual Studio 2017

デザイン

コンポーネントの配置

ツールボックス > すべてのWindowsフォーム > TrackBarを選択します。

FormにTrackBarを配置します。

ツールボックス > コモンコントロール > TextBoxを選択します。

FormにTextBoxを配置します。

コンポーネントのプロパティ設定

TrackBarのプロパティを以下のように設定します。

Maximum：50
Minimum：-50
Value：0

TextBoxのプロパティを以下のように設定します。

Text：0
TextAlign：Right

実装

イベントハンドラの設定

TrackBarのプロパティ > イベントで、Scrollをダブルクリックします。

以下のように、スクロールのイベントで実行される関数が自動生成されます。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace sample3
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void trackBar1_Scroll(object sender, EventArgs e)
        {

        }
    }
}

また、TrackBarのScrollイベントに生成された「trackBar1_Scroll」が割り当てられます。

処理の実装

トラックバーをスクロールすることで、テキストボックスに移動分の値を反映する処理を実装します。

具体的には、トラックバーがスクロールされた際、以下のような処理を実装します。

トラックバーの値について、前回との差分を計算。
テキストボックスに、計算したトラックバーの差分値を反映。
トラックバーの前回値を現在値で更新。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace sample3
{
    public partial class Form1 : Form
    {
        private int trackBar1_value_before = 0; // トラックバーの前回値

        public Form1()
        {
            InitializeComponent();
        }

        private void trackBar1_Scroll(object sender, EventArgs e)
        {
            int diff = trackBar1.Value - trackBar1_value_before; // 前回との差分を計算

            textBox1.Text = (int.Parse(textBox1.Text) + diff).ToString(); // テキストボックスに差分を反映

            trackBar1_value_before = trackBar1.Value; // 前回の値を現在値で更新
        }
    }
}