GrapeCity PlusPak for Windows Forms 10.0J
さまざまな外観設定

GrapeCity PlusPak for Windows Forms 10.0J > PlusPakの使い方 > レイアウト > GcTabControlコントロール > さまざまな外観設定
タブの外観は TabStyle クラス により設定を行います。設定が可能な項目には、背景色、文字色、フォント、文字の水平方向の配置、垂直方向の配置、イメージ画像の配置、複数行表示、省略文字、模様、グラデーション、マージン、タブのサイズがあります。以下に各設定項目の詳細を説明します。

背景色と文字色
タブの背景色は TabStyle.BackColorプロパティで設定します。また、文字色は TabStyle.ForeColor プロパティで行います。

背景色は、GcTabControl.Appearanceプロパティが System 以外に設定されているとき適用されます。

下記はサンプルコードと設定結果です。

' GcTabControlコントロールのスタイルを設定します
GcTabControl1.Appearance = GrapeCity.Win.Containers.TabAppearance.Standard
' 背景色を設定します
GcTabControl1.TabStyle.BackColor = Color.Yellow
' 文字色を設定します
GcTabControl1.TabStyle.ForeColor = Color.Blue
// GcTabControlコントロールのスタイルを設定します
gcTabControl1.Appearance = GrapeCity.Win.Containers.TabAppearance.Standard;
// 背景色を設定します
gcTabControl1.TabStyle.BackColor = Color.Yellow;
// 文字色を設定します
gcTabControl1.TabStyle.ForeColor = Color.Blue;
フォント
次のサンプルコードは TabStyle.Fontプロパティでフォントの設定を行ったときの例です。

なお、SizeModeプロパティ を Normal に設定している場合、フォントサイズに合わせてタブのサイズが決定されます。

GcTabControl1.TabStyle.Font = New Font("Times New Roman", 11, FontStyle.Bold)
gcTabControl1.TabStyle.Font = new Font("Times New Roman", 11, FontStyle.Bold);
文字の立体表示
TabStyle.TextEffectプロパティ で、文字を立体的に表示できます。立体表示には Inset（強いくぼみ）、InsetLite（軽いくぼみ）、Raised（強い浮き出し）、RaisedLite（軽い浮き出し）があります。

' 強いくぼみ
GcTabControl1.TabStyle.TextEffect = GrapeCity.Win.Common.TextEffect.Inset
' 軽いくぼみ
'GcTabControl1.TabStyle.TextEffect = GrapeCity.Win.Common.TextEffect.InsetLite
' 強い浮き出し
'GcTabControl1.TabStyle.TextEffect = GrapeCity.Win.Common.TextEffect.Raised
' 軽い浮き出し
'GcTabControl1.TabStyle.TextEffect = GrapeCity.Win.Common.TextEffect.RaisedLite
// 強いくぼみ
gcTabControl1.TabStyle.TextEffect = GrapeCity.Win.Common.TextEffect.Inset;
// 軽いくぼみ
//gcTabControl1.TabStyle.TextEffect = GrapeCity.Win.Common.TextEffect.InsetLite;
// 強い浮き出し
//gcTabControl1.TabStyle.TextEffect = GrapeCity.Win.Common.TextEffect.Raised;
// 軽い浮き出し
//gcTabControl1.TabStyle.TextEffect = GrapeCity.Win.Common.TextEffect.RaisedLite;
文字の水平方向、および垂直方向の配置
TabStyle.TextHAlign プロパティでタブ内の文字の水平方向の配置を、TabStyle.TextVAlign プロパティで垂直方向の配置を決定することができます。

特に TabStyle.TextHAlign プロパティでは、通常の左揃え、右揃え、中央揃えに加え、均等割付(文字の両端にスペースを残したタイプの JustifyWithSpace と、そうではないタイプの Justify)が可能です。

なお、これらの配置は、SizeMode プロパティを Fixed に設定して、TabStyle.ItemSize プロパティに有効な数値を設定した場合に明確に反映されます。

下記は、文字の配置を設定するときのサンプルコードです。

