SHOEISHA iD

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

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

ComponentZine(ComponentOne)

TabPlusコンポーネントを使ってタブを多彩にカスタマイズする

GcTabControlコントロールが持つ多彩なタブページデザイン

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

TabPlus for .NET 2.0JのGcTabControlコントロールは、いろいろなタイプのタブページを提供するコントロールです。タブページのデザインは、デザイン用のダイアログを使用して簡単に行えます。今回は、GcTabControlコントロールが持っている多彩なスタイルを、実際に動作させながら使ってみます。

  • このエントリーをはてなブックマークに追加
プログラム実行中にタブページの各種設定項目を変更する
プログラム実行中にタブページの各種設定項目を変更する
Visual Basic風のタブページも作れる
Visual Basic風のタブページも作れる
ドラッグ&ドロップでタブの移動も簡単
ドラッグ&ドロップでタブの移動も簡単

はじめに

 TabPlus for .NET 2.0JのGcTabControlコントロールは、いろいろなタイプのタブページを提供するコントロールです。タブの形状の種類が豊富で「ExcelやVisual Studio、Windows XP風のタブを作成する」「タブを段差表示にする」「ドラッグ&ドロップでタブの移動を可能にする」など標準のタブコントロールにない機能を実装できます。

 そこで、今回はプログラム実行中にタブの形状を変化させるプログラムを作りながら、機能を実装する方法を紹介します。

対象読者

 Visual Basic 2005を使ってプログラムを作ったことのある人。

必要な環境

 Visual Basic 2005またはVisual Studio 2005。

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

 本稿の実行ファイル(バイナリファイル)を動かすには、zipファイルに同梱してある以下のファイルが必要になります。

  1. GrapeCity.Win.TabPlus.v20.dll
  2. ja\GrapeCity.Win.TabPlus.v20.resources.dll

 このファイルを、実行プログラムと同じフォルダに格納します。2.は、exeファイルのあるフォルダのサブフォルダ「ja」に配置されている必要があります。

 また、.NET Framework 2.0から追加されたクラスやメンバを使用しているので、.NET Framework 2.0がインストールされていることが必須条件です。

GUIの作成

 今回のプログラムは、フォームにGcTabControlコントロールを組み込み、後はVisual Basicの標準コントロールから、以下のコントロールを使用します。

  • ColorDialog
  • FontDialog
  • GroupBox
  • Button
  • CheckBox
  • RadioButton
  • ComboBox
  • NumericUpDown

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

 今回使用するTabPlus for .NET 2.0Jのインストーラは、グレープシティのWebページからダウンロードできます。製品ページ左側の[ダウンロード]-[トライアル版]をクリックし、ダウンロード方法([FTP]または[HTTP])を選択してください。ファイルはLZH形式で圧縮されています。

 有償のコンポーネントですが、プロダクトキーを入力せずにインストールすることで、トライアル版として使用できます。トライアル版の試用期間はインストール後から60日間です。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールの追加

 TabPlus for .NET 2.0Jをインストールしたら、ツールボックスに専用のタブを作成し、TabPlus for .NET 2.0Jのコンポーネントを追加します。追加するコンポーネントは、[.NET Frameworkコンポーネント]の[名前空間]が「GrapeCity.Win.Input」のコンポーネントです。

GrapeCity.Win.Input名前空間のコンポーネントを追加する
GrapeCity.Win.Input名前空間のコンポーネントを追加する

フォームのデザイン

 フォームには、GcTabControlコントロールの各種設定を行うための操作パネルを作成します。使い慣れているコントロールが多いと思うので、特に説明はしません。

 GcTabControlコントロールは、複数段表示を分かりやすくするために、Itemプロパティでタブを多めに追加しておきます。

 GcTabControlコントロールは、コントロール内に単独のタブページを表すGcTabPageオブジェクトを持ちます。タブページごとの設定を変えるには、このGcTabPageオブジェクトのプロパティを操作しますが、すべてのタブページに共通の設定を行う場合は、親のGcTabControlコントロールのプロパティを操作します。

各処理の作成(1/2)

 GcTabControlコントロールの設定を実行するコードを組み込んでいきます。処理は、フォームに配置したGroupBoxコントロール単位で行います。

タブの方向

 Alignmentプロパティを使って、タブが取り付く位置を変えることができます。設定値はTabAlignment列挙体のメンバです。

Me.GcTabControl1.Alignment = TabAlignment.Top
TabAlignment列挙体のメンバ
メンバ名 説明
Bottom タブはコントロールの下部に配置されています。
Left タブはコントロールの左端に配置されています。
Right タブはコントロールの右端に配置されています。
Top タブはコントロールの上部に配置されています。
タブを右端につける
タブを右端につける

タブのスタイル

 Appearanceプロパティを使って、タブのスタイルを変えることができます。設定値はTabAppearance列挙体のメンバから選びます。

 このプロパティを使うと、タブをExcelやWindows XP、Visual Studio 2005のような形状に変えることができます。

