5章:チュートリアル 1: ピクチャ ビューアーの作成

    作成2016.08.22

  1. 参照元情報
     チュートリアル 1: ピクチャ ビューアーの作成
    「ピクチャ ビューアーの作成」にジャンプする
     作成方法の詳細は上記を参照願います。


  2. チュートリアル 1: ピクチャ ビューアーの作成の完成ファイル
     ピクチャの描画 : グラフィックスを使用するの解説とおりに作業を実施すると、プロジェクトファイル群が完成します。
     完成ファイルは以下からダウンロードできます。
     ダウンロード後は解凍してから使用してください。
      [ チュートリアル 1: ピクチャ ビューアーの作成]をダウンロードする。
     解凍すると「PictureViewer」フォルダーがあります。
    注(1)「PictureViewer」フォルダーの「PictureViewer.sln」ファイルをダブルクリックすると「Visual Studio Community 2015」が起動します。
    注(2)メニューの「ウインド」_「ウインドレイアウトのリセット」で標準に戻ります。
    注(3)「ソリューションエクスプローラ」ウインドウ内の「Form1.cs」をダブルクリックすると「デザイン」が表示されます。
    注(4)メニューの「表示」_「コード」を選択するとコードが表示されます。
    注(5)「 PictureViewer.sln 」の動作確認は「デバッグ」_「デバッグ開始」で実行します。デバッグ機能を用いて動作確認を行います。


  3. PictureViewer.slnの実行
    (1)「 「Visual Studio Community 2015 」のデバッグ機能を使用します。
    (2)「デバッグ」_「デバッグ開始」を選択します。
    (3)「Show a picture」ボタンを押します。
    (4)OpenFileDialogが表示されますので、画像ファイルを選択し開きます。
    (5)選択した画像が表示されます。
    (6)最大化ボタンを押すとウインドウは画面いっぱいに広がります。
    (7)Strech(CheckBox)のチェックをすると縦横比が変化します。
    (8)Set thebackground colorボタンを押すとColorDiaalogが表示されます。
    (9)色を選択しOKボタンを押すと背景色が変わります。
    (10)Clear the pictureボタンを押すと背景色のみになります。
    (11)Closeボタンをおすとプログラムは終了します。


  4. 新規プロジェクトの作成
    (1)Form1のデザイン設定
     新規プロジェクトを作成すると「デザイナー」にはForm1が自動生成されます。

    (2) Form1コード
    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 PictureViewer
    {
        public partial class Form1 : Form
        {
            public Form1()
            {
                InitializeComponent();
                //change it to "Zoom".
                pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
            }
    
            private void showButton_Click(object sender, EventArgs e)
            {
                // Show the Open File dialog. If the user clicks OK, load the
                // picture that the user chose.
                if (openFileDialog1.ShowDialog()==DialogResult.OK)
                {
                    pictureBox1.Load(openFileDialog1.FileName);            }
            }
    
            private void clearButton_Click(object sender, EventArgs e)
            {
                // Clear the picture.
                pictureBox1.Image = null;
            }
    
            private void backgroundButton_Click(object sender, EventArgs e)
            {
                // Show the color dialog box. If the user clicks OK, change the
                // PictureBox control's background to the color the user chose.
                if (colorDialog1.ShowDialog() == DialogResult.OK)
                    pictureBox1.BackColor = colorDialog1.Color;
            }
    
            private void closeButton_Click(object sender, EventArgs e)
            {
                // Close the form.
                this.Close();
            }
    
            private void checkBox1_CheckedChanged(object sender, EventArgs e)
            {
                // If the user selects the Stretch check box, 
                // change the PictureBox's
                // SizeMode property to "Stretch". If the user clears 
                // the check box, change it to "Zoom".
                if (checkBox1.Checked)
                    pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
                else
                    pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
            }
        }
    }
    


  5. Form1コードの解説
    (1)using System;とusing System.Windows.Forms;のみが必要です。あとはusingの整理で削除できます。
    (2)private void showButton_ClickでpictureBox1にopenFileDialog1で選択した画像ファイルをロードして表示します。
    (3)private void clearButton_ClickでpictureBox1の画像を消去します。
    (4)private void backgroundButton_Clickで背景色を設定します。
    (5)private void closeButton_Clickでプログラムを終了します。
    (6)private void checkBox1_CheckedChangedでStretchImageとZoomを切り替えます。



6章:チュートリアル 2: 制限時間ありの計算クイズの作成に行く。

トップページに戻る。