Silverlight をインストールするには、ここをクリックします*
Japan変更|サイトマップ
MSDN
|MSDN ライブラリ|デベロッパー センター|ダウンロード情報|開発ツール製品|コミュニティ|ご意見・ご要望|サイトマップ
インターネットで楽しく学ぼう ! 「みて、きいて、わかる プログラミング」 インターネット動画無料配信中 !
学生と教職員の皆様のための支援サイトとニュースレター マイクロソフト ステップアップ スクエア
MSDN Home > Student > プログラミング チャレンジ スクエア > 第 2 章 写真を使って遊んでみよう C# 編
第 2 章　写真を使って遊んでみよう


サンプルプログラムのダウンロード (Chap2_CSharp.msi, 303 KB)

※ また、サンプルプログラムは、あらかじめ Visual C# 2005 Express Edition と同じパソコンにインストールしておいてください。
   設定方法は こちら


この章でやること
・ 写真のファイルを使って、サイズを変更するソフトを作ります。
・ コントロールのイベントを使って、コードによるプロパティの変更を体験します。

第 2 章に挑戦してみよう
ボタンをクリックしたら、特定の動作が行われるようにする
[普通] ボタンに処理を追加しよう
[太らせる] ボタンに処理を追加しよう
表示する画像を変えてみよう
さらに一歩進んだテクニック



第 1 章で初めてプログラミング環境に触れた翔太君と美咲さん。二人は、続けて第 2 章にも挑戦してみることにしました。

翔太：そろそろ健一さん も来るころだし、難しいところが出てきても大丈夫だよね。
美咲：そうね。それに今度は写真を変形させるソフトを実際に動かせるみたいだから、楽しみだわ。
翔太：そうか、さっき少し先まで読んでたんだったね。難しそうだった？
美咲：大丈夫、何とかなりそうよ。
翔太：本当かなぁ。。。


二人は入門マニュアルの第 2 章を開きました。すると、まずサンプルのプロジェクトファイルを開いた画面が紹介されています。





翔太：サンプルを開くのは第 1 章とおなじだね。


プログラムメニューから Visual C# 2005 Express Edition を立ち上げて、サンプルファイルフォルダの中の Part2_C#\Part2_Base フォルダにある Part2.sln を開きます。まず、Form1.cs をダブルクリックして、デザイナ画面を開いてください。このとき、すでにフォームには、次の 4 つのコントロールが貼り付けられています。


[pictureBox1]
[Slim_Button]
[Normal_Button]
[Wide_Button]


この章では、これらのコントロールを使って、プログラミングを体験していきます。


翔太：最初に、第 1 章でもやったように、デバッグ ボタンをクリックして、動作を確認する必要があるらしいよ。


プログラムは立ち上がりますが、ボタンを押しても何も起こりません。


翔太：何も起こらないね。ボタンには、「やせさせる」とか「太らせる」とか書いてあるけど、クリックしても変化が起きないよ。
美咲：このサンプルの状態だと何も起こらない、つまり未完成ってことなのね。
翔太：でも、第 1 章のカレンダーは、デバッグ ボタンをクリックしたら、カレンダーの機能が有効になったよ。
美咲：あの時も、コントロールを貼り付けて作ったボタンの方は、何も起きなかったじゃない？
翔太：そうか。じゃあ、ボタンをクリックしたら、何かが起きるようにしないといけないんだな。またプロパティで何とかなるのかな。


二人が入門マニュアルの続きを読もうとしたとき、健一さんがやってきました。


健一：やあ、二人とも久しぶり。どう？　プログラミングの勉強は進んでる？
翔太：健一さん、ちょうどいいところに。第 1 章は終わったんだけど、第 2 章の最初で、どうすればボタンをクリックして何か変化が起きるようになるのかを考えてたんだ。
美咲：ボタンを押す動作と、画像の変化がつながればいい、というのはなんとなくわかるんだけど・・・
健一：すばらしい！　よくそこに気がついたね。それはプログラミングの世界ではとても重要な考え方なんだよ。
翔太：そうなの？
健一：そう。「ボタンをクリックする」という動作のことを「イベント」と呼ぶんだ。プログラミングの世界では、イベントが起こると、それに反応して、特定の作業を行うようにする。たとえば、ボタンをクリックするというイベントに対して、「画像のサイズが変わる」というのもその例なんだ。
翔太：へぇー。イベントっていうと、コンサートやパーティのイメージがあるけど、プログラミングの世界でも使うんだね。
健一：プログラミングをやっていると、意外に身近な世界の言葉が出てくるから、面白いよ。それじゃ、早速このサンプルのボタンを設定してみようか。




