A ToolBar control with special effects

• Download source files - 10.1 Kb
• Download demo project - 9.55 Kb

Introduction

The ToolBarEx control is actually the ToolBar control provided by the .NET framework, but with the possibility of adding effects to the selected button. The idea is to have a special effect on the selected button, just like in Internet Explorer or in Visual Studio for example.

I created 10 different effects to apply to the ToolBarEx, but it is possible to create many more with not much work.

Code

I am not going to show here all the code for the class, since it would take a lot of space. But it is available in the source download. The idea of the code is very simple: ToolBarEx inherits from Toolbar and has all the its functions. I only added a new property, that is effect. I also have handled the MouseHover, MouseMove and MouseLeave events. When the mouse pointer goes over the toolbar, the sub calculates by the mouse position, over which button the mouse is over and then applies the effect on the button, the same thing is done when mouse moves over the toolbar.

Private Sub ToolBarEx_MouseHover(ByVal sender As Object, _
     ByVal e As System.EventArgs) Handles MyBase.MouseHover

'btnindex is the index of the button that the mouse is over
'It is calculated using the mouse position
'didtance from mousepointer to the left of toolbar / button size
Dim btnIndex As Integer = _ 
 Int((Me.MousePosition.X - Me.Parent.Left) / (Me.Buttons(0).Rectangle.Width))
'If button selected is between 0 and last button and is
'differentthan the last button selected
.
.
.
End Sub

When mouse leaves the toolbar, we restore the image that was on the button when it was not selected. To restore this image, the class has an Image (lastImage) and a Button (LastButton) that keeps which button was the last selected and what image should be on it when it is not selected.

Private Sub ToolBarEx_MouseLeave(ByVal sender As Object, _
  ByVal e As System.EventArgs) Handles MyBase.MouseLeave
'When mouse leaves the bar
'display the original image on selected button
    If Not (m_LastImage Is Nothing) Then
        If Effect = Effect.TwoIconsButton And _
          Me.Buttons(m_LastButton).ImageIndex > 0 Then
            Me.Buttons(m_LastButton).ImageIndex -= 1
        Else
            Me.ImageList.Images(Me.Buttons(m_LastButton).ImageIndex) _
                                                              = m_LastImage
        End If
        
        m_LastImage = Nothing
        Me.Refresh()
        m_LastButton = -1
    End If
End Sub

Some of the effects use auxiliary structures such as another ImageList in order to store original images when the images displayed are black and white. This auxiliary ImageList is loaded at the InitLayout event.

The Effects

Most of the effects are created with the createEffect Function in the class. This function actually takes the bitmap and goes pixel by pixel applying the style we want to. Only the twoIconsButton effect has no pixel by pixel effect, since it uses 2 different icons.

As described at the beginning, ToolBarEx has 10 different effects and they are:

• BwToColor – Black and White To Color effect

  This effect causes the toolbar to have all buttons in black and white, except the one which is selected.

  

• ColorToBw – Color to Black and White effect

  This effect is the opposite of last one. It causes the selected button to be black and white.

  

• BlueSelection – Blue Selection effect

  Gives the selected button a blue mask.

  

• Shadow – Shadow effect

  The selected icon looks like its own shadow.

  

• Antique – Antique effect

  Kind of old movie effect.

  

• Mosaic – Mosaic effect

  Causes the selected icon to look a little different.

  

• LightsOff – Lights off effect

  The selected icon looks like it is dark.

  

• RedHot – Red Hot effect

  The selected button become hotter than the others.

  

• GuessWhat – Guess What effect

  Hides the selected icon in a blue shape.

  

• TwoIconsButton – Two Icons Button effect

  This effect allows users to select 2 different icons for the same button. One when button is selected and the other when it is not. For the first image, 0 is the unselected and 1 is the selected, 2 is the unselected for second button and 3 is selected for second button and so on...

  Note: To use this effect you have to make sure you have more icons on the ImageList than buttons on the toolbar.

Using the Control

Using the control is very simple. Just like any other .NET control, you just have to add it to your toolbox, by right-clicking on the toolbar tab. Then place the toolbar where you like it to be and set the properties just like a regular toolbar.

The only difference is that ToolBarEx has the effect property that can be changed visually or on the code.

I hope this control is helpful for use and to learn a little more about the control possibilities in .NET.