Me.GcTabControl1.Appearance = GrapeCity.Win.TabPlus.TabAppearance.Buttons
TabAppearance列挙体のメンバ
メンバ名 説明
Standard 標準スタイルの外観
Classic クラシックスタイルの外観
Square 四角スタイルの外観
Buttons ボタンスタイルの外観
CutCorner 両角がカットされたスタイルの外観
CutLeftCorner 左角がカットされたスタイルの外観
CutRightCorner 右角がカットされたスタイルの外観
Rounded 丸型スタイルの外観
Excel Excelスタイルの外観
System システムスタイルの外観
MdiChild MDIスタイルの外観
VS2005 Visual Studio 2005スタイルの外観
Skin カスタムスキンスタイルの外観
タブをExcel風にする
タブをExcel風にする
タブをVisual Studio 2005風にする
タブをVisual Studio 2005風にする

枠線の設定と色の変更

 タブページのスタイルを標準にし、3Dではなくフラットスタイルにすると、枠線の色を変えることができます。

 フラットスタイルにするには、FlatプロパティをTrueに設定します。

cTabControl1.Flat = True

 また、枠線の色はOutLineColorプロパティに色情報を設定します。

GcTabControl1.OutLineColor = Me.ColorDialog1.Color

 枠線の色の変更は、フラットスタイルのみ有効で、それ以外のスタイルでは無効になります。

 このプログラムでは、チェックボックスにチェックを入れると、強制的にスタイルを標準に変えてフラットスタイルにし、[色]ボタンを押すと色のダイアログを表示して枠線の色を変更できるようにしています。

Private Sub CheckBox1_CheckedChanged(ByVal sender As System.Object, _
                ByVal e As System.EventArgs) Handles CheckBox1.CheckedChanged
    Me.GcTabControl1.Appearance = GrapeCity.Win.TabPlus.TabAppearance.Standard
    If Me.CheckBox1.Checked = True Then
        GcTabControl1.Flat = True
        Me.Button1.Enabled = True
    Else
        GcTabControl1.Flat = False
        Me.Button1.Enabled = False
    End If
End Sub

Private Sub Button1_Click(ByVal sender As System.Object, _
               ByVal e As System.EventArgs) Handles Button1.Click
    If Me.ColorDialog1.ShowDialog() = Windows.Forms.DialogResult.OK Then
        GcTabControl1.OutLineColor = Me.ColorDialog1.Color
    End If
End Sub
枠線に色を付けた状態
枠線に色を付けた状態

フォントの設定

 フォントの設定は、GcTabControlコントロール全体と各部位ごとに適用できます。

 タブのフォントだけを変えたい場合は、TabStyleクラスのFontプロパティを変更します。

Me.GcTabControl1.TabStyle.Font = Me.FontDialog1.Font

 また、文字色の変更は、TabStyleクラスのForeColorプロパティを操作します。

GcTabControl1.TabStyle.ForeColor = Me.ColorDialog1.Color

 TextEffectプロパティを使用すると、文字を立体的に表示することができます。設定値は、TextEffect列挙体のメンバを指定します。

GcTabControl1.TabStyle.TextEffect = GrapeCity.Win.TabPlus.TextEffect.RaisedLite
TextEffect列挙体のメンバ
メンバ名 説明
Flat テキストを3D効果なしで描画します。
Inset テキストは強くくぼんで表示されます。
Raised テキストは強く浮き出して表示されます。
InsetLite テキストは軽くくぼんで表示されます。
RaisedLite テキストは軽く浮き出して表示されます。
フォントを大きくして浮き出る文字にした
フォントを大きくして浮き出る文字にした

タブの並び替えをドラッグ&ドロップで行う

 AllowDragDropプロパティをTrueにすると、プログラム実行中にExcelのワークシートのように、タブをドラッグ&ドロップで移動させることができます。

Me.GcTabControl1.AllowDragDrop = True

 サンプルプログラムの「タブページ3」に、VS2005標準のタブコントロールを組み込んでありますが、標準コントロールではこのドラッグ&ドロップによるタブの移動はできません。

ドラッグ&ドロップでタブページの順番を入れ替えられる
ドラッグ&ドロップでタブページの順番を入れ替えられる

タブの段差表示

 MultilineプロパティをTrueにセットすると、タブを複数段で表示できます。

GcTabControl1.Multiline = True

 さらに、PageSpaceプロパティを使って、各段の開始位置をずらすことができます。プロパティの値に正の整数を指定すると左に、負の整数を指定すると右にずれます。

GcTabControl1.PageSpace = 5
PageSpaceプロパティに-10を指定して複数段にした
PageSpaceプロパティに-10を指定して複数段にした

各処理の作成(2/2)

