TMDock - Dockbar samples alpha blend

• Download source code - 1.9 MB

Introduction

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.

Background

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:

Here some sample with a bar totally transparent:

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
iaFake.SetColorMatrix(cmFake)  
...
' 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, _
                   iaFake)

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
    Try
        szF = DstGraphics.MeasureString(drawString, New Font(DockSettings.Labels.FontName, _
                                                             DockSettings.Labels.FontSize, _
                                                             DockSettings.Labels.FontStyle, _
                                                             GraphicsUnit.Point))
    Catch ex As Exception
        Trace.WriteLine(ex.ToString)
    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, _
                                  topLeft,
                                  sz.Width + borderWidth, _
                                  sz.Height + borderWidth)

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

    ' paint the label
    DrawLabel(DstGraphics, _
              rectOrig, _
              DockSettings, _
              pDockItem)
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?