いよいよC#でグラフィックの描画を始めるよ

今回はいよいよグラフィックを扱います。

WindowsでFormにグラフィックを描画する方法は何種類かあるんだそうです。今回やるのは、Graphicクラスに用意されているメソッドを使って描画する方法です。具体的には四角を描くメソッドのFillRectangleと楕円を描くメソッドのDrawEllipseです。

描画を実際に行うコードは、myframe_paint()メソッドの中のg.FillRectangle()とg.DrawEllipse()ですが、そもそもこのmyframe_paint()メソッドはMyFormのPaintイベントのイベントハンドラとして定義されていて、どこかから直接呼び出される記述にはなっていません。

また、描画操作を行う対象のGraphicsオブジェクトは、MyFormクラスのPaintイベントが発生したときにイベントハンドラに渡される引数の中の、PaintEventArgsオブジェクトのメンバーとして与えられています。

この、PaintEventArgsオブジェクトのメンバーであるGraphicsオブジェクトを使って描画するという手法は、あちこちで見かけるので、どうやらWindowsでFormに絵を描くときに使う定番の処理なんでしょう。

なお、Paintイベントというのは、何らかの理由でウインドウの再描画が必要になったときに発生するイベントだそうで、これを使って描画することによって、ウインドウのサイズを変えたり、上に別のオブジェクトが重なった後でも、Paintイベントの発生によって再描画をしてくれる、という仕掛けだそうです。

この辺のメカニズムがどうなっているのか、調べてみたいところですが、今日の所は図形が描けるようになってよかった、というところです。

今回学習に使用したリストは以下です。Mainメソッドは言うままでと同じなので割愛します。

/*
 * ようやくグラフィックの描画に入る
 */

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

namespace MyFrmApp
{
    public class MyForm : Form
    {
        public MyForm()
        {
            this.Width = 300;
            this.Height = 200;
            this.Paint += myframe_paint;  // イベントハンドラの登録
        }

        private void myframe_paint( object sender, PaintEventArgs e )  // イベントハンドラ
        {
            Graphics g = e.Graphics;    // Graphics型の変数gを定義し、PaintEventArgsのGraphicsの参照を保持
            Pen p = new Pen(Color.Red);  // ペンの設定
            Brush b = new SolidBrush(Color.Blue);  // ブラシの設定
            g.FillRectangle(b, 50, 50, 50, 50);  // 四角形描画
            g.DrawEllipse(p, 75, 75, 50, 50);    // 楕円を描画
        }
    }
}

上記プログラムをコンパイル、実行すると、このようなウインドウが現れます。

今回はこれで終わりにします。

参考文献：
【初心者のためのC#プログラミング入門】グラフィックの描画

ListBoxとComboBoxを使ってみる

コントロールを使って見る記事、もう少し続きます。

今回はListBoxとComboBoxです。

コントロールはユーザーインタフェースとして、ソフトウエアを使う人がソフトウエアに対して情報を入力したり、ソフトウエアから情報を得る為の手段です。

つまり、プログラム全体からすると、入口と出口を司る機能でしかないので、あまり深入りする必要はないと考えています。しかし、使い方を知らないと使えないと言うのも又事実なので、淡々と、「こういう物だ」という感覚を持って、慣れていく程度の捉え方で良いと思います。

ListBox

リストボックスは、リストを使って、予め用意された選択肢の中から選択するGUIです。非常に良く使われています。

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

namespace MyFrmApp
{
    public class MyForm : Form
    {
        private Label label;  // Labelクラス型の変数を定義
        ListBox list;              // ListBoxクラス型の変数を定義

        public MyForm()
        {
            this.Width = 300;  // MyFormの幅を300ピクセルに設定
            this.Height = 200;  // MyFormの高さを200ピクセルに設定
            setupControls();    // MyFormに配置されるコントロールの設定
        }

        public void setupControls()
        {
            label = new Label();  // Labelクラスのインスタンスを生成し、labelに格納
            label.Text = "type text:";
            label.Font = new Font("Geneva", 12, FontStyle.Regular);
            label.Height = 30;
            label.Width = 300;
            this.Controls.Add(label);

            list = new ListBox();  // ListBoxクラスのインスタンスを生成し、listに格納
            list.Width = 100;   // listの幅を設定
            list.Height = 100;  // listの高さを設定
            list.Left = 50;        // listを設置するMyForm内の座標（左上）
            list.Top = 50;         // 同上
            list.SelectionMode = SelectionMode.MultiExtended;  // ListBoxの動作設定（複数選択可）
            list.Items.Add("Hello");         // 選択肢を追加
            list.Items.Add("Welcome");  // 選択肢を追加
            list.Items.Add("Bye");           // 選択肢を追加
            list.SelectedValueChanged += list_changed;  // イベントハンドラの登録
            this.Controls.Add(list);
        }

        private void list_changed(object sender, System.EventArgs e)
        {
            string res = "selectel: ";

            // foreachで選択されている項目を全部拾い上げる

            foreach (string obj in list.SelectedItems)
            {
                res += obj + " ";
            }
            label.Text = res;  // labelに連結した文字列を設定
        }
    }
}

