GUIの作成（1）
では、早速アプリケーションを作成してみましょう。
アプリケーションは、C1Sizerコントロールに9列×21行のグリッドを作成し、その中に4つのボタンコントロールとリッチテキストボックス、ラベルを配置します。
また、4つのボタンにアイコンを設定するためのImageListコントロールと、OpenFile、Color、Font、SaveFileの4つのDialogコントロールも使用します。
フォームの作成
では、順番にフォームを作成していきます。
フォームに、OpenFile、Color、Font、SaveFileの4つのDialogコントロールとImageListコントロールを配置し、ImageListコントロールに次の4つのアイコン画像を登録しておきます。
- ColorHS.png
- FontDialogHS.png
- OpenfolderHS.png
- SaveHS.png
① フォームにC1Sizerコントロールをドラッグ＆ドロップします。そして、DockプロジェクトをFillにします。
② スマートタグから「グリッドの編集」をクリックします。
③ 「行」ページが表示されているので、「追加」ボタンをクリックして「行20」まで追加します。
④ 「列」タブをクリックし、同じく「追加」ボタンをクリックして全部で「列8」まで追加します。そして、OKボタンをクリックしてエディタを閉じます。
⑤ 最初の列に、1つにつき2行を使ってButtonコントロールを4つ配置します。そして、最初の列と2列目の境界線をドラッグし、1列目の幅を広げます。
⑥ 配置したButtonの「ImageList」プロパティに「ImageList1」を設定し、以下のプロパティを設定します。
| コントロール | Text | ImageIndex |
|---|---|---|
| Button1 | ファイルを開く... | OpenfolderHS.png |
| Button2 | フォント... | FontDialogHS.png |
| Button3 | 文字色... | ColorHS.png |
| Button4 | 保存... | SaveHS.png |
そして、「ImageAlign」プロパティを「MiddleLeft」に設定し、それぞれのButtonコントロールのClickイベントハンドラを作成します。
⑦ グリッドの下から2行を使い、Labelコントロールを配置し適当な解説文を入力します。
また、BorderStyleプロパティを「Fixed3D」に、BackColorプロパティを「White」に設定します。
そして、下から2行目の上に境界線をドラッグして、Labelコントロールの領域を広げます。
⑧ RichTextBoxコントロールをフォームにドラッグアンドドロップし、残ったグリッド全体に広げます。
以上でフォームのレイアウトが出来上がりました。
