さて、いよい今回からVisual Studio2019 を使って、画面レイアウトを作成していきたいと思います。
この記事を読む前に、Visual Studio2019をまだインストールされていない方は、こちら の記事を参考にインストールをお願いします。
また、インストール後のVisual Studio2019の起動方法は こちら の記事を、画面レイアウトの作成方法は こちら の記事をご覧ください。
プロジェクトを作ろう
さて、プログラムを作る際は、プロジェクト名というものを決める必要があります。
プロジェクト名はプログラムの実行ファイル名にもなりますので、分かりやすい名前を付けます。
プロジェクト名の変更は出来なくは無いですが、結構厄介なのと、少しでも失敗するとビルドすらできなくなるので、ここは注意して下さい。
さて、今回はパスワードを管理するものになるので、PasswordManager と言うプロジェクト名にします。

実際の手順は、こちら の記事をご参照ください。
プロジェクトを入力し、プロジェクトが出来上がったら、いよいよレイアウトの作成に移ります。
Form.csの名前を変えよう
プロジェクトが出来上がった状態では、Formのファイル名が Form1.cs になっています。
別にこのままでも支障はないのですが、Form1という意味のないファイル名だと気持ちが悪いので、適切な名前に変えたいと思います。
名前を変える理由は、プログラムが分かりやすくなるからです。
フォームが1個だけなら、あまり関係は無いのですが、複数のフォームを使うようなプログラムだと、フォーム毎に役割を持たせることになります。
この時、それぞれのフォームに適切な名前を付けることで、ソリューションエクスプローラーから識別しやすくなります。
従って、ファイル名はフォームの役割が分かるような、それっぽいものを付ければよいのですが、フォームクラスだと判断できるように名前の一部に Formを付けた方が、より分かりやすくなります。
例えば、 PasswordManagerForm とかですね。
ただ、プログラム毎に名前を変えるのも面倒なので、MainFormという名前を私はよく使います。
名前の変更方法は、Visual Studio の右側にあるソリューションエクスプローラーから「Form1.cs」を右クリックし、表示されるメニューから「名前の変更」を選び、MainForm 又は 好きな名前に変更して下さい。

画面レイアウトを作ろう
Visual Studioのレイアウトエディターが起動したら、下記の通り Combobox、Label、Button、DataGridVIew のコントロールを張り付けて下さい。

コントロールが張り終わったら、今度は名前を付けていきます。
この時、そのコントロールがどういう役割なのかが判断できるような名前を付けます。
なお、Labelについては”カテゴリ”という固定文字を表示するだけで、特にプログラムで何かするわけではないので、名前は付けません。
また、MainForm以外は先頭に”ux”という文字を付加していますが、これは接頭語と呼ばれるものです。
画面操作が伴うプログラミングにおいては、コントロールに対して多くのプログラムコードを記述します。
その際、他の変数と区別した方がプログラムが書きやすく、あとで読み返した時も見やすいので、先頭に”ux”という接頭語を付けています。
ちなみに、”ux”とは”user experience=ユーザー体験” の略です。
コントロールの役割 | コントロールに付ける名前 |
---|---|
プロジェクトが出来上がった際、最初に自動で作成されるWindow | MainForm |
”カテゴリ”の文言を表示するLabel | なし |
カテゴリを選択するComboBox | uxCategory |
IDの取得を行うButton | uxIdToClip |
パスワードの取得を行うButton | uxPwdToClip |
編集モードの切り替えButton | uxEditMode |
ファイル保存のButton | uxSave |
ID、パスワード等の一覧表示と一覧編集用DataGridView | uxIdPasswordGrid |

この接頭語ですが、人によっては Button や ComboBox など、個々のコントロールも識別する目的で、btnIdToCLipや、cmbCategory という風にする人もいます。
私も以前はこの方法だったのですが、この記事を読んでから “ux”を接頭語にするようになりました。
イベントハンドラを作ろう
では、最後にイベントハンドラを作ります。
作ると言っても特にプログラムコードを書く必要はありません。
下記の図を参考に、MainForm、ComboBoxコントロールと4つのButtonコントロールについて、①~⑥の順にダブルクリックしてください。
ダブルクリックするたび、コードエディターに自動的に切り替わりますが、気にせずレイアウトエディタを選んで、次のコントロールをダブルクリックして下さい。

順番を間違えてクリックしても問題はありませんが、次回以降の説明と合わせるため、コードエディター上での編集により順番を入れ替えて頂く方が良いかと思います。
ここまでの操作で、下記のプログラムコードが自動的に作られたはずです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
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 PasswordManager { public partial class MainForm : Form { public MainForm() { InitializeComponent(); } private void MainForm_Load(object sender, EventArgs e) { } private void UxCategory_SelectedIndexChanged(object sender, EventArgs e) { } private void UxIdToClip_Click(object sender, EventArgs e) { } private void UxPwdToClip_Click(object sender, EventArgs e) { } private void UxEditMode_Click(object sender, EventArgs e) { } private void UxSave_Click(object sender, EventArgs e) { } } } |
動かしてみよう
レイアウトとイベントハンドラが出来上がったら、実際にプログラムを動かしてみましょう。
動かし方は簡単で、画面上のやや左側にある「開始」ボタンをクリックするだけです。

この、プログラムを動かす行為を「実行する」と言います。
プログラムを実行すると、以下の様が画面が表示されると思います。

イベントハンドラを作成する作業において、一度作成したイベントハンドラをコードエディタから削除した場合、Visual Studio内で不整合が発生し、エラーになることがあります。
この場合、Visual Studio の最下段に以下の様なエラーメッセージが表示されると思います。

このエラーが表示されたら、エラー行をダブルクリックして下さい。
Visual Stuidoが自動生成したソースコードが表示され、不整合が起きている部分が波線のアンダーラインで表示されます。
この行を削除することで、エラーは解決されるはずです。

まとめ
如何でしたでしょうか。
今回はレイアウトエディタを使って
- 必要なコントロールを画面(Window)に配置
- コントロールに名前を付ける
- コントロール(ComboBox,Button)をダブルクリックし、イベントハンドラを自動作成する
というところまで行いました。
コントロールの名前は大文字小文字含め、一字一句間違わないようご注意ください。
でないと、次回掲載するソースコードを張り付けても、プログラムが正しく動きませんので。