起動すると、下のようなリストボックスが現れます。

リストの中から何かを選択すると、リストボックスの状態が変化した事によるイベントが発生し、下のように選択されている項目がMyForm上のラベル（変数名label）に設定されます。

複数選択した場合は下のようになります。

さらに、全部選択した場合、下のように全ての項目が抽出されます。

ComboBox

リストボックスと同様によく使われるGUIの仕組みですが、ドロップダウンリストまたはリストボックスを1行のテキストボックスと組み合わせたもので、使う人は値を直接入力することもできるし、ドロップダウンリストに定義された選択肢から選ぶこともできる作りになっています。

リスト1　MyForm.cs

Mainメソッドを記述したmain.csは前回のものがそのまま使えるので、割愛します。

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

namespace MyFrmApp
{
    public class MyForm : Form
    {
        private Label label;  // Labelクラス型の変数を定義
        ComboBox combo;  // ComboBox型の変数を定義

        public MyForm()    // コンストラクタ
        {
            this.Width = 300;   // MyFormの幅を300ピクセルに設定
            this.Height = 200;  // MyFormの高さを200ピクセルに設定
            setupControls();     // MyFormに配置するコントロールの設定
        }

        public void setupControls()
        {
            label = new Label();    // Labelのインスタンス生成
            label.Text = "type text:";
            label.Font = new Font("Geneva", 12, FontStyle.Regular);
            label.Height = 30;
            label.Width = 300;
            this.Controls.Add(label);  // labelをMyFormに設置

            combo = new ComboBox();          // ComboBoxのインスタンスを生成
            combo.Items.Add("Windows");   // comboのメニュー項目追加
            combo.Items.Add("Mac OS X");  // comboのメニュー項目追加
            combo.Items.Add("Linux");         // comboのメニュー項目追加
            combo.Width = 100;
            combo.Height = 25;
            combo.Left = 50;
            combo.Top = 50;
　　　　　　　　　　　// comboのイベントハンドラ設定（値が変わったとき）
            combo.SelectedValueChanged += combo_changed;  
　　　　　　　　　　　// comboのイベントハンドラ設定（テキストが変わったとき）
　　　　　　　　　　　combo.TextChanged += combo_changed;                   
            this.Controls.Add(combo);  // comboをMyFormに設置
        }

        private void combo_changed(object sender, System.EventArgs e)  // イベント処理本体
        {
            int n = combo.SelectedIndex;  // 何番目の要素が選ばれたかを保持
            string str = combo.Text;          // ComboBoxの持つテキストを保持
           // イベントが発生したとき、何が選ばれているかを
           // MyFormのlabelに設定、表示する
            label.Text = "selected: " + n + "(" + str + ")";  
        }
    }
}

起動すると、このようなウインドウが表示されます。この状態では何も選択されていません。

プルダウンメニューを開くと、このような内容です。

何かを選択すると、選択したアイテムのインデックス番号（プログラムで定義した選択肢の0から始まる順番）と、選択したアイテムがlabelに表示されます。下は、一番最初に追加したWindowsです。

次は2番目に追加したMax OS Xです。

次が3番目に追加したLinuxです。

 予め用意した選択肢ではないものを入力すると、インデックス番号が-1となって、入力した文字列が表示されます。

プログラムを見て頂くとおわかり頂けると思いますが、こういうコントロールを扱うプログラムは、オブジェクトのプロパティをいじったり、オブジェクトが持っているメソッドを呼び出したり、という操作がほとんどを占めます。

コントロールの使い方をマニュアルで調べれば、やりたいことはほとんど出来てしまうと思います。

それにしても少ないコード量でやりたいことができるのがC#と.NET Frameworkの良いところですね。Mac環境でのGUIはまだ研究していませんが、今後やっていきたいと思っています。

今回はこれで終わりです。

CheckBox、RadioButtonなど色々なコントロールを動かしてみる

前回のエントリーでは、テキストボックスに入力した文字列をボタンをクリックしたら内部に取り込んでウインドウのラベルに表示する、というプログラムを動かしました。

この中で、テキストボックス、ボタン、ラベルはそれぞれコントロール（Control）と呼ばれるオブジェクトです。Windows Formでは、様々なコントロールを使うことが出来るようです。このページに一覧が出ていますので、参照ください。

CheckBox

今回は、コントロールの中から、チェックボックス（CheckBox）をWindows Formに配置して動かしてみます。CheckBoxは、幾つかあるオプションの中から複数の項目を選択するときに使われるGUIですね。小さな四角で、クリックするとその中にチェックマークが現れる、というデザインのものが多いと思います。

リスト1は、前回と同様に、プログラム本体で定義されているMyFormクラスのインスタンスを生成して、Application.Runメソッドで起動しています。

なお、今後の学習で、このスタイルが何度か続くのが見えていたので、前回からMainメソッドが含まれるクラスを別ファイルにして、コピーして使い回すようにしました。この場合、両方のいずれのファイルも、中でクラスを定義する名前空間を同じにしておきましょう。そうしないと、public定義になっていても、特別な書き方をしないと別のファイルのクラスが見えません。

