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

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

条件

  • 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; // 前回の値を現在値で更新
        }
    }
}

実行結果

右(プラス方向)にスクロールした場合

左(マイナス方向)にスクロールした場合

他の例

もちろん、テキストボックスの値が0でなくても同様の動作となります。
(以下は、テキストボックスの値がデフォルト100の場合)

参考

CodePanic!:トラックバー(TrackBar)の使い方

http://codepanic.itigo.jp/cs/trackbar.html

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です