CodeZine(コードジン)

特集ページ一覧

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

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2012/08/01 00:00
目次

フォームのデザイン

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

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

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

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

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

  • normal_arrow.jpg
  • check_arrow.jpg
  • uncheck_hover_arrow.jpg
作成するGcRadioButtonコントロール
作成する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コントロール
作成する鉛筆マークが移動する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にし、デフォルトで選択されている状態にしてできあがりです。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

バックナンバー

連載:ComponentZine(PlusPak)

もっと読む

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5