5,557,174 members and growing! (15,982 online)
Email Password   helpLost your password?
Desktop Development » Miscellaneous » General     Intermediate License: The Code Project Open License (CPOL)

ColorBlender - Dynamic Gradient Color Blend Creation Control (VB.NET)

By SSDiver2112

How to create a ColorBlend and two color blending UserControls to make it easier.
VB (VB 8.0, VB), .NET (.NET, .NET 2.0), GDI+, Design

Posted: 1 Aug 2008
Updated: 1 Aug 2008
Views: 3,962
Bookmarked: 12 times
Announcements
Want a new Job?



Search    
Advanced Search
Sitemap
3 votes for this Article.
Popularity: 2.19 Rating: 4.60 out of 5
0 votes, 0.0%
1
0 votes, 0.0%
2
0 votes, 0.0%
3
1 vote, 33.3%
4
2 votes, 66.7%
5

Introduction

This is a two for one article -- learn to build a brush of blended colors, and get a couple of cool color blending user controls in the process. There can be a lot of trial and error, tweaking the code and running it many times, to create a color blend. I thought it would be nice to have a control like those seen in drawing programs that would create the blend visually to get a proper placement of the colors. I will also try to explain the basics of making a color blended brush to paint with.

Build-A-Blend

Building a two color color blend is fairly simple. Using a LinearGradientBrush from the System.Drawing.Drawing2D namespace, you can paint an area with a blend from one color to another color.

Dim rect As New Rectangle(0, 0, 100, 100)
Using br As New LinearGradientBrush( _
        rect, _
        Color.White, _
        Color.Black, _
        LinearGradientMode.Horizontal)

    'Fill the rect with the blend
    g.FillRectangle(br, rect)

End Using

If you want more than two colors, a ColorBlend is needed. First, create an array of colors for each position in the blend. Then, create an array of values representing the position of each color in the color array. The first color has a position of 0, and the last color has a position of 1. All the other colors in between have a decimal position value between 0 and 1. After creating the arrays, assign them to the ColorBlend's Colors and Positions properties. Then, create the same LinearGradientBrush as before, setting the two colors to any color just as a placeholder. Set the Brush's InterpolationColors property to the ColorBlend just created to set the new multicolor blend. The LinearGradientBrush can be replaced with the PathGradientBrush for more complex shapes.

Dim blend As ColorBlend = New ColorBlend()

'Add the Array of Color
Dim bColors As Color() = New Color() { _
    Color.Red, _
    Color.Yellow, _
    Color.Lime, _
    Color.Cyan, _
    Color.Blue, _
    Color.Violet}
blend.Colors = bColors

'Add the Array Single (0-1) colorpoints to place each Color
Dim bPts As Single() = New Single() { _
    0, _
    0.327, _
    0.439, _
    0.61, _
    0.777, _
    1}
blend.Positions = bPts

Dim rect As New Rectangle(0, 0, 100, 100)
Using br As New LinearGradientBrush( _
        rect, _
        Color.White, _
        Color.Black, _
        LinearGradientMode.Horizontal)

    'Blend the colors into the Brush
    br.InterpolationColors = blend

    'Fill the rect with the blend
    g.FillRectangle(br, rect)

End Using

ColorBlender Control

The ColorBlender User Control consists of a horizontal bar of color with a starting and ending color gradient. Clicking along the bar adds a new color pointer. The pointer can be dragged back and forth to any position along the bar with the left button, and removed with the right button. Click the dropdown to access preset color swatches, an owner-drawn combobox with all the known colors, and the ARGB color values that can be changed to alter the color and transparency of the selected pointer. There is a sample preview on the control to display the effects of changing the other options available to each brush type. The LinearGradientBrush paints the ColorBlend on a line from point A to point B. The PathGradientBrush paints the blend around a path. The control’s properties are accessible to recreate the blend as needed outside the control. Note: The separate ColorBlenderLite control is the same except it does not have the sample preview and brush properties built in.

Events

  • Public Event BlendChanged()
  • This event will fire in the BuildABlend subroutine.

Control Properties

Here is a list of the primary properties:

  • BlendColors
  • Array of colors used in ColorBlend.

  • BlendPositions
  • Array of color positions used in ColorBlend.

  • BlendGradientType
  • Type of brush used to paint the ColorBlend - Linear or Path.

  • BlendGradientMode
  • Type of linear gradient color blend.

  • BlendPathShape
  • Shape of path for the ColorBlend - Rectangle, Ellipse, Triangle, Polygon.

  • BlendPathCenterPoint
  • Position of the center of the path ColorBlend.

  • BarHeight
  • Height of color blender bar.

Methods

Methods to use outside the control. Currently, just one to convert the center point to another area's dimensions.

