C# 入門講座
Visual Studio 2005 Visual Studio 2008 Visual Studio 2010 Visual Studio 2012 Visual Studio 2013 Visual Studio 2015 Visual Studio 2017 Visual Studio 2019

第2回 ボタンを作る

この記事が対象とする製品・バージョン (バージョンの確認方法)

VS2019 Visual Studio 2019 対象です。
VS2017 Visual Studio 2017 対象です。
VS2015 Visual Studio 2015 対象です。
VS2013 Visual Studio 2013 対象です。
VS2012 Visual Studio 2012 対象ですが一部画面が異なる場合があります。
VS2010 Visual Studio 2010 対象ですが一部画面が異なる場合があります。
VS2008 Visual Studio 2008 対象ですが一部画面が異なる場合があります。
VS2005 Visual Studio 2005 対象ですが一部画面が異なる場合があります。
VS.NET 2003 Visual Studio 2003 対象外ですがほとんどの操作は同じなので参考になります。
VS.NET 2002 Visual Studio (2002) 対象外ですがほとんどの操作は同じなので参考になります。

今回はWindows(ウィンドウズ)でのプログラムによく出てくるボタンを作ってみます。ボタン作りを通してC#でのプログラミングの基本的な方法を説明します。

概要

・ボタンを作るには、デザイン画面でマウスで貼り付ける。

・ボタンを使うには、ダブルクリックしてからプログラムを入力する。

・Visual Studioのプログラミング画面の表示設定について

 

1.準備

 

さっそく新規プロジェクトを作成してみましょう。プロジェクトとは1つにまとまったプログラムのことでしたね。

前回同様Windows フォーム アプリケーションを選択してください。プロジェクトの作成方法がわからない場合は前回の説明を参照してください。

今回はプロジェクト名は特に関係ないので自由につけてください。これからも特に説明のない限りプロジェクト名は自由な名前で結構ですが、後で見たときにどんなプログラムだったかわかるような名前にしておくのが良いです。

操作方法 操作  -  画面設定を最初の状態に戻す方法

Visual Studioでは設定や操作で画面をいろいろと変えられるので、いじっているうちに最初とは違う画面になってうまく戻せなくなってしまうかもしれません。

こんなとき、[ウィンドウ]メニューの[ウィンドウ レイアウトのリセット]をクリックするだけで簡単にインストールしたばかりの最初の表示状態に戻すことができます。
ウィンドウ レイアウトの リセット
■画像:ウィンドウ レイアウトのリセット

 

2.ツールボックス

 

2−1.コントロール

今回はボタンを扱いますが、プログラムではボタン以外にも文字を入力するテキストボックス(TextBox)や、画像を表示するピクチャーボックス(PictureBox)などさまざまな部品を扱います。

これらのように画面に貼り付けて使う部品のことを「コントロール」と呼びます。

いくつかのコントロール

■画像:いくつかのコントロール

2−2.ツールボックスの開閉

コントロールを使用する手順は共通していて、ツールボックスから目的のコントロールを選択して、フォーム上でそのコントロールを配置したい位置をマウスでなぞるだけです。

ツールボックスは画面の左側にあります。

閉じているツールボックス

■画像:閉じているツールボックス

もし、ツールボックスが表示されていないようなら、[表示] メニューから [ツールボックス] をクリックすると表示されます。(以前のバージョンのVisual Studioでは [表示] - [その他のウィンドウ] - [ツールボックス])

 

マウスでクリックするとツールボックスが開いてこのようになります。

開いているツールボックス

■画像:開いてフォームに重なっているツールボックス

このようにツールボックスには水彩画のパレットのようにいろいろなコントロールが並んでいます。

別の場所をクリックするとツールボックスは閉じます。ツールボックスが開いたり閉じたりするタイミングはVisual Studioのバージョンによって少し違います。

 

この状態だと、フォームの左側がツールボックスの裏に隠れてしまい少し見にくくなってしまいます。

それが嫌なときはツールボックスの右上にある画鋲(がびょう)のアイコンをクリックします。

がびょう

■画像

そうするとこのようにフォームに重ならないようにツールボックスが表示され、この位置で表示が固定されます。もう一度画鋲をクリックすると閉じた状態に戻ります。

固定されたツールボックス

■画像:固定されたツールボックス

私はこの固定した状態の方が作業がしやすいので画鋲をクリックしておくことが多いです。現代(2019年)はディスプレイのサイズも大きく、ツールボックスを常に表示しておいてもあまり邪魔にならないので、初心者の方には作業しやすいように画鋲をクリックしてツールボックスを固定にしておくことをお勧めします。

2−3.ツールボックスの内容

ツールボックスの内容は状況によって変わります。今はWindows フォーム アプリケーションの画面をデザインする画面なので、Windows フォーム アプリケーションのデザインに使用するものがツールボックスに並んでいます。

私の環境で数えてみるとVisual Studio Community 2019ではこの状況で60個以上のコントロールがはじめから使用可能なようです。