＜ボタンをクリックしたら、特定の動作が行われるようにする＞

健一：まず、デバッグ中のプログラムを終了させよう。ウィンドウのクローズボタンをクリックするんだけど、このとき、間違って Visual C# 2005 Express Edition のウィンドウを閉じてしまわないようにね。
翔太：デバッグ中のプログラムを終了させたよ。
健一：[Form1.cs] のデザイナ画面は表示されてる？　もし表示されてなければ、[ソリューション エクスプローラ] に表示されているツリーから、[Form1.cs] をダブルクリックして [Form1.cs] のデザイナ画面を表示するんだ。改めて、このサンプルの画面構成について、少し説明しておこう。まず、PictureBox コントロール (pictureBox1) に画像を表示している。そして、[やせさせる] ボタンは Slim_Button と言う名前を付けた Button コントロール、「普通」ボタンは Normal_Button と言う名前を付けた Button コントロール、「太らせる」ボタンは Wide_Button と言う名前を付けた Button コントロールがそれぞれ使われている。
それぞれのボタンを押すと、画像が変化するようにしたいということは、どうすればいいと思う？
美咲：画像を変化させるのよね・・・そういえば、第 1 章で、カレンダーのサイズをプロパティで指定したけど、同じようにここでもプロパティを使ってサイズを変えるんじゃないかしら。
健一：正解！　そう、PictureBox コントロールのプロパティを変更すればいいんだね。つまり、それぞれのボタンをクリックすることで、プロパティが変更されるようなプログラムにすればいいということになる。
翔太：でも、それってなんだか難しそうだね。
健一：どうして？
翔太：今までは、Visual C# の画面のプロパティを直接マウスとキーボードで変更してたけど、ボタンをクリックしたら自動的に変わるようにするんでしょ？　大変そうだな。
健一：本当に大変かどうか、実際に試してみよう。まずは、[やせさせる] ボタンをクリックした場合を考えてみよう。[やせさせる] ボタンのプロパティ ウィンドウを開いてごらん。


フォーム上にある [やせさせる] ボタンのプロパティ ウィンドウを表示します。既に第 1 章でやったように、プロパティ ウィンドウをあらかじめ開いている場合には、ボタンをクリックするだけで、プロパティ ウィンドウの表示が切り替わります。表示されていない場合は、[表示] メニューで [プロパティ ウィンドウ] を選ぶか、ボタンを右クリックして、メニューから [プロパティ] を選んでください。





健一：Slim_Button という名前が入ったところがあるよね。そのすぐ下にボタンがいくつか並んでいるのがわかるかい？
翔太：左の 2 つはプロパティの項目を種類別に並べたり、アルファベット順に並べたりできるみたいだね。








翔太：残り二つのボタンは、マウス ポインタを合わせるとプロパティとイベントって表示されるみたいだ。
美咲：私たちが今見ているのはプロパティというボタンがクリックされた状態になっているわ。ということは、イベントというボタンをクリックすると、項目自体が違うものが表示されるのかしら。





健一：そのとおり。この ボタンをクリックすると・・・





健一：このように、いろいろな「イベント」ごとにどういうことをこのコントロールにやらせたいのかを設定できる画面が表示されるんだよ。それでは、具体的に設定してみよう。


プロパティ ウィンドウの [イベント] ボタンをクリックしてイベントの一覧を表示します。一覧にある [Click] の右にあるコンボ ボックスに「Slim_Button_Click」と入力して [Enter] キーを押します。

なお、プロパティ ウィンドウを表示させる際に、コントロールをダブルクリックしてしまうと、自動的にコントロールの名前が [Click] イベントの名前に入力されてしまいます。このサンプルでは同じ名前を使っていますが、プログラムによっては異なる名前を使う場合もあるので、必ず自分でコンボ ボックスに入力するようにしましょう。