今回のリストも、特にVisual Studioなんか使わなくても、テキストエディタで打ち込んで、csc.exeでコンパイルすれば動きます。

csc main.cs Program.cs

です。

リスト1　main.cs

using System;
using System.Windows.Forms;

namespace sample15
{
    class Program
    {
        [STAThread]
        private static void Main( string[] args )
        {
            Application.Run( new MyForm() );
        }
    }
}

リスト2が、プログラムの本体になります。MyFormクラスのコンストラクタでMyFormオブジェクトの幅（this.Width）、高さ（this.Height）を設定して、MyForm上に配置されるコントロールの各種設定を行うメソッドを呼び出します。

今回のプログラムでは、LabelオブジェクトとCheckBoxオブジェクトを使用するので、その大きさ、フォント種類、表示するテキスト等の設定を行っています。

さらに、チェックボックスの状態が変化したときに発生するイベントを利用して、Labelオブジェクトの中のテキストを書き換える処理をするイベントハンドラーの登録、実際の処理を行うメソッドの定義をしています。

リスト2 Program.cs

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


namespace sample15
{
    public class MyForm : Form  // Windows.Formの派生クラスとしてMyFormを定義
    {
        private Label label;
        CheckBox check;

        public MyForm()
        {
            this.Width = 300;  // MyFormの幅のピクセル値設定
            this.Height = 200;  // MyFormの高さのピクセル値設定
            setupControls();
        }

        public void setupControls()
        {
            label = new Label();  // インスタンス名labelでLabelのインスタンスを生成
            label.Text = "type text:";
            label.Font = new Font("Geneva",12,FontStyle.Regular);
            label.Height = 30;
            label.Width = 300;
            this.Controls.Add(label);  // labelをMyFormに貼り付け
            check = new CheckBox();  // インスタンス名checkでCheckBoxのインスタンスを生成
            check.Text = "check box";
            check.Top = 50;　　// <-- CheckBoxの配置座標（左上）
            check.Left = 50;  // <-- CheckBoxの配置座標（左上）
            check.CheckedChanged += check_changed;  // CheckBox状態変化イベントのイベントハンドラー登録
            this.Controls.Add(check);  // CheckBoxをMyFormに貼り付け
        }

        private void check_changed(object sender, System.EventArgs e)
        {
            label.Text = "checked: " + check.CheckState + "(" + check.Checked + ")";

            // labelのテキストをcheckの状態（論理値）に書き換え

        }
    }
 
}

これをコンパイルして動かすと、以下のようになります。

起動直後、チェックボックスがチェックされていない状態で起動します。

チェックボックスにチェックを入れると、下のようになります。

この状態でチェックを外すと、下のようになります。起動直後の状態には戻りませんね。

このsetupControl()メソッドとイベントハンドラーの処理、イベント処理のメソッドを色々と書き換えることで、色々なコントロールを配置して動かしてみることが出来ます。

コントロールそれぞれの使い方は、ドキュメントを見ながら研究するしかありませんが、色々なコントロールを試してみて、Windows FormアプリのGUIの作り方を研究するのも楽しいと思います。

GroupBoxとRadioButton

上記リストのコントロールの配置とイベントハンドラー、イベント処理を書き換えてみます。グループボックス（GroupBox）、ラジオボタン（RadioButton）というコントロールを使って、下記のようなことが出来ます。

        public void setupControls()
        {
            label = new Label();  // Labelクラスのインスタンス生成
            label.Text = "type text:";
            label.Font = new Font("Geneva", 12, FontStyle.Regular);
            label.Height = 30;
            label.Width = 300;
            this.Controls.Add(label);  // labelオブジェクトをMyFormに貼り付け

            GroupBox group = new GroupBox();
            group.Width = 200;
            group.Height = 100;
            group.Top = 50;
            group.Left = 50;
            group.Text = "radio group";
            this.Controls.Add(group);

            radio1 = new RadioButton();
            radio1.Text = "male";
            radio1.Top = 25;
            radio1.Left = 25;
            radio1.Checked = true;
            radio1.CheckedChanged += check_changed;
            group.Controls.Add(radio1);

            radio2 = new RadioButton();
            radio2.Text = "female";
            radio2.Top = 50;
            radio2.Left = 25;
            radio2.CheckedChanged += check_changed;
            group.Controls.Add(radio2);
        }

        public void check_changed(object sender, System.EventArgs e)
        {
            RadioButton btn = (RadioButton)sender;
            label.Text = "selected:  " + btn.Text;
        }

ラジオボタンというコントロールを二つ配置して、押されたら反応する、というプログラムです。radio1オブジェクトを最初から有効な状態にして起動するプログラムになっています。

femaleを有効にすると、その旨のテキストが表示されます。

その状態からmaleを有効にすると、その旨のテキストに書き換わります。

なお、起動時にmaleが有効な状態で起動しても、プログラム内ではラジオボタンの状態を読んでいないので、表示に変化は起こりません。表示に変化が起こるのは、ラジオボタンの状態が変化してcheck_changedイベントが発生したときだけです。

今回はここまでです。