Click here to Skip to main content
15,742,511 members
Articles / Multimedia / GDI+
Posted 31 Jan 2013

Tagged as


42 bookmarked

TMDock - Dockbar samples alpha blend

Rate me:
Please Sign up or sign in to vote.
4.97/5 (20 votes)
31 Jan 2013CPOL2 min read
Dockbar sample, shows many alpha blend functions.

Image 1


This is my contribution to the topic dockbar. The project starts from the project Xdock and adds some useful features such as the label, the ability to place the bar docked up or down, the transparency and more. Much remains to be done, but I think this is a good step forward.


Please refer to XDock project.

Added Features

The new features added:

  • The bar is centered on the screen and resized to fit its contents.
  • The bar can be positioned at the top or bottom of the screen.
  • Zoom in effect as you enter an icon.
  • Zoom out effect when you leave the icon.
  • The current icon is highlighted.
  • For each icon there is a customizable tooltip.
  • You can make the bar and icons totally transparent.
  • You can customize certain aspects of the bar.
  • The tooltip is fully customizable:
    • Background on / off  
    • Border yes / no
    • With rounded edges yes / no 
    • Effect 3d text 
    • Shadow effect of text 
    • Text font 
    • Font size of text 
    • Effect of the text, bold, italic etc..
    • Text color 
    • Background color, solid or gradient and level of transparency

Here the form for the labels settings:

Image 2

Here some sample with a bar totally transparent:

Image 3

Image 4

Points of Interest

The problem working with transparent object is that you lost the mouse move events.

I solved the problem painting a fake background for both the bar and the icons. The following code do the trick for the bar. 

