はじめに
いろいろなアプリケーションを作ってくると、GUIのデザインがどうも同じようになってしまいます。原因は何かと考えると、アイデアのマンネリということもありますが、標準コントロールのデザイン性の限界というのも大きいようです。角丸形状しか使えないボタンや無機質なチェックマーク、単色での塗りつぶししかできない背景色や、立体表示のできないテキストなどなど…。
PlusPak for Windows Forms 5.0Jは、もっと自由なデザインをコントロールに取り入れることができる便利な拡張コントロールを揃えたパッケージです。今回は、このPlusPak for Windows Forms 5.0Jの中から、「GcShapeButton」「GcCheckBox」「GcKeyLock」「GcLabel」の4つのコントロールを使って、オリジナルのデザインを使ったプログラムを作ってみました。
対象読者
Visual Basic 2005、2008またはVisual C# 2005、2008を使ってプログラムを作ったことのある人。
必要な環境
Visual Basic 2005、 2008またはVisual C# 2005、 2008、Visual Studio 2005、 2008でプログラムが作れる環境。
なお、本プログラムはWindows Vista上で動作するVisual Studio 2005を使用して作成し動作確認を行っています。
プログラム実行時の注意事項
PlusPak for Windows Forms 5.0Jを使って作成したアプリケーションを配布する場合、PlusPak for Windows Forms 5.0Jのアセンブリファイルを添付する必要があります。これは、Common Language RuntimeのDLLをアプリケーションと一緒に配布するのと同じです。
本記事のサンプルアプリケーションを正常に動作させるためには、次の4ファイルをインストールする必要があります。
ファイル名 | 説明 |
GrapeCity.Win.PlusPak.v50.dll | 本体コンポーネント |
GrapeCity.Framework.PlusPak.v20.dll | 製品のフレームワーク |
GrapeCity.Win.PlusPak.v50.resources.dll | 本体コンポーネントのサテライトリソース |
GrapeCity.Framework.PlusPak.v20.resources.dll | 製品フレームワークのサテライトリソース |
これらのファイルを、プログラムを実行するBinフォルダに格納します。.NET Framework 2.0から追加されたクラスやメンバを使用しているので、.NET Framework 2.0がインストールされていることが必須条件です。
コントロールのインストール
はじめてPlusPak for Windows Forms 5.0Jを使用する方は、開発環境にPlusPak for Windows Forms 5.0Jをインストールする必要があります。インストーラは、グレープシティのWebページからダウンロードできます。
ユーザー情報を登録すると送られてくるメールに、ダウンロード用のURLが記載されているので、ここからダウンロードしてインストールしてください。ファイルはzip形式で圧縮されています。有償のコントロールですが、プロダクトキーを入力せずにインストールすることでトライアル版として使用できます。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。
コントロールの追加
PlusPak for Windows Forms 5.0Jをインストールしたら、ツールボックスに専用のタブを作成し、使用するコントロールを追加します。追加するコントロールは、「.NET Frameworkコントロール」の「アセンブリ名」が「GrapeCity.Win.PlusPak」で始まるコントロール「GcShapeButton」「GcCheckBox」「GcKeyLock」「GcLabel」です。
PlusPak for Windows Forms 5.0Jについて
PlusPak for Windows Forms 5.0J(以降「PlusPak」と呼びます)は、Windowsアプリケーションでよく使用される16種類のコントロールに、3種類の拡張コンポーネント、PDFライブラリおよび PropertyManagerアドインから構成されています。これらのコントロールを使うことで、標準コントロールでは実現できなかった、いろいろなデザインや機能を持ったWindowsフォームを作成できます。
今回は、このPlusPakの中から、「GcShapeButton」「GcCheckBox」「GcKeyLock」「GcLabel」の4つのコントロールを使い、次の機能を持ったフォームを作成します。
- 背景をグラデーションで塗りつぶした縦書きのラベル
- ハート形のOKボタン
- 自作のチェックマークを持ったチェックボックス
- キーボードのCapsロックの制御
名前 | 説明 |
GcBalloonTip | コントロールにバルーンチップを表示するコンポーネント |
GcBarCode | バーコード生成コントロール |
GcButton | 拡張ボタンコントロール |
GcCalculator | メモリ機能付きの四則演算電卓コントロール |
GcCalendar | 和暦、六曜、会計年度対応のカレンダーコントロール |
GcCheckBox | チェックマークのカスタマイズできる拡張チェックボックスコントロール |
GcContainer | 子コントロールにラベルと立体表示を追加できる拡張パネルコントロール |
GcDropDownButton | ドロップダウン メニューを表示できる拡張ボタンコントロール |
GcFlowLayoutContainer | 子コントロールにラベルと立体表示を追加できる拡張フローレイアウトパネルコントロール |
GcFunctionKey | 画面上に仮想的なファンクションキーを構築するキーフック専用コントロール |
GcKeyLock | CapsLock、NumLock、ScrollLockキーを制御するコンポーネント |
GcLabel | 文字の縦書き、均等割付などができる拡張ラベルコントロール |
GcMdiTabControl | MDI フォームをタブ形式に変換して表示できるコントロール |
GcProgressBar | 進捗状況を視覚的に表示する拡張プログレスバーコントロール |
GcRadioButton | チェックマークのカスタマイズできる拡張ラジオボタンコントロール |
GcShapeButton | 形状を自由に定義できる拡張ボタンコントロール |
GcSplitButton | GcButtonとGcDropDownButtonの機能を同時に揃えた拡張ボタンコントロール |
GcStylePlus | フォーム上のコントロールの動的外観スタイルを容易に設定できるコンポーネント |
GcTabControl | 豊富なスタイルとカスタマイズ機能を搭載した拡張タブコントロール |
PDFファイルの作成機能を提供するライブラリ | |
PropertyManager | プロパティの設定値をコピー、保存できるVisual Studio IDE用アドイン |
GUIのデザイン
今回使用するコントロールです。PlusPakの各コントロールの設定は、記事の中で紹介していきます。
GcLabelで背景がグラデーションのラベルを作る
まずは、GcLabelコントロールを使って、背景色をグラデーションで塗りつぶし、文字を縦書きにしたラベルを作成します。
背景色のグラデーションの設定
グラデーションの設定は、GradientEffectプロパティを使用します。プロパティの値欄をクリックすると、「グラデーションエディタ」が起動します。このエディタで、グラデーションの色数、開始・終了色、グラデーションの方向などを設定します。
なお、このGradientEffectプロパティと「グラデーションエディタ」は、GcLabelコントロールだけでなく、PlusPakの他のコントロールでグラデーション設定ができるコントロールでも使用します。
文字の縦書き
文字を縦書きで表示するには、TextOrientationプロパティを「VerticalFarEast」に設定します。
また、コントロール内で文字列の折り返しをする場合は、「WrapMode」プロパティを「WordWrap」に設定します。
カスタムボタンの作成
次に、GcShapeButtonコントロールを使ってカスタムボタンを作成しましょう。
このコントロールは、ボタン動作の「デフォルト」「通常」「無効」「アクティブ」「ホバー」「押下」のそれぞれの時のイメージを設定できます。使用できるイメージのフォーマットは、「gif」「jpg」「jpeg」「bmp」「wmf」「png」で、このフォーマットであればどのようなアプリケーションで作成した画像でも、ボタンの動作イメージに使用できます。
イメージの作成
今回は、Microsoft PowerPoint 2003を使って、ボタンがポップアップした状態、ブッシュダウンした状態、無効状態のそれぞれのイメージを作成し、pngフォーマットで保存しました。
イメージの設定
イメージが作成できたら、フォームにGcShapeButtonコントロールを配置し、スマートタグを開きます。ボタンの各動作時のイメージを設定する画面が表示されるので、ここで作成したイメージをそれぞれに配置します。
また、テキストはTextプロパティで設定できますが、標準コントロールのボタンのようにボタンと一緒には動作しませんので、できればイメージの中に組み込んだほうが自然な動きになります。
GcCheckBoxで独自のチェックマークを使う
GcCheckBoxコントロールは、チェックマークに独自のイメージを使うことができる、面白いチェックボックスです。チェック時とチェックオフ時のホバー、ノーマル、プレスにイメージを設定できます。
GcCheckBoxコントロールでは、ボタンの時のようなスマートタグではなく、プロパティウィンドウで各イメージを設定し、「CheckMark」プロパティをクリックすると、さらにそれぞれのイメージを設定するプロパティが表示されます。
使用するプロパティの内容は次のとおりです。
プロパティ | 説明 |
CheckedHoverImage | チェックの状態がチェックで、マウスカーソルがコントロールの上に置かれている場合のチェックマーク イメージ |
CheckedNormalImage | チェックの状態がチェックで、コントロールが通常の状態の場合のチェックマーク イメージ |
CheckedPressedImage | チェックの状態がチェックで、マウスボタンがコントロールの上でクリックされた場合のチェックマーク イメージ |
IndeterminateHoverImage | チェックの状態が不確定で、マウスカーソルがコントロールの上に置かれている場合のチェックマーク イメージ(ThreeState プロパティが True のときのみ有効) |
IndeterminateNormalImage | チェックの状態が不確定で、コントロールが通常の状態の場合のチェックマーク イメージ(ThreeState プロパティが True のときのみ有効) |
IndeterminatePressedImage | チェックの状態が不確定で、マウスボタンがコントロールの上でクリックされた場合のチェックマーク イメージ(ThreeState プロパティが True のときのみ有効) |
UncheckedHoverImage | チェックの状態が未チェックで、マウスカーソルがコントロールの上に置かれている場合のチェックマーク イメージ |
UncheckedNormalImage | チェックの状態が未チェックで、コントロールが通常の状態の場合のチェックマーク イメージ |
UncheckedPressedImage | チェックの状態が未チェックで、マウスボタンがコントロールの上でクリックされた場合のチェックマーク イメージ |
イメージの作成
今回は、「UncheckedHoverImage」「CheckedHoverImage」「CheckedNormalImage」「CheckedPressedImage」の4つを設定しますので、それぞれにあったイメージを作成します。
「UncheckedHoverImage」は、チェックのない状態でマウスポインタをチェックボックスに重ねた時に分かるようなイメージにします。
「CheckedHoverImage」と「CheckedPressedImage」は、チェックした時に表示するチェックマークのイメージにします。
「CheckedNormalImage」は、チェックした状態でマウスポインタがチェックボックスから離れた時に、少し薄い色にしてあまり目立たないようなイメージにします。これらも、PowerPointで作成しました。
イメージの設定
イメージが作成できたら、各プロパティにイメージを設定します。チェック時のイメージは「CheckedHoverImage」と「CheckedPressedImage」に同じイメージを設定します。「CheckedPressedImage」にイメージを設定しないと、マウスのボタンを離した時にデフォルトのイメージが表示され、クリック時に2つの違うイメージが連続して表示されてしまいますので注意してください。
また、フォントの装飾は「TextAppearance」プロパティの値を「OrientationTextAppearance」に設定すると、「テキストの外観」ダイアログが表示され、「TextEffect」で文字の立体表示を設定できます。
CapsLockの制御
PlusPak for Windows Forms 5.0Jの面白いコントロールの1つに、「GcKeyLock」コントロールがあります。
このコントロールは、キーボードにある「CapsLock」「NumLock」「ScrollLock」の3つのキーのオン・オフをプログラムから制御します。昔、N88Basicでも制御できましたが、PlusPak for Windows Forms 5.0Jではこの機能をコントロールにまとめました。
各キーの制御は、それぞれ「CapsLock」「NumLock」「ScrollLock」プロパティを使用します。設定値はいずれも論理値で、「True」でオン、「False」でオフになります。
このプログラムでは、TextBoxとGcLabelを配置し、次のような機能を組み込んでみました。
- TextBoxをクリックすると、CapsLockがオンになる
- フォームをクリックすると、CapsLockがオフになる
- GcLabelをクリックすると、CapsLockのオン・オフを設定できる
- CapsLockがオンになると、GcLabelの背景がグラデーションで塗りつぶされる
- CapsLockがオフの時は、GcLabelの背景と文字がグレー表示になる
PlusPak for Windows Forms 5.0Jの各コントロールは、基本的にVS標準コントロールと同じようなイベントハンドラを使うことができます。そこで、チェックボックスをチェックしてハート型のボタンを押すと、テキストボックスに入力した文字を メッセージボックスで表示する機能も組み込みました。
また、コードからグラデーションを設定する場合は、GradientEffectクラスのコンストラクタを使用してインスタンスを作成し、各コントロールのGradientEffectプロパティに設定します。コンストラクタでは、グラデーションの方向と開始・終了色を引数に設定します。
Private Sub GcShapeButton1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles GcShapeButton1.Click If Me.GcCheckBox1.Checked = True Then MessageBox.Show(Me.TextBox1.Text) End If End Sub Private Sub TextBox1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles TextBox1.Click Me.GcKeyLock1.CapsLock = GrapeCity.Win.Components.LockKeyStatus.On Me.GcLabel2.ForeColor = Color.Black Me.GcLabel2.GradientEffect = New GrapeCity.Win.Common.GradientEffect _ (GrapeCity.Win.Common.GradientStyle.Horizontal, _ GrapeCity.Win.Common.GradientDirection.Forward, _ Color.MistyRose, Color.LightCoral) End Sub Private Sub Form1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Click Me.GcKeyLock1.CapsLock = GrapeCity.Win.Components.LockKeyStatus.Off Me.GcLabel2.ForeColor = SystemColors.ControlDark Me.GcLabel2.GradientEffect = Nothing End Sub Private Sub GcLabel2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles GcLabel2.Click If Me.GcKeyLock1.CapsLock = GrapeCity.Win.Components.LockKeyStatus.Off Then Me.GcKeyLock1.CapsLock = GrapeCity.Win.Components.LockKeyStatus.On Me.GcLabel2.ForeColor = Color.Black Me.GcLabel2.GradientEffect = New GrapeCity.Win.Common.GradientEffect _ (GrapeCity.Win.Common.GradientStyle.Horizontal, _ GrapeCity.Win.Common.GradientDirection.Center, _ Color.MistyRose, Color.LightCoral) Else Me.GcKeyLock1.CapsLock = GrapeCity.Win.Components.LockKeyStatus.Off Me.GcLabel2.ForeColor = SystemColors.ControlDark Me.GcLabel2.GradientEffect = Nothing End If End Sub
private void gcShapeButton1_Click(object sender, EventArgs e) { if(gcCheckBox1.Checked == true){ MessageBox.Show(textBox1.Text); } } private void gcLabel2_Click(object sender, EventArgs e) { if(gcKeyLock1.CapsLock == GrapeCity.Win.Components.LockKeyStatus.Off){ gcKeyLock1.CapsLock = GrapeCity.Win.Components.LockKeyStatus.On; gcLabel2.ForeColor = Color.Black; gcLabel2.GradientEffect = new GrapeCity.Win.Common.GradientEffect (GrapeCity.Win.Common.GradientStyle.Horizontal, GrapeCity.Win.Common.GradientDirection.Center, Color.MistyRose, Color.LightCoral); }else{ gcKeyLock1.CapsLock = GrapeCity.Win.Components.LockKeyStatus.Off; gcLabel2.ForeColor = SystemColors.ControlDark; gcLabel2.GradientEffect = null; } } private void textBox1_Click(object sender, EventArgs e) { gcKeyLock1.CapsLock = GrapeCity.Win.Components.LockKeyStatus.On; gcLabel2.ForeColor = Color.Black; gcLabel2.GradientEffect = new GrapeCity.Win.Common.GradientEffect (GrapeCity.Win.Common.GradientStyle.Horizontal, GrapeCity.Win.Common.GradientDirection.Forward, Color.MistyRose, Color.LightCoral); } private void Form1_Click(object sender, EventArgs e) { gcKeyLock1.CapsLock = GrapeCity.Win.Components.LockKeyStatus.Off; gcLabel2.ForeColor = SystemColors.ControlDark; gcLabel2.GradientEffect = null; }
まとめ
今回使用したPlusPakのコントロールは4つだけですが、これだけでも雰囲気の違うフォームがデザインできたと思います。CapsLockをプログラム側でオンオフできる機能は、英字入力を多用するアプリケーションでは、かなり便利な機能だと言えます。
今回は、独自グラフィックス作成にPowerPointを使用しましたが、PhotoShopなどの専用ソフトを使えば、もっと凝ったデザインのボタンにできるでしょう。