ファイル文字コード変換ツールを自作しよう（第2回・画面レイアウト作成編）

今回はプロジェクトの作成と、ユーザーコントロール以外の画面レイアウトを作成していきたいと思います。

この記事を読む前に、Visual Studio2019をまだインストールされていない方は、こちら　の記事を参考にインストールをお願いします。

また、インストール後のVisual Studio2019の起動方法はこちらの記事を、画面レイアウトの作成方法はこちらの記事をご覧ください。

プロジェクトを作ろう
Form.csの名前を変えよう
画面レイアウトを作ろう
イベントハンドラを作ろう
動かしてみよう
まとめ

プロジェクトを作ろう

今回はファイル文字コードを変換するツールなので、CharCodeChanger と言うプロジェクト名にします。

詳しい手順については、こちらの記事をご参照ください。

プロジェクトが出来上がったら、レイアウトの作成に移りましょう。

Form.csの名前を変えよう

Formのファイル名が Form1.cs になっているので、今までと同じようにMainForm.cs に変更したいと思います。

Visual Studio の右側にあるソリューションエクスプローラーから「Form1.cs」を右クリックし、表示されるメニューから「名前の変更」を選び、MainFormに変更します。

この時、間違って拡張子の「.cs」を消さないようにご注意ください。

ちなみに、「Form1.cs」を左クリックして選択状態になった後、再度左クリックすることで直接 Form1.cs を変更することも出来ます。

画面レイアウトを作ろう

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

後にユーザーコントロールを張り付けるので、その分のスペースは明けておいて下さいね。

コントロールが張り終わったら、今度は各コントロールに名前を付けていきます。

今回も今まで同様、MainForm以外は先頭に”ux”という接頭語を付加しています。

コントロールの役割（Labelを除く）	コントロールに付ける名前
プロジェクトが出来上がった際、最初に自動で作成されるWindow	MainForm
変換元ファイルの文字コード選択用ComboBox	uxTargeCharCode
変換先ファイルの文字コード選択用ComboBox	uxOutputCharCode
変換実行Button	uxExecute

続けてコントロールのプロパティに値を設定しましょう。

CSV結合ツールやCSV分割ツールでは、Windowフォームのサイズが固定という前提でしたが、今回はサイズが変更されても大丈夫なようにしたいと思います。

Anchor プロパティは、コントロールの上下左右の端っこを、あたかもアンカーを打ち付けたかのように固定にするプロパティです。

全てのコントロールは初期値として Top,Left という値が設定されており、左端と上端の位置が固定（Windowフォーム左上からの相対位置が変わらない）になっています。

更に詳しい情報についてはこちらの記事をご覧ください。

今回は、下記動画のような動作をしたいので、”文字コード”という文言を設定したLabelにも Anchor プロパティを設定しています。

では、下記表の通りにプロパティを設定して下さい。

コントロール名	プロパティ名	設定する値
MainForm	Text	ファイル文字コード変換
uxTargeCharCode	Anchor	Top, Right
uxOutputCharCode	Anchor	Top, Right
uxExecute	Text Anchor	変換実行 Top, Right
”文字コード”を設定したLabel	Anchor	Top, Right

設定の方法は各コントロールをクリックし、プロパティからAnchorを選び、値をTop,Right に変更します。

以上で画面レイアウトの作業は完了です。

イベントハンドラを作ろう

では、最後にイベントハンドラを作りましょう。

今回の画面はボタンが１つだけなのですが、Windowフォームが表示された時のイベントにも処理を書きたいので、Loadイベントハンドラと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 CharCodeChanger
{
    public partial class MainForm : Form
    {
        public MainForm()
        {
            InitializeComponent();
        }

        private void MainForm_Load(object sender, EventArgs e)
        {

        }

        private void uxExecute_Click(object sender, EventArgs e)
        {

        }
     }
}

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 CharCodeChanger

{

public partial class MainForm : Form

{

public MainForm()

{

InitializeComponent();

}

private void MainForm_Load(object sender, EventArgs e)

{

}

private void uxExecute_Click(object sender, EventArgs e)

{

}

動かしてみよう

では、実際に動かしてみましょう。

Visual Studio の上段にある「開始」ボタンをクリックして、プログラムを起動してください。

起動したら、Windowフォームのサイズを変更して、Anchorの設定どおりに右端にコントロールが吸着されているかご確認下さい。

ここでもしエラーが出た場合、Visual Stuido上でソースコードの不整合が発生している可能性があるので、こちらの記事の目次から「動かしてみよう」にジャンプして、書かれている内容を実行してみて下さい。

まとめ

如何でしたでしょうか。

今回はレイアウトエディタを使って

必要なコントロールを画面（Window）に配置
コントロールに名前を付ける
LoadイベントとClickイベントのハンドラを自動作成する

というところまで行いました。

次回はユーザーコントロールを作ります。