SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(PlusPak)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

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

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

オリジナルデザインのチェックマークや、縦書きのラベルを使うことができる
オリジナルデザインのチェックマークや、縦書きのラベルを使うことができる
独自にデザインしたボタンや、キーボードのCapsなどの制御もできる
独自にデザインしたボタンや、キーボードの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で使用するコントロール
GUIで使用するコントロール

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

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

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

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

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

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

文字の縦書き

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

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

コントロールからはみ出した文字を折り返すには
コントロールからはみ出した文字を折り返すには
「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ヘルプファイルより抜粋)
文字の立体表示の設定(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を配置し、次のような機能を組み込んでみました。

  1. TextBoxをクリックすると、CapsLockがオンになる
  2. フォームをクリックすると、CapsLockがオフになる
  3. GcLabelをクリックすると、CapsLockのオン・オフを設定できる
  4. CapsLockがオンになると、GcLabelの背景がグラデーションで塗りつぶされる
  5. 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
c#
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などの専用ソフトを使えば、もっと凝ったデザインのボタンにできるでしょう。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3087 2009/03/17 12:11

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング