PR

VB.net(VB2022)のボタンの実装とイベントの追加方法

組み込みエンジニア
本記事はプロモーションが含まれています。

こんにちは、ENGかぴです。

Visual Basic 2022はMicroSoft社がVisual Studioで提供している開発環境です。Visual Basic2022のデスクトップアプリでボタンの実装とイベントの追加方法をまとめました。

Visual Studio Community 2022は基本無料で使用できるため個人の趣味でアプリを作ってみたい方やプログラミングの学習にお勧めの開発環境です。Visual Studio Community 2022のインストール方法については下記記事にまとめています。

Visual Studio 2022によるVBの開発環境の作り方

Visual Basic 2022を以下ではVB2022とします。

フォームにボタンを実装する

スタートメニューからVisual Studio 2022を起動し、VB2022のプロジェクトを作成します。初期配置されているフォームにボタンを実装しイベントを追加します。

毎回スタートメニューから開くのが面倒な場合はタスクバーにピン止めもしくはスタートメニューのVisual Studio 2022を左クリックで選択した状態でデスクトップにリンクコピーしても良いと思います。

広告

ボタンを使って作成するアプリ

本記事で作成するアプリの動作画面
本記事で作成するアプリの動作画面

本記事では「開始」ボタンを押すとテキストボックスとテキストコピーを操作許可し、テキストボックスに入力した文字をテキストコピー(クリップボードにコピー)するアプリを作成します。

ボタンの色が薄い緑(LightGreen)の場合は使用可能の状態表示とし、薄い青(LightBlue)の場合は使用禁止の状態表示とします。

プロジェクトの作成

Visual Studio 2022のスタートメニュー
Visual Studio 2022のスタートメニュー

Visual Studio 2022を開き「新しいプロジェクトの作成(N)」を選択します。

新しいプロジェクトの作成(Windowsフォームアプリを選択)
新しいプロジェクトの作成(Windowsフォームアプリを選択)

新しいプロジェクトの作成画面に遷移するのでVisual Basicを選択し、候補を絞るためにプラットフォームにWindows、プロジェクトの種類にデスクトップを選択します。候補の中から「Windowsフォームアプリ」選択して「次へ(N)」をクリックします。「Windowsフォームアプリ」をダブルクリックしても次に進みます。

Windowsフォームアプリのプロジェクト名、保管場所の指定
Windowsフォームアプリのプロジェクト名、保管場所の指定

プロジェクト名や保管場所を指定します。例ではプロジェクト名をbuttonFormにしています。場所(L)はデフォルトから変更して、Cドライブ上に作成したWorkSpaceのvb2022フォルダを指定しています。

ソリューション名(M)は「ソリューションとプロジェクトを同じディレクトリに配置する(D)」のチェックを外すと指定することができます。チェックを入れた場合はbuttonFormフォルダ内にslnファイルなどのファイルが配置されます。

slnファイルはソリューションファイルでプロジェクトの構成を保存したものです。slnファイルを開くとプロジェクトが再開できるため使用する頻度が多くなります。

「次へ(N)」をクリックすると追加情報に遷移します。

追加情報でフレームワークを選択
追加情報でフレームワークを選択

フレームワークはデフォルトで「.NET6.0(長期的なサポート)」になっています。そのまま使用しても問題ありませんが、例では「.NET7.0(標準用語のサポート)」を選択しています。「作成(C)」をクリックするとエディター画面に遷移します。エディター画面でツールボックスが表示されていない場合はツールボックスを追加します。

ツールボックスの追加
ツールボックスの追加

エディター上部の表示(V)を選択し一覧からツールボックス(X)を選択してクリックするとツールボックスの表示が追加されます。

スポンサーリンク

ボタン(Button)の実装

初期で配置されているForm1.vb[デザイン]にボタン(Button)を追加します。ツールボックスの共通コントロールタブからButtonを選択します。(すべてのWindows Formsのタブからも選択できます。)Form1を任意の名称に変更している場合はForm1を変更した名前に置き換えて下さい。

Buttonの配置とプロパティの表示
Buttonの配置とプロパティの表示

Form1.vb[デザイン]内を動くマウスのポインタが選択したコントロールのアイコンになっているので、左クリックするとボタンが配置されます。左クリックした状態でマウスを移動することでサイズを調整しながら配置することもできます。

