WindowsFormアプリでTrackBarのスライダーに追従するLabelの作成

動画再生アプリを作成する際、YouTubeのシークバーのようにスライダー位置に現在の時間が表示されると便利だと思い、作成してみました。

環境

.Net Framework 4.7.2
C# 7.3

TrackBarの値をLabelで表示させる

まず初めにTrackBarの値をLabelに表示させてみます。

using System;
using System.Windows.Forms;

namespace TrackbarCustom
{
    public partial class Form1 : Form
    {
        const int MIN_COUNT = 0;
        const int MAX_COUNT = 100;

        public Form1()
        {
            InitializeComponent();

            trackBar.Minimum = MIN_COUNT;
            trackBar.Maximum = MAX_COUNT;
            minValLabel.Text = MIN_COUNT.ToString();
            maxValLabel.Text = MAX_COUNT.ToString();
            varLabel.Text = trackBar.Value.ToString();
        }

        private void trackBar_ValueChanged(object sender, EventArgs e)
        {
            varLabel.Text = trackBar.Value.ToString();
        }
    }
}

TrackBarの値を変更(スライダーを移動)すると、trackBar_ValueChangedでラベルの値を変更します。

TrackBarのスライダーにLabel追従させる

Labelを追従させてみます。調べたところスライダーのポイントを取得するプロパティはなさそうだったのでTrackBarの横幅を取得し、目盛り数で割って目盛りの幅を算出。ラベルの位置を一番左に合わせて、初期位置から(値 - Min) * 目盛り幅を足して追従を行っています。またForm1_SizeChangedでフォームをサイズを変更してもLabelを正しい位置で表示できるようにしています。

using System;
using System.Drawing;
using System.Windows.Forms;

namespace TrackbarCustom
{
    public partial class Form1 : Form
    {
        const int MIN_COUNT = 10;
        const int MAX_COUNT = 100;

        Point varLabelInitLoc = new Point(0,0);　//valLabelの初期位置
        float ScaleWidth = 0f;　//1目盛りの幅

        public Form1()
        {
            InitializeComponent();

            trackBar.Minimum = MIN_COUNT;
            trackBar.Maximum = MAX_COUNT;
            minValLabel.Text = MIN_COUNT.ToString();
            maxValLabel.Text = MAX_COUNT.ToString();
            varLabel.Text = trackBar.Value.ToString();


            varLabelInitLoc = varLabel.Location;
            ScaleWidth = (float)trackBar.Size.Width / ((float)MAX_COUNT - (float)MIN_COUNT);
        }

        private void trackBar_ValueChanged(object sender, EventArgs e)
        {
            
            varLabel.Text = trackBar.Value.ToString();
            varLabel.Location = new Point(varLabelInitLoc.X + (int)((trackBar.Value - MIN_COUNT) * ScaleWidth), varLabelInitLoc.Y);
        }

        private void Form1_SizeChanged(object sender, EventArgs e)
        {
            //途中でフォームサイズが変更されても描画位置がおかしくならないようにする
            ScaleWidth = (float)trackBar.Size.Width / ((float)MAX_COUNT - (float)MIN_COUNT);

            //起動時は位置調整を行わない
            if (varLabelInitLoc.X != 0 && varLabelInitLoc.Y != 0)
            {
                //ラベル位置の調整
                varLabel.Location = new Point(varLabelInitLoc.X + (int)((trackBar.Value - MIN_COUNT) * ScaleWidth), varLabelInitLoc.Y);
            }
        }
    }
}