C# 入門 & 実践 / C sharp

5-7 . PictureBox , ToolTips, ProgressBar でスライドショー。


PictureBox を一つ使用して、クリックしたら画像を変えられるようにしてみます。
・画像の上にマウスが来たら ToolTips で解説を表示してみる。
・ボタンをクリックするとスライドショー形式で10秒間画像切り替えを行い、変更中に ProgressBar を動かしてみる。

ImageSampleというプロジェクトを作成。

1. リソースに画像を追加する!
ソリューションエクスプローラの上で右クリックして
[ 追加 ]→[ 新しい項目 ]→[ アセンブリリソース ]を選択
[ Resource1.resx ]を保存



[ リソースの追加 ]の右の▼をクリックすると既存のファイルを追加出来ます。
[ リソースの追加 ]をクリックすると新しいリソース作成になります。



↑画像を追加した状態

2. PictureBoxをフォームに追加。
プロパティの Image を選択し



先ほど登録した Resource1.regx を選択肢、image1.jpg を初期画像に設定します。
PictureBox の幅を画像に合わせておく。

3. クリックしたら画像が変更できるよう設定

        private int image_no = 1;
        public Form1()
        {
            InitializeComponent();
            
        }

        private void pictureBox1_Click(object sender, EventArgs e)
        {
            // 違う画像に変更する!
            if ( image_no == 1 )
            {
                pictureBox1.Image = Resource1.image2;
                image_no = 2;
            }
            else
            {
                pictureBox1.Image = Resource1.image1;
                image_no = 1;
            }
        }

とりあえず、これだけで、画像の切り替えはOK

4. ToolTip を追加。
プロパティの ToolTipTitle に Image と入れて
ToolTipIcon を Info に設定。

pictureBox1 のプロパティに[ tooltip1 の Tooltip ]という項目が追加されています!



これでOK。

5. ProgressBar を追加
Maximum : 100 / 最大値
Minimum : 0 / 最小値
Step : 10 / PerformStep()を呼んだときに進む数


6. ボタンを追加
クリック時の動作を設定。

        private void pictureBox1_Click(object sender, EventArgs e)
        {
            changePicture();
        }

        private void changePicture()
        {
            // 違う画像に変更する!
            if ( image_no == 1 )
            {
                pictureBox1.Image = Resource1.image2;
                image_no = 2;
            }
            else
            {
                pictureBox1.Image = Resource1.image1;
                image_no = 1;
            }
            // 他のコンポーネントから動作させたときに再表示が必要
            pictureBox1.Refresh();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            // スライドショー
            // system.Threadingを利用して 1 秒毎に切り替え
            for (int i = 0; i < 10; i++)
            {
                // 画像を切り替え
                changePicture();
                // プログレスバーを進める!
                progressBar1.PerformStep();
                // 1 秒待機
                Thread.Sleep(1000);
            }
            MessageBox.Show("スライドショー終了!");
        }



上段がポイントを載せたとき、ToolTip表示状態
下段が画像を切り替えながらプログレスバーを進めている状態です!

上手くいきましたね。
プログレスバーは、本来、ステータスバーに入れたり、パネルで区切って、利用したりするそうです。
少し後でメニューやステータスバーを利用してみます。




5-6. RadioButton / GroupBox / LinkLabel - ラジオボタン - « 5. Windows アプリケーション » 5-8. Container - 1 - GroupBox , Panel


C# 入門 & 実践 / C sharp