翔太：何かまた新しい画面が現れたぞ。
美咲：どうやら、やっとプログラムみたいな画面が出てきたわね。
健一：これは、コード エディタという画面だよ。ここで実際のプログラムの中身を書いていくんだ。今翔太君がやったことは、実は ”ボタンをクリックしたときの動作をプログラムに書くための準備” なんだよ。
翔太：準備？　じゃ、これでまだ終わりじゃないの？
健一：そう。ここから先は、少し複雑なので説明を省略させてもらうけど、次に紹介するプログラムのリストをそのままコード エディタに入力してみてくれないか。ちなみに、コード エディタに入力することを、”コードを書く” というんだよ。覚えておくといい。
翔太：コードを書く、か。なんだかプログラマーみたいで響きがかっこいいね。
健一：なにいってるんだ。コードを書けば、それだけで立派なプログラマーの仲間入りだよ。さあ、実際にコードを入力してごらん。


コード エディタの、「private void Slim_Button_Click〜」の次の行にある「{」の次の行から「}」までの間の行に、次のリスト 2-1-1 のコードを書き込んでください。


リスト 2-1-1 

            // 画像の幅を 500 pix にする
            pictureBox1.Width = 500;


翔太：これはなにをやってるの？
健一：簡単に言うと、このコードは、pictureBox1 の 横幅を 500 という数値に設定しているんだ。
美咲：たしかに、1 行目に「画像の幅を 500 pix にする」って書いてあるわ。
翔太：pix ってなんだろう？ それに、こんな風に日本語でコードを書いてもいいの？　てっきり英語だけだと思ってたけど。
健一：pix というのはピクセルという単位を表わす単語なんだ。画像の大きさを示すときに使うんだよ。
美咲：それじゃ、日本語の方は？
健一：ここに書かれている日本語の文章は、「コメント文」といって、プログラムの中に書き込む注釈のようなものなんだ。
翔太：注釈？
健一：そう、1 行目の行頭に「//」と書かれているのが分かるかい？　これはスラッシュを 2 つ続けているんだけど、行頭に「//」が入っている行は、プログラムを実行する際に無視する、という目印なんだ。だから、この行は他のコードとは一切関係ない、好きなことを書いて良い行ということになる。それを利用して、このコードは何をやっているところか、どういう意味があるのか、といったことを書いておくんだ。
翔太：コードと関係ないから、日本語だけで書いててもいいんだね。
健一：そう。コードによっては、日本語を表示させるものもあって、その場合はコードの中に日本語が出てくることもあるけど、コメント文はコードとは無関係に自由に書くことができるんだ。
美咲：そもそも何のためにコメント文が必要なの？
健一：コードは、自分も含めて誰が見ても分かりやすく書くのが理想とされている。そうしないと問題があったときにどこを直せばいいのか分からないからね。だから、コメント文も、その目安として使われるんだ。
美咲：そうか。このコメント文があれば、後でコードを見直したときに、横幅を 500 にしてるのはここだって、一目で分かるものね。
健一：そういうことだね。ところで、ここで 500 に設定しているのはなぜかというと、元々の画像の横幅 (pictureBox1 の [Width]) が 640 になっているからなんだ。640 を 500 にすると少しスリムになるだろう？　でも、実はこれだけじゃ駄目なんだ。
美咲：これだけじゃ駄目、ということは、まだ続きが必要なの？
健一：うん。さっきのリスト 2-1-1 に続けて、リスト 2-2-2 をコード エディタに書き込んでごらん。


リスト 2-1-1 のコードを追加したら、その次の行からリスト 2-1-2 のコードを追加します。


リスト 2-1-2 

        // 画像を中心に表示
            pictureBox1.Left = (this.ClientRectangle.Width - pictureBox1.Width) / 2;


健一：これは、画像を常に中央に表示するためのコードなんだ。詳しい説明は避けるけど、画面 (プログラム ウィンドウ） 全体の横幅から、画像の横幅を差し引いて半分にしたところを、画像を表示する左端に設定してるんだ。だから、常に画面の左右両端から同じ距離のところ、つまり中央に画像が表示されるようになるというわけ。
翔太：確かに真ん中に画像があった方が見やすいよね。
健一：それだけじゃないよ。そうすることで横幅が変わったことをわかりやすく見せる効果もあるんだ。
美咲：なるほど。
健一：ここまで無事に入力できていれば、次のリスト 2-1-3 のようになっているはずだ。


リスト 2-1-3 

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

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

        private void Slim_Button_Click(object sender, EventArgs e)
        {
            // 画像の幅を 500 pix にする
            pictureBox1.Width = 500;
            // 画像を中心に表示
            pictureBox1.Left = (ClientRectangle.Width - pictureBox1.Width) / 2;
        }

    }
}


健一：入力した内容に誤りがないことが確認できたら、今の状態で実際に動かしてみようか。


