[C#] ブロック済IPアドレスの管理アプリを作る -プロジェクトとUI作成- [.NET]

こんにちはAzusaです。

今回から、ファイアウォールに設定しているブロック済IPアドレスの管理ツールをC#を使って開発していこうと思います。

初回である今回は、プロジェクトの作成から大まかなUIの作成までを行います。

Visual Studioをインストールしてみたけどイマイチ使い方がわからない方など、初心者向けに書いていくつもりですので、Windows Formsを使ったUIの作成や、そのUIへの操作に対してのプログラミングのやり方などの入り口になればと思います。

Visual Studioのインストール方法を知りたい方は下記記事をご覧くださいませ。

個人的に利用する目的かつ初心者へ向けての解説を中心とした記事ですので、入力項目のバリデーションやエラー処理については省いて記述しております。

ですので、当記事に記載されているコードをそのまま業務用アプリケーションの開発等に利用することは推奨されませんのでご注意ください。

プロジェクトの作成

まずはプロジェクトの作成です。

Visual Studioを起動して、右のペインから”新しいプロジェクトの作成”を選択し、プロジェクトテンプレートの中から”Windows フォーム アプリケーション (.NET Framework)”を選択します。

WindowsフォームアプリケーションにはVBのものとC#のものがあるのでC#のものを選択して”次へ”をクリックします。

次にプロジェクトの名称を決めます。

今回は”BlockList”としましたが、自分が判別できればどんなものでも構いません。

ついでにフレームワークを”.NET Framework 4.8″ に変更しておきました。

簡単なアプリなので、フレームワークの種類は初期で選択されている”.NET Framework 4.7.2″でも変わりはないかと思いますが、何か新しいほうが嬉しいので笑

Windows Formsの初期設定

選択したあとに”作成”をクリックするとプロジェクトが作成され、開発を始めることができるようになります。

真ん中にアプリのウィンドウが表示されていると思いますが、これがWindows Formsであり、左のツールボックスからパーツをドラッグして配置していくだけで簡単にUIが作成できます。

ですが、その前にアプリの標準となるフォントの設定とウィンドウサイズ・タイトルの設定だけ済ませましょう。

どこでもいいのでアプリのウィンドウの中をクリックします。

すると基本となるウィンドウの設定値が右下の”プロパティ”という部分に表示され、変更もできるようになります。

今後パーツを配置していく場合にも、そのパーツの設定を変更したいときは、対象のパーツをクリックして”プロパティ”の欄から必要な項目を変更していくことになるので、覚えておきましょう。

まず、Form1(メインのウィンドウの名前です)のプロパティの”Font”をクリックすると選択状態になって右側に”…”と表示が出るので、クリックして自分の好きなフォントに変更してください。

ここで選んだフォントが基本となって表示に使われるので、私はメイリオのレギュラー、16ポイントで設定しました。

次に”Size”を”1280, 1024″に変更すると、真ん中に表示されていたウィンドウの表示も大きくなります。

解像度によっては全て収まりきれずにスクロールバーが出るかと思いますが、気にしないでOKです。

ついでに最小サイズも同じ大きさにしたいので”MinimumSize”にも”1280,1024″を。

そして”Text”を”BlockList”に。

ここを変えると、中央のウィンドウ上部のバーに表示されていた”Form1″が”BlockList”に変わります。

表示される部分を変えるだけなので自分がわかれば好きな文字列にしてOKです。

上記4箇所の変更をすると下記画像のようになっているかと思います。

パーツの配置

さて、いよいよパーツを配置していきましょう。

まずツールボックスの中から”Button”を2つフォームの中にドラッグ・アンド・ドロップしてみると、”button1″と”button2″と書かれた2つのボタンが表示されます。

この2つのボタンをフォームの右上にドラッグして移動させてください。

そして1つをクリックした後にプロパティの中の”(name)”を”saveButton”に、”Text”を”保存”に変更します。

ボタンの表示が”保存”に変わったかと思います。

“(name)”に設定した文字列は後でコードを書くときの識別名ですので、現在は目に見える変化はありません。

そして同じように、もう1つのボタンの”(name)”を”endButton”に、”Text”を”終了”に変更すると、フォームの右上に保存ボタンと終了ボタンが表示されている状態になっているはずです。

この状態でVisual Studioのツールバーに表示されている”開始”と書かれた緑色の矢印をクリックしてみると、真ん中に表示されているフォームと同じアプリケーションが起動してきます。

ボタンも表示されているかと思いますが、まだ動作をコーディングしていないので、クリックしても何も起こりません。

終了するときは右上の✕で終了しましょう。

何となくですが、UIの作り方がわかっていただけたでしょうか?

パーツをドラッグしてフォームの上に配置→その後に必要なプロパティを編集

これだけですので、初めてプログラムを書く方も簡単にできるかと思います。

さて、先程のように”開始”をクリックして表示させたウィンドウのサイズを右下にマウスカーソルを合わせて変更してみましょう。

すると、右上においたボタンの位置は変わらず、大きくした場合は右に余白ができたりします。

UIとしてはサイズが変わっても右上に配置されていてほしいので、パーツの位置を決めている基準となる場所を右上に変えましょう。

ボタンをクリックしてプロパティの”Anchor”という項目が”Top, Left”になっていると思いますが、”Top, Right”に変更しましょう。

選択した際に右側に出る矢印をクリックすると、どこにアンカーがかかっているかを視覚的に選択することができます。

このアンカーの動作はUIを設計する上でも重要な要素になるので、どのように設定したらどのような動作をするのかを色々試してみることをおすすめします。

さて、どんどんパーツを置いてUIを形にしていきます。

“Label”を3つ、”TextBox”を2つ、”DateTimePicker”を1つ、”Button”を3つ、”DataGridView”を1つ配置します。

各パーツの変更したプロパティは以下です。

Label1 : “Text” → “CIDR :”

Label2 : “Text” → “日付 :”

Label3 : “Text” → “名称 :”

TextBox1 : “(name)” → “cidrBox”

TextBox2 : “(name)” → “nameBox”

DateTimePicker : “(name)” → “dateBox”, “Format” → “Short”, “ShowUpDown” → “true”

Button1 : “(name)” → “checkButton”, “Anchor” → “Top, Right”, “Text” → “チェック”

Button2 : “(name)” → “addButton”, “Anchor” → “Top, Right”, “Text” → “追加”

Button3 : “(name)” → “removeButton”, “Anchor” → “Top, Right”, “Text” → “削除”

DataGridView : “Anchor” → “Top, Bottom, Left, Right”

以上です。

この変更したパーツたちを以下の画像のように配置します。

上記のように配置できたら”開始”をクリックして実行してみてください。

一番大きな灰色がDataGridViewですが、サイズ変更するとちゃんとサイズに合わせて大きさが変わっているのがわかるかと思います。

さて簡単なUIの配置も終わったので、今回はここまでです。

最後は駆け足でしたが、よくわからなかった部分等あればコメントで頂けると嬉しいです。

次回はDataGridViewのカラムの追加や実際にデータを追加するところまでできたらいいなと思っております。

ではまた次回に~。

コメントを残す