' タブのサイズを任意の大きさに設定
GcTabControl1.SizeMode = GrapeCity.Win.Containers.TabSizeMode.Fixed
GcTabControl1.TabStyle.ItemSize = New Size(140, 32)
' 水平方向の配置を Justify に設定
GcTabControl1.TabStyle.TextHAlign = GrapeCity.Win.Common.TextHAlign.Justify
' 水平方向の配置を JustifyWithSpace に設定
'GcTabControl1.TabStyle.TextHAlign = GrapeCity.Win.Common.TextHAlign.JustifyWithSpace
' 垂直方向の配置を中央揃えに設定
'GcTabControl1.TabStyle.TextVAlign = GrapeCity.Win.Common.TextVAlign.Middle
// タブのサイズを任意の大きさに設定
gcTabControl1.SizeMode = GrapeCity.Win.Containers.TabSizeMode.Fixed;
gcTabControl1.TabStyle.ItemSize = new System.Drawing.Size(140, 32);
// 水平方向の配置を Justify に設定
gcTabControl1.TabStyle.TextHAlign = GrapeCity.Win.Common.TextHAlign.Justify;
// 水平方向の配置を JustifyWithSpace に設定
//gcTabControl1.TabStyle.TextHAlign = GrapeCity.Win.Common.TextHAlign.JustifyWithSpace;
// 垂直方向の配置を中央揃えに設定
//gcTabControl1.TabStyle.TextVAlign = GrapeCity.Win.Common.Middle;
イメージ画像の配置
TabStyle.ImageAlign プロパティにより文字に対するイメージ画像の配置を設定します。

GcTabControl1.TabStyle.ImageAlign = GrapeCity.Win.Common.ImageAlign.Top
gcTabControl1.TabStyle.ImageAlign = GrapeCity.Win.Common.ImageAlign.Top;
文字の複数行表示
TabStyle.WrapMode プロパティを WordWrap に設定することでワードラップ機能を有効にすることができます。このとき、下記のサンプルコードのように改行コードを用いて、任意の位置で改行を行うこともできます。また、CrLfWrap に設定すると、改行コードを用いた場合のみ、複数行に表示されるようになります。

なお、複数行表示は SizeMode プロパティを Fixed に設定し、TabStyle.ItemSize プロパティに有効な数値を設定した場合に明確に反映されます。

' タブのサイズを任意の大きさに設定
GcTabControl1.SizeMode = GrapeCity.Win.Containers.TabSizeMode.Fixed
GcTabControl1.TabStyle.ItemSize = New Size(100, 35)
' 複数行表示を可能にします
GcTabControl1.TabStyle.WrapMode = GrapeCity.Win.Common.TextWrapMode.WordWrap
' 改行コードが含まれるテキストのみ複数行表示にします
GcTabControl1.TabStyle.WrapMode = GrapeCity.Win.Common.TextWrapMode.CrLfWrap
GcTabPage1.Text = "WrapMode を WordWrap に設定"
GcTabPage2.Text = "改行コードによる" & vbCrLf & "複数行表示"
// タブのサイズを任意の大きさに設定
gcTabControl1.SizeMode = GrapeCity.Win.Containers.TabSizeMode.Fixed;
gcTabControl1.TabStyle.ItemSize = new System.Drawing.Size(100, 35);
// 複数行表示を可能にします
gcTabControl1.TabStyle.WrapMode = GrapeCity.Win.Common.TextWrapMode.WordWrap;
// 改行コードが含まれるテキストのみ複数行表示にします
gcTabControl1.TabStyle.WrapMode = GrapeCity.Win.Common.TextWrapMode.CrLfWrap;
gcTabPage1.Text = "WrapMode を WordWrap に設定";
gcTabPage2.Text = "改行コードによる" + "\r\n" + "複数行表示";
省略文字
文字列がタブの表示範囲に収まりきらない場合に、省略文字「･･･」を表示させることができます。省略文字を使用するかどうかは TabStyle.EllipsisMode プロパティで設定します。EllipsisEnd に設定すると、文字列の最後を省略します。EllipsisPath は、文字列の中間を省略します。EllipsisWord は、文字列の最後を単語単位で省略します。

' 文字列の最後を省略します
GcTabControl1.TabStyle.EllipsisMode = GrapeCity.Win.Common.EllipsisMode.EllipsisEnd
' 文字列の中間を省略します
GcTabControl1.TabStyle.EllipsisMode = GrapeCity.Win.Common.EllipsisMode.EllipsisPath
' 文字列の最後を単語単位で省略します
GcTabControl1.TabStyle.EllipsisMode = GrapeCity.Win.Common.EllipsisMode.EllipsisWord
// 文字列の最後を省略します
gcTabControl1.TabStyle.EllipsisMode = GrapeCity.Win.Common.EllipsisMode.EllipsisEnd;
// 文字列の中間を省略します
gcTabControl1.TabStyle.EllipsisMode = GrapeCity.Win.Common.EllipsisMode.EllipsisPath;
// 文字列の最後を単語単位で省略します
gcTabControl1.TabStyle.EllipsisMode = GrapeCity.Win.Common.EllipsisMode.EllipsisWord;
背景のパターン効果（模様）
TabStyle.PatternEffect プロパティ でタブの背景に模様を施すことができます。PatternEffect.Style プロパティでスタイルを設定し、PatternEffect.Color プロパティで色を設定します。

