Customizing C1Toolbar Items in WinForms

More often we receive queries in WinForms regarding the customization of C1Toolbar control. Since C1Toolbar does not provide extensive properties or methods for customizations, queries are mostly related to changing the appearance of the toolbar items. In this blog we look forward to a small implementation which uses DrawLink event for C1Toolbar. This event fires for each Toolbar item, whose 'OwnerDraw' property is set to true. So based on our requirement, you can set the 'OwnerDraw' property to true for either all or specific toolbar items which need to be customized. To show the implementation, we will implement the following customizations.

1. Draw Border around C1ToolbarItem
2. Use Red color as ForegroundColor
3. Reduce the gap between the Image and the Text

Setting OwnerDraw Property

Set the 'OwnerDraw' property of C1CommandLink objects to True for all the Toolbar items which you wish to customize. You can do this both in designer and through code.

Customizing C1ToolBarItem

We can change the appearance of the toolbar item such that the default MouseHover implementation effect does not change. The DrawLink event is fired even when Mouse is hovered over the toolbar item. By keeping track of the cursor position, we can apply the customization on the toolbar item.

Dim currentPosition As Point  

Private Sub C1ToolBar1_DrawLink(sender As Object, e As C1.Win.C1Command.DrawLinkEventArgs) Handles C1ToolBar1.DrawLink  

    If Not e.Link.Bounds.Contains(currentPosition) Then  

       Dim imag As Image = e.Link.Command.Image  
       Dim txt As String = e.Link.Text  

       e.Graphics.DrawRectangle(Pens.Blue, New Rectangle(e.Bounds.X, e.Bounds.Y, e.Bounds.Width - 1, e.Bounds.Height))  

       Dim imgPt As Point = New Point(e.Link.ImageRect.X, e.Link.ImageRect.Y + 3)  

       e.Graphics.DrawImage(imag, imgPt)  

       Dim pt As Point = New Point(e.Bounds.X + e.Link.ImageRect.Width - 2, 6)  

       e.Graphics.DrawString(txt, C1ToolBar1.Font, Brushes.Red, pt)  

       e.Done = True  

    End If  

End Sub  

Private Sub C1ToolBar1_MouseLeave(sender As Object, e As System.EventArgs) Handles C1ToolBar1.MouseLeave  
    currentPosition = Nothing  
End Sub  

Private Sub C1ToolBar1_MouseMove(sender As Object, e As System.Windows.Forms.MouseEventArgs) Handles C1ToolBar1.MouseMove  
    currentPosition = e.Location  
End Sub  

It's a very simple implementation. You can make use of this event to customize the toolbar to a lot extent. For complete implementation, refer to the attached samples. Download C# Sample Download VB Sample