マウスによる配置の移動やサイズの移動もできますが、コントロールのプロパティで直接指定する方法があります。プロパティで直接指定する方法でボタンの位置とサイズを指定する方法を説明します。本記事で使用するプロパティ項目は以下の通りです。

項目説明
LocationX,Yでフォームの左上からの座標を指定する。
例)150,120
sizeWidth,Heightでコントロールのサイズを指定する。
例)100,50
BackColorButtonの色を指定する。カスタム、Web、システムから色を選択する。
例)LightGreen ※Web欄内にLightGreenがあります。
Textコントロールの表示文字を指定する。デフォルトではDesignの名前と同じ。
例)Button1 
Enabledコントロールの操作の許可と禁止を指定します。
例)True: 許可、False: 禁止
使用するプロパティの項目

Button1のBackColorにLightGreenを指定すると薄い緑色のボタンになります。

Buttonの追加とプロパティの指定
Buttonの追加とプロパティの指定

ボタンはツールボックスから実装する方法とボタンをコピーする方法で実装することができます。Button1をコピーしてButton2を実装します。Button2のBackColorにLightBlueを指定し薄い青のボタンにします。Button3はButton2をコピーして配置します。

Button1とButton2を同時に移動したり同じ枠内で管理したいときはツールボックスからGroupBoxを選択してデザインに追加します。GroupBoxはツールボックスのコンテナ(すべてのWindows Formsのタブ)から選択します。

GroupBoxでボタンを管理する
GroupBoxでボタンを管理する

GroupBoxを選択するとForm1.vb[デザイン]内を動くマウスのポインタがグループボックスのアイコンの表示になっているので、左クリックを押したままグループするコントロールを囲うようにして左クリックを外すと囲んだ部分をグループ化したGroupBoxが配置されます。

左クリックで配置した後でグループ化したいコントロールをGroupBox内に置くことでグループ化する方法もあります。

グループ化したボタンはGroupBoxの左上を基準にLocationが割り振られるため単体で配置した場合とLocationが変更されます。グループ化する前にButton1やButton2のイベントを追加している場合はグループ化によってイベントのハンドル部分が外れていることがあります。この場合は再度イベントの追加が必要になります。

GroupBox1を選択して移動するとグループ化されているためButton1とButton2も一緒に動くようになります。コントロールのプロパティで座標を指定しましたが、コードによる方法でも指定することができます。

Dim loca As New Point(100, 30)

Button1.Location = loca

例ではButton1のLocationをコードで指定しています。DimはVisual Basicでメモリを確保する場合に使用されます。Point構造体をインスタンス化して初期化して座標を指定したlocaを使ってbutton1のLocationにセットしています。

コードで指定する場合とプロパティで直接指定する方法を使い分けることができますが、個人的にボタンなどのコントロールはアプリ操作中に動かすことが少ないためコントロールのプロパティに直接入力することが多いです。

動作確認用のテキストボックスを追加します。テキストボックスはボックス内に文字を入力するコントロールです。Buttonコントロールと同じ要領でツールボックスの共通コントロールから追加します。

テキストボックスの追加
テキストボックスの追加

TextBox1をGroupBox1の下に配置しました。配置するとMultilineが初期値でFalseになっているため1行分のサイズになっています。複数行のテキストを入力する場合はプロパティのMultilineをTrueにする必要があります。Multilineがtrueの場合、Sizeの指定ができるようになります。

広告

イベントの追加

Button1などのコントロールに対してイベントの追加を行う必要があります。エディターを選択している状態でF7を押すか右1クリックで表示されるメニュー「コードの表示(C)」を選択するとコードの編集画面(Form1.vb)に遷移します。次のイベントを追加します。

  1. フォームを呼び出したときに一度だけ処理するLoadイベント
  2. Button1をクリックしたときに呼び出すClickイベント
  3. Button2をクリックしたときに呼び出すClickイベント
  4. Button3をクリックしたときに呼び出すClickイベント

1~4のイベントに関しては、クリックとダブルクリックで追加することができます。フォームのLoadイベントはForm1[デザイン]をダブルクリックすると追加されます。ButtonのClickイベントはButton1、Button2、Button3をダブルクリックするとがイベントが追加されます。

Loadイベント、Clickイベント以外を追加する場合もあるため、以下ではコードエディターでイベントを追加する方法を説明します。

コードエディターでイベントを追加する方法
コードエディターでイベントを追加する方法