なお、GcTabControl.PatternEffect プロパティで全てのタブとタブページの模様を設定することができます。また、GcTabPage.PatternEffect プロパティで個々のタブとタブページに異なる模様を設定することも可能です。

GcTabControl.PatternEffect プロパティと TabStyle.PatternEffect プロパティ、または GcTabPage.PatternEffect プロパティの両方が設定されてある場合は、それぞれ後者が優先されます。

設定は、GcTabControl.Appearance プロパティ が System 以外に設定されているとき適用されます。

' GcTabControlコントロールのスタイルを設定します
GcTabControl1.Appearance = GrapeCity.Win.Containers.TabAppearance.Standard
' パターン効果を作成します
Dim objPatternEffect As New GrapeCity.Win.Common.PatternEffect _
    (GrapeCity.Win.Common.PatternStyle.BackwardDiagonal, Color.Green)
' パターン効果を適用します
GcTabControl1.TabStyle.PatternEffect = objPatternEffect
// GcTabControlコントロールのスタイルを設定します
gcTabControl1.Appearance = GrapeCity.Win.Containers.TabAppearance.Standard;
// パターン効果を作成します
GrapeCity.Win.Common.PatternEffect objPatternEffect = 
    new GrapeCity.Win.Common.PatternEffect
    (GrapeCity.Win.Common.PatternStyle.BackwardDiagonal, Color.Green);
// パターン効果を適用します
gcTabControl1.TabStyle.PatternEffect = objPatternEffect;
グラデーション
TabStyle.GradientEffect プロパティでタブの背景にグラデーションを施すことができます。GradientEffect.Style プロパティでスタイルを設定し、GradientEffect.Direction プロパティでグラデーションの方向を設定します。また、GradientEffect.StartColor プロパティでグラデーションの開始色を設定し、GradientEffect.EndColor プロパティで終了色を設定します。

なお、GcTabControl.GradientEffect プロパティで全てのタブとタブページのグラデーションを設定することができます。また、GcTabPage.GradientEffect プロパティで個々のタブとタブページに異なるグラデーションを設定することも可能です。

GcTabControl.GradientEffect プロパティと TabStyle.GradientEffect プロパティ、または GcTabPage.GradientEffect プロパティの両方が設定されてある場合は、それぞれ後者が優先されます。

設定は、GcTabControl.Appearance プロパティが System 以外に設定されているとき適用されます。

' GcTabControlコントロールのスタイルを設定します
GcTabControl1.Appearance = GrapeCity.Win.Containers.TabAppearance.Standard
' グラデーションを作成します
Dim objGradientEffect As New GrapeCity.Win.Common.GradientEffect _
    (GrapeCity.Win.Common.GradientStyle.Horizontal, _
    GrapeCity.Win.Common.GradientDirection.Forward, Color.Orange, Color.Yellow)
' グラデーションを適用します
GcTabControl1.TabStyle.GradientEffect = objGradientEffect
// GcTabControlコントロールのスタイルを設定します
gcTabControl1.Appearance = GrapeCity.Win.Containers.TabAppearance.Standard;
// グラデーションを作成します
GrapeCity.Win.Common.GradientEffect objGradientEffect = 
    new GrapeCity.Win.Common.GradientEffect
    (GrapeCity.Win.Common.GradientStyle.Horizontal, 
    GrapeCity.Win.Common.GradientDirection.Forward, Color.Orange, Color.Yellow);
// グラデーションを適用します
gcTabControl1.TabStyle.GradientEffect = objGradientEffect;
マージン
タブ領域の境界とタブ内に表示される文字のマージンは、TabStyle.Margins プロパティにより設定します。下記はマージンとタブのサイズを設定するときの例です。

GcTabControl1.TabStyle.Margins = New GrapeCity.Win.Common.Margins(15, 15, 15, 15)
gcTabControl1.TabStyle.Margins = new GrapeCity.Win.Common.Margins(15, 15, 15, 15);
タブのサイズ
タブのサイズは TabStyle.ItemSize プロパティ、または ItemSize プロパティに任意の数値を設定することで、自由に調節することができます。設定値 は 0 より大きい値を指定する必要があります。

