[VB, C#] コントロールの背景にグラデーションを描画する

言語フィルタ：

概要

コントロールの背景にグラデーションを描画する方法を紹介します。

グラデーションを描画すると次のようになります。

Horizontal	Vertical

対象コントロール

System.Windows.Forms.Control から派生しているクラス

解説

コントロールの背景を描画する方法がわからない方は、まず「コントロールの背景を描画する」を参照してください。

コントロールの外観を簡単にリッチにする方法はグラデーションをかけることです。グラデーションをかけるには LinearGradientBrush クラスを使用して描画するだけです。LinearGradientBrush クラスは Brush クラスを継承しているため、Graphics.FillRectangle メソッドのように Brush クラスを受け取るメソッドで使用することが出来ます。

LinearGradientBrush クラスのコンストラクタに LinearGradientMode 列挙体を渡すことで、グラデーションの方向を「左から右」や「上から下」などに指定することが出来ます。

ソースコード

Label コントロールの背景にグラデーションをかけるサンプルを紹介します。

グラデーションの開始色には BackColor プロパティを使用しています。グラデーションの終了色を示す BackColor2 プロパティと、グラデーションの方向を示す GradientMode プロパティ（LinearGradientMode 列挙体）を追加しています。

Visual Basic

コードのコピー

Imports System
Imports System.ComponentModel
Imports System.Drawing
Imports System.Drawing.Drawing2D
Imports System.Windows.Forms

Namespace Extentions

    Public Class GradientBackgroundDraw
        Inherits System.Windows.Forms.Label

        Public Sub New()
            MyBase.BackColor = Color.Transparent
            Me._GradientMode = LinearGradientMode.Horizontal
        End Sub

        Protected Overrides Sub OnPaintBackground(ByVal pevent As System.Windows.Forms.PaintEventArgs)
            If Me.BackColor = Color.Transparent OrElse Me.BackColor2 = Color.Transparent Then
                MyBase.OnPaintBackground(pevent)
            End If

            Using lgb As New LinearGradientBrush(Me.ClientRectangle, Me.BackColor, Me.BackColor2, Me.GradientMode)
                pevent.Graphics.FillRectangle(lgb, Me.ClientRectangle)
            End Using
        End Sub

#Region " BackColor "

        Private _BackColor As Color
        Public Shadows Property BackColor() As Color
            Get
                If Me._BackColor <> Color.Empty Then
                    Return Me._BackColor
                End If
                If Me.Parent IsNot Nothing Then
                    Return Me.Parent.BackColor
                End If

                Return Control.DefaultBackColor
            End Get
            Set(ByVal value As Color)
                Me._BackColor = value
                Me.Invalidate()
            End Set
        End Property

        Public Overrides Sub ResetBackColor()
            Me.BackColor = Color.Empty
        End Sub

        Private Function ShouldSerializeBackColor() As Boolean
            Return Me._BackColor <> Color.Empty
        End Function

#End Region

#Region " BackColor2 "

        Private _BackColor2 As Color
        <Category("表示")> _
        <Description("コンポーネントの背景色のグラデーションの終了色です。")> _
        Public Property BackColor2() As Color
            Get
                If Me._BackColor2 <> Color.Empty Then
                    Return Me._BackColor2
                End If
                If Me.Parent IsNot Nothing Then
                    Return Me.Parent.BackColor
                End If

                Return Control.DefaultBackColor
            End Get
            Set(ByVal value As Color)
                Me._BackColor2 = value
                Me.Invalidate()
            End Set
        End Property

        Public Sub ResetBackColor2()
            Me.BackColor2 = Color.Empty
        End Sub

        Private Function ShouldSerializeBackColor2() As Boolean
            Return Me._BackColor2 <> Color.Empty
        End Function

#End Region

        Private _GradientMode As LinearGradientMode
        <Category("表示")> _
        <DefaultValue(GetType(LinearGradientMode), "Horizontal")> _
        <Description("コンポーネントの背景色のグラデーションの方向です。")> _
        Public Property GradientMode() As LinearGradientMode
            Get
                Return Me._GradientMode
            End Get
            Set(ByVal value As LinearGradientMode)
                Me._GradientMode = value
                Me.Invalidate()
            End Set
        End Property

    End Class

End Namespace

コードのコピー

using System;
using System.ComponentModel;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;

namespace Extentions
{
    class GradientBackgroundDraw : System.Windows.Forms.Label
    {
        public GradientBackgroundDraw()
        {
            base.BackColor = Color.Transparent;
            this._GradientMode = LinearGradientMode.Horizontal;
        }

        protected override void OnPaintBackground(PaintEventArgs pevent)
        {
            if ((this.BackColor == Color.Transparent) || (this.BackColor2 == Color.Transparent))
            {
                base.OnPaintBackground(pevent);
            }

            using (LinearGradientBrush lgb = new LinearGradientBrush(this.ClientRectangle, this.BackColor, this.BackColor2, this.GradientMode))
            {
                pevent.Graphics.FillRectangle(lgb, this.ClientRectangle);
            }
        }

        #region BackColor

        private Color _BackColor;
        public new Color BackColor
        {
            get
            {
                if (this._BackColor != Color.Empty)
                {
                    return this._BackColor;
                }

                if (this.Parent != null)
                {
                    return this.Parent.BackColor;
                }

                return Control.DefaultBackColor;
            }
            set
            {
                this._BackColor = value;
                this.Invalidate();
            }
        }

        public override void ResetBackColor()
        {
            this.BackColor = Color.Empty;
        }

        private Boolean ShouldSerializeBackColor()
        {
            return this._BackColor != Color.Empty;
        }

        #endregion

        #region BackColor2

        private Color _BackColor2;
        [Category("表示")]
        [Description("コンポーネントの背景色のグラデーションの終了色です。")]
        public Color BackColor2
        {
            get
            {
                if (this._BackColor2 != Color.Empty)
                {
                    return this._BackColor2;
                }
                if (this.Parent != null)
                {
                    return this.Parent.BackColor;
                }

                return Control.DefaultBackColor;
            }
            set
            {
                this._BackColor2 = value;
                this.Invalidate();
            }
        }

        public void ResetBackColor2()
        {
            this.BackColor2 = Color.Empty;
        }

        private Boolean ShouldSerializeBackColor2()
        {
            return this._BackColor2 != Color.Empty;
        }

        #endregion

        private LinearGradientMode _GradientMode;
        [Category("表示")]
        [DefaultValue(typeof(LinearGradientMode), "Horizontal")]
        [Description("コンポーネントの背景色のグラデーションの方向です。")]
        public LinearGradientMode GradientMode
        {
            get { return this._GradientMode; }
            set
            {
                this._GradientMode = value;
                this.Invalidate();
            }
        }
    }
}