Toolbox or Accordion Control

[dday9]

I recently needed something that looked and acted like the VS Toolbox. So I looked around on the web and saw a few nice looking examples, but they where all really difficult to get use to. So I decided to make my own interpretation of it.

I found that this control is also called an accordion control. So for the purpose of Google searches... vb.net accordion control.

Features:

1. The Toolbox stores Categories and the Categories store Items

Drawbacks:

1. Still in the early stages, so it's a little finicky

Plans:

1. Refine it a bit more

Notes:
I really like how simple this little control is, but I really want to refine it to where it's fool-proof. I also set the items to flat by default, this is just out of personal preference; I like how it looks when set to flat. It's super simple to generate the click events for the sub-items because they're just a custom control that inherits a button. So you'd add the click event just like any plain ol' button.

Image:


Code:

Toolbox.Vb

Option Strict On
Option Explicit On

Imports System.ComponentModel
Public Class Toolbox
    Inherits Windows.Forms.Panel

    'Don't show the controls property
    <Browsable(False)> Public Shadows ReadOnly Property Controls As ControlCollection
        Get
            Return MyBase.Controls
        End Get
    End Property

    Private itms() As Category = {}
    Public Property Categories() As Category()
        Get
            Return itms
        End Get
        Set(ByVal value As Category())
            itms = value
            If itms.Count > 0 Then Call SetControls()
        End Set
    End Property

    Friend Sub SetControls()
        Controls.Clear()
        For i As Integer = itms.Count - 1 To 0 Step -1
            Dim itm As Category = itms(i)
            itm.Dock = DockStyle.Top
            Controls.Add(itm)

            Dim order As Integer = Controls.GetChildIndex(itm)
            If itm.Collapsed = False AndAlso itm.SubItems.Count > 0 Then
                For n As Integer = itm.SubItems.Count - 1 To 0 Step -1
                    Dim sub_itm As Item = itm.SubItems(n)
                    sub_itm.Dock = DockStyle.Top
                    Controls.Add(sub_itm)
                    order += 1
                Next
            End If

            Controls.SetChildIndex(itm, order)
        Next
    End Sub

    Friend Sub CollapseAll()
        For Each itm As Category In itms
            itm.Collapsed = True

            Call SetControls()
        Next
    End Sub

    Friend Sub ExpandAll()
        For Each itm As Category In itms
            itm.Collapsed = False

            Call SetControls()
        Next
    End Sub

    Public Sub New()
        Me.DoubleBuffered = True
    End Sub

End Class

Item.Vb:

Option Strict On
Option Explicit On

Imports System.ComponentModel
<ToolboxItem(False)> Public Class Item
    Inherits Button

    'Don't show the controls property
    <Browsable(False)> Public Shadows Property Dock As DockStyle
        Get
            Return MyBase.Dock
        End Get
        Set(ByVal value As DockStyle)
            MyBase.Dock = value
        End Set
    End Property

    Public Sub New()
        Me.FlatStyle = Windows.Forms.FlatStyle.Flat
        Me.TextAlign = ContentAlignment.MiddleLeft
    End Sub
End Class

Category.Vb:

Option Strict On
Option Explicit On

<ToolboxItem(False)> Public Class Category
    Inherits Item

    'Don't show the controls property
    <Browsable(False)> Public Shadows Property Dock As DockStyle
        Get
            Return MyBase.Dock
        End Get
        Set(ByVal value As DockStyle)
            MyBase.Dock = value
        End Set
    End Property

    Private m_collapsed As Boolean = False
    Public Property Collapsed() As Boolean
        Get
            Return m_collapsed
        End Get
        Set(ByVal value As Boolean)
            m_collapsed = value
        End Set
    End Property

    Private itms() As Item = {}
    Public Property SubItems() As Item()
        Get
            Return itms
        End Get
        Set(ByVal value As Item())
            itms = value
        End Set
    End Property

    Protected Overrides Sub OnPaint(ByVal pevent As System.Windows.Forms.PaintEventArgs)
        MyBase.OnPaint(pevent)

        'Dim sign As String
        Dim sign As New Bitmap(10, 10)
        Dim g As Graphics = Graphics.FromImage(sign)
        Dim pts() As Point
        If m_collapsed Then
            'sign = "+"
            pts = { _
                New Point(0, 0), _
                New Point(0, sign.Height - 1), _
                New Point(sign.Width - 1, CInt(sign.Height / 2))}

            g.DrawPolygon(Pens.Black, pts)
        Else
            'sign = "-"
            pts = { _
                New Point(0, sign.Height - 1), _
                New Point(sign.Width - 1, 0), _
                New Point(sign.Width - 1, sign.Height - 1)}
            g.FillPolygon(Brushes.Black, pts)
        End If

        'pevent.Graphics.DrawString(sign, MyBase.Font, New SolidBrush(MyBase.ForeColor), New Point(Me.Width - TextRenderer.MeasureText(sign, MyBase.Font).Width * 2, 1))
        pevent.Graphics.DrawImage(sign, New Point(Me.Width - 16, CInt(Me.Height / 2 - 5)))
    End Sub

    Public Sub New()
        Me.BackColor = Color.LightSteelBlue
    End Sub

    Private Sub Category_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Click
        m_collapsed = Not (m_collapsed)
        Dim tb As Toolbox = DirectCast(Me.Parent, Toolbox)
        tb.SetControls()
    End Sub

