CodeZine(コードジン)

特集ページ一覧

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

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

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

 PlusPak for Windows Forms 6.0Jは、Windowsアプリケーション開発のユーザーインターフェース設計を総合的にサポートするコントロールセットです。今回は、標準コントロールだけでは実装できない、自由度の高いフォームを持つアプリを作成してみました。

はじめに

 アプリケーションの使いやすさや楽しさは、何と言ってもフォームのデザインで感じることができます。標準コントロールのボタンやラジオボタン、チェックボックスやチェックマークはちょっと味気ないですね。もう少し自由なデザインができれば、フォームを綺麗に飾ることができます。

 PlusPak for Windows Forms 6.0Jは、Windowsアプリケーション開発のユーザーインターフェース設計を総合的にサポートするコントロールセットです。収録されているコントロールは、標準コントロールでは実装できない細やかな制御を実現できます。

 そこで今回は、PlusPak for Windows Forms 6.0Jのコントロールを使用して、標準とは一味違うフォームを作成してみました。

ボタン、ラジオボタン、チェックボックスに好きな画像を割り当てられる
ボタン、ラジオボタン、チェックボックスに好きな画像を割り当てられる
マウスの動作に反応して画像を切り替えて表示できる
マウスの動作に反応して画像を切り替えて表示できる

対象読者

 Visual Basic、Visual C# 2010を使ってプログラムを作ったことのある人

必要な環境

 Visual Basic 2010、Visual C# 2010、Visual Studio 2010でプログラムが作れる環境。なお、本プログラムはWindows 7(64bit)で動作するVisual Studio 2010を使用して作成し、動作確認を行っています。

プログラム実行時の注意事項

 PlusPak for Windows Forms 6.0Jのコントロールを使って作成したアプリケーションを配布する場合、PlusPak for Windows Forms 6.0Jのアセンブリファイルを添付する必要があります。これは、Common Language RuntimeのDLLをアプリケーションと一緒に配布するのと同じです。

 本記事のサンプルアプリケーションを正常に動作させるためには、次のファイルをインストールする必要があります。

