C# ボタンイベントを作成しよう

こんにちは、ひろにも です。

前回プロジェクトの新規作成を行い、画面を表示するところまでの流れを紹介していきましたね。

 

今日は、画面にボタンを配置して、ボタンを押す処理を作っていきたいと思います。

具体的には、ボタンを押して、画面に文字を表示させるプログラムを作っていきましょう。

 

早速やっていきましょう!

 

作成するプログラム
ボタンを押して、画面に文字(Hello World)を表示させる。

 

画面レイアウトの作成

 

基本的に画面のあるプログラムを作成するときは、まず画面レイアウトから作成していきます。
まずは前回作成した、画面を表示してください。
(もしくは、Visual Studioを立ち上げて、新規プロジェクトを作成してください。)

ファイル→開く→プロジェクト/ソリューション を選択
作成した、(プロジェクト名).slnを開く、私の場合 hironimo.sln を選択

 

何もない画面が立ち上がったと思うので、ボタンを配置していきましょう。
ボタンを配置するには、画面の左端にある、ツールボックスを選択していきます。

ツールボックスの中にあるコモンコントロールからButtonを選択して、画面にドラック&ドロップしてみてください。

ツールボックス→コモン コントロール → Button を選択し、ドラッグ&ドロップ

私はこんな感じで配置してみました。

ボタンの配置ができましたね!
少しこのボタンをいじってみましょう。
ボタンの設定を変える時は、右下にあるプロパティから変更していきます。
この時、ボタンを選択していないと、ボタンのプロパティが表示されていないので注意してください。

それでは button1と表示されている表示名を「変更」変えててみましょう。
プロパティから Text と書かれている項目を探し、そこに 「変更」 と記載してみましょう。

 

 

すると画面のボタンの文字が変わりましたよね!
今の感じでプロパティから変更していきましょう。

 

Point
    • ボタンの配置は、ツールボックス → コモンコントロール → button → ドラッグ&ドロップ
    • ボタンの設定は、プロパティから変更

 

次はラベルを配置していきます。

ボタンの時と同じように流れでラベルを選んでください。
ツールボックス → コモンコントロール → Label → ドラッグ&ドロップ

Labelが表示されました!
少し小さいので、プロパティから文字のサイズを大きくしてみましょう。
Labelを選択状態にしてから、プロパティのエリアで変更していきます。

Font の項目から「...」を選択すると、フォント画面が表示されます。
そこで、サイズを大きくしましょう。

ラベルの文字が大きくなりました。

これで画面のレイアウトは、完了です。

 

ボタンのイベント処理を作成する

 

ここからいよいよ、C#(プログラミング言語)を使って処理を書いてみましょう。

画面のボタンを、ダブルクリック してみてください!

こんな画面が表示されたのではないでしょうか?
これが、C#で記載している、プログラムです。

これは、ボタンをクリックしたとき、この処理をしてくださいという意味です。
今は何も書かれていないので記載していきましょう。

C#の場合で、記載していきます。

C#の場合

Button1クリックイベント

private void Button1_Click(object sender, EventArgs e)
{
}

 

Button1_Click のなかに、以下のように記載してみてください。

private void Button1_Click(object sender, EventArgs e)
{
    label1.Text = "Hello world";
}

 

【ラベル.Text】で、ラベルという項目の、Textプロパティを変更するという意味です。

ラベルの文字が指定した文字に代わるのでやってみましょう。

 

結果

これでプログラムは完成です。

記載したら、開始 してみてください。

変更ボタンをおしてみると、、、

ラベルが Hello world に変化しましたね!!
これでプログラムは完成です。

次からは、変数について見ていきましょう。

 

C#の記事一覧

おすすめの記事