How to: Display a Gradient Fill

[This documentation is for preview only, and is subject to change in later releases. Blank topics are included as placeholders.]

You can add colorful and pleasing graphics to your application by displaying a gradient fill. The following code example shows how to display a gradient fill in a custom control and as the form's background.

1. In Visual Studio, create a Smart Device project.

2. Add the Gradientfill and GradientFilledButton classes to your project.

   
   NotInheritable Public Class GradientFill
   
       ' This method wraps the PInvoke to GradientFill.
       ' Parmeters:
       '  gr - The Graphics object we are filling
       '  rc - The rectangle to fill
       '  startColor - The starting color for the fill
       '  endColor - The ending color for the fill
       '  fillDir - The direction to fill
       '
       ' Returns true if the call to GradientFill succeeded; false
       ' otherwise.
       Public Shared Function Fill(ByVal gr As Graphics, ByVal rc As Rectangle, ByVal startColor As Color, _
           ByVal endColor As Color, ByVal fillDir As FillDirection) As Boolean 
   
           ' Initialize the data to be used in the call to GradientFill.
           Dim tva(1) As Win32Helper.TRIVERTEX
           tva(0) = New Win32Helper.TRIVERTEX(rc.X, rc.Y, startColor)
           tva(1) = New Win32Helper.TRIVERTEX(rc.Right, rc.Bottom, endColor)
           Dim gra() As Win32Helper.GRADIENT_RECT = {New Win32Helper.GRADIENT_RECT(0, 1)}
   
           ' Get the hDC from the Graphics object.
           Dim hdc As IntPtr = gr.GetHdc()
   
           ' PInvoke to GradientFill.
           Dim b As Boolean
   
           b = Win32Helper.GradientFill(hdc, tva, CType(tva.Length, System.Int32), gra, CType(gra.Length, System.Int32), CType(fillDir, System.Int32))
   
           System.Diagnostics.Debug.Assert(b, String.Format("GradientFill failed: {0}", System.Runtime.InteropServices.Marshal.GetLastWin32Error()))
   
           ' Release the hDC from the Graphics object.
           gr.ReleaseHdc(hdc)
   
           Return b
   
       End Function
   
       ' The direction to the GradientFill will follow
       Public Enum FillDirection
   
           ' The fill goes horizontally
           LeftToRight = Win32Helper.GRADIENT_FILL_RECT_H
   
           ' The fill goes vertically
           TopToBottom = Win32Helper.GRADIENT_FILL_RECT_V
       End Enum
   End Class
   
   ' Extends the standard button control and performs
   ' custom drawing with a GradientFill background.
   Public Class GradientFilledButton
       Inherits Control
       Private components As System.ComponentModel.IContainer = Nothing
   
   
       Public Sub New()
           components = New System.ComponentModel.Container()
           Me.Font = New Font(Me.Font.Name, Me.Font.Size, FontStyle.Bold)
   
       End Sub
   
       ' Controls the direction in which the button is filled.
       Public Property FillDirection() As GradientFill.FillDirection
           Get
               Return fillDirectionValue
           End Get
           Set(ByVal value As GradientFill.FillDirection)
               fillDirectionValue = value
               Invalidate()
           End Set
       End Property
       Private fillDirectionValue As GradientFill.FillDirection
   
       ' The start color for the GradientFill. This is the color
       ' at the left or top of the control depeneding on the value
       ' of the FillDirection property.
       Public Property StartColor() As Color
           Get
               Return startColorValue
           End Get
           Set(ByVal value As Color)
               startColorValue = value
               Invalidate()
           End Set
       End Property
       Private startColorValue As Color = Color.Red
   
       ' The end color for the GradientFill. This is the color
       ' at the right or bottom of the control depending on the value
       ' of the FillDirection property
       Public Property EndColor() As Color
           Get
               Return endColorValue
           End Get
           Set(ByVal value As Color)
               endColorValue = value
               Invalidate()
           End Set
       End Property
       Private endColorValue As Color = Color.Blue
   
       ' This is the offset from the left or top edge
       '  of the button to start the gradient fill.
       Public Property StartOffset() As Integer
           Get
               Return startOffsetValue
           End Get
           Set(ByVal value As Integer)
               startOffsetValue = value
               Invalidate()
           End Set
       End Property
       Private startOffsetValue As Integer
   
       ' This is the offset from the right or bottom edge
       '  of the button to end the gradient fill.
       Public Property EndOffset() As Integer
           Get
               Return endOffsetValue
           End Get
           Set(ByVal value As Integer)
               endOffsetValue = value
               Invalidate()
           End Set
       End Property
       Private endOffsetValue As Integer
   
       ' Used to double-buffer our drawing to avoid flicker
       ' between painting the background, border, focus-rect
       ' and the text of the control.
       Private Property DoubleBufferImage() As Bitmap
           Get
               If bmDoubleBuffer Is Nothing Then
                   bmDoubleBuffer = New Bitmap(Me.ClientSize.Width, Me.ClientSize.Height)
               End If
               Return bmDoubleBuffer
           End Get
           Set(ByVal value As Bitmap)
               If Not (bmDoubleBuffer Is Nothing) Then
                   bmDoubleBuffer.Dispose()
               End If
               bmDoubleBuffer = value
           End Set
       End Property
       Private bmDoubleBuffer As Bitmap
   
   
       ' Called when the control is resized. When that happens,
       ' recreate the bitmap used for double-buffering.
       Protected Overrides Sub OnResize(ByVal e As EventArgs)
           DoubleBufferImage = New Bitmap(Me.ClientSize.Width, Me.ClientSize.Height)
           MyBase.OnResize(e)
       End Sub
   
   
       ' Called when the control gets focus. Need to repaint
       ' the control to ensure the focus rectangle is drawn correctly.
       Protected Overrides Sub OnGotFocus(ByVal e As EventArgs)
           MyBase.OnGotFocus(e)
           Me.Invalidate()
       End Sub
   
       ' Called when the control loses focus. Need to repaint
       ' the control to ensure the focus rectangle is removed.
       Protected Overrides Sub OnLostFocus(ByVal e As EventArgs)
           MyBase.OnLostFocus(e)
           Me.Invalidate()
       End Sub
   
   
       Protected Overrides Sub OnMouseMove(ByVal e As MouseEventArgs)
           If Me.Capture Then
               Dim coord As New Point(e.X, e.Y)
               If Me.ClientRectangle.Contains(coord) <> Me.ClientRectangle.Contains(lastCursorCoordinates) Then
                   DrawButton(Me.ClientRectangle.Contains(coord))
               End If
               lastCursorCoordinates = coord
           End If
           MyBase.OnMouseMove(e)
   
       End Sub
   
       ' The coordinates of the cursor the last time
       ' there was a MouseUp or MouseDown message.
       Private lastCursorCoordinates As Point
   
   
       Protected Overrides Sub OnMouseDown(ByVal e As MouseEventArgs)
           If e.Button = System.Windows.Forms.MouseButtons.Left Then
               ' Start capturing the mouse input
               Me.Capture = True
               ' Get the focus because button is clicked.
               Me.Focus()
   
               ' draw the button
               DrawButton(True)
           End If
   
           MyBase.OnMouseDown(e)
   
       End Sub
   
   
       Protected Overrides Sub OnMouseUp(ByVal e As MouseEventArgs)
           Me.Capture = False
           DrawButton(False)
           MyBase.OnMouseUp(e)
       End Sub
   
       Private bGotKeyDown As Boolean = False
   
       Protected Overrides Sub OnKeyDown(ByVal e As KeyEventArgs)
           bGotKeyDown = True
           Select Case e.KeyCode
               Case Keys.Space, Keys.Enter
                   DrawButton(True)
               Case Keys.Up, Keys.Left
                   Me.Parent.SelectNextControl(Me, False, False, True, True)
               Case Keys.Down, Keys.Right
                   Me.Parent.SelectNextControl(Me, True, False, True, True)
               Case Else
                   bGotKeyDown = False
                   MyBase.OnKeyDown(e)
           End Select
   
       End Sub
   
   
       Protected Overrides Sub OnKeyUp(ByVal e As KeyEventArgs)
           Select Case e.KeyCode
               Case Keys.Space, Keys.Enter
                   If bGotKeyDown Then
                       DrawButton(False)
                       OnClick(EventArgs.Empty)
                       bGotKeyDown = False
                   End If
               Case Else
                   MyBase.OnKeyUp(e)
           End Select
   
       End Sub
   
   
       ' Override this method with no code to avoid flicker.
       Protected Overrides Sub OnPaintBackground(ByVal e As PaintEventArgs)
   
       End Sub
   
       Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs)
           DrawButton(e.Graphics, Me.Capture AndAlso Me.ClientRectangle.Contains(lastCursorCoordinates))
   
       End Sub
   
   
       ' Gets a Graphics object for the provided window handle
       '  and then calls DrawButton(Graphics, bool).
       ' If pressed is true, the button is drawn
       ' in the depressed state.
       Overloads Sub DrawButton(ByVal pressed As Boolean)
           Dim gr As Graphics = Me.CreateGraphics()
           DrawButton(gr, pressed)
           gr.Dispose()
       End Sub
   
   
       ' Draws the button on the specified Grapics
       ' in the specified state.
       '
       ' Parameters:
       '  gr - The Graphics object on which to draw the button.
       '  pressed - If true, the button is drawn in the depressed state.
       Overloads Sub DrawButton(ByVal gr As Graphics, ByVal pressed As Boolean)
           ' Get a Graphics object from the background image.
           Dim gr2 As Graphics = Graphics.FromImage(DoubleBufferImage)
   
           ' Fill solid up until where the gradient fill starts.
           If startOffsetValue > 0 Then
               If fillDirectionValue = GradientFill.FillDirection.LeftToRight Then
                   If pressed Then
                       gr2.FillRectangle(New SolidBrush(EndColor), 0, 0, startOffsetValue, Height)
                   Else
                       gr2.FillRectangle(New SolidBrush(StartColor), 0, 0, startOffsetValue, Height)
                   End If
               Else
                   If pressed Then
                       gr2.FillRectangle(New SolidBrush(EndColor), 0, 0, Width, startOffsetValue)
                   Else
                       gr2.FillRectangle(New SolidBrush(StartColor), 0, 0, Width, startOffsetValue)
                   End If
               End If
           End If
   
           ' Draw the gradient fill.
           Dim rc As Rectangle = Me.ClientRectangle
           If fillDirectionValue = GradientFill.FillDirection.LeftToRight Then
               rc.X = startOffsetValue
               rc.Width = rc.Width - startOffsetValue - endOffsetValue
           Else
               rc.Y = startOffsetValue
               rc.Height = rc.Height - startOffsetValue - endOffsetValue
           End If
   
           If pressed Then
               GradientFill.Fill(gr2, rc, endColorValue, startColorValue, fillDirectionValue)
           Else
               GradientFill.Fill(gr2, rc, startColorValue, endColorValue, fillDirectionValue)
           End If
   
           ' Fill solid from the end of the gradient fill
           ' to the edge of the button.
           If endOffsetValue > 0 Then
               If fillDirectionValue = GradientFill.FillDirection.LeftToRight Then
                   If pressed Then
                       gr2.FillRectangle(New SolidBrush(StartColor), rc.X + rc.Width, 0, endOffsetValue, Height)
                   Else
                       gr2.FillRectangle(New SolidBrush(EndColor), rc.X + rc.Width, 0, endOffsetValue, Height)
                   End If
               Else
                   If pressed Then
                       gr2.FillRectangle(New SolidBrush(StartColor), 0, rc.Y + rc.Height, Width, endOffsetValue)
                   Else
                       gr2.FillRectangle(New SolidBrush(StartColor), 0, rc.Y + rc.Height, Width, endOffsetValue)
                   End If
               End If
           End If
   
           ' Draw the text.
           Dim sf As New StringFormat()
           sf.Alignment = StringAlignment.Center
           sf.LineAlignment = StringAlignment.Center
           gr2.DrawString(Me.Text, Me.Font, New SolidBrush(Me.ForeColor), Me.ClientRectangle, sf)
   
           ' Draw the border.
           ' Need to shrink the width and height by 1 otherwise
           ' there will be no border on the right or bottom.
           rc = Me.ClientRectangle
           rc.Width -= 1
           rc.Height -= 1
           Dim pen As New Pen(SystemColors.WindowFrame)
   
           gr2.DrawRectangle(pen, rc)
   
           ' Draw from the background image onto the screen.
           gr.DrawImage(DoubleBufferImage, 0, 0)
           gr2.Dispose()
   
       End Sub
   
   
       Protected Overrides Sub Dispose(ByVal disposing As Boolean)
           If disposing AndAlso Not (components Is Nothing) Then
               components.Dispose()
           End If
           MyBase.Dispose(disposing)
   
       End Sub
   End Class
   
   

