Click here to Skip to main content
Click here to Skip to main content

Toolbar control

, 9 Aug 2003
Rate this:
Please Sign up or sign in to vote.
Writing a custom control for the first time.

Introduction

Trying to make a custom control is not that easy the first time. Finally I think I got something useful after several (hundreds of) hours at the desk. I hope you enjoy it as much as I do. I will be referring to three different states in the code and in the rest of this article:

  • Normal state : occurs when mouse is not over any toolbar item in the control.
  • Over state : occurs when mouse is over a toolbar item but left mouse button is not down.
  • Down state : occurs when left mouse button is down and mouse is over a toolbar item.

Design

Planning on how to draw this toolbar was actually the hardest part. I never paid attention to advanced pixelmath in highschool, so I really had to stay tuned all the time. Here is what I came up with:

Implementation

Everything in the code should be very self describing. Still I want to describe some steps I used extra time on. With the design in mind, I wanted to make as few function calls as possible, and - if possible - the same amount of function calls every time the control had to be repainted. I quickly found out that the lines between the toolbar item, could be done with one call in normal state, max two calls in the mouse over/down state. This is due to the nature of the line... it is simply dashed. As for the images and its bounding boxes, I could not find any fast algorithm but the standard "for each".

When the mouse enters a toolbar item, the item goes big. It is done by scaling the small picture. Scaling a picture is very easy in c#, using the built-in function like this:

// Draw scaled image<BR>g.DrawImage(_iList.Images[i], destRect, sourceRect, 
    System.Drawing.GraphicsUnit.Pixel);

How to use

To use the control, you simply add it to the control pane, and d&d it to the form. It automatically docks to the bottom, but you are free to change that. If you do not like the control pane, just make the initialization yourself!

You also need some items in the toolbar. You'll get that by adding an imageList to you project, add some pictures to it, and change the ImageList property of the Toolbar control to point to your newly created imageList. Remember, if the background color has to appear on the buttons, you need images with transparency.

Feel free to change some of the properties at all times.

Control properties

  • BackgroundColorNormal : The background color of a button when it is in "normal state"
  • BackgroundColorOver : The background color of a button when it is in "over state"
  • BackgroundColorDown: The background color of a button when it is in "down state"
  • LineColorNormal : The color of the line the horizontal line, and the boxes around the images when in "normal state".
  • LineColorOver : The background color of a button when it is in "down state"
  • LineColorDown : The background color of a button when it is in "down state"
  • ImageList : A list containing each toolbar item(image) in the toolbar.

Events

The control can raise some events:

  • ItemChanged : Raised when mouse enters/leaves a item.
  • Clicked : Raised when mouse button is released over a item.

Bugs and future expansion

  • When altering the imageList in design mode, those changes do not take place in the control. I have not found any smart solution to this. The only - not so smart - solution I can think of is to make my own imageList class with capabilities of generating a "please update designer" event.
  • To show the big image (when mouse enters the item), the small one is scaled. This causes a blurry effect. I could have two imageLists, one with small images, the other with big ones. That way I erase the blurring effect that comes after scaling an image. Maybe C# are even able to do a better scale (than the one I am doing now), which I am not aware of.
  • The color properties of the control, can actually be divided into two categories - line colors and background colors. It would be nice if this could be reflected in the property grid, so that one property is called LineColors, another BackGroundColors. When expanding one of these (by use of the + tree expansion), the underlying colors named Normal, Over, Down are presented.
  • The toolbar can only be shown horizontally. It could be nice to show it vertically, without having to change to much code. I tried to rotateTransform before making any graphic calls, but somehow the images are not aligned correctly.

History

  • 7th of August 2003 : Version 0.1 

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Lasse Johansen
Web Developer
Mexico Mexico
I am living in mexico right now, making small apps for 3d show off. I am planning soon to get out of here, and move on to somewhere ....
 
Well, studied electrical engeneering, and now I program. I love to discover the possebilities of the programming world, since it never seems to end of what you can do.

Comments and Discussions

 
Questioni have a question ..? Pinmemberdede1114-Apr-06 6:38 
Generali have a qiestion ... Pinmemberdede1114-Apr-06 6:34 
GeneralRe: i have a qiestion ... PinmemberLasse Johansen17-Apr-06 7:00 
GeneralAlignment Problem PinmemberChandresh21-Jun-04 10:18 
GeneralRe: Alignment Problem PinmemberLasse Johansen21-Jun-04 10:56 
GeneralRe: Alignment Problem PinmemberLasse Johansen21-Jun-04 12:02 
GeneralSource Code for Demo PinmemberJeffrey Scott Flesher26-Dec-03 12:54 
GeneralRe: Source Code for Demo PinmemberLasse Johansen5-Jan-04 7:11 
GeneralRe: Source Code for Demo PinmemberJeffrey Scott Flesher5-Jan-04 8:25 
Generalcool...! Pinmemberzanoon13-Aug-03 6:21 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.1411019.1 | Last Updated 10 Aug 2003
Article Copyright 2003 by Lasse Johansen
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid