ComponentZine（PlusPak）（AD）

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

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

2012/08/01 00:00

ポスト

ダウンロードバイナリファイル (947.4 KB)
ダウンロードサンプルソース（C#） (179.3 KB)
ダウンロードサンプルソース（VB） (181.2 KB)

　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」コントロールを選択する

フォームの作成

　今回作成するフォームでは、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プロパティには白い画像を設定し、デフォルトのマークが表示されないようにしている

プロパティの設定

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

　チェックマークのサイズを変更するには、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つの状態の画像を設定している

使用した画像

　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表示効果の各プロパティ（ヘルプより抜粋）

　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コントロールの画像設定

使用した画像

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コントロール

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

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

　続いて、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

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」に設定して文字列を折り返して表示する

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

　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
PictureBox1	SizeMode	AutoSize
PictureBox1	Image	english.jpg
	SizeMode	StretchImage
	Size	270, 200