ボタンスキンの設定

 ボタンスキンとは、タブ形状をボタンにしたときに、ボタンの形状を変える操作のことです。

 タブのスタイルは、実はすべてオブジェクトになっており、それぞれのクラスを使うことでカスタマイズすることができます。

  • ButtonsSkin
  • ClassicSkin
  • ExcelSkin
  • ImageSkin
  • MdiChildSkin
  • Skin
  • StandardSkin
  • SystemSkin
  • VS2005Skin

 ボタンスキンは、この中のButtonsSkinクラスで、あらかじめいくつかのスタイルが用意されており、これを使うことができますが、独自にカスタマイズしたりゼロから描画したりすることもできます。

 ボタンスキンを使う場合は、次の操作をします。

  1. まず、ButtonsSkinクラスのインスタンスを作成します。
     
    Dim objButtonsSkin _
        As New GrapeCity.Win.TabPlus.Skins.ButtonsSkin
    
     
  2. そのインスタンスの、ButtonsSkinStyleプロパティに、設定したいスタイルを指定します。値は、ButtonsSkinStyle列挙体のメンバです。
     
    objButtonsSkin.ButtonsSkinStyle = _
        GrapeCity.Win.TabPlus.Skins.ButtonsSkinStyle.ActiveFlat
    
     
  3. ボタンスキンが使えるように、AppearanceプロパティにTabAppearance列挙体のメンバの中の、カスタムスキンスタイル「Skin」を指定します。
     
    GcTabControl1.Appearance _
        = GrapeCity.Win.TabPlus.TabAppearance.Skin
    
     
  4. GcTabControl1クラスのSkinプロパティに、作成したButtonsSkinクラスのインスタンスを設定します。
     
    GcTabControl1.Skin = objButtonsSkin
    
ButtonsSkinStyle列挙体のメンバ
メンバ名 説明
Normal 通常のボタンスタイル
Flat フラットのボタンスタイル
Popup ポップアップのボタンスタイル
ActiveFlat アクティブフラットのボタンスタイル
Borderless 境界線のないボタン
XPButton Windows XPのボタンスタイル
XPToolBarButton Windows XPツールバーのボタンスタイル
Office2003GradientToolBarButton Office 2003ツールバーのグラディエントボタンスタイル
Office2003HighlightToolBarButton Office 2003ツールバーのハイライトボタンスタイル
VS2003WhiteButton VS2003 Resx Editorの白いボタンスタイル
Office2003風のグラデーションタブ
Office2003風のグラデーションタブ

タブの背景色の変更

単色での塗りつぶし

 TabStyleクラスのBackColorプロパティを使うと、タブの背景色を塗りつぶすことができます。

GcTabControl1.TabStyle.BackColor = Me.ColorDialog1.Color

パターンでの塗りつぶし

 PatternEffectプロパティを使用すると、タブの背景色をパターンで塗りつぶすことができます。

 プロパティの設定値はPatternEffectオブジェクトなので、PatternEffectクラスのコンストラクタを使用してインスタンスを作成し、PatternEffectプロパティに設定します。

 コンストラクタの引数は2つで、最初の引数に塗りつぶしパターンの種類を整数値またはPatternStyle列挙体のメンバで指定します。2番目の引数には、パターンの色を指定します。タブの背景色と組み合わせて、いろいろな色のパターンを作成できます。

Dim objPatternEffect As New GrapeCity.Win.TabPlus.PatternEffect _
    (GrapeCity.Win.TabPlus.PatternStyle.BackwardDiagonal, Color.Green)

GcTabControl1.TabStyle.PatternEffect = objPatternEffect

グラデーションでの塗りつぶし

 前回の記事でも紹介した、タブをグラデーションで塗りつぶす方法ですが、今回はもう少し詳しく紹介します。

 タブのグラデーションでの塗りつぶしは、まずGradientEffectオブジェクトを作成します。作成には、クラスのコンストラクタを使用し、最初の引数にグラデーションのスタイル、2番目の引数にグラデーションの方向、3番目の引数にグラデーションの開始色、4番目の引数にグラデーションの終了色を指定します。

 グラデーションのスタイルはGradientStyle列挙体のメンバまたは整数値を、方向はGradientDirection列挙体のメンバまたは整数値を指定します。

Dim objGradientEffect As New GrapeCity.Win.TabPlus.GradientEffect _
    (GrapeCity.Win.TabPlus.GradientStyle.Horizontal, _
    GrapeCity.Win.TabPlus.GradientDirection.Forward, Color.Orange, Color.Yellow)

 GradientEffectオブジェクトを作成したら、これをGradientEffectプロパティに設定します。

GcTabControl1.TabStyle.GradientEffect = objGradientEffect
四角形のスタイルを中心からグラデーションするように設定した
四角形のスタイルを中心からグラデーションするように設定した

まとめ

 紹介したように、TabPlusコンポーネントを使用すると、標準コントロールにはない多彩なデザインをタブに施すことができます。また、タブのドラッグ&ドロップによる移動は、Excel風のワークシートを作成したときなどに使うと便利です。

 他のアプリケーションと一味違ったデザインを作りたいときは、このTabPlusコンポーネントを使ってみてはいかがでしょうか。

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

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

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

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/718 2008/08/20 13:19

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング