フォームのデザイン
では、これらのコントロールを使ってフォームをデザインしていきましょう。
今回は、フォームのデザインが中心で、コードの実装はほとんどありません。フォームはサイズを「830, 530」に設定し、FormBorderStyleプロパティを「Fixed3D」に設定しておきます。フォームのBackColorプロパティは「White」にします。
矢印マークが移動するラジオボタンの作成
最初に、矢印マークが移動するGcRadioButtonコントロールを作成します。このGcRadioButtonコントロールは、未チェック時、マウスホバー時、チェック時の3つの状態でイメージ画像を変え、ユーザーに今どの操作をしているのかがわかるようにします。
使用する画像は次の3つです。
- normal_arrow.jpg
- check_arrow.jpg
- uncheck_hover_arrow.jpg
ツールボックスから標準コントロールのGroupBoxコントロールをフォームにドラッグ＆ドロップします。Textプロパティを「学習アイテム」に変更し、フォントサイズを14ピクセルにします。
GroupBoxコントロールの中に、GcRadioButtonコントロールを3つドラッグ＆ドロップし、Textプロパティを以下のように変更します。
| コントロール | 設定値 |
| GcRadioButton1 | 単語マスター |
| GcRadioButton2 | センテンスレッスン |
| GcRadioButton3 | 記憶力テスト |
3つのGcRadioButtonコントロールを一括選択し、プロパティウィンドウの「CheckMark」プロパティを展開します。6つの画像設定プロパティに、以下の画像ファイルを設定します。すべてのGcRadioButtonコントロールに同じ画像を設定する場合は、このように一括選択の状態にしてプロパティを操作すると効率的です。
| プロパティ | 設定値 |
| CheckedHoverImage | check_arrow.jpg |
| CheckedNormalImage | check_arrow.jpg |
| CheckedPressedImage | check_arrow.jpg |
| UncheckedHoverImage | uncheck_hover_arrow.jpg |
| UncheckedNormalImage | normal_arrow.jpg |
| UncheckedPressedImage | normal_arrow.jpg |
「CheckMarkSize」プロパティの値を「24, 24」に変更し、イメージ画像を大きくします。コントロール「GcRadioButton1」だけCheckedプロパティをTrueにし、デフォルトで選択されている状態にしてできあがりです。
鉛筆マークが移動するラジオボタンの作成
今度は、もう1つのGcRadioButtonコントロールを作成します。こちらは、選択したGcRadioButtonコントロールだけに鉛筆のマークが付き、ラジオボタンをクリックするたびに鉛筆マークが移動する形態のラジオボタンを作成します。
このラジオボタングループは、GcContainerコントロールをコンテナにし、くぼんだ額縁のような形状でラジオボタンを囲むようにします。
ツールボックスからGcContainerコントロールをフォームにドラッグ＆ドロップし、BorderStyleプロパティを「Fixed3D」にします。GcLabelコントロールをGcContainerコントロールの中に配置し、次のプロパティを設定します。
| プロパティ | 設定値 |
| Text | 学習モード |
| TextEffect | Raised |
| ForeColor | 192, 0, 0 |
| FontSize | 14pt |
続いて、GcRadioButtonコントロールを3つ、GcContainerコントロールの中に配置し、Textプロパティを以下のように変更します。そして、フォントサイズを「14」に、「Bold」を「True」に、ForeColorを「Blue」に変更します。
| コントロール | 設定値 |
| GcRadioButton4 | 短縮モード |
| GcRadioButton5 | ノーマルモード |
| GcRadioButton6 | フルモード |
プロパティウィンドウの「CheckMark」プロパティを展開し、次のプロパティにイメージ画像を設定します。なお、ノーマル状態（非選択状態）ではイメージ画像は何も表示しないようにしますので、白色の画像ファイルを設定します。
| プロパティ | 設定値 |
| CheckedHoverImage | pen.jpg |
| CheckedNormalImage | pen.jpg |
| CheckedPressedImage | pen.jpg |
| UncheckedHoverImage | non_image.jpg |
| UncheckedNormalImage | non_image.jpg |
| UncheckedPressedImage | non_image.jpg |
「CheckMarkSize」プロパティの値を「24, 24」に変更し、イメージ画像を大きくします。そして、コントロール「GcRadioButton5」だけCheckedプロパティをTrueにし、デフォルトで選択されている状態にしてできあがりです。