たくさんのコントロールを整理するためにツールボックスでは「タブ」というものを使ってコントロールをカテゴリごとに分けています。これはたくさんのファイルを整理したいときにフォルダーを使うのと同じ発想です。

Visual Studio Community 2019ではじめの状態では、「すべての Windows フォーム」、「コモン コントロール」など以下の10個のタブが存在します。

ツールボックスのタブはクリックすると開閉できます。すべて閉じるとこのようになります。

ツールボックスのタブをすべて閉じたところ

■画像:すべてのタブを閉じたところ

この状態でコモン コントロールのタブをクリックして展開すると、下のようになります。

コモンコントロールを展開

■画像:コモンコントロールを展開したところ。

再びタブをクリックすると閉じることができます。

最初から存在する10個のカテゴリは次のような分類になっています。

タブ 分類
すべての Windows フォーム 現在使用可能なすべてのコントロール (ごく少数の例外はあります)
コモン コントロール よく使用するコントロール
コンテナー 他のコントロールを含むことができるコントロール
メニューとツールバー メニューとツールバーを表現するコントロール
データ データベース等と連携するコントロール
コンポーネント 表示されずにプログラムを支援するコントロール
印刷 印刷機能を実現するコントロール
ダイアログ 各種ダイアログとして動作するコントロール
WPF 相互運用機能 WPFの機能を簡単に使用するためのコントロール
全般 空です。自分のコントロールを配置するなどします。

■表:Windows フォーム アプリケーション 画面デザイン時のツールボックスのタブ

よく使うコントロールは「コモン コントロール」に登録されているので、はじめのうちはコモン コントロールだけしか使わないことでしょう。

他のタブも簡単な説明を書いておきましたが、現時点では使いこなせる知識がないので気にしないでください。

メモ メモ  -  どんなコントロールがはじめから用意されているか?

初級講座第16回 コントロールの鳥瞰 では、用意されているコントロールのほとんどについてざっと紹介していますのでどうしても気になる人は先に見てみてもよいでしょう。 この記事はVisual Basic向けの記事ですが、コントロールはC#とVisual Basicで共通なので通用します。 今回ボタンを使う方法を説明しているので、それがわかればとりあえず自分でいろいろなコントロールをフォームに貼り付けてみてどんなものか直接いじることもできます。

 

3.ボタンの配置

 

では、いよいよツールボックスからボタンを選択してプログラムしてみましょう。

ツールボックス上にある「Button」をクリックしてください。

そして、マウスでフォーム上のボタンを貼り付けたい位置をなぞって(ドラッグして)ください。あなたがなぞった位置になぞった大きさのボタンができます。

ボタンの配置

■画像:フォームにボタンを貼り付ける

上の画像のようになりましたか?これでボタン配置作業は完了です。

一度貼り付けた後でもマウスで自由に位置を変更できますし、ボタンを選択したときに八方に表示される小さな白い四角をマウスでドラッグすることでボタンの大きさも簡単に変えられます。

操作方法 操作  -  ボタンを貼り付けるその他の方法


本文ではツールボックスでButtonをクリックし、マウスでフォームをなぞるという方法を紹介していますが、ツールボックスからフォームにコントロールを貼り付けるには他の方法もあります。

  • ツールボックスでButtonをダブルクリック
  • ツールボックスからフォームにButtonをドラッグ&ドロップする
  • ツールボックスでButtonをクリックするなどして選択してから[Enter]キーを押す

本文で紹介しているマウスでフォームをなぞる方法が一番良くつかわれていると思いますがお好みの方法で良いです。

 

この状態で一度プログラムを実行してみましょう。実行ボタンをクリックしてください。

VB2013の実行ボタン

■画像:実行ボタン

実行すると確かにボタンがひとつあるフォームが表示されるでしょう。でもボタンをクリックしても何もおきませんね。1行もプログラムしていないからしかたありません。

 

配置したボタンを削除するにはデザイン時にボタンを右クリックして「削除」を選択するか、Deleteキーを押します。

 

4.ボタンのプログラム

 

ではボタンをクリックしたときに何か起こるようにプログラムをしてみましょう。ボタンがクリックされたときの動作をプログラムするにはデザイン画面に戻って配置したボタンをダブルクリックしてください。(ツールボックスのボタンじゃないですよ)

ボタンをダブルクリックするとコードエディターに切り替わり、次のようになっています。この内容はVisual Studioのバージョンによって少し異なります。

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 WindowsFormsApp1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Button1_Click(object sender, EventArgs e)
        {

        }
    }
}

■リスト1:ボタンをダブルクリックした直後の状態

 

この中でprivate boid Button1_Clickから始まる行を探してください。

この行の意味は簡単に言うと「ボタンがクリックされたら」という意味です。クリックされたら何が起こるのかはこれに続く { から } の間にあなたがプログラムするのです。

今回は次のように1行プログラムを追加してください。

private void Button1_Click(object sender, EventArgs e)
{
    button1.Text = DateTime.Now.ToString();
}

