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

XtremListBox

Rate me:
Please Sign up or sign in to vote.
3.22/5 (3 votes)
21 Nov 20071 min read 22.4K   122   10   1
ListBox control with colored selected item
Screenshot - XtremListBox.jpg

Introduction

Listbox is a control very often used in all applications, mainly for choosing a particular item from a collection of items. However, in the standard ListBox I missed an option to change the color of a selected item, its font and the border color. This article shows how to create your own user control, which will offer a choice of the options described above.

Background

Our new user control will be created on the baseclass of the standard listbox. I called the class which inherits its properties XtremListBox.

VB
Public Class XtremListBox: Inherits System.Windows. Forms. ListBox

Our new class contains all properties of the standard listbox plus my new properties:

  • Border color of a selected item
  • Font color of a selected item
  • Index of the column in which the text to show is saved.
  • Font of a selected item
  • Length of border color change of a selected item on the x-axis

Our new listbox gets the attribute for re-drawing in two ways:

  1. It waits for the SelectedIndexChanged event from the baseclass.
VB
Protected Sub XtremListBox_SelectedIndexChanged(ByVal sender As System.Object, 
    ByVal e As System.EventArgs)  _
Handles MyBase.SelectedIndexChanged
                  _NewDraw()
End Sub
  1. It overrides the WndProc function and catches messages sent by Windows to our control.
VB
Protected Overrides Sub WndProc(ByRef msg As System.Windows.Forms.Message)
                  MyBase.WndProc(msg)
                        Select Case msg.Msg
                             Case &H115, &HF, &H360, &H203, &H20A
                             _NewDraw()
                        End Select
End Sub

&H115, &HF, &H360, &H203, &H20A – are message number(WIN API)

You can find the whole list example on this web site: click here.

When we raise an event or a message to redraw ListBox, the core of our new control — the _NewDraw method — is called. This method redraws the standard blue border of the selected item with a new border which will look according to the properties set and it will also add the relevant text.

VB
Public Sub _NewDraw()
    Dim _DrawText As String
    Dim p1, p2 As System.Drawing.PointF
    Dim i As Integer : Dim index As Integer = 0
    Dim str() As DataStruct

    p1.X = 0 : p1.Y = 0 'Starting points of rectangle
    p2.X = mSmoothWidth : p2.Y =
        MyClass.ItemHeight 'Finishing points of rectangle
    'This create smooth brush
    brushStandard = New System.Drawing.Drawing2D.LinearGradientBrush(p1,
        p2, mColor, MyClass.BackColor)

    '1. I get positions of selected items to str(i)._select and I get
    'indexs selected items to str(i)._index
    For i = 0 To MyClass.SelectedIndices.Count - 1
        ReDim Preserve str(i)
        str(i)._select = MyClass.GetItemRectangle(
            MyClass.SelectedIndices.Item(i))
        str(i)._index = MyClass.SelectedIndices.Item(i)
    Next

    If Not IsNothing(str) Then
        For i = 0 To UBound(str)
            '2. I draw rectangle to selected items positions
            MyClass.CreateGraphics.FillRectangle(brushStandard, 0,
                str(i)._select.Y, MyClass.Width, MyClass.ItemHeight)
            '3. I draw text to new rectangles
            If MyClass.Items.Item(0).GetType.Name = "String" Then
                _DrawText = MyClass.Items.Item(str(i)._index)
            Else
                If MyClass.Items.Item(0).item(mTextCol).GetType.Name =
                    "String" Then
                    _DrawText = MyClass.Items.Item(str(i)._index).item(
                        mTextCol)
                Else
                    _DrawText = ""
                End If
            End If
            MyClass.CreateGraphics.DrawString(_DrawText, mFFont,
                mFFontColor, 0, str(i)._select.Y)
        Next
    End If
    brushStandard.dispose()
End Sub

Conclusion

I hope that you find this example useful, especially if you are a beginner coder, to orientate in this issue and to find a way to create your own usercontrols.

History

First release 14.11.2007

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Software Developer
Slovakia Slovakia
.NET developer

Comments and Discussions

 
QuestionHow do you input data for the multi-column portion? Pin
Tim8w21-Jan-21 6:01
Tim8w21-Jan-21 6:01 
Great control. I see that it has support for Multi-Columns. I can enter Column1 data into the Items collection. How do I enter Column2, Column3, etc. data?
Tim Alvord

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.