3. Add the Win32Helper class to your project, which contains the platform invoke and structures for native code interoperability.

   Public NotInheritable Class Win32Helper
   
       Public Structure TRIVERTEX
           Public x As Integer
           Public y As Integer
           Public Red As System.Int16
           Public Green As System.Int16
           Public Blue As System.Int16
           Public Alpha As System.Int16
   
           Public Sub New(ByVal x As Integer, ByVal y As Integer, ByVal color As Color)
               MyClass.New(x, y, color.R, color.G, color.B, color.A)
           End Sub
   
           Public Sub New(ByVal x As Integer, ByVal y As Integer, ByVal red As System.Int16, ByVal green As System.Int16, ByVal blue As System.Int16, ByVal alpha As System.Int16)
               Me.x = x
               Me.y = y
   
               Me.Red = CInt(red << 8)
               Me.Green = CInt(green << 8)
               Me.Blue = CInt(blue << 8)
               Me.Alpha = CInt(alpha << 8)
           End Sub
       End Structure
   
       Public Structure GRADIENT_RECT
           Public UpperLeft As System.Int32
           Public LowerRight As System.Int32
   
           Public Sub New(ByVal ul As System.Int32, ByVal lr As System.Int32)
               Me.UpperLeft = ul
               Me.LowerRight = lr
           End Sub
       End Structure
   
   
       Public Declare Function GradientFill Lib "coredll.dll" Alias "GradientFill" (ByVal hdc As IntPtr, _
        ByVal pVertex() As TRIVERTEX, ByVal dwNumVertex As Integer, _
        ByVal pMesh() As GRADIENT_RECT, ByVal dwNumMesh As Integer, _
        ByVal dwMode As Integer) As Boolean
   
       Public Const GRADIENT_FILL_RECT_H As Integer = &H0
       Public Const GRADIENT_FILL_RECT_V As Integer = &H1
   End Class
   

