.NETアプリで使えるオリジナルデザインのコントロールを作成する

PlusPak for Windows Forms 5.0Jでカスタムデザインのコントロールを作る

2008/09/30 14:00

ポスト

ダウンロードソースコード (895.4 KB)
ダウンロードサンプルソース（C#） (90.9 KB)
ダウンロードサンプルソース（VB） (127.2 KB)

　いろいろなアプリケーションを作ってくると、GUIのデザインがどうも同じようになってしまいます。原因は何かと考えると、アイデアのマンネリということもありますが、標準コントロールのデザイン性の限界というのも大きいようです。PlusPak for Windows Forms 5.0Jは、もっと自由なデザインをコントロールに取り入れられる拡張コントロールを揃えたパッケージです。

ポスト

はじめに

　いろいろなアプリケーションを作ってくると、GUIのデザインがどうも同じようになってしまいます。原因は何かと考えると、アイデアのマンネリということもありますが、標準コントロールのデザイン性の限界というのも大きいようです。角丸形状しか使えないボタンや無機質なチェックマーク、単色での塗りつぶししかできない背景色や、立体表示のできないテキストなどなど…。

　PlusPak for Windows Forms 5.0Jは、もっと自由なデザインをコントロールに取り入れることができる便利な拡張コントロールを揃えたパッケージです。今回は、このPlusPak for Windows Forms 5.0Jの中から、「GcShapeButton」「GcCheckBox」「GcKeyLock」「GcLabel」の4つのコントロールを使って、オリジナルのデザインを使ったプログラムを作ってみました。

オリジナルデザインのチェックマークや、縦書きのラベルを使うことができる

独自にデザインしたボタンや、キーボードのCapsなどの制御もできる

対象読者

　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」です。

「アセンブリ名」が「GrapeCity.Win.PlusPak」で始まる名前空間のコントロールを選択する

「名前空間」が「GrapeCity.Win.Components」で始まる名前空間のコントロールを選択する

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	PDFファイルの作成機能を提供するライブラリ
PropertyManager	プロパティの設定値をコピー、保存できるVisual Studio IDE用アドイン

GUIのデザイン

　今回使用するコントロールです。PlusPakの各コントロールの設定は、記事の中で紹介していきます。

GUIで使用するコントロール

GcLabelで背景がグラデーションのラベルを作る

　まずは、GcLabelコントロールを使って、背景色をグラデーションで塗りつぶし、文字を縦書きにしたラベルを作成します。

背景色のグラデーションの設定

　グラデーションの設定は、GradientEffectプロパティを使用します。プロパティの値欄をクリックすると、「グラデーションエディタ」が起動します。このエディタで、グラデーションの色数、開始・終了色、グラデーションの方向などを設定します。

　なお、このGradientEffectプロパティと「グラデーションエディタ」は、GcLabelコントロールだけでなく、PlusPakの他のコントロールでグラデーション設定ができるコントロールでも使用します。

グラデーションエディタ

文字の縦書き

　文字を縦書きで表示するには、TextOrientationプロパティを「VerticalFarEast」に設定します。

　また、コントロール内で文字列の折り返しをする場合は、「WrapMode」プロパティを「WordWrap」に設定します。

コントロールからはみ出した文字を折り返すには

「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」で文字の立体表示を設定できます。

文字の立体表示の設定（PlusPak for Windows Forms 5.0Jヘルプファイルより抜粋）

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プロパティに設定します。コンストラクタでは、グラデーションの方向と開始・終了色を引数に設定します。

Visual Basic

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;
}