GrapeCity PlusPak for Windows Forms 11.0J
タブのスキン機能

スキン機能は、既存スタイルの拡張スタイルをいくつか保持するほか、開発者自身が自由にタブを描き、コントロールに適用できる、タブスタイルの拡張機能です。スキン機能は タブのオーナー描画 と違い、作成したスタイルをスキンオブジェクトとして管理でき、「基本スタイルの選択」の使用方法の感覚で、プロパティ設定により適用できます。そのため、複数コントロール間での再利用や、エンドユーザーの操作に合せたスタイルの切り替えなど容易に行える利点があります。スキンには次のような種類があります。



これらのスキンが持つ描画機能(プロパティやメソッド)を使用してスタイルを作成します。また、設定はコードにより行います。

上記のスキンの中でも特別な機能を持つ StandardSkinButtonsSkinImageSkin の3つのスキンについて、以下に解説します。また、Skin を利用してゼロからタブを描画する場合の例も説明します。
StandardSkin(スタンダードスキン)
スタンダードスキンは、タブの両角に丸みをつけるか、またはカットした描画にするかを選択できる機能を含んでいます。また、これらの丸み、およびカットの具合を自由に調整することもできます。

両角のスタイルは 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 プロパティ を使用しています。


コードによる設定は、次のようになります。

' 画像をセットします
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 を使用して作成した簡単なスタイルとコード例を挙げます。

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();
        }
    }
}
関連トピック

 

 


© 2008 GrapeCity inc. All rights reserved.