4. Declare a form variable named gfButton of type GradientFilledButton.

   Private gfButton As GradientFilledButton
   
   

5. Add the following code, which initializes the gradient filled button custom control, to the constructor of the Form1 class. This code should follow the call to the InitializeComponent method. You can specify the start and ending colors of the gradient fill and either a TopToBottom or LeftToRight fill direction.

   InitializeComponent()
   Me.gfButton = New GradientFilledButton()
   Me.gfButton.Location = New System.Drawing.Point(71, 24)
   Me.gfButton.Name = "gfButton"
   Me.gfButton.Size = New System.Drawing.Size(100, 23)
   Me.gfButton.TabIndex = 1
   Me.gfButton.Text = "Button Test"
   AddHandler Me.gfButton.Click, AddressOf Me.gfButton_Click
   
   ' Select desired start color, end color, and fill direction.
   Me.gfButton.StartColor = System.Drawing.Color.SlateBlue
   Me.gfButton.EndColor = System.Drawing.Color.LightCyan
   gfButton.FillDirection = GradientFill.FillDirection.LeftToRight
   
   Me.Controls.Add(gfButton)
   

6. Add the event handling code for the button's Click event to form.

   Private Sub gfButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) 
       Dim control As Control = sender
       System.Diagnostics.Debug.Assert( Not (control Is Nothing))
       MessageBox.Show("Clicked", "Click event handler")
   End Sub
   
   

7. Override the OnPaint method to paint the background of the form with a gradient fill pattern. This code uses the GradientFill class but not the GradientFilledButton class.

   ' Paints the background of the form with a GradientFill pattern.
   Protected Overrides Sub OnPaintBackground(ByVal e As PaintEventArgs) 
       ' On Windows Mobile Pocket PC 2003, the call to GradientFill
       ' fails with GetLastError() returning 87 (ERROR_INVALID_PARAMETER)
       ' when e.Graphics is used.
       ' Instead, fill into a bitmap and then draw that onto e.Graphics.
       Dim bm As New Bitmap(Width, Height)
       Dim gr As Graphics = System.Drawing.Graphics.FromImage(bm)
   
       GradientFill.Fill(gr, Me.ClientRectangle, Color.LightCyan, Color.SlateBlue, GradientFill.FillDirection.TopToBottom)
       e.Graphics.DrawImage(bm, 0, 0)
       gr.Dispose()
       bm.Dispose()
   
   End Sub 
   

8. Build and deploy the application.

.NET Compact Framework How-to Topics

Graphics and Drawing in the .NET Compact Framework