①コントロールの選択を行います。イベントを追加するコントロールを選択し、イベント一覧から追加するイベント追加します。例ではForm1のイベントとして②Loadイベントを追加しています。同様にしてButton1~Button3はClickイベントを追加します。

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

イベントを選択するとコードが自動で生成されます。自動再生されたサブルーチンの後方にHandles Button1.Clickのように記述されている部分がイベントの発生要因になります。

Handles <コントロール名>.イベント要因のように記述すると自作のサブルーチンにおいてもイベントを追加することができます。

Private Sub MainApp() Handles Button1.Click
    label1.text = "ok"
End Sub

自作のサブルーチンMainApp()の処理をButton1がクリックされた時に行い場合の例を示しています。Button1がクリックされるとlabel1に「ok」が表示されます。

ボタン(Button)の実装でグループ化する前にButton1及びButton2のイベントを追加していた場合、グループ化によってイベントのハンドルが外れることがあります。その場合は、例のようにHandlesを追加することでクリックイベントが復帰します。

イベントに処理を追加する

イベントが発生した時の処理を追加します。イベントの追加で作成したサブルーチンに処理を追加します。処理の内容は以下の通りです。

  • フォームを読み込んだ時に初期化を行う。
  • Button1をクリックするとButton3及びTextBox1を使用許可する。
  • Button2をクリックするとButton3及びTextBox1を使用禁止する。
  • Button3はTextBox3に入力された文字をクリップボードにコピーする。
  • Button1~Button3の使用可能の状態表示をLightGreen、使用禁止の状態表示をLightBlueで行う。

フォームを読み込んだ時に初期化

Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
    Button1.Text = "開始"
    Button2.Text = "停止"
    Button3.Text = "テキストコピー"
    Button3.Enabled = False 'Button1の色で判断する場合は不要
    GroupBox1.Text = "操作盤"
    TextBox1.Enabled = False
End Sub

Form1_Load()関数はForm1が読み込まれた時に一度だけイベントが発生します。アプリの初期化が必要な場合はForm1_Load()関数に処理を追加します。

Button1~Button3及びGroupBox1のTextに文字を指定しています。プロパティに直接入力した場合はコードに追加する必要はありません。プロパティに直接入力したものと同じプロパティをコードで指定すると後着が優先となるのでコードが上書きします。

Button3のEnabledをFalseにするとボタン操作が使用禁止になり、Trueにするとボタン操作が使用許可になります。初期条件はTrueなので初期状態で使用禁止する場合はFalseを指定する必要があります。

Button1をクリック

Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
    Button1.BackColor = Color.LightBlue
    Button2.BackColor = Color.LightGreen
    Button3.Enabled = True 'Button1の色で判断する場合は不要
    Button3.BackColor = Color.LightGreen
    TextBox1.Enabled = True
End Sub

Button1を押すと開始になるためBackColorにColorの型で準備されているLightBlueを指定し、使用禁止の状態表示にします。

Button2は開始している状態では「停止」を待機します。使用可能の状態表示のため、BackColorにLightGreenを指定します。

Button3のボタン操作を許可するためEnabledをtrueを指定します。使用可能の状態表示のため、BackColorにLightGreenを指定します。またTextBox1の操作を許可しています。

Button2をクリック

Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click
    Button1.BackColor = Color.LightGreen
    Button2.BackColor = Color.LightBlue
    Button3.Enabled = False 'Button1の色で判断する場合は不要
    Button3.BackColor = Color.LightBlue
    TextBox1.Enabled = False
End Sub

Button2を押すと「停止」状態になるためBackColorにLightBlueを指定し、使用禁止の状態表示にします。

Button1は「開始」が押されるのを待機します。使用可能の状態表示のためBackColorにLightGreenを指定します。

Button3を操作禁止にするためEnabledにFalseを指定します。使用禁止の状態表示のため、BackColorにLightBlueを指定します。またTextBox1を操作禁止にします。

Button3をクリック

Private Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click

    If Button1.BackColor = Color.LightBlue Then
        If TextBox1.Text <> "" Then
            Clipboard.SetText(TextBox1.Text)
            MsgBox("クリップボードにコピーしました")
        End If
    End If

End Sub

Button1のBackColorの色がLightBlueであれば開始なので処理を行います。文字が入力されている場合はTextに文字が入力されています。Text文字が入力されていない場合はコピーできないので処理を行いません。

