フォームのデザイン Labelコントロール変更点 (name): labelDate Font Size: 18pt

Presentation on theme: "フォームのデザイン Labelコントロール変更点 (name): labelDate Font Size: 18pt"— Presentation transcript:

1 フォームのデザイン Labelコントロール変更点 (name): labelDate Font Size: 18pt
TextAlign: MiddleCenter Labelコントロール変更点 (name): labelTime Font Size: 20pt TextAlign: MiddleCenter Buttonコントロール変更点 (name): buttonFinish Text: 終了 Font Size: 12pt

2 DateTimeのインスタンスを宣言する場所
namespace Matsushima using System; using System.Drawing; using System.Collections; using System.ComponentModel; using System.Windows.Forms; using System.Data; namespace Koushu80 { /// <summary> /// Form1 の概要の説明です。 /// </summary> public class Form1 : System.Windows.Forms.Form /// 必要なデザイナ変数です。 private System.ComponentModel.Container components = null; 　　　　private System.Windows.Forms.Label labelDate; 　　　　private System.Windows.Forms.Label labelTime; 　　　　private System.Windows.Forms.Button buttonFinish; 　　　　private DateTime dt; public Form1() // // Windows フォーム デザイナ サポートに必要です。 InitializeComponent(); // TODO: InitializeComponent 呼び出しの後に、コンス・・ 　　　　 DateTime dt; dt = DateTime.Now; labelDate.Text = string.Format("西暦{0}年{1}月{2}日", dt.Year, dt.Month, dt.Day); labelTime.Text = string.Format("{0}時{1}分", dt.Hour, dt.Minute); } /// <summary> /// 使用されているリソースに後処理を実行します。 /// </summary> protected override void Dispose( bool disposing ) { if( disposing ) if (components != null) components.Dispose(); } base.Dispose( disposing ); Windows Form Designer generated code /// アプリケーションのメイン エントリ ポイントです。 [STAThread] static void Main() DateTime dt; dt = DateTime.Now; Application.Run(new Form1()); 正解その１ DateTimeのインスタンスdtをForm1のメンバとして宣言する →Form1内からアクセス可能 正解その２ インスタンスdtがForm1コンストラクタメソッド内のローカル変数でも良いならこれでＯＫ　(この例ではローカル変数でも問題ない) 不正解 インスタンス(変数)dtはMain()メソッド内のローカル変数になるため，イベントハンドラ等からアクセスできない 現在時刻を取得して，Labelコントロールに設定

3 いろいろなコントロール ラベル(Label) リストボックス (ListBox) 文字列リストを選択する ボタン(Button)
チェックボックス(CheckBox) いくつ選択しても構わない コンボボックス (ConboBox) 文字列リストを選択する グループボックス(GourpBox) ラジオボタンを中に入れる枠 タブコントロール (TabControl) ラジオボタン (RadioButton) 一つだけを選択できる 数値アップダウン (NumericUpDown) 数値を入力する スライダ(TrackBar) テキストボックス (TextBox) 文字列を入力する 「選択する」＝「チェックする」

4 ウィンドウ内に絵を描こう 直線 line 四角形 rectangle 円/楕円 ellipse 中身の詰まった円/楕円
FillEllipse 中身の詰まった扇形 FillPie 扇形 pie これらはコントロールではない → フォームデザイナで設定できない

5 GUIプログラミングの基本＝イベント イベントとは イベントの例 ウィンドウやウィンドウ内のパーツ(ボタン・スクロールバーなど)に発生する
様々な出来事・きっかけ MouseEnterイベント発生 MouseLeaveイベント発生 イベントの例 マウスがウィンドウ上に入った マウスがウィンドウ上から出た マウスのボタンが押された キーボードのキーが押された ウィンドウが閉じられた ウィンドウが開かれた ウィンドウのサイズが変わった 他のウィンドウの下になっていたウィンドウ全体が前に出た 他のウィンドウに隠れていた一部分が前に出た MouseDownイベント発生 このタイプのイベントが発生したらプログラムはウィンドウ内の文字や図形を描かなければならない → Paint イベント発生 ウィンドウが隠れて出たり，サイズが変わったりするたびにウィンドウ内を描画するのか？ 答え：　ＹＥＳ！　それがウィンドウプログラミングの基本

6 フォームデザイナによるPaintハンドラの作成
（１） かみなりボタンをクリック （２） Paintハンドラの項をダブルクリック （３） Paintハンドラのメソッド形式が自動的に作成され，コードエディタが開く

7 Paintハンドラの例 private void Form1_Paint(object sender, PaintEventArgs e)
{ Graphics g = e.Graphics; Pen GreenPen = new Pen(Color.Green); Pen RedPen = new Pen(Color.Red); Pen YellowPen = new Pen(Color.Yellow); g.DrawLine(GreenPen, 10, 10, 200, 200); g.DrawEllipse(RedPen, 50, 50, 30, 30); g.DrawPie(YellowPen, 120, 100, 150, 150, 15, 120); Pen RedThickPen = new Pen(Color.Red, 10); g.DrawRectangle(RedThickPen, 150, 20, 100, 50); SolidBrush blueBrush = new SolidBrush(Color.Blue); SolidBrush BrownBrush = new SolidBrush(Color.Brown); g.FillPie(blueBrush, 20, 80, 100, 100, 15, 120); g.FillEllipse(BrownBrush, 150, 100, 50, 50); } 直線 line 円/楕円 ellipse 四角形 rectangle 中身の詰まった円/楕円 FillEllipse 扇形 pie 中身の詰まった扇形 FillPie

8 コンピュータの画面 ピクセル 画素 絵素 現在の普通のパソコン 横1024ピクセル x 縦768ピクセル XGAサイズ
少し前のパソコンやノートパソコン 横800ピクセル x 縦600ピクセル SVGAサイズ OD教室のパソコン 横1280ピクセル x 縦1024ピクセル SXGAサイズ

9 画面への描画 Graphics オブジェクト 紙 ペン Pen オブジェクト Brush オブジェクト 画面のピクセルをカプセル化
描画の基本になる 紙 原点 （０，０） X方向 Ｙ方向 300ピクセル (デフォルト値) ペン Pen オブジェクト 線を引く 色，幅(線の太さ)，線スタイル(点線など)等の多数のプロパティを持っている Brush オブジェクト 図形を塗りつぶす 　単色で塗りつぶすSolidBrush 　画像パターンで塗りつぶすTextureBrush 　グラジエーション効果で塗りつぶすLinearGradientBrush 実際に描画可能な領域 ２９２x２７３ピクセル (デフォルト値の場合)

10 Paintハンドラの例 Graphicsオブジェクトを Paintハンドラ内で取得 緑・赤・黄色で太さが1ピクセルのPenオブジェクトを作成
private void Form1_Paint(object sender, PaintEventArgs e) { Graphics g = e.Graphics; Pen GreenPen = new Pen(Color.Green); Pen RedPen = new Pen(Color.Red); Pen YellowPen = new Pen(Color.Yellow); g.DrawLine(GreenPen, 10, 10, 200, 200); g.DrawEllipse(RedPen, 50, 50, 30, 30); g.DrawPie(YellowPen, 120, 100, 150, 150, 15, 120); Pen RedThickPen = new Pen(Color.Red, 10); g.DrawRectangle(RedThickPen, 150, 20, 100, 50); SolidBrush blueBrush = new SolidBrush(Color.Blue); SolidBrush brownBrush = new SolidBrush(Color.Brown); g.FillPie(blueBrush, 20, 80, 100, 100, 15, 120); g.FillEllipse(brownBrush, 150, 100, 50, 50); } 緑色ペンで座標値(10,10)から(200,200)へ直線を引く 青字はインスタンス名(変数名)なので自由に変えられる 赤色ペンで，左上隅の座標が(50, 50)で幅30，高さ30の正方形に内接する円を描く 赤色で太さ10ピクセルのペン 赤色で太いペンで左上(150,20)，幅100，高さ50の長方形を描く 青と茶色の単色ブラシ 左上隅の座標が(20, 80)で幅100，高さ100の長方形に内接する円のうち15度から120度の扇形を青色ブラシで塗りつぶす 茶色ブラシで，左上隅の座標が(150, 100)で幅50，高さ50の正方形に内接する円を塗りつぶす 描画メソッドの種類やその詳細については Graphicsクラスをキーワード検索

11 コントロールで図形描画を制御する 作図ボタンを押すと，入力した値の10倍 の長さ(ピクセル)の太線を引く
public class Form1 : System.Windows.Forms.Form { private System.Windows.Forms.NumericUpDown numericUpDown1; private System.Windows.Forms.Button button1; /// <summary> /// 必要なデザイナ変数です。 /// </summary> private System.ComponentModel.Container components = null; private int length = 0; ・・・略 private void button1_Click(object sender, System.EventArgs e) length = (int) (numericUpDown1.Value); this.Refresh(); } private void Form1_Paint(object sender, PaintEventArgs e) Graphics g = e.Graphics; g.DrawLine(new Pen(Color.Blue, 20), 0, 20, length*10, 20); (int) ( x ) で変数xの型をint型に変換する numericUpDown.ValueはDecimal型のプロパティなのでそのままではint型変数に代入できない Form1の描画領域を一旦消去して，Paintハンドラを強制的に呼び出すメソッド 太さ20ピクセルの青色ペンで直線を描画 直線の長さを表わす変数 NumericUpDownコントロールのインスタンス numericUpDown1 200ピクセル 作図ボタンのクリック イベントハンドラ Paintイベントハンドラ 図形描画を制御する仕組み 変数値の変更 変数 length 変数値の参照

12 図形をアニメーションする 緑の円が左から右へ移動してゆく
public class Form1 : System.Windows.Forms.Form { private System.Windows.Forms.Timer timer1; private System.ComponentModel.IContainer components; private int position = 0; public Form1() InitializeComponent(); timer1.Start(); } ・・・略 private void timer1_Tick(object sender, System.EventArgs e) position = position + 5; this.Refresh(); private void Form1_Paint(object sender, PaintEventArgs e) if (position > 300) position = 0; Graphics g = e.Graphics; Rectangle rect = new Rectangle(position, 50, 40, 40); g.DrawEllipse(new Pen(Color.Green), rect); タイマーのTickイベントハンドラ．Intervalプロパティは100[ms]に設定 タイマースタート positionの値がある程度大きくなったら元に戻す 円の現在位置を示す変数 100[ms]ごとに位置を5ピクセル移動する (position, 50)の位置に直径40の円を描画 タイマーのTick イベントハンドラ 変数 position Paintイベントハンドラ 変数値の変更 変数値の参照 図形をアニメーションする仕組み

13 Rectangle 楕円/円描画の引数 位置座標 高さ 幅
void DrawEllipse(Pen pen, int x, int y, int width, int height); 位置座標 幅 高さ 一つの引数形式 void DrawEllipse(Pen pen, Rectangle rect); 別の引数形式 位置座標と，幅，高さをカプセル化したRectangleオブジェクトは画面上の四角形の領域を表わしている Bottom　 この Rectangle 構造体の下端の y 座標を取得します。 Height この Rectangle 構造体の高さを取得または設定します。 IsEmpty この Rectangle のすべての数値プロパティに値ゼロがあるかどうかをテストします。 Left この Rectangle 構造体の左端の x 座標を取得します。 Location この Rectangle 構造体の左上隅の座標を取得または設定します。 Right この Rectangle 構造体の右端の x 座標を取得します。 Size この Rectangle のサイズを取得または設定します。 Top この Rectangle 構造体の上端の y 座標を取得します。 Width この Rectangle 構造体の幅を取得または設定します。 X この Rectangle 構造体の左上隅の x 座標を取得または設定します。 Y この Rectangle 構造体の左上隅の y 座標を取得または設定します。 ==等値演算子 2 つの Rectangle 構造体の位置およびサイズが同じかどうかをテストします。 !=非等値演算子 2 つの Rectangle 構造体の位置またはサイズが異なるかどうかをテストします。 Rectangleのプロパティとオーバーロード演算子 座標をfloat形式で表現した RectangleFオブジェクトもある

14 Point 直線描画の引数 一つの引数形式 位置座標 1
void DrawLine(Pen pen, int x1, int y1, int x2, int y2); 位置座標1 位置座標2 別の引数形式 位置座標 2 void DrawLine(Pen pen, Point p1, Point p2); 位置座標をカプセル化したPointオブジェクト Pointのプロパティとオーバーロード演算子 直線群描画の引数 IsEmpty この Point が空かどうかを示す値を取得します。 X この Point の x 座標を取得または設定します。 Y この Point の y 座標を取得または設定します。 加算演算子 Point を指定の Size で平行移動します。 等値演算子 2 つの Point オブジェクトを比較します。その結果によって、 2 つの Point オブジェクトの X プロパティと Y プロパティの値が等しいかどうかが示されます。 ==非等値演算子 2 つの Point オブジェクトを比較します。その結果によって、 2 つの Point オブジェクトの X プロパティと Y プロパティの値が異なるかどうかが示されます。 !=減算演算子 Point を指定の Size の負の値だけ平行移動します。 位置座標 p[0] 位置座標 p[1] 位置座標 p[2] 直線群描画メソッドの引数形式 Ｐｏｉｎｔオブジェクトの配列 位置座標 p[3] void DrawLines(Pen pen, Point[] p); 座標をfloat形式で表現した PointFオブジェクトもある