ファイル名 説明
GrapeCity.Win.PlusPak.v60.dll 本体アセンブリ
GrapeCity.Win.PlusPak.v60.resources.dll 本体アセンブリのサテライトアセンブリ(

 上記のファイルを、プログラムを実行するフォルダに格納します。.NET Framework 2.0から追加されたクラスやメンバを使用しているため、バージョン2.0以上の.NET Frameworkがインストールされていることが必須条件です。

※日本語表示の設定

 ユーザーインターフェースやエラーメッセージを日本語で表示するためには、本体アセンブリファイルと共にサテライトアセンブリファイルを配布する必要があります。本体アセンブリファイルを配布したフォルダに「ja」という名前のフォルダを作成して、サテライトアセンブリファイルをコピーしてください。

コンポーネントのインストール

 この記事の手順を試すには、Visual Studio、Visual Basic、Visual C#の開発環境にComponentOne Studio Enterprise 2012Jをインストールする必要があります。インストーラは、グレープシティのWebページからダウンロードできます。

 製品のトライアル版一覧ページにてダウンロードしたい製品にチェックを入れ、ページ右上部の[申込フォーム]をクリックしてグレープシティのWebサイトへ必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したEメールが送られてきますので、ここからダウンロードします。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールの追加

 インストールが終了したら、ツールボックスに専用のタブを作成し、プロジェクトに使用するコントロールを追加します。追加するのは、アセンブリ名が「GrapeCity.Win.PlusPak.v60」の「GcRadioButton」「GcContainer」「GcShapeButton」「GcCheckBox」「GcLabel」の5つのコントロールです。

アセンブリ名が「GrapeCity.Win.PlusPak.v60」の「GcRadioButton」「GcContainer」「GcShapeButton」「GcCheckBox」「GcLabel」コントロールを選択する
アセンブリ名が「GrapeCity.Win.PlusPak.v60」の「GcRadioButton」「GcContainer」「GcShapeButton」「GcCheckBox」「GcLabel」コントロールを選択する

フォームの作成

 今回作成するフォームでは、PlusPak for Windows Forms 6.0Jのコントロールと標準コントロールの両方を使用します。コントロールに使う画像はグラフィックスソフトとMicrosoft PowerPointを使用して作成しています。全部で13の画像を使うため、プロジェクトのリソースにインポートしておきます。

使用する画像をプロジェクトにリソースとしてインポートしておく
使用する画像をプロジェクトにリソースとしてインポートしておく

GUIのデザイン

 使用するコントロールは、標準コントロールの「PictureBox」「GroupBox」およびPlusPak for Windows Forms 6.0Jの「GcRadioButton」「GcContainer」「GcShapeButton」「GcCheckBox」「GcLabel」コントロールです。PictureBoxコントロールは2つ使用するので、それぞれに以下の画像を設定しておきます。PlusPak for Windows Forms 6.0Jのコントロールの設定については、フォームを作成しながら説明します。

プロパティ 設定値
PictureBox1 logo.jpg
PictureBox2 english.jpg
作成したフォームのデザイン
作成したフォームのデザイン

PlusPak for Windows Forms 6.0Jのコントロールについて

 PlusPak for Windows Forms 6.0Jは、ボタン、チェックボックス、ラジオボタン、コンボボックス、ラベル、タブなどおなじみの標準コントロールに加え、カレンダー、電卓、カラーピッカー、フォントピッカー、バーコード、バルーンチップ、キーロック制御、スタイル設定といった機能を拡張したものや、PDFライブラリおよびPropertyManagerアドインなど、多彩な機能を持ったコントロールで構成されています。

 PlusPakのコントロールを使うと、エンドユーザーにとって快適でインタラクティブな操作と美しい外観をもつユーザーインターフェースを提供できます。

PlusPak for Windows Forms 6.0Jの構成

 PlusPak for Windows Forms 6.0Jは、下記のコントロール、ライブラリ、Visual Studioアドインにて構成されています。

名前 コントロール、ライブラリ、アドインの内容
GcBalloonTip バルーンチップを表示
GcBarCode バーコードを生成
GcButton 拡張ボタンを表示
GcCalculator メモリ機能付きの四則演算電卓を表示
GcCalendar 和暦、六曜、会計年度対応のカレンダーを表示
GcCheckBox チェックマークのカスタマイズができる拡張チェックボックスを表示
GcCheckedGroupBox チェックボックス専用のグループボックスを表示
GcClassicFunctionKey クラシックな外観とレイアウト機能を持つファンクションキーを表示
GcColorPicker 色を選択
GcComboFrame 独自のドロップダウンウィンドウを構築できるコンボフレームを表示
GcContainer 子コントロールにラベルと立体表示を追加できる拡張パネルを表示
GcDropDownButton ドロップダウンメニューを表示する拡張ボタンを生成
GcFlowLayoutContainer 子コントロールにラベルと立体表示を追加できる拡張フローレイアウトパネルを表示
GcFontPicker フォントを選択
GcFunctionKey 画面上に仮想的なファンクションキーを構築
GcKeyLock Caps Lock、Num Lock、Scroll Lockキーを制御するコンポーネントを表示
GcLabel 文字の縦書き、均等割付などができる拡張ラベルを表示
GcMdiTabControl MDIフォームをタブ形式に変換して表示
GcProgressBar 進捗状況を視覚的に表示する拡張プログレスバーを表示
GcRadioButton チェックマークのカスタマイズができる拡張ラジオボタンを表示
GcRadioGroupBox ラジオボタン専用のグループボックスを表示
GcShapeButton 形状を自由に定義できる拡張ボタンを表示
GcSplitButton GcButtonとGcDropDownButton の機能を同時に揃えた拡張ボタンを表示
GcStylePlus フォーム上のコントロールの動的外観スタイルを容易に設定できるコンポーネントを表示
GcTabControl 豊富なスタイルとカスタマイズ機能を搭載した拡張タブを表示
PDF PDFファイルの作成機能を提供するライブラリ
PropertyManager プロパティの設定値をコピー、保存できるVisual Studio IDE用アドイン
代表的なコントロールの使用例(ヘルプより抜粋)
代表的なコントロールの使用例(ヘルプより抜粋)

使用した各コントロールの概要

 今回は、次のコントロールを使用してフォームをデザインしています。

  • GcRadioButton
  • GcCheckBox
  • GcContainer
  • GcShapeButton
  • GcLabel

GcRadioButtonコントロール

 GcRadioButtonは、標準のRadioButtonに比べ、様々な外観設定やチェックボックスのカスタマイズ機能を追加した拡張ラジオボタンコントロールです。

 カスタム画像を用いてチェックマークを自由に定義でき、チェック状態、マウスホバー、ボタン押下の動作に応じてそれぞれのイメージを表示できます。また、チェックマークのサイズを文字のフォントに揃える/任意に指定することも可能です。

 GcRadioButtonコントロールのチェックマークをカスタマイズするには、プロパティウィンドウでCheckMarkプロパティを開き、各メンバに画像を設定します。複数のGcRadioButtonコントロールに同じチェックマークイメージを定義したいときは、対象のコントロールをすべて選択し、プロパティを一括して設定すると効率的です。

 次の一覧は、CheckMarkプロパティで定義できる各状態のプロパティとそれに対応する状態です。

プロパティ 状態
CheckedHoverImage チェック状態で、マウスカーソルがコントロールの上に置かれている
CheckedNormalImage チェック状態で、コントロールは通常
CheckedPressedImage チェック状態で、マウスボタンがコントロールの上でクリックされた時
UncheckedHoverImage 未チェック状態で、マウスカーソルがコントロールの上に置かれている
UncheckedNormalImage 未チェック状態で、コントロールは通常
UncheckedPressedImage 未チェック状態で、マウスボタンがコントロールの上でクリックされた時

 例えば、「チェックされていない時」「マウスポインタを重ねた時」「チェックされた時」の画像をそれぞれ変えたい場合は、3つの画像を用意し、図のようなプロパティに設定します。

「チェックされていない時」「マウスポインタを重ねた時」「チェックされた時」の画像を設定
「チェックされていない時」「マウスポインタを重ねた時」「チェックされた時」の画像を設定
プロパティの設定
プロパティの設定

 チェックされていない時とチェックされた時の2つの状態の画像をそれぞれ変えたい場合は、CheckedxxプロパティとUncheckedxxプロパティのそれぞれに同じ画像を設定します。チェックされていない時に何も表示したくない場合は、コントロールの背景色と同じ色の画像を設定します。なぜなら、何も画像を設定しないとデフォルトのマーク画像が自動的に表示されるようになっているからです。

チェックの時だけ画像を表示したい場合。Uncheckedxxプロパティには白い画像を設定し、デフォルトのマークが表示されないようにしている
チェックの時だけ画像を表示したい場合。Uncheckedxxプロパティには白い画像を設定し、デフォルトのマークが表示されないようにしている
プロパティの設定
プロパティの設定

 また、個々のラジオボタンに異なるイメージを設定することもできます。内容に適したイメージを設定することで、エンドユーザーがより直感的に認識できます。

 チェックマークのサイズを変更するには、CheckMarkAutoSizeとCheckMarkSizeプロパティを使用します。CheckMarkAutoSizeプロパティをTrueに設定したとき、チェックマークはコントロールのフォントの高さに応じて自動的に調整されます。

 GradientEffectプロパティを用いて、コントロールの背景にグラデーション効果を施すこともできます。GradientEffectクラスのStyleプロパティでスタイルを設定し、Directionプロパティでグラデーションの方向を設定します。StartColorプロパティでグラデーションの開始色を設定し、EndColorプロパティで終了色を設定します。

 設計時に、「グラデーションエディタ」を使うことで、容易にグラデーション効果を編集できます。グラデーションエディタは、プロパティウィンドウよりGradientEffectプロパティを選択して、右側に表示されるボタンをクリックして表示します。

グラデーションエディタ
グラデーションエディタ

 さらに、文字の均等割付や方向回転など高度なテキスト表示機能を持っており、これらの機能はTextAppearanceプロパティを使って設定します。

 文字を均等割付に配置するには、OrientationTextAppearanceのTextJustifiedプロパティをDistributed(均等割付)か、DistributedWithSpace(両端にスペースを入れた均等割付)に設定します。文字を回転するには、RotationTextAppearanceを使用します。回転の角度はAngleプロパティで設定し、設定可能な範囲は「-90~90」です。

 ほかにも、OrientationTextAppearance/RotationTextAppearanceを使用して、TextEffectプロパティで文字を立体的に表示できます。表示の種類にはInset(強いくぼみ)、InsetLite(軽いくぼみ)、Raised(強い浮き出し)、RaisedLite(軽い浮き出し)があります。

GcCheckBoxコントロール

 GcCheckBoxは、標準コントロールに様々な外観設定やチェックボックスのカスタマイズ機能を追加した拡張チェックボックスコントロールです。カスタム画像を用いてチェックマークを自由に定義でき、チェックの状態、マウスホバー、ボタン押下の動作に応じてそれぞれのイメージを表示できます。また、チェックマークも文字のフォントサイズに揃える、任意に指定することも可能です。

 チェックマークをカスタマイズするには、プロパティウィンドウでCheckMarkプロパティを開いて、各メンバに画像を設定します。複数のGcCheckBoxに同じチェックマークイメージを定義したいときは、対象のコントロールをすべて選択して、設定を行うと効率的です。この設定は、GcRadioButtonコントロールでの画像設定とよく似ています。

 次の一覧は、チェックマークで定義できるメンバと、それに対応する状態の説明です。

プロパティ イメージが表示される状態
CheckedHoverImage チェックの状態がチェックで、マウスカーソルがコントロールの上に置かれている
CheckedNormalImage チェックの状態がチェックで、コントロールが通常
CheckedPressedImage チェックの状態がチェックで、マウスボタンがコントロールの上でクリックされた
IndeterminateHoverImage チェックの状態が不確定で、マウスカーソルがコントロールの上に置かれている(ThreeStateプロパティがTrueのときのみ有効)
IndeterminateNormalImage チェックの状態が不確定で、コントロールが通常(ThreeStateプロパティが True のときのみ有効)
IndeterminatePressedImage チェックの状態が不確定で、マウスボタンがコントロールの上でクリックされた(ThreeStateプロパティがTrueのときのみ有効)
UncheckedHoverImage チェックの状態が未チェックで、マウスカーソルがコントロールの上に置かれている
UncheckedNormalImage チェックの状態が未チェックで、コントロールが通常
UncheckedPressedImage チェックの状態が未チェックで、マウスボタンがコントロールの上でクリックされた

 カスタム画像を設定しない状態では、デフォルトの画像イメージが適用されます。そのため、HoverImage、PressedImageプロパティにNormalImageプロパティと異なるイメージを使用する必要がなくても、NormalImageと同じ画像で設定してください。

 チェックマークのサイズを変更するには、CheckMarkAutoSize、CheckMarkSizeプロパティを使用します。CheckMarkAutoSizeプロパティをTrueに設定すると、チェックマークはコントロールのフォントの高さに応じて自動的に調整されます。任意のサイズを指定したい場合は、CheckMarkAutoSizeプロパティをFalseに設定し、CheckMarkSizeプロパティに値を設定します。

 今回のプログラムでは、チェックされていない状態(ノーマル表示)、マウスポインタを重ねた時の状態、チェックされた時の状態、の3つの状態の画像を設定しています。

チェックされていない状態(ノーマル表示)、マウスポインタを重ねた時の状態、チェックされた時の状態、の3つの状態の画像を設定している
チェックされていない状態(ノーマル表示)、マウスポインタを重ねた時の状態、チェックされた時の状態、の3つの状態の画像を設定している
使用した画像
使用した画像

 GcCheckBoxコントロールも、前述したGcRadioButtonコントロールと同様グラデーション効果による塗りつぶしや、文字の均等割付/方向回転、文字の立体表示など、GcRadioButtonコントロールと同様な文字設定機能を持っています。

GcContainerコントロール

 GcContainerコントロールは、Visual Studio標準のPanelコントロールの機能に、子コントロールへのラベルの追加と立体表示機能を追加したものです。これらの機能に加え、GradientEffectプロパティによる背景のグラデーションによる塗りつぶしや、PatternEffectプロパティによる模様も設定できます。また、SingleBorderColorプロパティで境界線の色を設定することも可能です。

 子コントロールの3D表示効果では、GcContainerコントロール上の全てのコントロールに同じ効果を適用する方法と、個々のコントロールにそれぞれ異なる効果を適用する方法があります。

 全てのコントロールに同じ効果を適用する場合は、ApplyBevelEffectプロパティをAllに設定し、3D効果の各部位の設定はApplyBevelEffectプロパティが参照するBevelEffectクラスのメンバにて行います。

プロパティ 説明
BackColor3D 表示領域全体の背景色
BorderColor 境界線の色
BorderStyle 境界線のスタイル(なし、単線、3D)
Inner 内側ベベルのスタイル(色、幅、明るさ、暗さ)
Margins 子コントロールとの間隔
Outer 外側ベベルのスタイル(色、幅、明るさ、暗さ)
Spacing 内側ベベルと外側ベベルの間隔
ShadowColor ドロップシャドウの色
ShadowDarkness ドロップシャドウの明るさ
ShadowWidth ドロップシャドウの幅
3D表示効果の各プロパティ(ヘルプより抜粋)
3D表示効果の各プロパティ(ヘルプより抜粋)

 GcContainerコントロール上に配置したコントロールに対し、キャプションを追加できます。キャプションの文字はSetCaptionTextメソッドで設定します。キャプションのスタイルも、GcContainerコントロール上の全てのコントロールに同じスタイルを適用する方法と、個々のコントロールにそれぞれ異なるスタイルを適用する方法があります。キャプションのスタイルの適用方法はApplyCaptionFormatプロパティにより行います。

 全てのコントロールに同じスタイルを適用する場合は、ApplyCaptionFormatプロパティをAllに設定します。また、スタイルの各設定はCaptionFormatプロパティが参照するCaptionFormatクラスのメンバにより行います。

プロパティ 説明
BackColor キャプションの背景色
Font フォント
ForeColor キャプションの文字色
Orientation コントロールに対するキャプションの位置(左、上)
Size キャプションの表示領域のサイズ
Spacing キャプションとコントロールの間隔
TextEffect 文字の3D効果(フラット、強いくぼみ、強い浮き出し、くぼみ、浮き出し)
TextHAlign 文字の水平方向の配置
TextVAlign 文字の垂直方向の配置(タブと同様に均等割付も可能)
WrapMode ワードラップ
キャプションの設定とテキストエフェクト(ヘルプより抜粋)
キャプションの設定とテキストエフェクト(ヘルプより抜粋)

GcShapeButtonコントロール

 GcShapeButtonは、透過画像を用いてボタンの形状そのものを自由にカスタマイズできる拡張ボタンコントロールです。カスタム画像の透過部分(Alpha チャンネル=0)を切り取り、非透過部分のみボタンのユーザーインターフェースに使用します。さらに、アクティブ、マウスホバー、ボタン押下、無効状態にそれぞれのイメージを指定できるため、多彩な表現力を提供します。

 GcShapeButtonは、表示しているイメージの非透過部分のみ有効になります。コントロール内で非透過部分に囲まれた透過部分でも、ボタン外部の無効領域になります。設計時に無効領域(透過部分)をクリックしても、コントロールは選択されません。実行時に、無効領域はClickやEnterなどボタンの関連イベントを発生しません。

ボタンの動作範囲(ヘルプより抜粋)
ボタンの動作範囲(ヘルプより抜粋)

 ボタンに使用する画像は、既存のイメージファイルを使うか、透過画像を作成できるイメージ編集ツールでデザインします。色彩の変更や凹凸効果を簡単に施せるツールであれば、非常に手軽に作成できます。

 GcShapeButtonコントロールの使い方はいたって簡単です。コントロールの外観に使用したい画像を用意し、プロパティウィンドウでActiveImage、DefaultImage、DisableImage、HoverImage、NormalImageおよびPressedImageプロパティに設定するだけです。コントロールは、ボタンの状態に応じて設定した画像を表示します。

 次の一覧は、これらのプロパティに対応する状態の説明です。

プロパティ 状態
ActiveImage ボタンが有効で、フォーカスがコントロールにある
DefaultImage ほかのイメージが未設定(Null)のときにデフォルトで使用される
DisableImage ボタンが無効(Enabled=false)
HoverImage ボタンが有効で、マウスカーソルがコントロールの上に置かれている
NormalImage ボタンが有効で、フォーカスがコントロールにない
PressedImage ボタンが有効で、マウスボタンがコントロールの上でクリックされた

 設定する画像イメージは、GcRadioButtonコントロールのマウス操作によるチェックマーク画像の設定とよく似ています。 ボタンの場合は、最低でもクリック前、マウスホバー、クリックした時の3つの動作ポジションに対する画像を用意し、各プロパティに設定します。GcShapeButtonに設定したイメージは、コントロールの左上揃えに配置されます。イメージのサイズがコントロールより大きい場合は、表示しきれない部分はカットされます。

 コントロールからイメージのサイズを変更することはできません。そのため、事前にイメージのサイズを適宜に調整する必要があります。AutoSizeプロパティを使って、コントロールのサイズをイメージに合わせるよう設定することが可能です。実行時に、FitSizeToStateImageメソッドを使い、イメージに合わせてコントロールのサイズを変更することもできます。

ボタンの動作状態に合わせて画像を設定する
ボタンの動作状態に合わせて画像を設定する
今回のプログラムでのGcShapeButtonコントロールの画像設定
今回のプログラムでのGcShapeButtonコントロールの画像設定
使用した画像
使用した画像

GcLabelコントロール

 GcLabelコントロールは、Visual Studio標準のラベルコントロールの機能に加えて、文字の「均等割付」と「縦表示」の機能を追加したコントロールです。文字の均等割付は GcLabel.TextHAlignプロパティを「Justify」か「JustifyWithSpace」(両端にスペースを入れた均等割付)に設定します。

 文字の縦表示はGcLabel.TextOrientationプロパティを「Downward」か「Upward」に設定します。また、漢字やひらがななど縦書きに適した文字だけを縦に表示する場合は、VerticalFarEastプロパティやHorizontalRotatedFarEastプロパティを使用します。

 WrapModeプロパティを使用すると、文字列を折り返して表示できます。設定値はTextWrapMode型です。

WrapModeの値 説明
0 - NotSet ラップモードは自動的に決定
1 - NoWrap 矩形内の書式指定時に、行間のテキストのラップを無効にする
2 - WordWrap テキストを最も近い単語に整えるよう指定
3 - CrLfWrap テキストをCrLfに整えるよう指定

 TextEffectプロパティを使って、文字の3D表示ができます。設定値はTextEffect型の値を使用します。

TextEffectの値 説明
0 - Flat テキストを3D効果なしで描画(デフォルト)
1 - Inset テキストは強くくぼんで表示
2 - Raised テキストは強く浮き出して表示
3 - InsetLite テキストは軽くくぼんで表示
4 - RaisedLite テキストは軽く浮き出して表示

フォームのデザイン

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

 今回は、フォームのデザインが中心で、コードの実装はほとんどありません。フォームはサイズを「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にし、デフォルトで選択されている状態にしてできあがりです。

カスタムチェックマークを持ったチェックボックスの作成

 続いて、GcCheckBoxコントロールを使ってカスタムチェックマークを持ったチェックボックスを作成します。

 このチェックボックスも、これまでと同様、未チェックの状態/マウスホバー状態/チェックを付けた状態の3つの状態によってチェックマークの画像を入れ替えます。

カスタムチェックマークを持ったチェックボックスの作成
カスタムチェックマークを持ったチェックボックスの作成

 ツールボックスからGcCheckBoxコントロールをフォームにドラッグ&ドロップしたら、次のプロパティを操作して文字列を設定します。

プロパティ 設定値
Text SOUND ON
Font-Bold True

 プロパティウィンドウのCheckMarkプロパティを展開し、各プロパティに画像イメージを設定します。なお、チェックボックスのチェックボックスの不確定な状態は使わないため「Indeterminate」で始まるプロパティは使用しません。

プロパティ 設定値
CheckedHoverImage mute.jpg
CheckedNormalImage mute.jpg
CheckedPressedImage mute.jpg
IndeterminateHoverImage (なし)
IndeterminateNormalImage (なし)
IndeterminatePressedImage (なし)
UncheckedHoverImage hover_volume.jpg
UncheckedNormalImage volume.jpg
UncheckedPressedImage volume.jpg
プロパティウィンドウで画像を設定
プロパティウィンドウで画像を設定

 CheckMarkSizeプロパティを「30, 30」に変更したら、チェックボックスがチェックされた時に、テキストの文字と文字色を変えてサウンドがオフになっていることがわかるようにします。

 これは、GcCheckBoxコントロールのイベントハンドラを使用しコードで処理を行います。GcCheckBoxコントロールがクリックされるとCheckedChangedイベントが発生するため、このイベントハンドラでチェックマークがついた時はテキストを「Sound Off」にしForeColorプロパティを「LightBlue」にします。チェックがついていない時はテキストを「Sound On」にし、ForeColorプロパティを「Black」にします。

Visual Basic
Private Sub GcCheckBox1_CheckedChanged(sender As System.Object, e As System.EventArgs) Handles GcCheckBox1.CheckedChanged
    If GcCheckBox1.Checked = True Then
        GcCheckBox1.Text = "Sound Off"
        GcCheckBox1.ForeColor = Color.LightBlue
    Else
        GcCheckBox1.Text = "Sound ON"
        GcCheckBox1.ForeColor = Color.Black
    End If
End Sub
C#
private void gcCheckBox1_CheckedChanged(object sender, EventArgs e)
        {
             if(gcCheckBox1.Checked == true)
             {
                gcCheckBox1.Text = "Sound Off";
                gcCheckBox1.ForeColor = Color.LightBlue;
             }else
             {
                gcCheckBox1.Text = "Sound ON";
                gcCheckBox1.ForeColor = Color.Black;
             }
        }

 GcCheckBoxコントロールの下にGcLabelコントロールを配置し、サウンドに関する説明文を設定します。文字列が長いので、「AutoSize」プロパティを「False」に、「WrapMode」プロパティを「WordWrap」に設定し、文字列を折り返して表示できるようにします。

「WrapMode」プロパティを「WordWrap」に設定して文字列を折り返して表示する
「WrapMode」プロパティを「WordWrap」に設定して文字列を折り返して表示する

カスタムデザインのボタンを作成する

 GcShapeButtonコントロールを使用して、独自のデザインのボタンを作成します。クリック前/ホバー/クリックの3つの状況に合わせた画像を用意し、プロパティにセットするだけで、簡単に作ることができます。

 なお、GcShapeButtonコントロールはスマートタグのタスクトレイで画像を設定できます。画像の設定用プロパティはGcRadioButtonコントロールのようにCheckMarkプロパティを展開して設定するのではなく、プロパティ名がそれぞれの状況ごとに別々になっています。そのため、プロパティウィンドウを使うとプロパティを探す手間がかかってしまうので、スマートタグを使って画像設定のプロパティを一括表示したほうが効率的です。

カスタムデザインのボタンを作成する
カスタムデザインのボタンを作成する

 ツールボックスからGcShapeButtonコントロールをフォームにドラッグ&ドロップします。スマートタグをクリックし、ボタンの動作イメージを設定します。Textプロパティの文字列は削除しておきます。

プロパティ 設定値
ActiveImage normal_button.jpg
DefaultImage (なし)
DisableImage (なし)
HoverImage hover_button.jpg
NormalImage normal_button.jpg
PressedImage pressed_button.jpg
スマートタグを使って画像を設定
スマートタグを使って画像を設定

ロゴを設定して仕上げる

 最後に、ロゴと画像を設定し、GcLabelコントロールで見出しを作成します。

 標準コントロールのPictureBoxコントロールでロゴと英字の写真を設定します。

コントロール プロパティ 設定値
PictureBox1 Image logo.jpg
SizeMode AutoSize
PictureBox1 Image english.jpg
SizeMode StretchImage
Size 270, 200

 GcLabelコントロールを配置し、背景色にグラデーションを設定します。グラデーションは、プロパティウィンドウの「GradientEffect」プロパティを使用します。このプロパティの値欄をクリックすると、「グラデーションエディタ」が起動するので、ここで2色を選びます。

設定 背景色
開始色 255, 128, 0
終了色 128, 64, 0
種類 DiagonalUp
方向 センター
「グラデーションエディタでグラデーションを設定する
「グラデーションエディタでグラデーションを設定する

 AutoSizeプロパティをFalseにして、TextプロパティとFontプロパティを設定します。

プロパティ 設定値
AutoSize False
Text 目指せ!TOEIC 800点
Font-Size 20
ForeColor 64, 0, 0
Size 450, 50
TextHAlign Center
TextVAlign Middle

 以上でできあがりです。

まとめ

 PlusPak for Windows Forms 6.0Jは、標準コントロールを使っていて「こんな機能があればいいのに」という機能を組み込んでくれている、とても拡張性の高いコントロールです。今回はごく一部しか紹介できませんでしたが、これだけでも十分視覚効果の高いフォームをデザインできます。

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

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

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

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