プログラムを実行して動きを確認してみましょう。デバッグ ボタンをクリックしてプログラムを動かしてみてください。





[やせさせる] ボタンを押して、画像が変化することを確認してください。





確認が終わったら、クローズボタンをクリックしてプログラムを終了し、元の編集画面に戻ります。




＜ [普通] ボタンに処理を追加しよう＞

健一：どうだった？　初めてコードを書いてみた感想は？
翔太：思ったよりも短くて、なにがなんだかまだよくわかってないんだけど、とにかく自分がプログラミングできたことにはびっくりしてる。
健一：そう、誰でも簡単にプログラムを始められるのが、このVisual C# 2005 Express Editionの特徴の一つなんだ。ではこの調子で、続けてほかの二つのボタンのコードも書いてみようか。まずデザイナ画面に戻るんだ。


コード エディタの上のほうにある見出し（タブと呼びます）の中から、[Form1.cs [デザイン]] を選んでクリックします。

デザイナ画面に戻ったら、フォームに配置されている [普通] ボタンをクリックし、プロパティ ウィンドウを表示します。そして、[イベント] ボタンをクリックしてイベントの一覧から [Click] を選択し、コンボ ボックスに「Normal_Button_Click」と入力して [Enter] キーを押します。




先ほどの「private void Slim_Button_Click〜」で始まり「}」で終わるコードのすぐ下に、今度は、「private void Normal_Button_Click〜」で始まるコードが追加されました。[やせさせる] ボタンと同様に、リスト 2-2-1 のコードを書き込みます。

リスト 2-2-1 

            // 画像の幅を 640 pix にする
            pictureBox1.Width = 640;


健一：今度のコードは、画像の横幅を 640 に設定しているんだ。さっきのボタンとは逆になってるのがわかるかい？
美咲：そうか！　やせさせるために横幅を減らしたんだから、普通にするにはもとにもどせばいいのね。
健一：そのとおり。だから、「やせさせる」 ボタンでやせて見えた画像に対して、[普通] ボタンをクリックすると、普通のサイズに戻すというわけさ。もちろん、このコードの後にも、さっきと同じように画像を中央に表示させるためのコードが必要になる。


リスト 2-2-1 の後に、続けてリスト 2-2-2 のコードを書き込んでください。

リスト 2-2-2 

            // 画像を中心に表示
            pictureBox1.Left = (ClientRectangle.Width - pictureBox1.Width) / 2


健一：さあ、これでまた動きを確認してみよう。


デバッグ ボタンをクリックしてプログラムを動かしましょう。







[やせさせる] ボタンと [普通] ボタンを交互に押して、それぞれ画像が変化することを確認してください。

確認が終わったら、クローズボタンをクリックしてプログラムを終了し、元の編集画面に戻ります。


健一：ちゃんと [やせさせる] ボタンと [普通] ボタンで横幅が変わることが確認できたかな。もし、ボタンを押しても変化がなかったり、動きがおかしかったりする場合には、ここまで書いたコードをもう一度確認してみよう。コード エディタを見てほしい。次のリスト 2-2-3 のようなコードが表示されていれば正解だ。


リスト 2-2-3 

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

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

        private void Slim_Button_Click(object sender, EventArgs e)
        {
            // 画像の幅を 500 pix にする
            pictureBox1.Width = 500;
            // 画像を中心に表示
            pictureBox1.Left = (ClientRectangle.Width - pictureBox1.Width) / 2;
        }

        private void Normal_Button_Click(object sender, EventArgs e)
        {
            // 画像の幅を 640 pix にする
            pictureBox1.Width = 640;
            // 画像を中心に表示
            pictureBox1.Left = (ClientRectangle.Width - pictureBox1.Width) / 2;
        }

    }
}




＜ [太らせる] ボタンに処理を追加しよう＞

健一：最後は、[太らせる] ボタンだ。もうなにをすればいいか大体想像がつくんじゃないのかな？
翔太：やせさせるために横幅を短くしたんだから、今度は横幅を長く取ればいいってこと？
健一：よくできました！　そのとおりだよ。それじゃ、早速ここまでのおさらいを兼ねてやってみようか。
翔太：まず、[太らせる] ボタンのプロパティ ウィンドウを開いて、[イベント] ボタンをクリック。それから、一覧にある [Click] の右にあるコンボ ボックスに「Wide_Button_Click」と入力して [Enter] キーを押す。これで後はコードを書き込めばいいんだよね？
健一：うん。今度は、リスト 2-3-1 のコードを使ってみよう。


