-
Nov 30th, 2013, 02:51 AM
#1
Toolbox or Accordion Control
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:
- The Toolbox stores Categories and the Categories store Items
Drawbacks:
- Still in the early stages, so it's a little finicky
Plans:
- 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
Code:
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:
Code:
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:
Code:
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:
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.
Last edited by dday9; Sep 15th, 2014 at 03:55 PM.
Reason: Changed the title
-
Dec 6th, 2013, 08:46 AM
#2
Re: Toolbox Control
Can it be set up at design time ?
-
Dec 7th, 2013, 01:41 PM
#3
Junior Member
Re: Toolbox Control
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???
-
Dec 9th, 2013, 09:41 AM
#4
Re: Toolbox Control
Originally Posted by Niya
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.
-
Dec 9th, 2013, 11:23 AM
#5
Re: Toolbox Control
Originally Posted by vbfaint
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
-
Dec 9th, 2013, 01:57 PM
#6
Re: Toolbox Control
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.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|