BubbleBar Control

BubbleBar Control Animation

How many times have you heard this: "Toolbar buttons are too small and it is not so easy to click the right button when in hurry."? If you are like me, then you've clicked the Print button in Outlook instead of the Move to Folder button more times than you can count. I even moved the Print button to different location, but now I click Delete instead. Whatever...

BubbleBar control solves this problem and only DotNetBar 5.0 has it. Once you hover mouse over the toolbar correct button will bubble up, grow to predefined size, so you can easily see the button you are about to click and have larger area to click. Difference this makes is amazing, and best of all, you are not using more precious screen real-estate.

We've spent countless hours obsessing about every single pixel on this control. Notice how bubble effect affects the nearby buttons. See how buttons that bubbled are drawn outside of the control and over the background controls that you might have. That was not an easy feat... Notice the alpha-blending applied to the disabled button, as well as alpha blending that is properly done on the buttons that are overlaying the controls underneath.

When you hover over the button for the first time you'll notice smooth bubbling animation applied to the buttons until they reach desired size. If you leave the control permanently or click a button notice the animation that returns the buttons to their normal size. You have complete control over the duration of the animation effects or you can turn them off completely. It is your choice. You also control the size of the buttons as well as the maximum size they can grow to.

Alpha-blended background for the buttons and transparency for the complete control is also built in. There are just 40 properties that allow you to customize every aspect of the background.

Each set of the toolbar buttons is hosted on a tab. If your application calls for a single set of buttons then you can simply turn off the tabs using the TabsVisible property. Tabs will help you logically group toolbar buttons based on function and you have complete control over their appearance.

Lot of the time was spent getting the control to feel just right. For example, when you click the button, image will change the color to indicate that it has been clicked and button will animate back to it's normal size. In our testing we found that since mouse is over the button when you click it, as soon as you start moving the cursor button will bubble up (grow) which is quite annoying since you want to move cursor away. We had to improve that. You'll notice that once you've clicked the button and it was animated back to it's original size it will not bubble when you move mouse over it. However, you will still be able to click it if the command you are executing calls for that. This is just one example of the attention to detail taken during development of this control.

And testing was not forgotten either, there are over 30 NUnit tests that just cover layout capabilities of the BubbleBar layout engine.