■リスト2:ボタンをクリックしたときに作動するプログラム

 

自分で書く必要があるのは、button1.Text = DateTime.Nwo.ToString(); の1行目だけです。この意味は「ボタンの文字を現在日時を文字で表現したものにしなさい」という意味です。開始ボタンVB2013の実行ボタンで実行してボタンをクリックすると、ボタンに現在の日時が表示されます。

 

もし、実行ボタンをクリックしたときに「ビルドエラーが発生しました。続行しますか?」というようなメッセージが表示された場合は、プログラムがどこか間違っている場合です。[いいえ]を選択して、もう一度よく見直してください。大文字・小文字の間違いや、( ) のつけ忘れ、最後のセミコロン ; のつけ忘れなどが注意点です。

ところで、ボタンを配置したときにはボタンに「Button1」と表示されていてかっこ悪いですよね。もちろんこの表示されている文字もプログラムしないで簡単に変えることができるのですがその方法はまたの次回に説明します。

 

5.消すとエラーになります

このようにプログラムの追加操作は難しくありませんが、プログラムを消す操作は初心者には注意が必要です。

後で困らないように今書いたプログラムを消すと何が起こるのかはじめのうちになれておきましょう。

button1.Text = DateTime.Nwo.ToString(); を1行だけ消して下記の状態に戻してください。

private void Button1_Click(object sender, EventArgs e)
{

}

この状態で実行すると、ボタンをクリックしても何も起きません。

ここまではみなさん想定どおりだと思います。問題は次からです。

今度は、private boid Button1_Click{ } も含めて全部消してみてください。全体は次のとおりになります。

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 WindowsFormsApp1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

    }
}

この状態で実行すると、ビルドエラーが発生しました。となります。

つまり、消してはいけないものを消してしまったのですね。

自分が書いたプログラムではないものは、消さないように気をつけてください。(自動生成されたプログラムには正しい消し方があるのです。)

ビルドエラーの表示

「いいえ」をクリックして、実行することはあきらめて、Form1.cs [デザイン] タブをクリックしてみてください。

タブ

今度は下のようなエラーが発生します。もはや画面にボタンを貼り付けたりするデザイナー自体が表示できません。

初心者の方はこの画面が表示されるともうどうしてよいかわからず困ってしまうようです。

一応、「無視して続行する」という選択肢がありまずが、よく理解していない場合は、これをクリックしないでください。この画面で警告されているようにプログラムや設定がおかしくなってしまう場合があります。

 

もう1度、Form1.cs をクリックして、消したものを書き直せばすべてのエラーは元に戻ります。

消したものがわからなくなった場合は困りますね。

その場合は、Form1.cs タブをクリックしてコードエディターに戻ってから、ツールバーの 元に戻す をクリックしてください。

 

どの時点まで戻ればよいかわらないくらい重傷な場合は、このエラーの仕組みを理解して自分で修正できるようになる必要がありますね。その方法は入門講座の第4回で説明します。

とりあえず、消すときは、自分で書いていないものを消さないように気をつけてください。

 

 

5.まとめ

 

今回はボタンをフォームに配置してプログラムする手順を説明しました。ボタンに限らずツールボックスにならんでいるコントロールはすべて同じ手順で配置してプログラムすることができます。他のコントロール を配置して遊んでみてください。それでは!

発展 発展学習  -  C#のコントロールはVBなどと共通

発展学習では意欲的な方のために現段階では特に理解する必要はない項目を解説します。


ツールボックスに並んでいるすべてのコントロールはC#専用のものではなくVisual Basicなど他の.NET言語でも利用します。しかも利用する手順は今回解説した手順とまったく同じです。

これはC#もVBも .NET言語と呼ばれるものはすべて .NET (ドットネット)という決まりに対応するように設計されているからです。そしてツールボックスのコントロールはC#ではなくこの.NETに所属しており、C#やVBから.NETの機能を呼び出すという点で共通なのです。

このような理由でC#の勉強をしていても自然とVisual Basicなども扱えるようになっていきます。たとえば今回最後に出てきたプログラムの部分はVBで書くと次のようになります。違いはありますが似ていますよね。

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

    Button1.Text = Now.ToString

End Sub

 

重要な用語

用語 説明
ボタン Windowsのいろいろな画面でよく見かけるボタンです。Windowsのバージョンによって見かけは少し異なります。
ツールボックス ボタンなどフォームに貼り付けて使うための部品が並んでいる場所です。フォームに部品を貼り付けるにはツールボックスから目的の部品を選んでクリックし、フォームの貼り付けたい位置をマウスでドラッグしてなぞります
コントロール ボタンや、ユーザーが文字を入力するテキストボックス、画像を表示するためのピクチャーボックスなど、ユーザーの目に見えてフォームに貼り付けて使う部品を指します。タイマーなど目に見えない部品のことは単に「コンポーネント」と呼ぶ場合もありますが、ひとまとめにして「コントロール」と呼ぶ場合もあります。