こんにちは、ひろにも です。
前回プロジェクトの新規作成を行い、画面を表示するところまでの流れを紹介していきましたね。
今日は、画面にボタンを配置して、ボタンを押す処理を作っていきたいと思います。
具体的には、ボタンを押して、画面に文字を表示させるプログラムを作っていきましょう。
早速やっていきましょう！
画面レイアウトの作成
基本的に画面のあるプログラムを作成するときは、まず画面レイアウトから作成していきます。
まずは前回作成した、画面を表示してください。
(もしくは、Visual Studioを立ち上げて、新規プロジェクトを作成してください。)
ファイル→開く→プロジェクト/ソリューション を選択
作成した、(プロジェクト名).slnを開く、私の場合 hironimo.sln を選択
何もない画面が立ち上がったと思うので、ボタンを配置していきましょう。
ボタンを配置するには、画面の左端にある、ツールボックスを選択していきます。
ツールボックスの中にあるコモンコントロールからButtonを選択して、画面にドラック＆ドロップしてみてください。
ツールボックス→コモン コントロール → Button を選択し、ドラッグ＆ドロップ
私はこんな感じで配置してみました。
ボタンの配置ができましたね！
少しこのボタンをいじってみましょう。
ボタンの設定を変える時は、右下にあるプロパティから変更していきます。
この時、ボタンを選択していないと、ボタンのプロパティが表示されていないので注意してください。
それでは button1と表示されている表示名を「変更」変えててみましょう。
プロパティから Text と書かれている項目を探し、そこに 「変更」 と記載してみましょう。
すると画面のボタンの文字が変わりましたよね！
今の感じでプロパティから変更していきましょう。
-
- ボタンの配置は、ツールボックス → コモンコントロール → 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 に変化しましたね！！
これでプログラムは完成です。
次からは、変数について見ていきましょう。