リスト 2-3-1 

            // 画像の幅を 710 pix にする
            pictureBox1.Width = 710;


翔太：今度は、幅を 710 にするんだね。
健一：続けてこちらのコードも忘れずに。


リスト 2-3-1 の後に、リスト 2-3-2 のコードを入力しましょう。

リスト 2-3-2 

            // 画像を中心に表示
            pictureBox1.Left = (ClientRectangle.Width - pictureBox1.Width) / 2;


美咲：入力し終わったら、デバッグ ボタンね。


デバッグ ボタンを押して、実際の動きを確認してみましょう。
今度は、すべてのボタンの機能がそろっているはずです。画像を太らせたり、やせさせたり、普通の状態に戻したり、ボタンを交互にクリックしながら動きを確認してください。










健一：それでは、ここまで書いたコードをもう一度確認しよう。コード エディタを見てほしい。次のリスト 2-3-3 のようなコードが表示されていれば正解だ。もしデバッグ ボタンを押したときに動作がおかしければ、どこかで書き間違いがないか確認してみよう。


リスト 2-3-3 

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

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

        private void Slim_Button_Click(object sender, EventArgs e)
        {
            // 画像の幅を 500 pix にする
            pictureBox1.Width = 500;
            // 画像を中心に表示
            pictureBox1.Left = (ClientRectangle.Width - pictureBox1.Width) / 2;
        }

        private void Normal_Button_Click(object sender, EventArgs e)
        {
            // 画像の幅を 640 pix にする
            pictureBox1.Width = 640;
            // 画像を中心に表示
            pictureBox1.Left = (ClientRectangle.Width - pictureBox1.Width) / 2;
        }

        private void Wide_Button_Click(object sender, EventArgs e)
        {
            // 画像の幅を 710 pix にする
            pictureBox1.Width = 710;
            // 画像を中心に表示
            pictureBox1.Left = (ClientRectangle.Width - pictureBox1.Width) / 2;
        }

    }
}




＜表示する画像を変えてみよう＞

美咲：なんだかあっという間にボタンの設定ができてびっくりしちゃった。こうしておけば、後になって画像のプロパティを確認してサイズを直接指定しないで済むからとても便利ね。
翔太：でも、これだと、変更される横幅も、画像そのものもいつも同じだよ。もっと便利にするためには、横幅を自由に変えられたり、画像を入れ替えられたりしないと。
健一：なかなかいいところに目をつけたね。そう、このサンプルプログラムは、あくまでテストのためのもので、コードを書く際にあらかじめ設定した画像やサイズでしか動作しないんだ。もちろん、もっとプログラムのことを詳しくなればできるようになるけど、今でもデバッグ ボタンを押す前なら、直接画像ファイルを指定しなおすことができるよ。
美咲：それって、最初から画像を変えてプログラムを作るってこと？
健一：そういうこと。でも、とても簡単だからやってみよう。 まず、このサンプルでは、画像ファイルをリソースとして登録しているんだ。リソースというのは、プログラムが使うための材料のようなものだと思えばいい。ホームページを作るときに、背景画像やアイコンなどをまとめて同じフォルダに集めて、そのアドレスを指定するだろう?　あれと同じようなものだよ。
翔太：プログラムでも、画像などをまとめて管理する場所があるんだね。
健一：そうなんだ。まずは画像を設定する画面を呼び出そう。


PictureBox コントロールの プロパティ ウィンドウを開きます。先ほどまでイベントの設定を変えていたので、イベント ウィンドウが開いている場合は、[プロパティ] ボタンをクリックしてください。
そして、[Image] の右にある [...] ボタンをクリックして、[リソースの選択] ダイアログを表示させます。





サンプルプログラムの場合、[リソースの選択] ダイアログの [プロジェクト リソース ファイル] ラジオボタンが選択され、”cat_only_zoom” が指定されているはずです。ここで、[インポート] ボタンを押し、使いたい画像ファイルを指定してください。再び [リソースの選択] ダイアログに戻ると、リスト ボックスに表示したい画像が追加、選択されていることを確認した上で、[OK] ボタンをクリックすると設定完了です。