Textに文字が入力されている場合はテキストの内容をClipBoadのSetText()メソッドでクリップボードにコピーしています。MsgBox()メソッドでコピーしたことを通知します。クリップボードにコピーするとテキスト内の文字が一時保存されるためテキストファイルなどに貼り付けて使用することができます。

Enabledはコントロールの操作を許可/禁止するため、イベントが発生しなくなります。Button1~Button3はコントロールの操作を禁止していないため、イベントが常に発生する状態で待機します。イベント発生後にButtonの状態表示で処理を分岐させる方法です。

PR:技術系の通信教育講座ならJTEX

イベントの追加ができない事例(参考)

Buttonコントロールでイベントを追加ができない事例があります。イベントの追加で説明した方法でイベント一覧からHandlesを生成してもイベントが発生しないケースがあります。今後アップデートによって実装される可能性がありますが、2023年5月上旬では未実装です。

イベント一覧からDoubleClickを選択するとダブルクリックのイベントが生成されます。

Private Sub Button1_DoubleClick(sender As Object, e As EventArgs) Handles Button1.DoubleClick

End Sub

イベント一覧から生成しましたがプロパティのイベント一覧にはDoubleClickの一覧がないため実際はイベントが発生しません。

イベントを追加しても発生しない例
イベントを追加しても発生しない例

プロパティをイベント情報の表示に切り替えて追加できるイベントについて確認します。DoubleClickを確認するためA→Zを選択してアルファベット順に並び替えます。Clickイベントの欄には追加したイベントが登録されていることが確認できます。

Dの欄を順に確認してもDoubleClickのイベントが存在しないため登録することができません。そのためイベント一覧からDoubleClickを選択してHandlesを生成してもイベントが発生しません。

スポンサーリンク

動作確認(デバッグ)

デバッグ開始の方法
デバッグ開始の方法

イベントのコードを追加した後はデバッグを行います。デバッグは実際のアプリケーションの動作を模擬して実行するものです。デバッグの開始はエディタ上部の「▶buttonForm」(赤枠)をクリックすると開始します。

デバッグでのForm1
デバッグでのForm1(初期画面)

デバッグを開始するとForm1がアプリケーションとして表示されます。この表示はLoadイベントを処理した後、次のイベントの発生を待機している状態です。「開始」を押すと「テキストコピー」及び下のテキストボックスの操作が許可になり色が白くなります。

「停止(Button2)」を押すとテキストボックス及びテキストコピーが操作禁止になることが確認できます。

「開始」ボタン後の動作確認
「開始」ボタン後の動作確認

「開始」を押してテキストボックスに入力して動作確認を行います。任意の文字(例では、動作確認です。を入力)を入力し、「テキストコピー(Button3)」を押すとメッセージボックスで「クリップボードにコピーしました」の通知を行います。

テキストボックスの文字をコピーして一時保存している状態なのでテキストファイルやエクセルなどで貼り付けることができます。フォームのテキストボックスにCtrl+vで貼り付けた場合、「動作確認です。」が追加して貼り付けれます。

コードのデバッグを行う場合は、コードエディタでブレークポイントを置くことで一時的にプログラムを停止させることができます。

ブレークポイントでデバッグする方法
ブレークポイントでデバッグする方法

ブレークポイントはコードエディターの最左部分をクリックして●マークが表示されれば設置できています。例ではButton3がクリックされた時に発生したイベントの先頭部分にブレークポイントを置いています。この状態でButton3をクリックするとブレークポイントでプログラムが一時停止します。

F11を押すとステップ実行になるため1行ずつ内容を確認しながらデバッグを行うことができます。上部の「▶続行(C)」をクリックするとブレークポイント状態から通常の動作に復帰します。

関連リンク

VBでインストール先を指定できるインストーラを作成する方法を下記記事にまとめています。

VBでインストール先を指定するインストーラを作成する方法

マイクロソフトはVisual Studio以外にもVSCodeという便利なエディターを提供しています。下記リンクではVSCodeのインストールの仕方からC言語開発環境の作り方までをまとめています。

VSCodeをインストールしてC/C++の開発環境を作る

PR: 未経験OK、20代の理系に特化した就職、転職サービス UZUZ(ウズウズ)

最後まで、読んでいただきありがとうございました。

タイトルとURLをコピーしました