視覚効果の高いユーザーインタフェースを持ったフォームの作成

PlusPak for Windows Forms 6.0Jのコントロールを使ったアプリケーションの作成

フォームのデザイン

　では、これらのコントロールを使ってフォームをデザインしていきましょう。

　今回は、フォームのデザインが中心で、コードの実装はほとんどありません。フォームはサイズを「830, 530」に設定し、FormBorderStyleプロパティを「Fixed3D」に設定しておきます。フォームのBackColorプロパティは「White」にします。

矢印マークが移動するラジオボタンの作成

　最初に、矢印マークが移動するGcRadioButtonコントロールを作成します。このGcRadioButtonコントロールは、未チェック時、マウスホバー時、チェック時の3つの状態でイメージ画像を変え、ユーザーに今どの操作をしているのかがわかるようにします。

　使用する画像は次の3つです。

• normal_arrow.jpg
• check_arrow.jpg
• uncheck_hover_arrow.jpg

作成するGcRadioButtonコントロール

　ツールボックスから標準コントロールの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コントロールをコンテナにし、くぼんだ額縁のような形状でラジオボタンを囲むようにします。

作成する鉛筆マークが移動するGcRadioButtonコントロール

　ツールボックスから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にし、デフォルトで選択されている状態にしてできあがりです。