Visual Basic 6.0 初級講座
VB6対応

 

Visual Basic 中学校 > VB6 初級講座 >

第13回 スクロールバー

 

執筆:2000年3月3日

スクロールバーは、その名前の通り 表示しきれない画像やテキストをスクロールさせるようとでよく使われますが別にその他の使い方をしてもかまいません。たとえば、スクロールバーを利用して数値を入力させるプログラムもしばしば見かけます。今回はスクロールバーを使った2つのサンプルを作ってどういった使い道があるか説明することにします。しかし、どのコントロールもそうですが使い方は自分次第です。みなさんも他の使い方を探ってみてください。

 

1.基礎固め

 

具多的なプログラムにはいる前にもう少しスクロールバーについて説明します。スクロールバーと言っても3種類ありますから気をつけてください。

まず、下の画像でスクロールバーのアイコンを確認してください。

すでに、2種類のスクロールバーが確認できたことと思います。「水平スクロールバー」と「垂直スクロールバー」の2種類です。この2つの違いは、横向きかたて向きかの違いだけです。私がスクロールバーと呼んでいるのはこの2つです。

もう1つのスクロールバーはコントロールではありません。たとえばテキストボックスを配置して、MultiLineプロパティをTrue 、ScrollBarsプロパティを 0以外の値にしてみて下さい。自動的にテキストボックスにスクロールバーが表示されます。このスクロールバーはテキストをスクロールさせることが専門で、自分でコードから制御することはできませんが、すべてを自動的にやってくれるので大変便利です。しかしながら今回はこちらのスクロールバーについては解説しません。

 

2.数値入力サンプル

 

それでは、スクロールバーを使った数値入力を実装してみましょう。まず、フォームに水平スクロールバーとラベルを配置してください。スクロールバーは長めに配置してください。スクロールバーで選択した値がラベルに表示されるようにしてみます。

まず、何もプログラムしないで実行してみてください。何もプログラムしなくてもスクロールバーは自動的に使用可能な状態になっています。スクロールバーをクリックし続けても何も起こらないと感じるでしょうがこれは初期設定ではスクロールバーの値が大きすぎてちょっとやそっとクリックしただけじゃ変化が分からないだけです。それでは終了させてこの「初期設定」と適切な値にしましょう。

スクロールバーには最小値、最大値を表す Minプロパティ(ミン) と Maxプロパティ(マックス)があります。プロパティウィンドウからそれぞれの値を確認してみると Min = 0 , Max = 32767 となっています。Maxが大きすぎるので、ここではMinはそのままで、Maxの値を 255 に変更してください。

これでもう1度実行してみると、今度はスクロールバーの変化が目で確認できるようになっていますね。

ところで、Windows(ウィンドウズ)でよく見かけるスクロールバーは 矢印のところをクリックすると少しずつ動き、矢印じゃないところをクリックすると大幅に動くようになっています。これもまねしてみましょう。

矢印のところをクリックしたときスクロールバーがどのくらい動くかは SmallChangeプロパティ(スモールチェンジ)で設定します。初期設定では 1 になっていますから、255回右の矢印をクリックすると一番右に行くと言うことです。まぁこれはこのままでよいでしょう。

矢印じゃないところをクリックしたときにどのくらい動くかは LargeChangeプロパティ(ラージチェンジ)で設定します。初期設定ではこれも 1 になっています。これでは、SmallChangeと一緒であまり意味がないのでここは、LargeChangeプロパティの値を 10 にしましょう。

これで、ウィンドウズでよく見かけるスクロールバーと同様の操作が可能となります。

さて、ではいよいよスクロールバーが指している値をラベルに表示するプログラムを作成しましょう。

スクロールバーが指している値は Valueプロパティ(バリュー)で分かります。(つまり、クリックするたびにValueプロパティは変化するのです)。このプロパティを使って下のようにプログラムするだけです。

まず、スクロールバーをダブルクリックしてからこの下のように打ち込んでください。

Private Sub HScroll1_Change()

    Label1.Caption = HScroll1.Value

End Sub

注:HScroll1とは水平スクロールバーに自動的につく名前です。