なお、タブのサイズは SizeMode プロパティを Fixed に設定した場合に反映されます。

GcTabControl1.SizeMode = GrapeCity.Win.Containers.TabSizeMode.Fixed
' タブのサイズを変更します
GcTabControl1.TabStyle.ItemSize = New Size(130, 55)
gcTabControl1.SizeMode = GrapeCity.Win.Containers.TabSizeMode.Fixed;
// タブのマージンを設定します
gcTabControl1.TabStyle.ItemSize = new System.Drawing.Size(130, 55);
タブの最小サイズ
タブの最小サイズは TabStyle.ItemMinSize プロパティに任意の数値を設定することで、自由に調節することができます。設定値 は 0 以上を指定する必要があります。

なお、タブの最小サイズはSizeModeプロパティをFixedまたはNormalに設定した場合に反映されます。

GcTabControl1.SizeMode = GrapeCity.Win.Containers.TabSizeMode.Normal
' タブの最小サイズを変更します
GcTabControl1.TabStyle.ItemMinSize = New Size(20, 20)
gcTabControl1.SizeMode = GrapeCity.Win.Containers.TabSizeMode.Normal;
// タブの最小サイズを変更します
gcTabControl1.TabStyle.ItemMinSize = new Size(20, 20);
タブごとに異なる外観を設定
上記までの説明は、全てのタブの外観を一度に設定する例を紹介していますが、タブごとに異なる設定を行うこともできます。

全てのタブの設定を行う場合は、GcTabControl クラスが持つ TabStyle プロパティを通して行います。個々のタブの設定を行う場合は、GcTabPage クラスが持つ GcTabPage.TabStyle プロパティを通して行います。

なお、GcTabControl.TabStyle プロパティと GcTabPage.TabStyle プロパティの両方で設定を行っている場合は、GcTabPage.TabStyle プロパティの設定が優先されます。

下記はタブごとに異なる背景色を設定する場合の例です。

' GcTabControlコントロールのスタイルを設定します
GcTabControl1.Appearance = GrapeCity.Win.Containers.TabAppearance.Standard
' 3種類の背景色を作成します
Dim objTabStyle1 As New GrapeCity.Win.Containers.TabStyle
Dim objTabStyle2 As New GrapeCity.Win.Containers.TabStyle
Dim objTabStyle3 As New GrapeCity.Win.Containers.TabStyle
objTabStyle1.BackColor = Color.LightBlue
objTabStyle2.BackColor = Color.LightGreen
objTabStyle3.BackColor = Color.LightPink
' タブごとに異なる色を適用します
GcTabPage1.TabStyle = objTabStyle1
GcTabPage2.TabStyle. = objTabStyle2
GcTabPage3.TabStyle = objTabStyle3
// GcTabControlコントロールのスタイルを設定します
gcTabControl1.Appearance = GrapeCity.Win.Containers.TabAppearance.Standard;
// 3種類の背景色を作成します
GrapeCity.Win.Containers.TabStyle objTabStyle1 = new GrapeCity.Win.Containers.TabStyle(); 
GrapeCity.Win.Containers.TabStyle objTabStyle2 = new GrapeCity.Win.Containers.TabStyle(); 
GrapeCity.Win.Containers.TabStyle objTabStyle3 = new GrapeCity.Win.Containers.TabStyle(); 
objTabStyle1.BackColor = Color.LightBlue; 
objTabStyle2.BackColor = Color.LightGreen; 
objTabStyle3.BackColor = Color.LightPink;
// タブごとに異なる色を適用します
gcTabPage1.TabStyle = objTabStyle1;
gcTabPage2.TabStyle = objTabStyle2;
gcTabPage3.TabStyle = objTabStyle3;
コントロール無効時のスタイル
EnabledプロパティがFalseに設定されているタブページは無効となりますが、DisabledForeColor プロパティで無効時のタブの文字色を指定することができます。

GcTabControl1.TabStyle.DisabledForeColor = Color.Red
gcTabControl1.TabStyle.DisabledForeColor = Color.Red;


関連トピック
GcTabControlコントロール
GcTabControlプロパティページ
基本スタイルの選択
タブの配色の設定
タブのスキン機能
タブのオーナー描画
タブのホットトラック
選択タブの外観
テキストの縦表示とタブの配置
レイアウト
ナビゲーター
コマンドアイコン
タブの閉じるボタン
タブの固定
子コントロールに3D効果を追加
子コントロールにキャプションを追加
設定の保存と読み込み
タッチ機能

 

 

© 2008 GrapeCity inc. All rights reserved.