Click here to Skip to main content
15,867,321 members
Articles / Programming Languages / Visual Basic
Article

Flat ComboBox with MS Office XP/2003 style support

Rate me:
Please Sign up or sign in to vote.
4.79/5 (43 votes)
1 Dec 2005CPOL1 min read 176.8K   1.2K   77   41
An article on creating a flat combobox using VB.NET.

Image 1

Introduction

First of all, on the Internet, a lot of examples of flat combo boxes can be found. I tried to make a very simple one with a lot of functionality. On the screenshot above, you can see the functions that I have integrated: support for big fonts (the arrow will be centered), RTL (right to left) support, support for two dropdown styles (simple is not supported yet), and of course the two styles.

The different states

 
Office XP
Office 2003
normal

Image 2

Image 3

focused

Image 4

Image 5

disabled

Image 6

Image 7

dropeddown

Image 8

Image 9

VB
'Enum with all the possible states
Enum states
    normal
    focused
    dropeddown
    disabled
End Enum
'Variable to save the current state
Dim state As states = states.normal
    
Function UpdateState()
    'save the current state
    Dim temp As states = state
    '
    If Me.Enabled Then
        If Me.DroppedDown Then
            Me.state = states.dropeddown
        Else
            If ClientRectangle.Contains(_
                    PointToClient(Me.MousePosition)) Then
                Me.state = states.focused
            ElseIf Me.Focused Then
                Me.state = states.focused
            Else
                Me.state = states.normal
            End If
        End If
    Else
        Me.state = states.disabled
    End If
    'only redraw if the state has changed
    If state <> temp Then
        Me.Invalidate()
    End If
End Function

Using the code

FlatComboBox is a UserControl based on Windows.Forms.ComboBox:

VB
Imports System.Drawing.Drawing2D

Public Class FlatComboBox
    Inherits System.Windows.Forms.ComboBox

    '...

End Class

Reacting on events (mousemove etc.) is done by overriding WndProc:

VB
Protected Overrides Sub WndProc(ByRef m As _
                       System.Windows.Forms.Message)
        MyBase.WndProc(m)
        Select Case m.Msg

            Case &HF
                'WM_PAINT

                '"simple" is not currently supported
                If Me.DropDownStyle = _
                           ComboBoxStyle.Simple Then Exit Sub

                '==========START DRAWING===========
                g = Me.CreateGraphics
                'clear everything
                If Me.Enabled Then
                    g.Clear(Color.White)
                Else
                    g.Clear(Color.FromName("control"))
                End If
                'call the drawing functions
                DrawButton(g)
                DrawArrow(g)
                DrawBorder(g)
                DrawText(g)
                '===========STOP DRAWING============

            Case 7, 8, &H7, &H8, &H200, &H2A3
                'CMB_DROPDOWN, CMB_CLOSEUP, WM_SETFOCUS, 
                'WM_KILLFOCUS, WM_MOUSEMOVE,  
                'WM_MOUSELEAVE (if you move the mouse fast over
                'the combobox, mouseleave doesn't always react)

                UpdateState()
        End Select
    End Sub

To change the style (XP/2003), I've added a Public property:

VB
'Property to let the user change the style
    Public Property FlatComboStyle() As styles
        Get
            Return style
        End Get
        Set(ByVal Value As styles)
            style = Value
        End Set
    End Property

Points of interest

In the combo box, there are two parts (the control itself and a kind of textbox). If the DropDownStyle is set to DropDownList, I need to draw the text manually because then there is no textbox. Because the event MouseLeave doesn't always react, a timer refreshes the control every 20 ms. Just have a look at the code and you will see how easy it is!

Thanks to

Update

  • Bug fix: Timer will be disabled while disposing! (See reactions below for more information.)
  • First revision: Some big and small bugs are now fixed! (See reactions below for more information.)
  • Second revision: 'Function' replaced by 'Private Sub' and others, and added a VB 2005 (.NET 2.0) version of the demo.

License

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


Written By
Web Developer
Belgium Belgium
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralExcellent Pin
vanco30-Aug-05 21:06
vanco30-Aug-05 21:06 
GeneralRe: Excellent Pin
Wouter Devinck30-Aug-05 22:34
Wouter Devinck30-Aug-05 22:34 
GeneralRe: Excellent Pin
vanco30-Aug-05 22:35
vanco30-Aug-05 22:35 
GeneralGreat job !!!!, just a little problem.. Pin
derfy7424-Aug-05 1:12
derfy7424-Aug-05 1:12 
GeneralRe: Great job !!!!, just a little problem.. Pin
Wouter Devinck24-Aug-05 1:40
Wouter Devinck24-Aug-05 1:40 
GeneralRe: Great job !!!!, just a little problem.. Pin
Wouter Devinck24-Aug-05 7:35
Wouter Devinck24-Aug-05 7:35 
GeneralGreat Pin
vbinfo18-Aug-05 21:20
vbinfo18-Aug-05 21:20 
GeneralRe: Great Pin
Wouter Devinck18-Aug-05 22:17
Wouter Devinck18-Aug-05 22:17 
Yes, I do consider adding some more functionality. For example creating custom themes, changing colours and after reading your reaction: adding images. Maybe all this will be in the next version.
GeneralGreat Article Pin
tENBace18-Aug-05 2:53
tENBace18-Aug-05 2:53 
GeneralRe: Great Article Pin
Wouter Devinck18-Aug-05 22:13
Wouter Devinck18-Aug-05 22:13 
GeneralRe: Great Article Pin
Paul Conrad23-Aug-05 16:06
professionalPaul Conrad23-Aug-05 16:06 
GeneralRe: Great Article Pin
Wouter Devinck3-Sep-05 9:38
Wouter Devinck3-Sep-05 9:38 
GeneralGreat Article Pin
Ben Chege Ngumi18-Sep-05 20:54
Ben Chege Ngumi18-Sep-05 20:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.