Mouse Events

Track if the cursor is over a pointer to select or add a pointer, or to adjust the position of the center point of a path.

Drawing

Contains the routines to draw the pointers, build the brushes, and build the ColorBlend.

Painting

Paint the control to a Bitmap to create a buffer, eliminating flicker.

Protected Overrides Sub _
  OnPaintBackground(ByVal e As System.Windows.Forms.PaintEventArgs)
    'Do Nothing
End Sub

Protected Overrides Sub _
  OnPaint(ByVal e As System.Windows.Forms.PaintEventArgs)

    'Go through each Pointer in the collection to get
    'the current Color and Position arrays
    BuildBlend()

    'Create a canvas to aint on the same size as the control
    Dim bitmapBuffer As Bitmap = _
        New Bitmap(Me.ClientSize.Width, Me.ClientSize.Height)
    Dim g As Graphics = Graphics.FromImage(bitmapBuffer)
    g.Clear(Me.BackColor)
    g.SmoothingMode = SmoothingMode.AntiAlias

    ' Paint the ColorBlender Bar with the Linear Brush
    Dim barRect As Rectangle = _
        New Rectangle(10, 0, Me.ClientSize.Width - 20, BarHeight)
    Dim br As Brush = LinearBrush(barRect, LinearGradientMode.Horizontal)
    g.FillRectangle(br, barRect)

    ' Paint the ColorBlender Sample with the chosen Brush
    Dim sampleRect As Rectangle = _
        New Rectangle(Me.Width - 85, BarHeight + 20, 75, 75)
    If BlendGradientType = eBlendGradientType.Linear Then
        br = LinearBrush(sampleRect, GetBrushMode)
    Else
        br = PathBrush(sampleRect)
        g.DrawString(String.Format("X: {0}  Y: {1}", _
            BlendPathCenterPoint.X - (Width - 85), _
            BlendPathCenterPoint.Y - (BarHeight + 20)), _
            New Font("Arial", 8, FontStyle.Regular), _
            Brushes.Black, Width - 85, BarHeight + 100)
    End If
    g.FillRectangle(br, sampleRect)

    'Draw all the pointers in their Color,
    'at their Position along the Bar
    Using pn As New Pen(Color.Gray, 1)
        pn.DashStyle = DashStyle.Dash
        g.DrawLine(pn, 10, BarHeight + 7, _
            Me.ClientSize.Width - 15, BarHeight + 7)

        pn.Color = Color.Black
        pn.DashStyle = DashStyle.Solid

        DrawPointer(g, StartPointer.pColor, 0, StartPointer.pIsCurr)
        DrawPointer(g, EndPointer.pColor, 1, EndPointer.pIsCurr)

        If MiddlePointers IsNot Nothing Then
            For I As Integer = 1 To MiddlePointers.Count
                DrawPointer(g, MiddlePointers(I).pColor, _
                MiddlePointers(I).pPos, I = CurrPointer)
            Next
        End If

    End Using

    'Draw the entire image to the control
    'in one shot to eliminate flicker
    e.Graphics.DrawImage(bitmapBuffer.Clone, 0, 0)

    bitmapBuffer.Dispose()
    br.Dispose()
    g.Dispose()

End Sub

SortCollection

Use the CallByName function to sort the collection of pointers by the pPos property value.

Controls

Contains the events for the controls on the ColorBlender control.

ColorBox

Contains the DrawItem event for the owner-drawn combobox to list the known colors.

Pointer

The Pointer class contains three properties.

  • pPos - Position of the color.
  • pColor - Color at the position value.
  • pIsCurr - The pointer currently selected.

History

  • Version 1.0 - July 2008.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

SSDiver2112


I first got hooked on programing with the TI994A. After it finally lost all support I reluctantly moved to the Apple IIe. Thank You BeagleBros for getting me through. I wrote programs for my Scuba buisness during this time. Currently I am a Database manager and software developer. I started with VBA and VB6 and now having fun with VB.NET
Occupation: Software Developer
Location: United States United States

Other popular Miscellaneous articles:

Article Top
Sign Up to vote for this article
You must Sign In to use this message board.
FAQ FAQ Noise ToleranceSearch Search Messages 
 Layout  Per page   
 Msgs 1 to 1 of 1 (Total in Forum: 1) (Refresh)FirstPrevNext
Subject  Author Date 
GeneralVery NicememberPaul Conrad20:34 2 Aug '08  

General General    News News    Question Question    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

PermaLink | Privacy | Terms of Use
Last Updated: 1 Aug 2008
Editor: Smitha Vijayan
Copyright 2008 by SSDiver2112
Everything else Copyright © CodeProject, 1999-2008
Web10 | Advertise on the Code Project