End Class

Here is an example of using it via code:

Option Strict On
Option Explicit On
Public Class Form1

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Dim tb As New Toolbox

        Dim cats As New List(Of Category)
        For i As Integer = 1 To 3
            Dim cat As Category = NewCategory("Category" & i.ToString)
            Dim itms As New List(Of Item)
            For n As Integer = 1 To i * 4
                Dim sub_itm As Item = NewItem("SubItem" & n.ToString)
                With sub_itm
                    .BackColor = Color.LightGray
                    .Padding = New Padding(10, 0, 0, 0)
                    .TextAlign = ContentAlignment.MiddleLeft
                End With
                itms.Add(sub_itm)
            Next

            cat.SubItems = itms.ToArray
            cats.Add(cat)
        Next

        tb.Categories = cats.ToArray
        tb.Dock = DockStyle.Left

        Me.Controls.Add(tb)
    End Sub

    Private Function NewItem(ByVal txt As String) As Item
        Dim itm As New Item
        itm.Text = txt
        Return itm
    End Function

    Private Function NewCategory(ByVal txt As String) As Category
        Dim itm As New Category
        itm.Text = txt
        Return itm
    End Function

End Class

I really hope that y'all enjoy it and as always, I'm up for suggestions.

[Niya]

Can it be set up at design time ?

[vbfaint]

Public Class Form1

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Dim tb As New Toolbox

Dim cats As New List(Of Category)
For i As Integer = 1 To 3
Dim cat As Category = NewCategory("Category" & i.ToString)
Dim itms As New List(Of Item)
For n As Integer = 1 To i * 4
Dim sub_itm As Item = NewItem("SubItem" & n.ToString)
sub_itm.BackColor = Color.LightGray
sub_itm.TextAlign = TextAlign.MiddleCenter
itms.Add(sub_itm)
Next

cat.SubItems = itms.ToArray
cats.Add(cat)
Next

tb.Categories = cats.ToArray
tb.Dock = DockStyle.Left

Me.Controls.Add(tb)
End Sub

Private Function NewItem(ByVal txt As String) As Item
Dim itm As New Item
itm.Text = txt
Return itm
End Function

Private Function NewCategory(ByVal txt As String) As Category
Dim itm As New Category
itm.Text = txt
Return itm
End Function

End Class

Bold text is occurring error.... It said "TextAlign" is not declared.... How to fix it???

[dday9]

Can it be set up at design time ?

It should be. I did have some problems with the original code where it couldn't be set up at design time but I fixed it by setting itms() in Toolbox equal to { }.

Bold text is occurring error.... It said "TextAlign" is not declared.... How to fix it???

I'll take a look into it and see what could be causing it to bug out. I was just on a week long staycation and haven't really done much coding. But once I get setup here I'll test it out and post back a reply.

[dday9]

Bold text is occurring error.... It said "TextAlign" is not declared.... How to fix it???

I figured out why setting the TextAlign wasn't working for you. It's because whenever I wrote the code for an example of using it via code, I had free typed that so I made the typo of setting the TextAlign equal to TextAlign.MiddleCenter, it should be set to ContentAlignment.MiddleCenter. Then again that's whatcha get for just blindly coping and pasting code

[dday9]

Update
I added a little image for whenever the node is expanded or collapsed rather than using the + and - symbols. I did leave the + and - symbols commented out just in case you'd rather use that instead of the images. I also added an ExpandAll and CollapseAll method to the Toolbox control. This will either expand or collapse all categories.