このたった3行でプログラムは完成です。Changeイベントはスクロールバーの値(Valueプロパティ)が変化するたびに発生しますからスクロールバーを使うときにはほとんどこのChangeイベントプロシージャにだけプログラムしていればよいことになります。(イベントって何?と言う人は 入門講座第4回 を見てください)。

実行してみると、期待通りにスクロールバーの値がラベルに表示されます。もっとかっこよく表示したい人はラベルのプロパティをいじってかっこよく見せかけてください。たとえば、Fontプロパティ、BackColorプロパティを変えるだけでだいぶかっこよくなります。それからプログラムをスタートさせた直後にLabel1と表示されているのが気になる人はラベルの Captionプロパティを 0 にしておくと良いでしょう。

ところで、このサンプルプログラムはちょっとつまらないので、1行加えて次のようにしてみてください。

Private Sub HScroll1_Change()

    Label1.Caption = HScroll1.Value

    Form1.BackColor = RGB (0 , 0 , HScroll1.Value)

End Sub

実行してみるとなかなかきれいでしょう? あと2本スクロールバーを追加して赤と緑も変化するようにしてみるとRGBサンプルプログラムができあがります。(256色以下の環境ではあまりきれいじゃない)。

このサンプルはここまでですが最後にヒントをのせておきます。垂直スクロールバーを使っても同じことができますが垂直スクロールバーをとても短く配置してラベルのすぐ横にくっつけるとユーザーにはあたかもラベルとスクロールバーが1体となって1つのコントロールであるかのような印象を与えることができます。

 

3.画像スクロールサンプル

 

テキストボックスには自動的にスクロールする機能が備わっているのに、画像を表示するピクチャーボックスにはこの機能は備わっていません。そのため、ピクチャーボックスでは表示しきれない大きさの画像をスクロールして表示させるためには一工夫必要です。

これから説明する スクロールできるピクチャーボックスのよくできたサンプルは MSDNでキーワード「スクロール可能なグラフィックス ビューポー」のところにのっていますのでMSDNを持っている人はそちらも参照してください。また、製本版の「プログラミングガイド」にももちろん載っています。場所は第2部、第7章、7.12.1です(ただし、本によっては違うのかも知れません)。

これから説明するプログラムとMSDN等にのっているプログラムは同じ機能を持ちますが、プログラムは異なっていますから注意してください。MSDNよりこちらの方が簡単でシンプルだと自負しております。

まず、フォームにピクチャーボックスと水平スクロールバー、垂直スクロールバーを1つずつ配置してください。場所や大きさは適当でいいですがスクロールバーの幅だけは太すぎたり細すぎたりしないように適切に設定してください。

まず、これら3つのコントロールを適切に配置するようにプログラムします。今まではコントロールの配置はマウスで行う方法のみを説明していましたが今回はコードで位置を設定します。フォームのResizeイベントプロシージャに次のようにプログラムしてください。

Private Sub Form_Resize()

    If WindowState = 1 Then Exit Sub

    HScroll1.Move 0, ScaleHeight - HScroll1.Height, ScaleWidth - VScroll1.Width

    VScroll1.Move ScaleWidth - VScroll1.Width, 0, VScroll1.Width, ScaleHeight - HScroll1.Height

    HScroll1.Max = ScaleWidth - Picture1.Width

    VScroll1.Max = ScaleHeight - Picture1.Height

End Sub

Rsizeイベントはフォームのサイズ(大きさ)が変更されると発生します。最大化・最小化もサイズの変更に当たります。ここに記述したコードはフォームのサイズが変更されたびにスクロールバーの位置も変更して2本のスクロールバーが常にフォームの右端と下側に表示されるようにしている物です。

1行目のIf WindowState = 1 Then Exit Subは最小化されたときは何もしないという意味です。これがないと最小化したときにエラーが発生します。

4行目と5行目は Max プロパティを変更する物です。フォームのサイズが変われば画像を表示できる範囲も変わるのでスクロールさせる幅も変更させる必要があるのです。

ここにかかれているいろいろな式の意味は説明しません。自分で解読してみてください。なお、ScaleWidthやScaleHeightとは、それぞれフォームの表示領域の幅(横の長さ)と高さ(縦の長さ)を表しています。