' for fake background
Dim bmp As Bitmap
Dim iaFake As New Imaging.ImageAttributes
Dim cmFake As New Imaging.ColorMatrix
cmFake.Matrix33 = 0.5 / 100.0F
' build fake backgrround
bmp = New Bitmap(CInt(pWidth), CInt(pHeight))
grFake = Graphics.FromImage(bmp)
grFake.FillRectangle(New SolidBrush(Color.Silver), New Rectangle(0, 0, bmp.Width, bmp.Height))
' paint fake background
gr.DrawImage(bmp, _
                   New Rectangle(posX, _
                                          posY, _
                                          bmp.Width, _
                                          bmp.Height), _
                   0, 0, bmp.Width, bmp.Height, _
                   GraphicsUnit.Pixel, _

Another interesting point that I have developed is the display of text related to the icon. This is ensured by the method PaintLabel in DockManager class.

Private Sub PaintLabel(ByRef DstGraphics As Graphics, _
                       ByVal DockSettings As Settings, _
                       ByVal pDockItem As IDockItem)
    Dim ScreenWidth As Integer = Screen.PrimaryScreen.WorkingArea.Width
    Dim borderWidth As Integer = DockSettings.Labels.BorderLabelFrameWidth
    Dim topLeft As Integer

    ' Create string to draw.
    Dim drawString As [String] = pDockItem.Name
    Dim szF As SizeF
        szF = DstGraphics.MeasureString(drawString, New Font(DockSettings.Labels.FontName, _
                                                             DockSettings.Labels.FontSize, _
                                                             DockSettings.Labels.FontStyle, _
    Catch ex As Exception
    End Try
    Dim sz As New Size(szF.Width, szF.Height)
    'compute origin of the label
    Dim labelX As Integer = borderWidth + pDockItem.X + (pDockItem.Width - sz.Width) / 2
    ' check if is outside on left
    If labelX < borderWidth * 2 Then
        labelX = borderWidth * 2
    End If

    Select Case DockSettings.Position.ScreenPosition
        Case cPosition.ScreenPos.Top
            ' follow the item height
            'topLeft = pDockItem.Y + pDockItem.Height + DockSettings.Labels.TopMargin - frm.Top
            ' fixed
            topLeft = pDockItem.Y + IIf(DockSettings.Behavior.AnimatedIcons, DockSettings.Icons.ZoomPx, _
              pDockItem.Height) + DockSettings.Labels.TopMargin - frm.Top
        Case cPosition.ScreenPos.Bottom
            ' follow the item height
            'topLeft = pDockItem.Y - DockSettings.Labels.TopMargin - sz.Height - frm.Top
            ' fixed
            topLeft = pDockItem.Y + IIf(DockSettings.Behavior.AnimatedIcons, pDockItem.Height, 0) - _
              IIf(DockSettings.Behavior.AnimatedIcons, DockSettings.Icons.ZoomPx, 0) - _
                    DockSettings.Labels.TopMargin - sz.Height - frm.Top
        Case cPosition.ScreenPos.Left
        Case cPosition.ScreenPos.Right
        Case Else
            Throw New Exception("PaintLabel: Screen position unknown")
    End Select

    ' setup the destination area
    Dim rectOrig As New Rectangle(labelX, _
                                  sz.Width + borderWidth, _
                                  sz.Height + borderWidth)

    ' draw frame with border
    If DockSettings.Labels.FrameRoundedCorners Then
        DrawRoundedFrame(DstGraphics, _
                         DockSettings, _
                         rectOrig, _
                         DockSettings.Labels.FrameRadius, _
        DrawRectangleFrame(DstGraphics, _
                           DockSettings, _
                           rectOrig, _
    End If

    ' paint the label
    DrawLabel(DstGraphics, _
              rectOrig, _
              DockSettings, _
End Sub

The PaintLabel computes first the label size and then its relative position. Then there are three interesting subs:

  • DrawRectangleFrame
  • DrawRoundedFrame 
  • DrawLabel  

The bubble effect is in the UpdateAllItems method in the class DockManager. The bubble effect calculates the size of the icons depending on the distance of the center of the icon with the mouse cursor, the smaller the distance the greater the icon. 

distance = (pMax / 2 * m_Settings.Icons.ZoomWidth)
fConv = (pMax - m_Settings.Icons.SizePx) / distance
gap = X - pDockItem.CentreX
pZoom = m_Settings.Icons.SizePx + fConv * (distance - Math.Abs(gap))

Where pMax is the maximum size allowed, Zoomwidth is the bubble effect distance we want and SizePx is the icon size. 

Next steps

  • Complete drag&drop of new application.
  • Enable delete icon dragging out an icon from the bar.
  • Manage special application, like recycle bin.
  • Add more effects on mouse move over icons. 
  • something else?


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

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

Comments and Discussions

BugWhen mouse over!!! Pin
Member 87437346-Aug-16 21:16
Member 87437346-Aug-16 21:16 
GeneralRe: When mouse over!!! Pin
Member 87437348-Aug-16 17:03
Member 87437348-Aug-16 17:03 
SuggestionPort to C# Pin
Member 87437346-Aug-16 21:01
Member 87437346-Aug-16 21:01 
GeneralRe: Port to C# Pin
Member 139774064-Mar-20 13:48
Member 139774064-Mar-20 13:48 
QuestionHelp Pin
frank1nxd13-Apr-15 13:59
frank1nxd13-Apr-15 13:59 
Question5 stars. Pin
Anu Prakash Iyyadurai16-Jun-14 4:34
professionalAnu Prakash Iyyadurai16-Jun-14 4:34 
GeneralMy vote of 5 Pin
Flash2009-MX21-Mar-13 6:01
Flash2009-MX21-Mar-13 6:01 
GeneralMy vote of 5 Pin
srfox4-Mar-13 8:07
professionalsrfox4-Mar-13 8:07 
GeneralMy vote of 5 Pin
Ștefan-Mihai MOGA16-Feb-13 19:26
professionalȘtefan-Mihai MOGA16-Feb-13 19:26 
GeneralRe: My vote of 5 Pin
tix17-Feb-13 21:29
tix17-Feb-13 21:29 
GeneralMy vote of 5 Pin
Anshul Mehra12-Feb-13 16:55
professionalAnshul Mehra12-Feb-13 16:55 
My vote of 5
GeneralMy vote of 5 Pin
Alhoot200411-Feb-13 13:50
professionalAlhoot200411-Feb-13 13:50 
GeneralMy vote of 5 Pin
Polinia31-Jan-13 8:02
Polinia31-Jan-13 8:02 

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.