これらのスキンが持つ描画機能(プロパティやメソッド)を使用してスタイルを作成します。また、設定はコードにより行います。
上記のスキンの中でも特別な機能を持つ StandardSkin、ButtonsSkin、ImageSkin の3つのスキンについて、以下に解説します。また、Skin を利用してゼロからタブを描画する場合の例も説明します。
StandardSkin(スタンダードスキン)
スタンダードスキンは、タブの両角に丸みをつけるか、またはカットした描画にするかを選択できる機能を含んでいます。また、これらの丸み、およびカットの具合を自由に調整することもできます。
両角のスタイルは StandardSkin.CornerStyle プロパティ で設定します。また、角の丸み、およびカットの大きさは StandardSkin.CornerSize プロパティ で調節します。 StandardSkin.CornerSize プロパティ は、値が大きい場合に丸み、およびカットの大きい描画になります。
コードによる設定は、次のようになります。
両角のスタイルは StandardSkin.CornerStyle プロパティ で設定します。また、角の丸み、およびカットの大きさは StandardSkin.CornerSize プロパティ で調節します。 StandardSkin.CornerSize プロパティ は、値が大きい場合に丸み、およびカットの大きい描画になります。
スタイル | コーナーサイズを 10 に設定した場合 | コーナーサイズを 20 に設定した場合 |
---|---|---|
BothRound | ||
BothCut | ||
LeftCut | ||
RightCut |
コードによる設定は、次のようになります。
' スタンダードスキンを作成します Dim objStandardSkin As New GrapeCity.Win.Containers.Skins.StandardSkin ' コーナースタイルを設定します objStandardSkin.CornerStyle = GrapeCity.Win.Containers.Skins.CornerStyle.BothRound 'コーナーサイズを設定します objStandardSkin.CornerSize = 10 ' GcTabControlコントロールのスタイルにスキンを設定します GcTabControl1.Appearance = GrapeCity.Win.Containers.TabAppearance.Skin ' スタンダードスキンを適用します GcTabControl1.Skin = objStandardSkin
// スタンダードスキンを作成します GrapeCity.Win.Containers.Skins.StandardSkin objStandardSkin = new GrapeCity.Win.Containers.Skins.StandardSkin(); // コーナースタイルを設定します objStandardSkin.CornerStyle = GrapeCity.Win.Containers.Skins.CornerStyle.BothRound; // コーナーサイズを設定します objStandardSkin.CornerSize = 10; // GcTabControlコントロールのスタイルにスキンを設定します gcTabControl1.Appearance = GrapeCity.Win.Containers.TabAppearance.Skin; // スタンダードスキンを適用します gcTabControl1.Skin = objStandardSkin;
ButtonsSkin(ボタンスキン)
ボタンスキンは、予めいくつかの完成されたスタイルを保持しています。スタイルは ButtonsSkin.ButtonsSkinStyle プロパティ で設定します。スタイルは、以下のような種類があります。
コードによる設定は、次のようになります。
Flat | |
Popup | |
ActiveFlat | |
Borderless | |
XPButton | |
XPToolBarButton | |
Office2003GradientToolBarButton | |
Office2003HighlightToolBarButton | |
VS2003WhiteButton |
コードによる設定は、次のようになります。
' ボタンスキンを作成します Dim objButtonsSkin As New GrapeCity.Win.Containers.Skins.ButtonsSkin ' ボタンスタイルを設定します objButtonsSkin.ButtonsSkinStyle = GrapeCity.Win.Containers.Skins.ButtonsSkinStyle.ActiveFlat ' GcTabControlコントロールのスタイルにスキンを設定します GcTabControl1.Appearance = GrapeCity.Win.Containers.TabAppearance.Skin ' ボタンスキンを適用します GcTabControl1.Skin = objButtonsSkin
// ボタンスキンを作成します GrapeCity.Win.Containers.Skins.ButtonsSkin objButtonsSkin = new GrapeCity.Win.Containers.Skins.ButtonsSkin(); // ボタンスタイルを設定します objButtonsSkin.ButtonsSkinStyle = GrapeCity.Win.Containers.Skins.ButtonsSkinStyle.ActiveFlat; // GcTabControlコントロールのスタイルにスキンを設定します gcTabControl1.Appearance = GrapeCity.Win.Containers.TabAppearance.Skin; // ボタンスキンを適用します gcTabControl1.Skin = objButtonsSkin;
ImageSkin(イメージスキン)
イメージスキンを使用すると、GcTabControlコントロールの描画を画像により形成できるようになります。
以下のサンプルイメージでは、タブ、ナビゲーター、タブページの境界線に画像を用いて描画しています。タブの画像設定は ImageSkin.DefaultStripImageSettings プロパティ、ナビゲーターは ImageSkin.NextButtonImageSettings プロパティ と ImageSkin.PreviousButtonImageSettings プロパティ、境界線は ImageSkin.LeftBorderImage プロパティ と ImageSkin.RightBorderImage プロパティ を使用しています。
コードによる設定は、次のようになります。
以下のサンプルイメージでは、タブ、ナビゲーター、タブページの境界線に画像を用いて描画しています。タブの画像設定は ImageSkin.DefaultStripImageSettings プロパティ、ナビゲーターは ImageSkin.NextButtonImageSettings プロパティ と ImageSkin.PreviousButtonImageSettings プロパティ、境界線は ImageSkin.LeftBorderImage プロパティ と ImageSkin.RightBorderImage プロパティ を使用しています。
コードによる設定は、次のようになります。
' 画像をセットします Dim TabImage1 As New Bitmap _ ("ここに通常表示されるタブの画像ファイルのフルパス名を入力してください") Dim TabImage2 As New Bitmap _ ("ここにホットトラック時に表示されるタブの画像のフルパス名を入力してください") Dim TabImage3 As New Bitmap _ ("ここにタブをクリックした時に表示されるタブの画像のフルパス名を入力してください") Dim TabImage4 As New Bitmap _ ("ここにタブが無効時に表示されるタブの画像のフルパス名を入力してください") Dim TabImage5 As New Bitmap _ ("ここに選択されているタブの画像のフルパス名を入力してください") Dim NaviImage1 As New Bitmap _ ("ここにナビゲーターの次へボタンに表示する画像のフルパス名を入力してください") Dim NaviImage2 As New Bitmap _ ("ここにナビゲーターの前へボタンに表示する画像のフルパス名を入力してください") Dim BorderImage1 As New Bitmap _ ("ここにタブページの左境界線に表示する画像のフルパス名を入力してください") Dim BorderImage2 As New Bitmap _ ("ここにタブページの右境界線に表示する画像のフルパス名を入力してください") ' イメージスキンを作成します Dim objImageSkin As New GrapeCity.Win.Containers.Skins.ImageSkin ' タブに画像を設定します objImageSkin.DefaultStripImageSettings = _ New GrapeCity.Win.Containers.Skins.ImageSettings(TabImage1, TabImage2, TabImage3, _ TabImage4, TabImage5) ' ナビゲーターに画像を設定します objImageSkin.NextButtonImageSettings.NormalImage = NaviImage1 objImageSkin.PreviousButtonImageSettings.NormalImage = NaviImage2 ' タブページの境界線に画像を設定します objImageSkin.LeftBorderImage = BorderImage1 objImageSkin.RightBorderImage = BorderImage2 ' タブページの境界線のマージンを設定します objImageSkin.PageBorderMargins = New GrapeCity.Win.Containers.Margins(1, 0, 1, 0) ' GcTabControlコントロールのスタイルにスキンを設定します GcTabControl1.Appearance = GrapeCity.Win.Containers.TabAppearance.Skin ' イメージスキンを適用します GcTabControl1.Skin = objImageSkin ' GcTabControlコントロールの背景色を設定します GcTabControl1.BackColor = Color.AliceBlue
// 画像をセットします Bitmap TabImage1 = new Bitmap (@"ここに通常表示されるタブの画像ファイルのフルパス名を入力してください"); Bitmap TabImage2 = new Bitmap (@"ここにホットトラック時に表示されるタブの画像のフルパス名を入力してください"); Bitmap TabImage3 = new Bitmap (@"ここにタブをクリックした時に表示されるタブの画像のフルパス名を入力してください"); Bitmap TabImage4 = new Bitmap (@"ここにタブが無効時に表示されるタブの画像のフルパス名を入力してください"); Bitmap TabImage5 = new Bitmap (@"ここに選択されているタブの画像のフルパス名を入力してください"); Bitmap NaviImage1 = new Bitmap (@"ここにナビゲーターの次へボタンに表示する画像のフルパス名を入力してください"); Bitmap NaviImage2 = new Bitmap (@"ここにナビゲーターの前へボタンに表示する画像のフルパス名を入力してください"); Bitmap BorderImage1 = new Bitmap (@"ここにタブページの左境界線に表示する画像のフルパス名を入力してください"); Bitmap BorderImage2 = new Bitmap (@"ここにタブページの右境界線に表示する画像のフルパス名を入力してください"); // イメージスキンを作成します GrapeCity.Win.Containers.Skins.ImageSkin objImageSkin = new GrapeCity.Win.Containers.Skins.ImageSkin(); // タブに画像を設定します objImageSkin.DefaultStripImageSettings = new GrapeCity.Win.Containers.Skins.ImageSettings (TabImage1, TabImage2, TabImage3, TabImage4, TabImage5); // ナビゲーターに画像を設定します objImageSkin.NextButtonImageSettings.NormalImage = NaviImage1; objImageSkin.PreviousButtonImageSettings.NormalImage = NaviImage2; // タブページの境界線に画像を設定します objImageSkin.LeftBorderImage = BorderImage1; objImageSkin.RightBorderImage = BorderImage2; // タブページの境界線のマージンを設定します objImageSkin.PageBorderMargins = new GrapeCity.Win.Containers.Margins(1, 0, 1, 0); // GcTabControlコントロールのスタイルにスキンを設定します gcTabControl1.Appearance = GrapeCity.Win.Containers.TabAppearance.Skin; // イメージスキンを適用します gcTabControl1.Skin = objImageSkin; // GcTabControlコントロールの背景色を設定します gcTabControl1.BackColor = Color.AliceBlue;
ゼロからタブを描画
各種スキンオブジェクトが持つ描画メソッドをオーバーライドして1つ1つの部位を描画し、スタイルを作成することも可能です。
ここでは、スキンオブジェクトの中でも最も基本に位置する Skin を使用して作成した簡単なスタイルとコード例を挙げます。
ここでは、スキンオブジェクトの中でも最も基本に位置する Skin を使用して作成した簡単なスタイルとコード例を挙げます。
Imports GrapeCity.Win.Containers.Skins Public Class Form1 Private Sub Form1_Load(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles MyBase.Load ' GcTabControlコントロールのスタイルにスキンを設定します GcTabControl1.Appearance = GrapeCity.Win.Containers.TabAppearance.Skin ' 作成したスキンを適用します GcTabControl1.Skin = New FreeStyle ' GcTabControlコントロールの背景色を設定します GcTabControl1.BackColor = Color.LightYellow ' 背景を透過表示にします GcTabControl1.TransparentBackground = True End Sub End Class Public Class FreeStyle Inherits Skin Public Sub New() End Sub Public Overloads Overrides Function GetUseVisualStyleBackColor() As Boolean ' XP テーマの背景色を使用しません Return False End Function ' タブ領域を描画します Public Overloads Overrides Sub DrawStrip(ByVal graphics As Graphics, _ ByVal rectangle As Rectangle, ByVal stripIndex As Integer, _ ByVal stripSettings As StripSettings, ByVal controlSettings As ControlSettings) ' 背景色を設定します graphics.FillRectangle(Brushes.LightYellow, rectangle) ' キャプションを描画します Dim strCaption As String = stripSettings.Text Dim intCaptionHeight As Integer = TextRenderer.MeasureText(strCaption, _ stripSettings.TabStyle.Font).Height Dim objBrush As System.Drawing.SolidBrush = New SolidBrush(Color.Navy) graphics.DrawString(strCaption, stripSettings.TabStyle.Font, objBrush, _ New PointF(rectangle.Left + 5, rectangle.Top + _ ((rectangle.Height - intCaptionHeight) / 2))) objBrush.Dispose() ' 境界線を描画します Dim objPen As System.Drawing.Pen = New System.Drawing.Pen(Color.SteelBlue, 1) Dim objRectangle As Rectangle = New Rectangle(rectangle.Location, _ New Size(rectangle.Width - 1, rectangle.Height)) graphics.DrawRectangle(objPen, objRectangle) objPen.Dispose() End Sub ' パネルの枠線を描画します Public Overloads Overrides Sub DrawPanelBorder(ByVal graphics As Graphics, _ ByVal rectangle As Rectangle, ByVal controlSettings As ControlSettings) ' 背景色を設定します Dim objBrush As SolidBrush = New SolidBrush(controlSettings.BackColor) graphics.FillRectangle(objBrush, rectangle) ' 境界線を描画します Dim objPen As Pen = New System.Drawing.Pen(Color.SteelBlue, 1) Dim objRectangle As Rectangle = New Rectangle(rectangle.Location, _ New Size(rectangle.Width - 1, rectangle.Height - 1)) graphics.DrawRectangle(objPen, objRectangle) objPen.Dispose() End Sub End Class
・・・ using GrapeCity.Win.Containers.Skins; ・・・ { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { // GcTabControlコントロールのスタイルにスキンを設定します gcTabControl1.Appearance = GrapeCity.Win.Containers.TabAppearance.Skin; // 作成したスキンを適用します gcTabControl1.Skin = new FreeStyle(); // GcTabControlコントロールの背景色を設定します gcTabControl1.BackColor = Color.LightYellow; // 背景を透過表示にします gcTabControl1.TransparentBackground = true; } } public class FreeStyle : Skin { public FreeStyle() { } public override bool GetUseVisualStyleBackColor() { // XP テーマの背景色を使用しません return false; } // タブ領域を描画します public override void DrawStrip(Graphics graphics, Rectangle rectangle, int stripIndex, StripSettings stripSettings, ControlSettings controlSettings) { // 背景色を設定します graphics.FillRectangle(Brushes.LightYellow, rectangle); // キャプションを描画します string strCaption = stripSettings.Text; int intCaptionHeight = TextRenderer.MeasureText (strCaption, stripSettings.TabStyle.Font).Height; System.Drawing.SolidBrush objBrush = new SolidBrush(Color.Navy); graphics.DrawString(strCaption, stripSettings.TabStyle.Font, objBrush, new PointF(rectangle.Left + 5, rectangle.Top + ((rectangle.Height - intCaptionHeight) / 2))); objBrush.Dispose(); // 背景色を設定します System.Drawing.Pen objPen = new System.Drawing.Pen(Color.SteelBlue, 1); Rectangle objRectangle = new Rectangle(rectangle.Location, new Size(rectangle.Width - 1, rectangle.Height)); graphics.DrawRectangle(objPen, objRectangle); objPen.Dispose(); } // パネルの枠線を描画します public override void DrawPanelBorder(Graphics graphics, Rectangle rectangle, ControlSettings controlSettings) { // 背景色を設定します SolidBrush objBrush = new SolidBrush(controlSettings.BackColor); graphics.FillRectangle(objBrush, rectangle); // 境界線を描画します Pen objPen = new System.Drawing.Pen(Color.SteelBlue, 1); Rectangle objRectangle = new Rectangle(rectangle.Location, new Size(rectangle.Width - 1, rectangle.Height - 1)); graphics.DrawRectangle(objPen, objRectangle); objPen.Dispose(); } } }