次に、Form_Load(フォームロード)イベントに次のように記述します。ここでは、C:\Windows\雲.bmpという画像ファイルがある物としています。この画像がない人はこの部分を適当な他の画像に変更してください。画像を選択する機能をつけたい人は特別講義を参考に自分で改造してみてください。

Private Sub Form_Load()

    Picture1.Picture = LoadPicture("C:\Windows\雲.bmp")

    Picture1.Move 0, 0

    HScroll1.ZOrder 0

    VScroll1.ZOrder 0

End Sub

1行目は画像の読み込みです。2行目でピクチャーボックスの初期位置を設定します。0,0ですから、フォームの左上に表示されます。3行目と4行目はあまり見慣れない物ですが、2本のスクロールバーがピクチャーボックスの上に表示されるようにしている物です。これがないとスクロールバーがピクチャーボックスに隠れて見えなくなってしまうときがあります。

さて、ここまでのプログラムに加えてプロパティも変更してください。変更はプロパティウィンドウから行うと良いでしょう。まず、ピクチャーボックス(Picture1)のAutoSizeプロパティをTrueにします。これによりピクチャーボックスの横幅と高さは表示する画像に会わせて自動的に調節されるようになります。次にフォーム(Form)のScaleModeプロパティ(スケールモード)を、「3−ピクセル」にします。この意味はまたの機会に説明します。この設定をしなくてもとりあえずプログラムは動きます。

この他に2本のスクロールバーのSmallChangeプロパティを 10にLargeChangeプロパティを 50 にしてください。 この2つのプロパティはスクロールバーの1回のスクロール幅を表します。

以上で基本的な部分は完成です。実行してみてください。スクロール機能はまだ付けていないのでスクロールバーを動かしても何も起こりません。しかし、フォームのサイズをいろいろ変えてみてください。スクロールバーの位置がちゃんとフォームの右と下に変更されるのが分かります。

では、最後にスクロール機能を実装します。といっても下準備ができているのでこれは簡単です。2本のスクロールバーのChangeイベントに次のように記述してください。

Private Sub HScroll1_Change()

    Picture1.Left = HScroll1.Value

End Sub

Private Sub VScroll1_Change()

    Picture1.Top = VScroll1.Value

End Sub

以上で完成です。早速実行してスクロールする画像をお楽しみ下さい。完成した全コードを下に乗せておきます。

Private Sub Form_Load()

    Picture1.Picture = LoadPicture("C:\Test.bmp")
    Picture1.Move 0, 0
    HScroll1.ZOrder 0
    VScroll1.ZOrder 0

End Sub

Private Sub Form_Resize()

    If WindowState = 1 Then Exit Sub

    HScroll1.Move 0, ScaleHeight - HScroll1.Height, ScaleWidth - VScroll1.Width
    VScroll1.Move ScaleWidth - VScroll1.Width, 0, VScroll1.Width, ScaleHeight - HScroll1.Height

    HScroll1.Max = ScaleWidth - Picture1.Width
    VScroll1.Max = ScaleHeight - Picture1.Height

End Sub

Private Sub HScroll1_Change()

    Picture1.Left = HScroll1.Value

End Sub

Private Sub VScroll1_Change()

    Picture1.Top = VScroll1.Value

End Sub

 

ここまでプログラムしたら次は拡大・縮小機能など付けたいところですね。この機能はイメージコントロールのStretchプロパティ(ストレッチ)を使うことによって案外簡単に実装できます。時間のある人は考えてみてください。

 

4.最後に

 

私は結構スクロールバーが好きです。ここで説明したほかにもいろいろな使い方をして、「スクロールバーにこういう使い方があるって知っているのは私だけだろう」と一人でほくそ笑んでいます。みなさんもいろいろ試してみてください。

なお、マイクロソフト社では数値入力や数値表示のためにスクロールを使う方法は推奨していないようです。この場合は スライダーコントロール を使えと言うことのようですがスクロールバーの使い方さえ分かっていればスライダーなどはじめてでもいきなり使えてしまいます。ご安心下さい。

しかし、スライダーって標準コントロールじゃないのでわざわざそれだけのために使いたくないんですよね。だから私はそんなときでもスクロールバーを使っています。(ただし、スライダーは目盛りを表示できるなどスクロールバーにはない機能もある)。