健一：注意しないといけないのは、画像ファイルの横幅だ。現在の画像ファイルの横幅は 640pix で、これがこのプログラムの基準になっているからね。ソースコードや各プロパティを細かく修正していけば、ほかのサイズの画像を利用できなくはないけど、同じサイズの画像を探す方が簡単だと思うよ。
翔太：なるほど。横幅 640pix だったら、デジカメの画像などにもありそうだね。いろいろ試してみると面白いかもしれないな。
美咲：翔太くん、絶対私の写真は使わないでね。
翔太：わかった、約束するよ。


さて、この章では実際に、コードを書くということを体験してきました。まだ細かい説明にまでは立ち入ってませんが、如何だったでしょうか。第 3 章以降では、さらに翔太くんと美咲さんが C# の世界を探検していくことになります。健一さんを頼りに二人がどういう経験を積んでいくのか、皆さんも一緒に体験して行きましょう。



【さらに一歩進んだテクニック】

健一：ここでは、第 2 章で使ったサンプルを少し改良しながら、さらに一歩進んだテクニックを皆さんに紹介します。本編では紹介し切れなかった、ちょっと難しい、でも知っておくと便利な情報を皆さんに紹介していこうと思います。


☆スクロール バーを使って画像のサイズを滑らかに変化させてみよう

健一：それでは、第 2 章で出てきた、画像の幅を変えられるボタンを、自由にサイズを変えられるようにしてみましょう。今回は、皆さんにはおなじみのスクロールバーを使うことにします。


まずは、ボタンを削除しましょう。Form1.cs のデザイナ画面を表示させてください。





3 つのボタンをそれぞれ右クリックし、表示されるポップアップ メニューの [削除] を選択してボタンを削除します。





これで、ボタンがなくなりました。念のためコード エディタも開いて、残っているコードを削除してください。





続けて、スクロールバーを追加します。デザイナ画面に戻ってください。


健一：スクロールバーを追加するには、[ツールボックス] を使います。


[ツールボックス] の [全ての Windows フォーム] にある [HScrollBar] を選択し、ボタンがあった場所へ貼り付けます。





貼り付ける際のスクロールバーの大きさは適当でかまいません。大きさやそのほかの設定を行うために、HScrollBar コントロールのプロパティ ウィンドウを表示します。





プロパティの一覧で、[(Name)] が「hScrollBar1」になっていることを確認し、 [Minimum] を「-100」に、[Location] を「78, 12」に、[Size] を「640, 22」にそれぞれ設定します。


健一：これは、まずソースコードでコントロールを区別するための名前を確認しています。通常は、自動的に「hScrollBar1」が割り振られているはずですが、もし違っている場合には名前を変えるか、このあとにでてくる「hScrollBar1」を実際の名前に置き換えて対応してください。そして、スクロールバーの最大幅を -100 から 100 に設定しています（100 はあらかじめ [Maximum] に設定されているので変更しません）。[Location] は画面デザイン上でのスクロールバーの開始位置を決めています。また、[Size] は開始位置からの横幅と高さを指定しています。


スクロールバーのプロパティの設定が終了すると、次のような画面になります。





次に、イベントの設定をします。プロパティ ウィンドウで [イベント] ボタンをクリックし、一覧にある [Scroll] の右にあるコンボ ボックスに「hScrollBar1_Scroll」と入力して [Enter] キーを押します。





すると、ボタンのときと同じようにコード エディタが開きます。
ボタンのときと同じく、リスト 2-5-1 にあるコードを追加します。このコードは、pictureBox1 の Width プロパティに 540 から 740 までの値を与えるもので、これによって、画像の横幅が通常の 640 から、最小 540 最大 740 の範囲の中で変化するようになります。


リスト 2-5-1 

			// 画像の幅を 640 pix + スクロールバーの位置（-100から100）にする
			pictureBox1.Width = 640 + e.NewValue;


もちろん、このコードを忘れてはいけません。続けて、次のリスト 2-5-2 を書き込んでください。


リスト 2-5-2 

			// 画像を中心に表示
			pictureBox1.Left = (this.ClientRectangle.Width - pictureBox1.Width) / 2;


コードを書き込んだら、プログラムを実行して確認してみましょう。





健一：思ったよりも簡単にできましたね。今回は、プログラムを実行する前にプロパティで画像を指定する必要がありますが、自由に画像を指定できるようなコードを書くことも可能です。ただし、そのためにはプログラミングの特別なテクニックを勉強しなくてはなりません。まずは、この資料を読んで、プログラミングの基本的なことを体験してから、改めてプログラミングの世界を勉強することをお勧めします。


Top of Page Top of Page Top Page プログラミング チャレンジ スクエアへ戻る


Microsoft